반응형 웹 제작 핵심 기술 : 가변 그리드
가변 그리드는 웹 사이트를 제작할때 화면의 크기에 상관없이 자유롭게 늘어나거나 줄어들 수 있도록
픽셀(px) 대신 퍼센트(%)로 제작하는 기술.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
#wrap {
width: 80%;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="wrap">hello</div>
</body>
</html>
미디어 쿼리
미디어의 화면 크기에 따라 웹사이트를 이에 맞게 변경하는 기술.
*쿼리: 컴퓨터에게 질의 하는 것.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
@media all and (min-width: 320px) {
body {
background-color: pink;
}
}
@media all and (min-width: 768px) {
body {
background-color: red;
}
}
@media all and (min-width: 960px) {
body {
background-color: yellow;
}
}
</style>
</head>
<body>
<div id="wrap">hello</div>
</body>
</html>
뷰포트
화면에 보이는 영역을 제어하는 기술. 미디어 쿼리로 화면 크기를 감지해야할 때 꼭 필요.
데스크톱은 사용자가 지정한 해상도가 보이는 영역이 되지만, 스마트 기기는 기본 설정값이 보이는 영역으로 설정됨.
따라서 미디어 쿼리를 사용해도 스마트 기기의 실제 화면 크기를 감지 못하므로 반응형 웹 제작시 반.드.시!! 필요!
<meta name="viewport" content="width=device-width, initial-scale=1.0" />'Archived > 반응형' 카테고리의 다른 글
| 반응형 웹#5 px를 %로 바꾸기: 가변폰트 (0) | 2019.11.02 |
|---|---|
| 반응형 웹#4 px를 %로 바꾸기. (0) | 2019.11.02 |
| 반응형 웹 #03 px를 %로 바꾸기(1) (0) | 2019.11.02 |
| 반응형 웹 #1 기본 개념 이해(1) (0) | 2019.11.02 |
