★ 이 글은 티스토리 스킨에 중점, 반응형웹은 브라우저에 따라 적용이 안될수도 있음.
반응형웹 디자인
- 브라우저 크기에 따라 홈페이지의 화면구성이 자동으로 바뀌게 만들어 어느 디바이스에서든 홈페이지를 보기 편리하게 최적화 시켜줌.
1. breakpoint 정하기
breakpoint: 반응형이 적용되는 브라우저 크기(px값, 세로 크기가 될수도 가로크기가 될 수도 있다)
예) 브라우저 가로 크기가 0~500px 일 때 반응형이 적용되도록 할것이다.
2. <★head><★/head> 사이에 아래의 meta 태그 삽입
<★meta name="viewport" content="width=device-width, initial-scale=1">
3. 표를 이용해 상황에 맞는 media 삽입.
min-width |
브라우저 가로크기가 n픽셀~이상 |
max-width |
브라우저 가로크기가 n픽셀~이하 |
min-height |
브라우저 세로크기가 n픽셀~이상 |
max-height |
브라우저 세로크기가 n픽셀~이하 |
orientation: portrait |
브라우저 세로크기가 가로크기보다 클때 |
orientation: landscape |
브라우저 가로크기가 세로크기보다 클때 |
(예로 500px~이하가 될 때 반응형을 적용하기 위해 max-width를 이용.)
그리고 style.css에 media 쿼리를 삽입한다.
예) @media (max-width: 500px) { ... }
{ } 사이에 브라우저 크기가 500px 이하가 되었을때 출력시킬 스타일시트를 추가한다.
@media (max-width: 500px) {
.red { display:block;}
.yellow { display:block;}
.blue {display:block;}
}
예제)
*.html
<★div class="red"><★/div>
<★div class="yellow"><★/div>
<★div class="blue"><★/div>
style.css
.yellow { width:130px; height:130px; background-color:yellow; display:inline-block;}
.blue { width:130px; height:130px; background-color:blue; display:inline-block;}
▲ 위의 소스로 적용 된 화면 모습.
<★head><★/head>에 <★meta name="viewport" content="width=device-width, initial-scale=1">를 삽입,
style.css에
@media (max-width: 500px) {
.red { display:block;}
.yellow { display:block;}
.blue {display:block;}
} 를 삽입하면
500px ~ 이상일때 | 0 ~ 500px 일때 |
이렇게 세개의 레이어가 브라우저 가로크기가 500px~이하일때 세로로 정렬 된 모습을 확인 할 수 있다.
0 ~ 500px 일때 | 500px ~ 600px 일때 | 600px ~ 이상일때 |