반응형 웹 디자인 - 미디어 쿼리
미디어 쿼리란 무엇입니까?
미디어 쿼리는 CSS3에 도입된 CSS 기술입니다.
@media특정 조건이 true인 경우에만 CSS 속성 블록을 포함하는 규칙을 사용 합니다.
예시
브라우저 창이 600px 이하인 경우 배경색은 연한 파란색이 됩니다.
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
중단점 추가
이 튜토리얼의 앞부분에서 우리는 행과 열이 있는 웹 페이지를 만들었고 반응이 좋았지만 작은 화면에서는 잘 보이지 않았습니다.
미디어 쿼리가 도움이 될 수 있습니다. 설계의 특정 부분이 중단점의 양쪽에서 다르게 작동하는 중단점을 추가할 수 있습니다.
데스크탑
핸드폰
미디어 쿼리를 사용하여 768px에 중단점을 추가합니다.
예시
화면(브라우저 창)이 768px보다 작아지면 각 열의 너비가 100%여야 합니다.
/* For desktop: */
.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) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
항상 모바일 퍼스트를 위한 디자인
Mobile First는 데스크톱 또는 기타 장치용으로 디자인하기 전에 모바일용으로 디자인하는 것을 의미합니다(이렇게 하면 더 작은 장치에서 페이지 표시 속도가 빨라짐).
이것은 CSS에서 약간의 변경을 해야 한다는 것을 의미합니다.
너비가 768px보다 작아 지면 스타일을 변경하는 대신 너비가 768px보다 커질 때 디자인을 변경해야 합니다 . 이것은 우리의 디자인을 Mobile First로 만들 것입니다:
예시
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width:
768px) {
/* For desktop: */
.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%;}
}
또 다른 중단점
원하는 만큼 중단점을 추가할 수 있습니다.
우리는 또한 태블릿과 휴대폰 사이에 중단점을 삽입할 것입니다.
데스크탑
태블릿
핸드폰
미디어 쿼리(600px)를 하나 더 추가하고 600px보다 큰(768px보다 작은) 장치에 대한 새 클래스 집합을 추가하여 이를 수행합니다.
예시
두 클래스 세트는 거의 동일하며 유일한 차이점은 이름( col-및 col-s-)입니다.
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.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) {
/* For desktop: */
.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 에서 각 중단점에서 열에 어떤 일이 일어날지 결정할 수 있는 기회를 제공합니다.
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>
일반적인 장치 중단점
높이와 너비가 다른 수많은 화면과 장치가 있으므로 각 장치에 대한 정확한 중단점을 만들기가 어렵습니다. 일을 단순하게 유지하기 위해 5개 그룹을 대상으로 지정할 수 있습니다.
예시
/*
Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px)
{...}
/* Small devices (portrait tablets and large phones, 600px and up)
*/
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up)
*/
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large
laptops and desktops,
1200px and up) */
@media only screen and (min-width: 1200px) {...}
방향: 세로/가로
미디어 쿼리를 사용하여 브라우저의 방향에 따라 페이지 레이아웃을 변경할 수도 있습니다.
브라우저 창이 높이보다 넓은 경우에만 적용되는 CSS 속성 집합을 가질 수 있습니다. 이를 "가로" 방향이라고 합니다.
예시
방향이 가로 모드인 경우 웹 페이지의 배경은 하늘색입니다.
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
}
미디어 쿼리로 요소 숨기기
미디어 쿼리의 또 다른 일반적인 용도는 다양한 화면 크기에서 요소를 숨기는 것입니다.
예시
/* If the screen size is 600px wide or less, hide the element */
@media
only screen and (max-width: 600px) {
div.example {
display: none;
}
}
미디어 쿼리로 글꼴 크기 변경
미디어 쿼리를 사용하여 다양한 화면 크기에서 요소의 글꼴 크기를 변경할 수도 있습니다.
가변 글꼴 크기.
예시
/* If the screen size is 601px or
more, set the font-size of <div> to 80px */
@media only screen and (min-width:
601px) {
div.example {
font-size: 80px;
}
}
/* If the screen size is 600px or
less,
set the font-size of <div> to 30px */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
CSS @미디어 참조
모든 미디어 유형 및 기능/표현에 대한 전체 개요는 CSS 참조에서 @media 규칙을 확인하세요 .