- 해상도에 따른 div 영역 크기와 색상 변화
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scable=no">
<title>Title</title>
<script>
</script>
<style>
* {
margin: 0;
padding: 0;
}
#wrap {
width: 500px;
height: 500px;
margin: 0 auto;
border: 4px solid black;
}
/* 디바이스의 가로 길이가 320px 이상일 경우 */
@media all and (min-width:320px) {
#wrap {
width: 30%;
background: teal;
}
}
/* 디바이스의 가로 길이가 768px 이상일 경우 */
@media all and (min-width:768px) {
#wrap {
width: 60%;
background: blue;
}
}
/* 디바이스의 가로 길이가 1024px 이상일 경우 */
@media all and (min-width:1024px) {
#wrap {
width: 90%;
background: red;
}
}
</style>
</head>
<body>
<div id="wrap"></div>
</body>
</html>
- 해상도에 따른 레이아웃 변화
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scable=no">
<title>Title</title>
<script>
</script>
<style>
* {
margin: 0;
padding: 0;
}
#wrap {
width: 90%;
margin: 0 auto;
border: 4px solid black;
}
#wrap div {
display: inline-block;
height: 100px;
}
#wrap div:first-child { /* #wrap div의 1번째 자식 요소 */
background: red;
}
#wrap div:nth-child(2) { /* #wrap div의 2번째 자식 요소 */
background: blue;
}
#wrap div:nth-child(3) {
background: green;
}
#wrap div:nth-child(4) {
background: orange;
}
#wrap div:last-child {
background: black;
}
@media all and (min-width:320px) {
#wrap div {
width: 100%;
}
}
@media all and (min-width:768px) {
#wrap div {
width: 50%;
}
#wrap div:last-child {
width: 100%;
}
}
@media all and (min-width:1024px) {
#wrap div {
width: 20%;
}
#wrap div:last-child {
width: 20%;
}
}
</style>
</head>
<body>
<div id="wrap">
<div></div><div></div><div></div><div></div><div></div>
</div>
</body>
</html>'HTML' 카테고리의 다른 글
| [CSS] text-overflow, line-height (0) | 2020.08.14 |
|---|---|
| [CSS] after, before (0) | 2020.08.14 |
| [CSS] Flexible Box (플렉서블 박스) (0) | 2020.08.14 |
| [HTML] history (0) | 2020.08.12 |
| 간단한 홈페이지 만들고 호스팅하기 (0) | 2020.05.19 |
