본문 바로가기
웹디자인기능사

웹디자인기능사 실기 연습

by dongjin6539 2023. 4. 9.
728x90
반응형

웹디자인기능사 실기 연습

 

웹디자인 기능사 레이아웃 실기 연습을 해봤습니다.

아래의 페이지를 만들어 보겠습니다.

 

포토샵으로 이미지 가져오기
  • 포토샵으로 각각의 이미지를 가져와서 깨지지 않는 이미지를 만들어줍니다.

 

코드 구성

코드 보기(HTML, CSS) / 완성화면

 

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>코딩시험1</title>

    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="wrap">
        <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>
        <!-- header -->
        <main>
            <section id="banner">
                <img src="img/banner.jpg" alt="미라클있수마수">
            </section>  
            <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.20</span></li>
                        <li><a href="#">'힘내 소중한 너' 음원 발매</a><span>2018.11.13</span></li>
                        <li><a href="#">이용 요금 조정안내</a><span>2018.11.12</span></li>
                    </ul>
                    <a href="#" class="more">더보기</a>
                </div>
                <div class="not2"><img src="img/banner02.jpg" alt="온종일 혜택 ON"></div>
            </section>
            <section id="card">
                <h2>특별한 경험</h2>
                <div class="card-inner">
                    <div>
                        <img src="img/img01.jpg" alt="연간회원안내">
                        <strong>연간회원안내</strong>
                    </div>
                    <div>
                        <img src="img/img02.jpg" alt="프리미엄투어">
                        <strong>프리미엄투어</strong>
                    </div>
                    <div>
                        <img src="img/img03.jpg" alt="공연참여 프로그램">
                        <strong>공연참여 프로그램</strong>
                    </div>
                    <div>
                        <img src="img/img04.jpg" alt="단체프로그램">
                        <strong>단체프로그램</strong>
                    </div>
                </div>
            </section>
        </main>    
        <footer id="footer">
            <address>
                서울특별시 송파구 올림픽로 240 호텔롯데 롯대월드 | 대표자:박동기<br>
                사업자등록번호 : 219-85-00014 | 통신판매업신고번호 : 송파 제5513호 | 전화 : 1661-2000
                <strong>COPYRIGHT 2018 LOTTEWORLD.ALLRIGHTS RESERVED.</strong>
            </address>
        </footer>
    </div>    
</body>
</html>

 

HTML 구성

  • 페이지 예시를 보고 각각의 구역을 나누어줍니다.

  • header 태그, main 태그, footer 태그로 간단하게 나누어줍니다.
  • herader 태그에 알맞는 로고 이미지와 메뉴에 알맞는 태그를 사용해줍니다.
  • main 태그 안에 section 태그로 각각 구역을 상세하게 나눠서 알맞는 이미지와 알맞는 태그를 사용해줍니다.
  • footer 태그 안에 알맞는 태그를 사용해서 텍스트를 입력해줍니다.

 

CSS

* {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
    color: #000;
}
img {
    width: 100%;
    vertical-align: top;
}
#wrap {
    width: 1000px;
    margin: 0 auto;
}
#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;
}
#header nav li a {
    display: inline-block;
    padding: 20px;
}
#banner {
    margin-bottom: 20px;
}
#notice {
    display: flex;
    justify-content: space-between;
}
#notice .not1 {
    width: 45%;
    border: 1px solid #ccc;
    padding: 18px;
    position: relative;
}
#notice .not1 h3 {
    margin-bottom: 30px;
}
#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: 49%;
}
#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 {
    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;
}

 

CSS 구성

  • CSS에 사용한 스타일 속성을 보면 각각 한번씩은 다 사용해봤을 속성입니다.
  • 이제 사용했던 속성들을 활용해서 어떠한 부분에 넣어야 어떻게 속성입 적용되는지 알아야 합니다.
  • 각각 태그와 ID, CLASS가 구역이 어떻게 나눴는지 확인하고 각각에 알맞는 속성을 입력해보면서 라이브서버로 적용되는 페이지를 확인해보면서 사이즈를 알맞게 입력해주면 편리하고 빠르게 완성되어가는 페이지를 확인해볼 수 있습니다.  

 

참고

 

728x90
반응형