실제 예제를 만들어 보기 전 공통적으로 알아둬야 하는 내용에 대한 강좌입니다.

기본적으로 웹디자인기능사의 실기 페이지는 아래 형태로 구성됩니다.

헤더 : 로고와 네비게이션 메뉴가 들어가는 최상단에 위치한 바

이미지슬라이드 : 사진을 크게 넣어서 여러 사진이 일정 시간마다 바뀌게 구성하는 부분

컨텐츠 : 공지사항, 갤러리 등 실제 콘텐츠들을 요구에 맞게 넣는 부분

푸터 : 저작권 표시, 로고, 기타 주의사항 등을 작성하는 최하단에 위치한 바

그때그때 유형이 다르지만 보통 위의 형태를 가로로 배치하느냐 세로로 배치하느냐 정도의 차이를 두고 비슷하게 출제되는 편입니다.

먼저 html의 골격을 구성할때 두가지 방식이 쓰입니다.

1. 전부 div로 구성하고 class로 구분하기

<body>
    <div class="header"></div>
    <div class="imgSlide"></div>
    <div class="contents"></div>
    <div class="footer"></div>
</body>

2. 각 기능에 맞는 태그를 이용해 구분하기

<body>
    <header></header>
    <main>
        <div class="imgSlide"></div>
        <div class="contents"></div>
    </main>
    <footer></footer>
</body>

기본적으로 가독성 및 원활한 디버깅 등을 위해 1번 방법보다는 2번 방법을 추천합니다만,

저는 css를 가능한 클래스명으로 선택하기 위해 1번 형태로 실전 코드를 작성합니다.

이번 기초 강좌는 2번으로 진행하며, 이후 실전 코드는 1번으로 작성할 예정이니

보시면서 본인에게 맞는 방식을 찾아가시길 바랍니다.

이제 웹디자인개발기능사 실기 공개자료에 있는 1번 "JUST 쇼핑몰" 의 구조를 잡아봅시다.

1. 먼저 최상단의 헤더 부분 구조입니다.

<header>
        <div class="logo">
            <a href="#"><img src="logo.png" alt="여기에 로고 이미지가 들어옵니다."></a>
        </div>
        <div class="menu">
            <nav class="menu-main">
                <ul>
                    <li><a href="#">탑</a></li>
                    <li><a href="#">아우터</a></li>
                    <li><a href="#">팬츠</a></li>
                    <li><a href="#">악세서리</a></li>
                </ul>
            </nav>
            <nav class="menu-sub">
                <div class="menu-sub-wrap">
                    <ul>
                        <li><a href="#">블라우스</a></li>
                        <li><a href="#">티</a></li>
                        <li><a href="#">셔츠</a></li>
                        <li><a href="#">니트</a></li>
                    </ul>
                    <ul>
                        <li><a href="#">자켓</a></li>
                        <li><a href="#">코트</a></li>
                        <li><a href="#">가디건</a></li>
                        <li><a href="#">머플러</a></li>
                    </ul>
                    <ul>
                        <li><a href="#">청바지</a></li>
                        <li><a href="#">짧은바지</a></li>
                        <li><a href="#">긴바지</a></li>
                        <li><a href="#">레깅스</a></li>
                    </ul>
                    <ul>
                        <li><a href="#">귀고리</a></li>
                        <li><a href="#">목걸이</a></li>
                        <li><a href="#">반지</a></li>
                        <li><a href="#">팔찌</a></li>
                    </ul>
                </div>
            </nav>
        </div>
    </header>

문제의 요구에 맞게 메인메뉴와 서브메뉴로 구성하고, 기술 준수 사항에 따라 <a href="#"> 으로 임시링크를 적용해 구성했습니다.

여기서 서브메뉴의 경우 일일히 태그들을 작성하면 시간 면에서 많은 손해가 발생하므로 vsc의 내장 기능을 사용하는 것이 좋습니다.

nav.menu-sub>div.menu-sub-wrap>ul*4>li*4>a[href="#"]

vsc에서 아래와 같이 작성하고 엔터를 누르면 기본적인 뼈대가 빠르게 완성됩니다.

간단하게 해석하자면

nav.menu-sub 의 경우 menu-sub 라는 클래스의 nav 태그를 작성, ( div도 같음 )

> 기호는 태그 안에 작성한다 라는 의미,

*숫자 숫자 개수만큼 작성, [href="#"]는 href property에 #을 넣는다는 의미입니다.

그래서 결과적으로 서브메뉴에 ul 4개 작성, 각 ul 안에 li 4개 작성,

각 li에 #으로 임시링크를 넣은 a 작성 이라는 결과를 낼 수 있습니다.

이렇게 뼈대를 만들고 이제 시험의 요구에 맞게 각 값들을 적어주시면 빠르게 만들고

넘어갈 수 있으니 익혀두시는게 좋습니다.

2.다음으로 이미지슬라이드 영역입니다.

<main>
        <div class="slide">
            <div class="slide-wrap">
                <a href="#">
                    <img src="img1.jpg" alt="슬라이드 이미지1">
                    <span>슬라이드1 텍스트가 여기에 들어옵니다.</span>
                </a>
                <a href="#">
                    <img src="img2.jpg" alt="슬라이드 이미지2">
                    <span>슬라이드2 텍스트가 여기에 들어옵니다.</span>
                </a>
                <a href="#">
                    <img src="img3.jpg" alt="슬라이드 이미지3">
                    <span>슬라이드3 텍스트가 여기에 들어옵니다.</span>
                </a>
            </div>
        </div>

        <div class="contents"></div>
</main>

슬라이드의 경우 a 태그로 감싸고 각 태그별로 이미지+텍스트 형태로 구성합니다. 여기는 css와 js에서 짜야 할 것들이 더 많고 뼈대는 단순한 편입니다.

3. 다음으로 main 태그 안의 contents div 코드를 작성해보겠습니다.

<div class="contents">
            <div class="tab">
                <div class="tab-notice active">
                    <button>공지사항</button>
                    <ul class="tab-notice-contents">
                        <li><a href="#">공지사항 1번 (클릭시 팝업)</a></li>
                        <li><a href="#">공지사항 2번</a></li>
                        <li><a href="#">공지사항 3번</a></li>
                        <li><a href="#">공지사항 4번</a></li>
                    </ul>
                </div>
                <div class="tab-gallery">
                    <button>갤러리</button>
                    <div class="tab-gallery-contents">
                        <a href="#"><img src="gallery1.jpg" alt="갤러리 사진 1"></a>
                        <a href="#"><img src="gallery2.jpg" alt="갤러리 사진 2"></a>
                        <a href="#"><img src="gallery3.jpg" alt="갤러리 사진 3"></a>
                    </div>
                </div>
            </div>

            <div class="banner">
                <a href="#">
                    <img src="banner.jpg" alt="배너 이미지">
                    <span>배너</span>
                </a>
            </div>
            
            <div class="direct">
                <a href="#">
                    <img src="direct.jpg" alt="바로가기 이미지">
                    <span>바로가기</span>
                </a>
            </div>
        </div>

tab / banner / direct 으로 콘텐츠 영역을 셋으로 나눠주고,

tab 영역에는 요구에 맞게 notice / gallery 두 컨텐츠를 넣어줍니다.

추후에 css를 다룰 때 display 속성을 이용해서 한개만 보이게 만들어 줄 예정입니다.

4. 다음은 푸터 영역 입니다.

<footer>
        <div class="logo">
            <img src="logo.png" alt="여기에 푸터 로고 이미지가 들어옵니다.">
        </div>
        <div class="copyright">
            copyright. 어쩌구저쩌구.
        </div>
        <div class="sns">
            <a href="#"><img src="sns1.png" alt="sns 이미지1"></a>
            <a href="#"><img src="sns2.png" alt="sns 이미지2"></a>
            <a href="#"><img src="sns3.png" alt="sns 이미지3"></a>
        </div>
    </footer>

5. 마지막으로 팝업 창을 위한 코드를 body 태그 최하단에 넣어줍니다.

<div class="pop-up">
        <span>여기에 팝업창 제목이 들어옵니다.</span>
        <span>여기에 팝업창 본문 내용이 들어옵니다.</span>
        <button>닫기</button>
    </div>

팝업창은 제목 / 본문 / 닫기버튼 셋으로 구성합니다.

이제 사이트의 뼈대인 html 작성이 완료되었습니다.

하지만 지금 해당 코드들을 넣고 사이트를 열어 보면 상당히 읽기 힘들게 생긴 페이지가 나타나죠.

다음 강좌에서 해당 페이지를 시험에서 제시된 와이어프레임에 맞게 꾸며보도록 하겠습니다.

웹디자인기능사 ( 2026년 작성 )

2편 - 기초적인 HTML 구조 잡기