웹 디자인 기능사 실기 합격을 위한 영상입니다.
따라하면 누구나 딸 수 있는 자격증입니다.
끝까지 완주하시고 자격증 꼭 취득하세요^^
사용프로그램
brackets GO
인스타그램 보기 GO
포폴 만들기 스터디 모임 GO
도움이 되셨다면 구독과 좋아요!! click
모르거나 궁금한 사항은 언제든지 댓글로 부탁드립니다.
댓글은 영상을 제작하는데 많은 힘이 됩니다.
다 보셨으면. 꼭! 댓글 부탁드립니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>롯데월드</title>
<!-- style -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="wrap">
<header id="header" class="clearfix">
<h1><a href="#"><img src="images/logo.jpg" alt="롯데월드"></a></h1>
<nav class="nav">
<ul class="clearfix">
<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 -->
<section id="banner">
<img src="images/banner01.jpg" alt="메리크리스마스">
</section>
<!-- //banner -->
<section id="content1" class="clearfix">
<article class="notice">
fff
</article>
<figure class="ad">
<img src="images/ad.jpg" alt="온종일 혜택">
</figure>
</section>
<!-- //banner -->
<section id="content2">
<h2>특별한 경험</h2>
<ul class="clearfix">
<li>
<a href="#">
<img src="images/s1.jpg" alt="연간회원안내">
<span>연간회원안내</span>
</a>
</li>
<li>
<a href="#">
<img src="images/s2.jpg" alt="연간회원안내">
<span>연간회원안내</span>
</a>
</li>
<li>
<a href="#">
<img src="images/s3.jpg" alt="연간회원안내">
<span>연간회원안내</span>
</a>
</li>
<li>
<a href="#">
<img src="images/s4.jpg" alt="연간회원안내">
<span>연간회원안내</span>
</a>
</li>
</ul>
</section>
<!-- //content2 -->
<footer id="footer">
<address>
<ul>
<li class="left">서울 특별시 송파구 올림픽로 240 롯데월드</li>
<li>대표자: 박동기</li>
<li>사업자등록번호: 229-093-00392</li>
<li class="left">통신판매업신고번호: 384-02894-90348</li>
<li>전화: 02-3045-3943</li>
</ul>
<p>Copyright2018 Lotterworld, All Right RESERVED.</p>
</address>
</footer>
<!-- //footer -->
</div>
</body>
</html>
/* reset */
* {margin: 0; padding: 0;}
li {list-style: none;}
a {color: #333; text-decoration: none;}
.clearfix::before, .clearfix::after {display: block; content: ''; clear: both;}
/* layout */
#wrap {width: 1000px; height: 1000px; margin: 0 auto; }
#header {height: 100px;}
#banner {}
#content1 {}
#content2 {}
#footer {}
/* header */
#header h1 {float: left; padding-top: 5px;}
#header h1 img {width: 130px;}
#header .nav {float: right;}
#header .nav ul {}
#header .nav li {float: left;}
#header .nav li a {display: block; padding: 40px 15px;}
/* banner */
#banner {}
#banner img {width: 100%;}
/* content1 */
#content1 {margin-top: 15px;}
#content1 .notice {float: left; width: 49%; height: 220px; margin-right: 2%; background: #ccc}
#content1 .ad {float: left; width: 49%; margin-right: 0; background: #444}
#content1 .ad img {width: 100%; display: block;}
/* content2 */
#content2 {margin-top: 25px;}
#content2 h2 {margin-bottom: 10px;}
#content2 ul {}
#content2 li {float: left; width: 24.25%; margin-right: 1%;}
#content2 li:last-child {margin-right: 0;}
#content2 li img {width: 100%;}
#content2 li span {display: block; padding: 10px 0;}
/* footer */
#footer {border-top: 1px solid #ccc; margin-top: 30px; padding: 30px 0;}
#footer address {font-style: normal; color: #666;}
#footer address ul {width: 670px;}
#footer address li {position: relative; display: inline; line-height: 1.7; padding: 0px 15px 0px 10px;}
#footer address li:after {content: ''; width: 1px; height: 13px; background: #666; position: absolute; right: 0; top: 0;}
#footer address li.left {padding-left: 0;}
#footer address p {text-transform: uppercase; padding-top: 30px;}
728x90