본문 바로가기

Python_WEB/HTML

HTML5 - 190701 Basic Study 66(반응형 웹 기초 구성)

1. HTML Code

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>9일차</title>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
<link href="css/ex02.css" rel="stylesheet">
</head>

<body>
<h1>반응형웹을 만들자</h1>
<section>
	<article>박스 1</article>
    <article>박스 2</article>
    <article>박스 3</article>
</section>
</body>
</html>

 

2. CSS Code

@charset "utf-8";
/* CSS Document */
/* 모니터용 스타일시트 */

@font-face {
            font-family: '나눔고딕';
            src: local('NanumGothic'),
                 url('NanumGothic.eot'),
                 url('NanumGothic.ttf'),
                 url('NanumGothic.woff');
        }
h1{
	font-family:"나눔고딕"
}
/* 공통스타일 */
*{
	margin:0 auto;
	padding:0;
}
h1{
	background:beige;	/* 적용이 안된다 */
	border:3px dotted black;
}
section{
	border:2px solid black;
}
article{
	border:2px solid red;
}

/* 유동형 필수 코드 */
html,body{
	width:100%;
	height:100%;
}

/* 장치 세움 */
@media screen and (orientation:portrait){
	h1{
		width:90%;
		box-shadow:5px 5px 1px black;
		height:50px;
	}
}
/* 장치 눕힘 */
@media screen and (orientation:landscape){
	h1{
		width:90%;
		font-size:3em;
		box-shadow:5px 5px 1px red;
		height:50px;
	}
}

/* 데스크탑용 960px 이상 */
/* 3단구조 고정형 */
@media screen and (min-width:960px){
	html{
		background:gold;
	}
	h1{
		background:red;
	}
	section{
		width:960px;
		overflow:hidden;
		display:flex;
	}
	article{
		height:500px;
		background:yellow;
	}
	article:nth-child(1){
		width:20%;
	}
	article:nth-child(2){
		width:30%;
		background:lime;
	}
	article:nth-child(3){
		width:50%;
	}
}

/* 태블릿용 768px ~ 959px */
/* 320 / 480 / 768 / 960 / 1024 */
/* 유동형 : 화면크기 전체화면(기본) */
/* 2단구조 */
@media screen and (min-width:481px) and (max-width:959px){
	html{
		background:lightgray;
	}
	h1{
		background:blue;
	}
	section{
		width:100%;
		overflow:hidden;
	}
	article{
		height:300px;
		background:snow;
	}
	article:nth-child(1){
		width:49%;
		float:left;
	}
	article:nth-child(2){
		width:49%;
		float:left;
		background:gold;
	}
	article:nth-child(3){
		width:99%;
		clear:both;	/* 줄바꾸기 */
		background:tomato;
		margin-left:0;
	}
}

/* 모바일용 0 ~ 767px */
/* 유동형 : 화면크기 전체화면(기본) */
/* 1단구조 */
@media screen and (max-width:480px){
	html{
		background:pink;
	}
	h1{
		background:green;
	}
	section{
		width:100%;
	}
	article{
		height:300px;
		width:100%;
		/* float:none; */
	}
}

 

3. 미리보기

< PC >
< 모바일 >
< 태블릿 >

 

4. HTML / CSS 파일

ex02.html
0.00MB
ex02.css
0.00MB