홈페이지를 반응형으로 만드는 미디어쿼리 (@media) 간단한 개념 및 사용 방법
CSS에서 미디어쿼리 (@media) 를 사용하면 쉽게 반응형으로 만들 수 있습니다. 특정 해상도 이상 혹은 이하일 때, 마크업 해둔 스타일로 변하도록 만드는 개념입니다. 이번에 친효스킨을 만들면서 더욱 확실히 개념을 정리할 수 있었습니다. 어떻게 이해했고, 어떤식으로 사용되어지는지 최대한 쉽게 설명을 드리겠습니다.
먼저 미디어쿼리를 마크업 할 때, 기준되는 해상도를 하나 정하셔야 합니다. 홈페이지 스타일 중 가장 만들기 쉬운 형태는 뭐가 있을까요? 저는 모바일 페이지라고 생각합니다. 블록요소가 그냥 세로로 쌓여있는 형태 입니다. 티스토리 반응형 스킨도 스마트폰에서 보면 세로로 정렬된 형태가 거의 대부분 입니다. 이는 모바일 해상도에서는 가로로 정렬할 수 있는 공간이 충분하지 않기 때문에 세로로 보여지게 만든 것 입니다. 따라서 가장 만들기 쉬운 레이아웃은 div 같은 블록요소들이 세로로 쌓여있는 형태라고 말씀드릴 수 있겠습니다.
이제 기준되는 해상도를 정했으니, 원하는 홈페이지를 한번 모바일 버전으로 만들어 봅니다. 그리고 특정 해상도 이상에서는 이런 블록 요소들이 적당히 가로로 배치가 되도록 해주기만 하면 기본 형태는 갖춰지게 될 것입니다. 아래의 예제를 한번 다운로드 받으셔서 직접 브라우저의 가로 사이즈의 변화를 주시면 div 요소들이 특정 해상도에서 세로로, 또 그 이상이 되면 가로로 배치가 되는 것을 직접 확인하실 수 있습니다.
반응형예제.zip@media ( min-width: 000px ) { }
CSS 스타일에 마크업 되어 있는 부분을 따로 가지고 왔습니다. 한번 살펴보시고 간단히 설명을 드리겠습니다.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
div {
width: 100%;
height: 100px;
padding: 5px;
margin-bottom: 10px;
border: 10px solid #555;
}
.div2 {
background-color: #0f0;
}
@media (min-width: 768px) {
div {
float: left;
width: 30%;
margin-right: 10px;
}
.div2 {
background-color: transparent;
}
.div3 {
background-color: #ff0;
}
}
먼저 div의 공통된 스타일을 만들어 주었습니다. 중간쯤에 @media (min-width: 768px) 라고 하는 미디어쿼리가 있습니다. 여기가 중요합니다. 이 뜻은, "해상도 000px 이상 부터 적용" 이라고 이해하시면 됩니다. min은 최소라는 의미를 가지고 있습니다. 즉 최소 768px 이상부터 {} 안의 마크업된 스타일이 적용이 된다는 의미 입니다. 그래서 첨부파일에 있는 웹페이지의 가로 사이즈를 줄이면 div 안에 있는 margin-bottom: 10px; 대로 세로로 서로 떨어져서 배치가 되게 됩니다. 그리고 다시 브라우저 창을 늘리면 768px 이상부터는 div 가 float: left; 에 의해서 가로로 배치가 됨과 동시에 가로 사이즈가 100%가 아닌 각각 30% 로 줄어들게 됩니다. 또한 margin-right: 10px; 에 의해서 오른쪽으로 서로 여백을 두고 배치가 되는 것 입니다.
반대로 max-width 도 존재합니다. 본문에는 사용되지 않았지만, 이 뜻은 "~까지" 라고 해석하시면 편합니다. 만약 max-width: 768px 이었다면 768px 해상도까지 적용이라는 뜻이 됩니다.
@media (미디어쿼리) 가 없는, 통상적인 마크업 구간은 모든 해상도에 공통으로 적용되는 부분이라고 해석하시면 됩니다. 즉 기준되는 해상도의 홈페이지 스타일을 미리 만들어 놓으면 나머지는 변형만 하면 되는 부분이므로 작업이 훨씬 수월해 집니다. 그러니 반드시 기준되는 해상도를 하나 결정하시고 코딩하시는게 좋습니다. 개인적으로는 모바일 버전으로 기준을 잡는게 훨씬 수월했습니다.
만약 미디어쿼리 min-width 가 해상도만 다르게 여러번 들어간다면?
이런 경우가 있을 수 있습니다. 그래서 아래의 간단한 설명이 적힌 이미지를 만들어봤습니다. 한번 봐주시기 바랍니다.
위에서 말씀드린 부분에 대한 설명도 간단히 작성했고, 아래의 min-width 미디어쿼리 세개의 구간이 마크업 되어있다고 가정을 해보도록 하겠습니다. 이런 경우는 어떻게 적용될까요?
간단합니다. 세부 해상도로 들어가는 순으로 적용됩니다. min-width: 500px 은 가로 사이즈가 500px 이상부터 적용되는 미디어쿼리 구간이라고 이제 알고 계실겁니다. 500px 이상이니까 여기에는 위의 두가지 768px 해상도와 1000px 해상도 모두를 포함합니다. 그러나 이 두 구간이 만약 따로 마크업이 되어 있다면 500px 이상의 해상도보다 더욱 세밀한 구간이 되므로 해당 구간에 대한 CSS 스타일이 따로 적용이 됩니다.
그래서 대부분의 티스토리 반응형 스킨을 보시면 스마트폰 해상도, 태블릿PC 해상도, 데스크탑에서의 해상도가 각각 따로 미디어쿼리로 구분되어 있습니다. (물론 아닌 스킨도 있음) 저 역시 친효스킨을 만들 때 이렇게 세분화하여 미디어쿼리로 해상도를 나뉘어 각기 다르게 블록요소들이 배치되도록 만들었습니다.
CSS에서도 전체선택자인 *에 스타일을 보통 margin: 0px; 과 padding: 0px; 로 위치와 공간을 초기화 하지만, 각 태그의 요소별로 padding 값과 margin 값이 따로 들어가 있는 경우를 살펴볼 수 있습니다. 비슷한 경우라고 해석하시면 될 것 같습니다. 세부 요소로 마크업 될 수록 해당 스타일이 최우선으로 적용이 된다는 것을 알고 계시면 됩니다. 미디어쿼리에서도 마찬가지로 적용이 됩니다. 미디어쿼리는 생각보다 어렵지 않습니다. 끝.
CSS 태그:not(선택자)::가상요소 구조 사용 가능
CSS3 :not(:first-child) :not(:last-child) 등등 not() 선택자 사용 방법
"친절한효자손 취미생활" 을 검색!
