최근들어 모바일기기의 발전에 따라 웹페이지의 반응형 디자인의 중요성이 커지고 있다. 반응형 디자인은 더이상 선택이 아닌 필수가 된것 이다.
사용자가 어떤 장치로 웹사이트를 방문할지 알 수 없기 때문에 레이아웃은 방문자의 화면 해상도를 고려해야 한다.
1. viewport meta tag
viewport란 웹페이지의 가시영역을 의미한다. 데스크탑용 웹페이지를 그대로 모바일에 출력하면 가독성이 떨어지는 것같은 문제가 발생한다.
따라서 viewport를 이용해 디바이스의 화면크기를 고려하여 웹페이지를 제작해야 한다.
meta tag 는 브라우저 혹은 검색엔진최적화를 위해 검색엔진에게 메타데이터를 전달하기 위해 사용된다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">위 예제는 가장 일반적인 viewport설정이다.
가로폭을 디바이스의 가로폭에 맞추고 초기 화면 배율을 100%로 설정한다.
2. @media
media쿼리는 서로 다른 미디어 타입(print, screen)에 따라 각각의 스타일을 지정할 수 있게 한다.
@media screen {
* { color: red; }
}
@media print {
* { color: blue; }
}위 css코드는 일반 화면(screen)과 인쇄장치(print)별로 서로 다른 스타일을 지정한다.
반응형 웹디자인에 사용되는 핵심 기술은 @media이다.
@media를 사용해 미디어나 디바이스 크기별로 스타일을 지정한다.
아래 속성들은 Media Query의 표현식에 사용할 수 있는 속성이다
- width : viewport 너비(px)
- height : viewport 높이(px)
- device-width : 디바이스의 물리적 너비(px)
- device-height : 디바이스의 물리적 높이(px)
- orientation : 디바이스 방향(가로 : landscape , 세로 : portrait)
일반적으로 반응형 디자인은 뷰포트의 너비를 기준으로 한다.
viewport의 width 속성을 이용해 뷰포트너비에 따라 반응하는 범위를 지정할 수 있다.
/* Custom, iPhone Retina : 320px ~ */
@media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones : 480px ~ */
@media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets : 768px ~ */
@media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops : 992px ~ */
@media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens : 1200px ~ */
@media only screen and (min-width : 1200px) {
}위 코드는 디바이스 크기별로 브레이크포인트를 만들어 준 것이다.
3. 반응형 네비게이션 바
전에 만들었던 페이지는 반응형 레이아웃이 전혀 반영이 안되어있어 화면크기가 작아지면 화면이 다 깨져버린다.
이제 이 화면에 반응형 레이아웃을 실습해보자
@media screen and (max-width: 480px) {
}위 코드는 뷰포트의 크기가 480px 이하일때만 적용된다.
css는 나중에 선언된 스타일이 우선 적용되기 때문에 media쿼리를 사용할 때에 NON Mobile First방식의 경우 max-width값이 큰 것부터, Mobile First방식의 경우 max-width값이 작은 것부터 기술하여야 한다.
화면이 작아질때 네비게이션바가 헤더영역 아래로 내려오는 현상이 발생했다.
따라서 이를 막기위한 레이아웃을 정의해야 한다.
@media screen and (max-width: 480px) {
header {
height: 120px;
text-align: center;
}
#wrap {
margin-top: 120px;
}
aside {
top: 120px;
}
}
위 코드를 적용시키면 위 사진처럼 네비게이션바가 정리된 것을 볼 수 있다.
