★ 이 글은 티스토리 스킨에 중점, 반응형웹은 브라우저에 따라 적용이 안될수도 있음.
반응형웹 디자인
- 브라우저 크기에 따라 홈페이지의 화면구성이 자동으로 바뀌게 만들어 어느 디바이스에서든 홈페이지를 보기 편리하게 최적화 시켜줌.
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 | style.css |
<★div class="red"><★/div> <★div class="yellow"><★/div> <★div class="blue"><★/div> | .red { width:130px; height:130px; background-color:red; display:inline-block;} .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~이하일때 세로로 정렬 된 모습을 확인 할 수 있다.
※ 브라우저 가로크기가 500px ~ 600px 사이일때를 설정하려면
@media (min-width: 500px) and (max-width: 600px) { ... } 처럼 쿼리 사이에 and를 삽입
예)
▲브라우저 가로 크기가 0 ~ 500px 일때 | ▲ 500px ~ 600px 일때 |
▲ 600px ~ 이상일때 |
※ orientation: portrait , orientation: landscape은
@media (orientation: portrait) { ... }
@media (orientation: landscape) { ... }
이렇게 적용
※ 레이어가 화면에서 잘리는걸 방지하기 위해 레이어의 width, padding, margin 등등은 픽셀보다 퍼센트를 이용.
예) .red { width:50%; }
※ 이미지 사이즈가 브라우저 크기에 따라 자동으로 리사이즈 되게 만들기 위해
img { max-width:100%; height:auto; } 를 추가한다.
※ media를 스타일시트에 넣어서 복잡해지고 길어져서 싫다면
따로 css파일을 만들어서 헤드에서 링크거는거 가능
예) <★link rel="stylesheet" media="(max-width: 500px)" href="max-500px.css">
※ 브라우저 크기에 따라 글자가 잘리는걸 방지하기 위해 word-wrap 속성 추가
예) body { word-wrap: break-word; }
※ breakpoint를 500px정도로 잡아 style.css에 media까지 설정하고 티스토리 관리자페이지 - 모바일웹을 OFF로 설정하면 모바일에서 스킨을 볼 수 있다.
참고사이트 https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/