반응형
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. 미리보기
4. HTML / CSS 파일
반응형
'Python_WEB > HTML' 카테고리의 다른 글
| HTML5 - 190701 Basic Study 68(Cafe 페이지 제작) (0) | 2019.07.01 |
|---|---|
| HTML5 - 190701 Basic Study 67(그리드 시스템) (0) | 2019.07.01 |
| HTML5 - 190701 Basic Study 65(프린터, 모니터 CSS) (0) | 2019.07.01 |
| HTML5 - 190623 Basic Study 64(에릭마이어 reset.css) (0) | 2019.06.23 |
| HTML5 - 190623 Basic Study 63(아코디언 네비게이션 바) (0) | 2019.06.23 |
