Viewport란?
viewport는 사용자의 웹페이지의 보여지는 영역이다. 디바이스에 따라 다르다. 일반적으로 모바일 폰은 컴퓨터 화면보다 작을 것이다.
Responsive Viewport
위처럼 width property로 device-width로 viewport를 셋팅하면 그 디바이스의 해상도에 맞게 보여줄 수 있다. initial-scale은 그 윂페이지의 초기 zoom을 제어한다. 이 값은 별 일 없는 한 1로 하는 것이 좋다. maximum-scale을 1로 셋팅하면 zoom하지 못하게 할 수 있지만 권하지 않는다.
미디어 쿼리 (Media Queries) 이해하기
미디어 쿼리는 CSS3의 핵심 기능이다. @media 로 어떤 조건이 참이 될 때만의 CSS properties를 담는 rule을 사용한다. 디바이스의 screen width와 orientation(portrait 또는 landscape)에 따라 또는 인쇄된 종이에 보여지는 것 조차 display를 바꿀 수 있다.
먼저 breakpoint부터 보자. breakpoint는 디바이스나 웹 브라우저의 width 또는 height에 반응하는 웹페이지의 한 point이다. breakpoint threshold에 다다르면, 다른 스타일을 CSS로 적용할 수 있다.
breakpoint의 추가는 min-width나 max-width 룰을 추가함으로써 할 수 있다. 예를 들어 640px보다 작을 때를 지정하고 싶다면, max-width: 640px 를 쓴다. 반대로 640px 보다 클 때를 지정하고 싶다면, min-width: 640px 를 쓴다.
미디어 쿼리는 @media 뒤에 breakpoint 조건을 쓴 뒤 { } 안에 적용하고 싶은 CSS code를 적으면 된다. 예를 들어, max-width 800px로 screen에 어떤 스타일을 적용하고 싶다면 @media only screen and (max-width: 800px) 그리고 뒤에 { } 를 붙여 그 안에 스타일을 적어주면 된다.
다음 코드는 디바이스 상의 웹페이지가 800 px까지는 p 태그의 글자색을 red로 바꿀 것이다.
@media only screen and (max-width: 800px) {
p {
color: red;
}
}@media 코드를 각 디바이스에 따라 다르게 아래처럼 적용할 수도 있다. 그러나 브라우저는 로딩 시 width에 따라 css파일을 load하지 않고, width와 상관없이 모든 css파일을 읽어들인다.
<link rel="stylesheet" media="screen and (max-width: 480px)"
href="mobilephone.css" />
<link rel="stylesheet" media="screen and (min-width: 481px) and
(max-width: 768px)" href="tabletpc.css" />Device Orientation에 따른 처리
디바이스의 orientation에 따른 처리를 하고 싶다면, 다음 미디어 쿼리를 사용하면 된다. 아래 코드는 landscape일 때의 rule을 적용할 것이다.
@media (orientation: landscape)반대로 portrait일 때의 rule은 다음으로 한다.
@media (orientation: portrait)다음과 같은 코드는 orientation이 landscape일 때만 p.warning을 보인다.
<head>
...
<style type="text/css">
p.warning {
display: none;
background: red;
padding: 15px;
font-size: 30px;
margin: 0;
}
@media (orientation: landscape) {
p.warning {
display: block;
}
}
</style>
</head>
<body>
<p class="warning">이 글은 landscape에서 보여집니다.</p>
</body>Landscape 혹은 portrait로의 전환을 확인해보고 싶다면 브라우저의 개발자도구에서 테스트 가능하다.
여러 개의 미디어 쿼리 합치기
여러 개의 breakpoint로 어떤 스타일을 지정하고 싶다면 콤마(,)를 사용해서 합쳐서 사용할 수 있다. 콤마(,)는 미디어 쿼리를 OR해서 처리한다. 다음 코드는 width 480px 에서 640px 사이, 또는 1024px를 넘어가면 배경색을 green으로 바꾼다.
@media screen and (max-width: 640px) and (min-width: 480px),
(min-width: 1024px) {
body {
background: green;
}
}인쇄 시의 스타일 (Print Stylesheets) 지정
CSS3 미디어 쿼리는 해당 페이지를 인쇄할 때의 스타일을 따로 지정할 수 있다. 두가지 방법이 있다.
- 따로 분리된 stylesheet를 <link /> 태그를 사용해서 import한다.
- 원래 있던 stylesheet 내에 @media 문법으로 인쇄를 위한 스타일을 지정한다.
첫번째 방법의 경우 아래의 코드처럼 import할 수 있다.
<link rel="stylesheet" media="print" href="printstyle.css" />두번째 방법의 경우 아래처럼 사용하면 인쇄 시에만 적용되어 footer와 aside의 내용을 보이지 않도록 하고, header와 section의 margin과 배경을 조정한다.
@media only print {
footer, aside {
display: none;
}
header, section {
margin-right: 0;
background: transparent;
}
}