728x90
웹 디자인 기능사 시험 실기 연습을 해봤어요 !
위와 같은 사이트를 만드는거에요 !
body에서는 구조만 잡아줬어요
<body>
<div id="wrap">
<header id ="header">
<img src="img/logo01.jpg" alt="롯데월드">
<nav>
<ul>
<li><a href="#">1즐길거리</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/banner01.jpg" alt="미라클있수마수">
</section>
<section id="notice">
<div class="not1">
<h3>롯데월드 소식</h3>
<ul>
<li><a href="#">그럴싸진관 미라클</a><span>20220.09.3</span></li>
<li><a href="#">이용요금조정피마클</a><span>20220.09.3</span></li>
<li><a href="#">드림스테이지 힘내미라클</a><span>20220.09.3</span></li>
<li><a href="#">드림 스테이지 햄내 소주한잔 미라클</a><span>20220.09.3</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/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>
</main>
<footer id="footer">
<address>
서울특별시 서초구 올릭픽로 240 호텔롯데 롯데월드 | 대표자 : 희석 <br>
사업자등록번호 : 219-85-00014 | 통신판매신고번호 | 송파 | 전화 : 1661-2000
<strong>COPYRIGHT 2022 LOTTEWORD.ALL.RIGHT RESERVED</strong>
</address>
</footer>
</div>
</body>요기는 css 에요
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
img {
width: 100%;
vertical-align: top;
}
#wrap {
width: 840px;
/* 1000 */
margin: 0 auto;
}
#header {
display: flex;
justify-content: space-between;
align-items: flex-end;
/*
해더부분의 img와 li를 떨어 트려줄거에요
display :flex로요
align-items: flex-end으로 하단정렬을해줘요
*/
}
#header img {
width: 150px;
}
#header nav li{
display: inline-block;
letter-spacing: normal;
/*
li와 a 태그에 inline-block해줘서 줄바꿈이 없게 할거에요
*/
}
#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: 30px;
position: relative;
/*
.more에서 absolute를 쓰기때문에 position: relative;를 줬어요 !
*/
}
#notice .not1 .more{
position: absolute;
right: 30px; top: 35px;
/*
더보기 위치설정을 해줘야 하기 때문에 absolute를줬어요
*/
}
.not1 ul .more::after{
content: '';
background-image: url(img/plus.jpg);
position: absolute;
background-size: cover;
width: 20px;
height: 20px;
/*
가상요소를 줘서 + 버튼을 만들어 줬어요
*/
}
#notice .not1 h3 {
margin-bottom: 10px;
}
#notice .not1 li {
list-style: none;
display: flex;
padding: 4px 0 0 0;
}
#notice .not1 li a{
width: 70%;
}
#notice .not1 li span{
width: 30%;
text-align: right;
}
#notice .not2{
width: 45%;
}
#card h2 {
margin: 20px 0 10px 0;
}
#card .card-inner {
display: flex;
justify-content: space-between;
}
.card-inner > div {
width: 24%;
}
.card-inner > div strong {
padding: 10px 0;
display: inline-block;
/*
padding을 하기위해 inline 블럭으로 변경하였어요
*/
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;
/*
블록타입으로 설정하여 줄바꿈을 해줬습니다.
*/
}잘 몰랐던부분은 안에 주석으로 정리하였어요