반응형 웹 페이지 디자인 - 미디어 쿼리
미디어 쿼리는 무엇인가요？
미디어 쿼리는 CSS3에서 도입된 CSS 기술입니다。
특정 조건을 만족하는 경우에만 사용됩니다 @media CSS 속성 블록을 참조하는 규칙입니다。
예제
브라우저 창이 600px 또는 그 이하이면 배경색이 연파랑이 됩니다：
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
브레이크포인트 추가
이 튜토리얼에서 약간 이전에 행과 열을 포함한 웹 페이지를 만들었지만, 이 반응형 웹 페이지는 작은 스크린에서는 잘 보이지 않았습니다。
미디어 쿼리는 여러분을 도와줄 수 있습니다. 설계의 일부가 브레이크포인트의 양쪽에서 다르게 표현되는 브레이크포인트를 추가할 수 있습니다。
데스크톱 컴퓨터
스마트폰
768px에서 브레이크포인트를 추가하는 미디어 쿼리를 사용합니다：
예제
스크린(브라우저 창)이 768px 미만이면, 각 열의 너비는 100％가 되어야 합니다：
/* 데스크톱 장치를 대상으로: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
/* 휴대폰에 대한 코드 */
[class*="col-"] {
width: 100%;
}
}
항상 모바일 우선 설계
모바일 우선(Mobile First)은 데스크톱이나 다른 장치에 설계를 진행하기 전에, 먼저 모바일 장치에 설계를 우선시하는 것을 의미합니다(이는 작은 장치에서 페이지가 더 빠르게 표시되도록 합니다).
이는 우리가 CSS에서 몇 가지 개선을 해야 한다는 것을 의미합니다。
브레이크포인트의 너비가 768px 미만이면, 설계를 변경해야 하지 않고 너비를 변경해야 합니다. 이렇게 '모바일 우선' 설계를 진행했습니다：
예제
/* 휴대폰에 대한 코드 */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 768px) {
/* 데스크톱에 대한 코드 */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
또 다른 브레이크포인트
또한 필요한 만큼 많은 브레이크포인트를 추가할 수 있습니다。
태블릿과 스마트폰 사이에 브레이크포인트를 추가할 것입니다。
데스크톱 컴퓨터
태블릿
스마트폰
이렇게 하여 우리는 미디어 쿼리(600 화소에서)를 추가하고, 600 화소(768 화소보다 작은)의 장치에 대해 새로운 클래스 그룹을 추가했습니다：
예제
주의하십시오, 두 그룹의 클래스는 거의 동일하지만, 유일한 차이는 이름（col-과 col-s-）입니다：
/* 휴대폰에 대한 코드 */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* 태블릿 컴퓨터에 대한 코드 */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* 데스크톱에 대한 코드 */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
동일한 두 그룹의 클래스가 있으면 이상하게 느껴질 수 있지만, 이는 각 단절점에서 열이 무엇이 일어날지 결정하는 데 사용할 수 있는 기회를 제공합니다:
HTML 예제
데스크톱에 대해서:
첫 번째와 세 번째 부분은 모두 3 열을 넘나들 것입니다. 중간 부분은 6 열을 넘나들 것입니다.
태블릿 컴퓨터에 대해서:
첫 번째 부분은 3 열을 넘나들 것입니다, 두 번째 부분은 9 열을 넘나들 것입니다, 세 번째 부분은 앞 두 부분 아래에 표시되며 12 열을 넘나들 것입니다:
<div class="row"> <div class="col-3 col-s-3">...</div> <div class="col-6 col-s-9">...</div> <div class="col-3 col-s-12">...</div> </div>
типичные точки разрыва устройств
높이와 너비가 다른 스크린과 장치는 수두룩하며, 따라서 각 장치에 대한 정확한 브레이크포인트를 만들기는 어렵습니다. 간단화를 위해 다음 다섯 그룹을 대상으로 할 수 있습니다:
예제
/* 초소형 장치（휴대폰, 600px 이하） */
@media only screen and (max-width: 600px) {...}
/* 소형 장치（纵向 태블릿과 대형 스마트폰, 600 픽셀 이상） */
@media only screen and (min-width: 600px) {...}
/* 중형 장치（가로 태블릿, 768 픽셀 이상） */
@media only screen and (min-width: 768px) {...}
/* 대형 장치（노트북/데스크톱, 992px 이상） */
@media only screen and (min-width: 992px) {...}
/* 초대형 장치（대형 노트북과 데스크톱, 1200px 이상） */
@media only screen and (min-width: 1200px) {...}
방향: 인물 / 풍경
미디어 쿼리는 브라우저 방향에 따라 페이지 레이아웃을 변경할 수도 있습니다.
브라우저 창의 너비가 높이보다 크면 적용되는 CSS 속성을 설정할 수 있습니다. 이는 'landscape' 방향으로 알려집니다:
예제
横向模式（landscape mode）로 방향이 되면 웹 페이지 배경이 연파스蓝色이 됩니다:
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
미디어 쿼리로 요소 숨기기
미디어 쿼리의 또 다른 일반적인 사용은 다른 스크린 사이즈에 따라 요소를 숨기는 것입니다:
예제
/* 스크린 사이즈가 600 픽셀 이하면 해당 요소를 숨기세요 */
@media only screen and (max-width: 600px) {
div.example {
display: none;
}
}
미디어 쿼리로 폰트 크기 수정
또한, 다른 스크린 사이즈에 따라 요소의 폰트 크기를 변경할 수 있는 미디어 쿼리를 사용할 수 있습니다:
예제
/* 스크린 사이즈가 601px 이상이면 <div>의 font-size를 80px로 설정하세요 */
@media only screen and (min-width: 601px) {}}
div.example {
font-size: 80px;
}
}
/* 스크린 크기가 600px 또는 더 작을 경우, <div>의 font-size를 30px로 설정합니다 */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
CSS @media 참조 가이드
모든 미디어 타입 및 특성/표현식의 전체 설명은 다음에서 찾을 수 있습니다. CSS 참조 가이드에서 @media 규칙 참조.
