QUOTE THE DAY
“ 당신이 6개월 이상 한 번도 보지 않은 코드는 다른 사람이 다시 만드는 게 훨씬 더 나을 수 있다. ”
-
이글슨 (Eagleson)
반응형
웹디자인 기능사 실기 A유형 1번 레이아웃
코드
<!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>웹디자인 기능사 실기 A유형 1번 레이아웃</title>
<link href="https://webfontworld.github.io/gmarket/GmarketSans.css" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
font-family: 'GmarketSans';
}
#wrap {
width: 1200px;
margin: 0 auto;
}
#header {
width: 100%;
height: 100px;
display: flex;
}
.header {
width: 20%;
background-color: #eae4e9;
}
.nav {
width: 80%;
background-color: #fff1e6;
}
#section {
width: 100%;
height: 300px;
background-color: #fde2e4;
}
#article {
width: 100%;
height: 200px;
display: flex;
}
.a1 {
width: 33.333%;
background-color: #fad2e1;
}
.a2 {
width: 33.333%;
background-color: #e2ece9;
}
.a3 {
width: 33.333%;
background-color: #bee1e6;
}
#footer {
width: 100%;
height: 100px;
display: flex;
}
.f1 {
width: 20%;
background-color: #f0efeb;
}
.f2 {
width: 60%;
background-color: #dfe7fd;
}
.f3 {
width: 20%;
background-color: #cddafd;
}
</style>
</head>
<body>
<div id="wrap">
<header id="header">
<header class="header">로고</header>
<nav class="nav">메뉴</nav>
</header>
<section id="section">이미지 슬라이드</section>
<article id="article">
<article class="a1">공지사항/갤러리</article>
<article class="a2">배너</article>
<article class="a3">바로가기</article>
</article>
<footer id="footer">
<footer class="f1">로고</footer>
<footer class="f2">COPYRIGHT</footer>
<footer class="f3">SNS</footer>
</footer>
</div>
</body>
</html>
반응형