본문 바로가기

web's

TUTORIAL

반응형 사이트 만들기(2019)

04. 반응형 웹 사이트 만들기(2019) - 반응형 레이아웃 유형2

@webs 2019. 1. 5. 21:30

(2019/04) 반응형 사이트 만들기 - 반응형 레이아웃 유형2

반응형 웹 사이트를 만들기 위한 가장 기본적이 반응형 레이아웃 연습 예제입니다. 영상을 보면서 같이 따라하세요^^

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {margin: 0; padding: 0;}
		#wrap {width: 100%; height: 900px; margin: 0 auto;}
		header {width: 100%; height: 150px; background: #81c784;}
		aside {float: left; width: 30%; height: 700px; background: #66bb6a;}
		section {float: left; width: 40%; height: 700px; background: #4caf50;}
		article {float: left; width: 30%; height: 700px; background: #43a047;}
		footer {clear: both; width: 100%; height: 150px; background: #388e3c;}

		/* 화면 너비 0 ~ 1200px */
		@media (max-width: 1200px){
			aside {width: 40%;}
			section {width: 60%;}
			article {width: 100%; height: 300px;}
		}

		/* 화면 너비 0 ~ 768px */
		@media (max-width: 768px){
			aside {width: 100%; height: 300px;}
            section {width: 100%; height: 300px;}  
		}

		/* 화면 너비 0 ~ 480px */
		@media (max-width: 480px){
			header {height: 300px;}
            aside {height: 200px;}
            section {height: 200px;}
            article {height: 200px;}
		}
	</style>
</head>
<body>
	<div id="wrap">
		<header></header>
		<aside></aside>
		<section></section>
		<article></article>
		<footer></footer>
	</div>
</body>
</html>































































<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="wrap">
		<header></header>
		<aside></aside>
		<section></section>
		<article></article>
		<footer></footer>
	</div>
</body>
</html>

























































* {margin: 0; padding: 0;}
#wrap {width: 100%; height: 900px; margin: 0 auto;}
header {width: 100%; height: 150px; background: #81c784;}
aside {float: left; width: 30%; height: 700px; background: #66bb6a;}
section {float: left; width: 40%; height: 700px; background: #4caf50;}
article {float: left; width: 30%; height: 700px; background: #43a047;}
footer {clear: both; width: 100%; height: 150px; background: #388e3c;}

/* 화면 너비 0 ~ 1200px */
@media (max-width: 1200px){
    aside {width: 40%;}
    section {width: 60%;}
    article {width: 100%; height: 300px;}
}

/* 화면 너비 0 ~ 768px */
@media (max-width: 768px){
    aside {width: 100%; height: 300px;}
    section {width: 100%; height: 300px;}  
}

/* 화면 너비 0 ~ 480px */
@media (max-width: 480px){
    header {height: 300px;}
    aside {height: 200px;}
    section {height: 200px;}
    article {height: 200px;}
}
저작자표시

tags

UP NEXT : 반응형 사이트 만들기(2019)

티스토리툴바