스마트폰, 태블릿 등 다양한 미디어 디바이스의 등장으로 인터넷은 PC에서 뿐만아니라 다양한 모바일 기기에서 손쉽게 사용이 가능해졌습니다.
분명 인터넷 사용은 더 편리해 졌지만 개발자의 입장에서는 다양한 크기의 디바이스 화면에 맞는 웹페이지를 따로 만들어야 하는 고충이 생겼습니다. 커다란 PC화면에서 보여지는 페이지를 스마트폰 같은 작은 기기에서 그대로 사용하는 것은 단순히 화면이 축소되어 보이기 때문에 폰트나 이미지의 크기가 어색해 보일 수 밖에 없기 때문입니다. 또한 스마트폰 같이 작은 디바이스에서 보여지는 화면은 PC 화면에서의 복잡한 인터페이스 보다는 단순한 인터페이스로 설계되어야 할 필요가 있습니다.
CSS의 미디어쿼리(media query)를 사용하면 화면의 해상도에 따라서 페이지를 다르게 보여줄 수 있습니다. flex 레이아웃과 더불어 미디어 쿼리는 반응형 웹을 손쉽게 만들기 위해 반드시 필요한 것이므로 중요한 주제입니다. (참고 : 인터넷 익스플로어 8 이전 버전은 미디어쿼리를 제대로 지원하지 않는다.)
flex, flexbox 반응형 웹을 위한 css 레이아웃
미디어 쿼리 (media query)
@media (min-width:300px) {
. myclass {
width:200px;
height: 150px;
}
}
이 형식은 미디어쿼리의 가장 기본적인 형태다. 설명하자면 브라우저의 너비가 최소 300px까지(300px 이상 일 때)는 myclass 클래스가 { } 안의 CSS를 따르라는 뜻이다.
간단한 예를 들어보겠습니다.
위 코드에 미디어 쿼리 코드가 있습니다. 평소에는 파란 박스의 코드가 적용되지만 브라우저의 너비가 300px 이하가 되면 미디어 쿼리에서 설정한 빨간 테두리의 코드가 적용됩니다. 이렇게 디바이스의 스크린 사이즈에 따라서 요소들의 속성을 동적으로 변경할 수 있습니다. 대략 감이 오실겁니다.
- max-width, min-width, max-height, min-height
max-width : 미디어 쿼리에서 최대 너비를 설정합니다. 쉽게 말해 최대로 max-width까지 허용한다는 뜻입니다. 브라우저의 너비가 max-width 값 이하인 경우에만 적용되는 CSS를 작성할 수 있습니다.
min-width : 브라우저의 너비가 min-width에서 설정한 크기 이상일 때만 적용되는 CSS를 작성할 수 있습니다.
max-height와 min-height는 max-width와 min-height와 동작 방식은 같으며 다른 점은 브라우저의 높이에 대한 것입니다.
그럼 앞의 예제에서 max-width를 min-width로 바꿔보겠습니다.
미디어 쿼리의 max-width를 min-width로 변경하자 상대적으로 파란 테두리 코드의 적용 범위가 브라우저의 너비가 300px보다 작을 때로 바뀌는 것을 볼 수 있습니다.
이런 점을 염두해두어 min-width를 쓸지 아니면 max-width를 쓸지 잘 생각해야합니다.
- 미디어 쿼리 조건 여러 개 넣기
다음은 미디어 쿼리에 너비와 높이에 대한 조건을 동시에 넣는 방법입니다.
@media (min-width:300px) and (min-height:300px) {
. myclass {
width:200px;
height: 150px;
}
}
@media (min-width:300px) , (min-height:300px) {
. myclass {
width:200px;
height: 150px;
}
}
and로 연결하면 두 조건이 모두 만족할 때를 의미하고 ,(콤마)는 둘 중 하나의 조건만 만족하면 미디어 쿼리가 적용됩니다. (따라서 ,(콤마)는 OR의 뜻입니다.)
다음은 브라우저의 크기가 가로 300px 이상, 세로 300px 이상을 동시에 만족할 때만 적용되는 미디어 쿼리입니다.
결과는 다음과 같습니다.
이번에는 위 코드에서 빨간 테두리의 코드를 다음과 같이 바꿔보겠습니다. and를 ,(콤마)로 바꿨습니다.
@media (min-width:300px) , (min-height:300px)
브라우저의 너비든 높이든 둘 중 하나만 300px 이상이면 미디어 쿼리의 CSS가 적용됩니다.