← 강의 목록

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

7편 - 20번 철길 마을 1편

이번 예제는 20번 철길 마을 입니다.

분량문제상 HTML, CSS/JS 두 편으로 나눠 두었습니다.

하단에 첨부파일을 다운로드 받으시면 코드 파일을 직접 확인하실 수 있습니다.

해당 링크를 통해 영상으로 작성 흐름을 익히셔도 좋습니다.

가장 먼저, 20번 예제의 완성본 형태입니다.

20total.png

이제 실전 코드 작성으로 들어가 보도록 하겠습니다.

먼저 와이어프레임을 보고 기본적인 디자인과 포인트들을 가볍게 정리합니다.

20wireframe.png

메인 / 푸터로 큰 영역 분리

메인에 200 400 calc(100% - 600px) 셋으로 분리

호버한 메인메뉴의 서브메뉴만 옆으로 나타나는 형태. 메뉴별로 묶어줘야함.

이미지슬라이드 위에 링크 영역이 겹쳐 있으므로 메인에 relative 기준값 잡아둘거 염두

그럼 이제 바로 html로 들어가 보도록 하겠습니다.

이전 강좌에서 설명한 부분들과 유사한 부분이 많으니 주석은 중요한 부분들에만 추가했습니다.

<!DOCTYPE html>
<html lang="ko-kr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>철길 마을</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="main">
        <div class="nav">
            <div class="logo">
                <a href="#">
                    <img src="../이미지/logo.png" alt="로고이미지">
                </a>
            </div>
            <!-- .menus>.menu*4>a[href="#"]+.subMenu>a[href="#"]*4 로 한번에 만들고 입력+tab 으로 빠르게 작성하고 넘어갑니다. -->
            <div class="menus">
                <div class="menu">
                    <a href="#">철길 마을 </a>
                    <div class="subMenu"><a href="#">마을 소개</a><a href="#">마을의 유래</a><a href="#">볼거리</a><a href="#">찾아오시는 길</a></div>
                </div>
                <div class="menu">
                    <a href="#">주변 맛집</a>
                    <div class="subMenu"><a href="#">빵집</a><a href="#">간장게장</a><a href="#">중국음식점</a><a href="#">횟집</a></div>
                </div>
                <div class="menu">
                    <a href="#">주변 여행지</a>
                    <div class="subMenu"><a href="#">은파호수공원</a><a href="#">초원사진관</a><a href="#">월명공원</a><a href="#">진포해양공원</a></div>
                </div>
                <div class="menu">
                    <a href="#">도움마당</a>
                    <div class="subMenu"><a href="#">교통정보</a><a href="#">주변 주차장</a><a href="#">자료실</a><a href="#">자료마당</a></div>
                </div>
            </div>
        </div>

        <!-- 콘텐츠 영역의 배너/공지/갤러리/링크 등은 이전 강좌와 크게 다르지 않으니 따로 설명을 붙이진 않겠습니다. -->
        <div class="contents">

            <!-- 배너 a로 감싸주기 -->
            <a href="#">
                <div class="banner">
                    <img src="../이미지/img1.jpg" alt="배너이미지">
                    <div class="bannerText">
                        <span>Lorem ipsum dolor sit.</span>
                        <span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus, natus?</span>
                    </div>

                    <!-- 오른쪽 브라켓은 실무에서는 일러스트레이터로 아이콘을 만드셔야 하지만 시험에서는 그냥 간편하게 ㄴ + 한자에서 찾아서 써도 무방합니다. -->
                    <div class="bracket">〉</div>

                </div>
            </a>
            <div class="notice">
                <span>공지사항</span>
                <div class="noticeContents">
                    <a href="#"><span>Lorem, ipsum dolor.</span><span>0000.00.00</span></a>
                    <a href="#"><span>Lorem, ipsum dolor.</span><span>0000.00.00</span></a>
                    <a href="#"><span>Lorem, ipsum dolor.</span><span>0000.00.00</span></a>
                </div>
            </div>
            <div class="gallery">
                <span>갤러리</span>
                <div class="galleryContents">
                    <a href="#"><img src="../이미지/img2.jpg" alt="갤러리이미지1"><span>Lorem, ipsum dolor.</span></a>
                    <a href="#"><img src="../이미지/img3.jpg" alt="갤러리이미지2"><span>Lorem, ipsum dolor.</span></a>
                </div>
            </div>
            <div class="links">
                <a href="#"><img src="../이미지/img4.jpg" alt="링크이미지1"><span>LINK1</span></a>
                <a href="#"><img src="../이미지/img5.jpg" alt="링크이미지2"><span>LINK2</span></a>
                <a href="#"><img src="../이미지/img6.jpg" alt="링크이미지3"><span>LINK3</span></a>
                <a href="#"><img src="../이미지/img7.jpg" alt="링크이미지4"><span>LINK4</span></a>
            </div>
        </div>

        <!-- fadeIn이 아니라 슬라이드 형태로 구성해야 하기 때문에 슬라이드 영역 (relative) > 움직일 내부 슬라이드 (absolute) > 이미지들 형태로 구성합니다 -->
        <div class="imgSlide">
            <div class="slideWrap">
                <a href="#"><img src="../이미지/img8.jpg" alt="슬라이드이미지1"><span>슬라이드이미지1</span></a>
                <a href="#"><img src="../이미지/img9.jpg" alt="슬라이드이미지1"><span>슬라이드이미지2</span></a>
                <a href="#"><img src="../이미지/img1.jpg" alt="슬라이드이미지1"><span>슬라이드이미지3</span></a>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="logo">
            <a href="#">
                <img src="../이미지/logo.png" alt="푸터로고이미지">
            </a>
        </div>
        <div class="footerContents">
            <div class="footerMenu">
                <a href="#">FOOTERMENU1</a>
                <a href="#">FOOTERMENU2</a>
                <a href="#">FOOTERMENU3</a>
                <a href="#">FOOTERMENU4</a>
                <a href="#">FOOTERMENU5</a>
                <a href="#">FOOTERMENU6</a>
            </div>
            <div class="footerText">
                <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, 
                    ullam! Cum tenetur voluptate veritatis! Cumque eos quod suscipit corrupti vero animi aliquid,
                    repudiandae cum deleniti! Iusto neque tempora placeat hic.</span>
            </div>
        </div>
        <div class="family">
            <a href="#">
                Family Site
            </a>
        </div>
    </div>
    <div class="popUp">
        <div class="popUpText">
            <span>타이틀</span>
            <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum assumenda asperiores, 
                quos dolor aliquid quas aut ducimus optio doloremque nesciunt atque. 
                Hic quis sint eveniet libero veritatis cupiditate, in eligendi.</span>
        </div>
        <button>닫기</button>
    </div>

    <script src="jquery.js"></script>
    <script src="script.js"></script>
</body>
</html>

첨부파일