반응형 웹 사이트를 만들기 위한 레이아웃 연습입니다.
웹 페이지의 레이아웃은 웹 사이트의 외관을 결정짓는 매우 중요한 요소입니다.
앞으로 몇가지 반응형 레이아웃을 같이 연습하고, 본격적인 사이트 만들기를 들어갈 것입니다.
하나하나씩 따라하시면서 같이 기본부터 다지도록 해보아요~~~
여러분의 열공을 응원하며, 화이팅 입니다!!!
Code Youtube
Reference Site
∗ dothome - CLICK
Code example
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>layout7</title>
<style>
* {margin: 0; padding: 0;}
body {background-color: #e3f2fd;}
#wrap {width: 1200px; margin: 0 auto;}
#header {width: 100%; height: 100px; background-color: #b2defe;}
#banner {width: 100%; height: 400px; background-color: #7ecbfd;}
#content1 {overflow: hidden;}
#content1 .nav {float: left; width: 30%; height: 500px; background-color: #43b5fc;}
#content1 .article_right1 {float: left; width: 70%; height: 250px; background-color: #00a5fb;}
#content1 .article_right2 {float: left; width: 70%; height: 250px; background-color: #0096fa;}
#content2 {overflow: hidden;}
#content2 .article_box1 {float: left; width: 33.3333%; height: 300px; background-color: #0088ec;}
#content2 .article_box2 {float: left; width: 33.3333%; height: 300px; background-color: #0076d9;}
#content2 .article_box3 {float: left; width: 33.3333%; height: 300px; background-color: #0064c6;}
#content3 {overflow: hidden; padding: 5%; background-color: #00a6fc;}
#content3 .article_square1 {float: left; width: 23%; height: 200px; margin: 1%; border-radius: 5px; background-color: #0076d9;}
#content3 .article_square2 {float: left; width: 23%; height: 200px; margin: 1%; border-radius: 5px; background-color: #0076d9;}
#content3 .article_square3 {float: left; width: 23%; height: 200px; margin: 1%; border-radius: 5px; background-color: #0076d9;}
#content3 .article_square4 {float: left; width: 23%; height: 200px; margin: 1%; border-radius: 5px; background-color: #0076d9;}
#footer {width: 100%; height: 100px; background-color: #43b5fc;}
/* 화면 너비 0 ~ 1200px */
@media (max-width: 1240px){
#wrap {width: 100%;}
#content2 .article_box1 {width: 50%;}
#content2 .article_box2 {width: 50%;}
#content2 .article_box3 {display: none;}
#content3 .article_square1 {width: 31.3333%;}
#content3 .article_square2 {width: 31.3333%;}
#content3 .article_square3 {width: 31.3333%;}
#content3 .article_square4 {display: none;}
}
/* 화면 너비 0 ~ 768px */
@media (max-width: 768px){
#content2 .article_box1 {width: 100%;}
#content2 .article_box2 {width: 100%;}
}
/* 화면 너비 0 ~ 480px */
@media (max-width: 480px){
#content1 .nav {width: 100%; height: 200px;}
#content1 .article_right1 {width: 100%; height: 200px;}
#content1 .article_right2 {width: 100%; height: 200px;}
#content3 .article_square1 {width: 98%; border-radius: 5px;}
#content3 .article_square2 {width: 98%; border-radius: 5px;}
#content3 .article_square3 {width: 98%; border-radius: 5px;}
}
</style>
</head>
<body>
<div id="wrap">
<header id="header"></header>
<section id="banner"></section>
<section id="content1">
<nav class="nav"></nav>
<article class="article_right1"></article>
<article class="article_right2"></article>
</section>
<section id="content2">
<article class="article_box1"></article>
<article class="article_box2"></article>
<article class="article_box3"></article>
</section>
<section id="content3">
<article class="article_square1"></article>
<article class="article_square2"></article>
<article class="article_square3"></article>
<article class="article_square4"></article>
</section>
<footer id="footer"></footer>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>layout7</title>
</head>
<body>
<div id="wrap">
<header id="header"></header>
<section id="banner"></section>
<section id="content1">
<nav class="nav"></nav>
<article class="article_right1"></article>
<article class="article_right2"></article>
</section>
<section id="content2">
<article class="article_box1"></article>
<article class="article_box2"></article>
<article class="article_box3"></article>
</section>
<section id="content3">
<article class="article_square1"></article>
<article class="article_square2"></article>
<article class="article_square3"></article>
<article class="article_square4"></article>
</section>
<footer id="footer"></footer>
</div>
</body>
</html>
* {margin: 0; padding: 0;}
body {background-color: #e3f2fd;}
#wrap {width: 1200px; margin: 0 auto;}
#header {width: 100%; height: 100px; background-color: #b2defe;}
#banner {width: 100%; height: 400px; background-color: #7ecbfd;}
#content1 {overflow: hidden;}
#content1 .nav {float: left; width: 30%; height: 500px; background-color: #43b5fc;}
#content1 .article_right1 {float: left; width: 70%; height: 250px; background-color: #00a5fb;}
#content1 .article_right2 {float: left; width: 70%; height: 250px; background-color: #0096fa;}
#content2 {overflow: hidden;}
#content2 .article_box1 {float: left; width: 33.3333%; height: 300px; background-color: #0088ec;}
#content2 .article_box2 {float: left; width: 33.3333%; height: 300px; background-color: #0076d9;}
#content2 .article_box3 {float: left; width: 33.3333%; height: 300px; background-color: #0064c6;}
#content3 {overflow: hidden; padding: 5%; background-color: #00a6fc;}
#content3 .article_square1 {float: left; width: 23%; height: 200px; margin: 1%; border-radius: 5px; background-color: #0076d9;}
#content3 .article_square2 {float: left; width: 23%; height: 200px; margin: 1%; border-radius: 5px; background-color: #0076d9;}
#content3 .article_square3 {float: left; width: 23%; height: 200px; margin: 1%; border-radius: 5px; background-color: #0076d9;}
#content3 .article_square4 {float: left; width: 23%; height: 200px; margin: 1%; border-radius: 5px; background-color: #0076d9;}
#footer {width: 100%; height: 100px; background-color: #43b5fc;}
/* 화면 너비 0 ~ 1200px */
@media (max-width: 1240px){
#wrap {width: 100%;}
#content2 .article_box1 {width: 50%;}
#content2 .article_box2 {width: 50%;}
#content2 .article_box3 {display: none;}
#content3 .article_square1 {width: 31.3333%;}
#content3 .article_square2 {width: 31.3333%;}
#content3 .article_square3 {width: 31.3333%;}
#content3 .article_square4 {display: none;}
}
/* 화면 너비 0 ~ 768px */
@media (max-width: 768px){
#content2 .article_box1 {width: 100%;}
#content2 .article_box2 {width: 100%;}
}
/* 화면 너비 0 ~ 480px */
@media (max-width: 480px){
#content1 .nav {width: 100%; height: 200px;}
#content1 .article_right1 {width: 100%; height: 200px;}
#content1 .article_right2 {width: 100%; height: 200px;}
#content3 .article_square1 {width: 98%; border-radius: 5px;}
#content3 .article_square2 {width: 98%; border-radius: 5px;}
#content3 .article_square3 {width: 98%; border-radius: 5px;}
}
도움이 되셨다면 구독과 좋아요 버튼을 꾸욱~~!!
여러분의 댓글은 영상을 제작하는데 많은 힘이 됩니다.
모르시거나 궁금한 사항은 언제든지 댓글로 남겨주세요.
최대한 힘이 되어 드리겠습니다.
오늘도 수고하셨습니다.
728x90
