Post

웹 디자인 기능사 D 유형 HTML

Posted
Preview Image
By nicejmp1 5 min read

웹디자인 기능사 D 유형

안녕하세요! 오늘은 웹디자인 기능사 D유형에 대해 공부 하도록 하겠습니다.

오늘 목표는 해당 이미지 처럼 완성 시키는게 목표 이므로 천천히 잘 쫓아오시길 바랍니다.

먼저 HTML 코딩 부터 하도록 하겠습니다.

HTML header

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>웹디자인 기능사 D-2</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div id="wrap">
        <aside id="header">
            <h1 class="logo">
                <a href="">서울 구석구석</a>
            </h1>
            <nav class="nav">
                <ul>
                    <li><a href="#">지금의 서울</a>
                        <ul>
                            <li><a href="#">이벤트</a></li>
                            <li><a href="#">축제&행사</a></li>
                            <li><a href="#">전시</a></li>
                        </ul>
                    </li>
                    <li><a href="#">추천</a>
                        <ul>
                            <li><a href="#">에디터 추천</a></li>
                            <li><a href="#">테마코스</a></li>
                            <li><a href="#">도보해설관광</a></li>
                            <li><a href="#">한류관광</a></li>
                        </ul>
                    </li>
                    <li><a href="#">여행지</a>
                        <ul>
                            <li><a href="#">명소</a></li>
                            <li><a href="#">엔터테이먼트</a></li>
                            <li><a href="#">음식</a></li>
                            <li><a href="#">게스트하우스</a></li>
                        </ul>
                    </li>
                    <li><a href="#">여행정보</a>
                        <ul>
                            <li><a href="#">가이드북&지도</a></li>
                            <li><a href="#">시티투어버스</a></li>
                            <li><a href="#">날씨</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </aside>
        <!-- //header -->

header 부분은 이런식으로 짜면 됩니다.

Html main

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

 <main id="main">
            <section class="cont1">
                <div class="sliders">
                    <div class="slider-wrap">
                        <div class="slider s1">
                            <h2>서울 야경 즐기기 안내</h2>
                            <p>서울 야경 즐기기를 안내해드립니다.</p>
                        </div>
                        <div class="slider s2">
                            <h2>청와대 리모델링 공사 안내</h2>
                            <p>청와대 리모델링 공사 안내입니다.</p>
                        </div>
                        <div class="slider s3">
                            <h2>청계천 특별 전시회 개최 안내</h2>
                            <p>청계천 특별 전시회 개최 안내해드립니다.</p>
                        </div>
                    </div>
                </div>
                <div class="banner">
                    <div>
                        <h3>서울 특별 전시관</h3>
                        <p>행상에 초대합니다.</p>
                        <a href="#">클릭하기</a>
                    </div>
                </div>
            </section>
            <section class="cont2">
                <div class="notice">
                    <h3>공지사항</h3>
                    <ul>
                        <li><a href="#">서울 야경 즐기기 안내</a><span>2024.04.25</span></li>
                        <li><a href="#">남산 타워 불꽃 축제</a><span>2024.04.25</span></li>
                        <li><a href="#">광화문 축제 안내</a><span>2024.04.25</span></li>
                        <li><a href="#">청계천 걷기 축제 안내</a><span>2024.04.25</span></li>
                        <li><a href="#">부처님 오신날 행사 안내</a><span>2024.04.25</span></li>
                    </ul>
                </div>
                <div class="gallery">
                    <h3>서울 구석 갤러리</h3>
                    <ul>
                        <li>
                            <a href="#">
                                <img src="images/gallery01.jpg" alt="남산타워">
                                <span>서울 남산타워</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/gallery02.jpg" alt="서울 풍경">
                                <span>서울 풍경</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/gallery03.jpg" alt="불꽃축제">
                                <span>서울 불꽃축제</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </section>
        </main>
        <!-- //main -->

3분할 방식으로 사용 하였기 때문에 main쪽에 slider와 banner 그리고 notice를 설정하였습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

   <footer id="footer">
            <div class="title">
                <h4>서울 구석구석</h4>
            </div>
            <div class="copy">
                <p>
                    "당신의 하루를 더욱 특별하게 만들어줄 에코 컵.
                    매일의 커피가 주는 작은 기쁨, 지금 그 경험을 더욱 친환경적으로.
                    에코 컵과 함께라면 당신의 선택이 지구를 바꿉니다."
                </p>
            </div>
            <div class="family">
                <select>
                    <option value="1">마포구 구청</option>
                    <option value="2">용산시</option>
                    <option value="3">종로 5가</option>
                </select>
            </div>
        </footer>
        <!-- //footer -->

footer 쪽을 보시게 되면 select-option 즉 패밀리사이트를 만드는데 쓰이는 코드가 보이실겁니다.

select는 option이랑 짝꿍이라고 생각하시면 됩니다.

다음시간엔 CSS를 살펴보도록 하겠습니다.

다음시간에 계속…

image

웹디자인
웹디자인기능사 jquery
This post is licensed under CC BY 4.0 by the author.