웹 디자인 기능사 시험 레이아웃 따라하기 1

웹 디자인 기능사 시험 레이아웃 따라하기 1

 

레이아웃을 크게 3가지로 분류한다. header,main,footer   다음으론 css에 리셋 값을 줍니다.

        * {
            padding: 0;
            margin: 0;
        }
        a {
            text-decoration: none;
            color: black;
        }
        img {
            width: 100%;
            vertical-align: top;
        }
        #wrap {
            width: 1000px;
            margin: 0 auto;
        }

헤더는 로고(img)와 메뉴(nav) 둘로 나눈 후 css를 적용한다. 

        <header id="header">
            <h1><img src="img/logo.jpg" alt="롯데월드"></h1>
            <nav>
                <ul>
                    <li><a href="#">즐길거리</a></li>
                    <li><a href="#">요금/우대혜택</a></li>
                    <li><a href="#">참여프로그램</a></li>
                    <li><a href="#">이용가이드</a></li>
                    <li><a href="#">소통서비스</a></li>
                </ul>
            </nav>
        </header>

로고의 크기는 임의로 정해주고 li와 a에 display : inline-block을 주며 가로로 정렬될수있게 해준다 a에는  padding을 주어

각 a 마다의 간격을 설정하고  부모요소인 header에 display:flex를 주며 img와 nav에  justify-content: space-between을 주어 끝과 끝으로 보내준후  align-item:flex-end; 를 주어 아래로 정렬을 맞춰줍니다. 헤더완성.

        #header {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
        }
        #header h1 img {
            width: 150px;
        }
        #header nav li {
            display: inline-block;
            letter-spacing: normal;
            font-weight: bold;
        }
        #header nav li a {
            display: inline-block;
            padding: 20px;
        }

다음은 main영역을 3개로 분류한다 이미지만 있는 banner, notice, card 이렇게 세 분류로 나눠준다.

첫번째 섹션 - banner엔 이미지 만 들어간다. 그 후 다음 섹션인 notice와 간격을 주기 위해 margin-bottom을 준다.

            <section id="banner">
                <img src="img/banner01.jpg" alt="미라클">
            </section>

        #banner {
            margin-bottom: 20px;
        }

두번째 섹션 - notice는not1 ,not2로 나눠주며  not2엔 이미지를 넣어주면 끝.

not1은 제목태그인<h3>와 li와 그 후 더보기 버튼을 만들어줍니다.

            <section id="notice">
                <div class="not1">
                    <h3>롯데월드 소식</h3>
                        <ul>
                            <li><a href="#">그럴싸진관 미라클</a><span>2018.11.19</span></li>
                            <li><a href="#">드림스테이지</a><span>2018.11.19</span></li>
                            <li><a href="#">힘내 소중한 너</a><span>2018.11.19</span></li>
                            <li><a href="#">이용요금조정안내</a><span>2018.11.19</span></li>
                        </ul>
                        <a href="#" class="more">더보기</a>
                </div>
                <div class="not2"><img src="img/banner02-2.jpg" alt=""></div>
            </section>

헤더와 같이 notice에 flex와 space-between을 주고 not1,2에 각각 width값 47%를 준다.

not1 박스엔 border 1px solid #ccc를 주며 상자 테두리를 희미하게 만들어준다. not1안의 li에 제목과 날짜를 준 후 70%,30%의 비율로 나눠준 뒤 각 css를 설정합니다.제목과 날짜도 가로로 같이 정렬해주기 위해 li에도 flex를 설정해줍니다. 그 후 더보기인  more에 위치를 지정해준 뒤  기준점이 되는 not1에 position-relative를 설정해준뒤 more에 가상요소를 만들어 아이콘을 만들어주면  main영역 두번째 notice 완성.

        #notice {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        #notice .not1 {
            width: 47%;
            border: 1px solid #ccc;
            padding: 22px;
            position: relative;
        }
        #notice .not1 h3 {
            margin-bottom: 10px;
        }
        #notice .not1 li {
            list-style: none;
            display: flex;
            padding: 5px 0;
        }
        #notice .not1 li a {
            width: 70%;
        }
        #notice .not1 li span {
            width: 30%;
            text-align: right;
        }
        #notice .not1 .more {
            position: absolute;
            right: 30px; top: 25px;
        }
        
        #notice .not2 {
            width: 46.5%;
        }

세번째 섹션 - card는 제목 과 이미지로 나뉜다. 이미지를 담긴 위한 card-inner영역을 만들어주고 그 안에 4개의 div 박스를

또 만들어 각 이미지와 멘트를 써줍니다.

            <section id="card">
                <h2>특별한 경험</h2>
                <div class="card_inner">
                    <div>
                        <img src="img/notice01.jpg" alt="연간회원안내">
                        <strong>연간회원안내</strong>
                    </div>
                    <div>
                        <img src="img/notice02.jpg" alt="프리미엄투어">
                        <strong>프리미엄투어</strong>
                    </div>
                    <div>
                        <img src="img/notice03.jpg" alt="공연참여프로그램">
                        <strong>공연참여프로그램</strong>
                    </div>
                    <div>
                        <img src="img/notice04.jpg" alt="단체프로그램">
                        <strong>단체프로그램</strong>
                    </div>
                </div>
            </section>

제목인 h2에  마진을 줘 간격을 설정하고 카드를 정렬 시키기 위해 card_inner에 flex와space-between을 설정해줍니다.

각 div 상자의 width 값을 일정하게 지정해고 멘트에 패딩과 inline-block를 설정해주면 세번째 card영역 끝이며 메인 완성입니다.

        #card h2 {
            margin: 20px 0 10px;
        }
        .card_inner {
            display: flex;
            justify-content: space-between;
        }
        .card_inner div {
            width: 24%;
        }
        .card_inner div strong{
            padding: 10px 0;
            display: inline-block;
            color: #666;
        }

마지막 footer영역 footer영역은 간단 합니다  글이 들어있는 박스 address를

 만들어  정보를 써준 뒤 마지막 글에 strong를 주어 분류해줍니다.

        <footer id="footer">
            <address>
                서울특별시 송파수 올림픽로 240 호텔롯데 롯데월드 | 대표자 : 박동기<br>
                사업자등록번호 : 219-85-00014 | 통신판매업신고번호 | 송파 | 전화 : 1661-2000
                <strong>COPYRIGHT 2022 LOTTEWORLD.ALL.RIGHT RESERVED</strong>
            </address>
        </footer>

footer 영역 위 실선을 border-top으로 만들어 줍니다.

strong에 display:block을 주어 밑으로 내려오게 해준뒤 간격을 띄어 주면 푸터 영역 까지 완성입니다.

        #footer {
            border-top: 1px solid #ccc;
            margin-top: 50px;
            padding: 50px 0;
        }
        #footer address {
            font-style: normal;
        }
        #footer address strong {
            display: block;
            padding-top: 50px;
            color: #666;
        }

이렇게 해서 모든 페이지가 완성되었습니다.

 

 

코드보기