728x90
반응형
웹디자인기능사 실기 연습
웹디자인 기능사 레이아웃 실기 연습을 해봤습니다.
아래의 페이지를 만들어 보겠습니다.
포토샵으로 이미지 가져오기
- 포토샵으로 각각의 이미지를 가져와서 깨지지 않는 이미지를 만들어줍니다.
코드 구성
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가 구역이 어떻게 나눴는지 확인하고 각각에 알맞는 속성을 입력해보면서 라이브서버로 적용되는 페이지를 확인해보면서 사이즈를 알맞게 입력해주면 편리하고 빠르게 완성되어가는 페이지를 확인해볼 수 있습니다.
참고
- https://www.youtube.com/playlist?list=PL4UVBBIc6giIpzhQ4UWVCs64UzLQpdO5B(실전 사이트 만들기 1-1, 실전 사이트 만들기 1-2, 실전 사이트 만들기 1-3)
728x90
반응형
