반응형
반응형 그리드
크게 세 가지로 나누어집니다.
- 왼쪽: 모바일 사이즈 (767px 이하)
- 가운데: 타블릿 사이즈 (768px 이상, 991px 이하)
- 오른쪽: 데스크탑 사이즈 (992px 이상)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>반응형 그리드</title>
<link rel="stylesheet" href="Styles.css">
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
</body>
</html>body {
margin: 0;
}
div {
float: left;
}
#div1 {
background-color: #FF0000;
width: 100%;
height: 60px;
}
#div2 {
background-color: #FFA500;
width: 100%;
height: 350px;
}
#div3 {
background-color: #FFFF00;
width: 100%;
height: 320px;
}
#div4 {
background-color: #008000;
width: 100%;
height: 385px;
}
#div5 {
background-color: #0000FF;
width: 100%;
height: 200px;
}
#div6 {
background-color: #4B0082;
width: 100%;
height: 200px;
}
@media(min-width: 768px) {
#div1 {
background-color: #FF0000;
width: 100%;
height: 60px;
}
#div2 {
background-color: #FFA500;
width: 100%;
height: 562px;
}
#div3 {
background-color: #FFFF00;
width: 100%;
height: 282px;
}
#div4 {
background-color: #008000;
width: 50%;
height: 360px;
}
#div5 {
background-color: #0000FF;
width: 50%;
height: 180px;
}
#div6 {
background-color: #4B0082;
width: 50%;
height: 180px;
}
}
@media(min-width: 992px) {
#div1 {
background-color: #FF0000;
width: 100%;
height: 60px;
}
#div2 {
background-color: #FFA500;
width: 50%;
height: 700px;
}
#div3 {
background-color: #FFFF00;
width: 50%;
height: 350px;
}
#div4 {
background-color: #008000;
width: 25%;
height: 350px;
}
#div5 {
background-color: #0000FF;
width: 25%;
height: 175px;
}
#div6 {
background-color: #4B0082;
width: 25%;
height: 175px;
}본 내용은 Codeit의 '웹 퍼블리싱' 강의를
참고하여 작성한 내용입니다.
반응형
'Front-end > HTML&CSS' 카테고리의 다른 글
| [웹 퍼블리싱] 03. 반응형 웹 퍼블리싱 (0) | 2021.02.09 |
|---|---|
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.09 |
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.09 |
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.08 |
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.08 |