CSS 미디어 쿼리 - 예제
- 이전 페이지 CSS 미디어 쿼리
- 다음 페이지 RWD 개요
CSS 미디어 쿼리 - 더 많은 예제
미디어 쿼리를 사용하는 더 많은 예제를 보겠습니다.
미디어 쿼리는 다른 장치에 맞춘 스타일 시트를 전달하는 인기 있는 기술입니다.
다음은 각 장치의 배경색을 변경하는 간단한 예제를 보여줍니다:
실례
/* body의 배경색을 갈색으로 설정 */
body {
background-color: tan;
}
/* 992 픽셀 이하의 스크린에서 배경색을 파란색으로 설정 */
@media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
/* 600 픽셀 또는 더 작은 스크린에서 배경색을 올리브색으로 설정 */
@media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
992px와 600px를 정확하게 사용하는 이유를 궁금해 하시나요? 이들은 우리가 '표준 브레이크포인트'(typical breakpoints)라고 부르는 장치입니다. 우리의 반응형 Web 디자인 튜토리얼 중국어 학습에 대해 더 많은 지식을 배우십시오.
메뉴의 미디어 쿼리
이 예제에서는 미디어 쿼리를 사용하여 반응형 네비게이션 메뉴를 생성했습니다. 이 메뉴는 다른 화면 크기에 따라 다릅니다.
실례
/* 네비게이션 바 컨테이너 */
.topnav {
overflow: hidden;
background-color: #333;
}
/* 네비게이션 바 링크 */
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 너비가 600픽셀 또는 더 작다면, 메뉴 링크를 겹치게 하고 평행하게 하지 않도록 합니다 */
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
열의 미디어 쿼리
미디어 쿼리의 일반적인 사용법은 플렉시블 레이아웃을 생성하는 것입니다. 이 예제에서는 네 열, 두 열, 전체 너비 열 사이에서 변화하는 레이아웃을 생성했습니다. 이는 다른 화면 크기에 따라 다릅니다：
대형 화면：
중형 화면：
소형 화면：
실례
/* 서로 가까운 플로팅 네 열을 생성합니다 */
.column {
float: left;
width: 25%;
}
/* 992px 또는 더 작은 화면에서 네 열을 두 열로 변경합니다 */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* 너비가 600픽셀 이하 또는 같다면, 열을 겹치게 하고 평행하게 하지 않도록 합니다 */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
훌륭한 팁:더 현대적인 열 레이아웃 생성 방법은 CSS Flexbox를 사용하는 것입니다（아래의 예제를 참조하세요）。그러나 Internet Explorer 10 및 이전 버전은 이를 지원하지 않습니다. IE6-10의 지원이 필요하다면, 상단에 보여진 것처럼 플로팅을 사용하세요。
플렉시블 박스 레이아웃 모듈에 대한 더 많은 지식을 배우기 위해 CSS Flexbox 이 장을 학습하세요。
반응형 웹 디자인에 대한 더 많은 지식을 배우기 위해 우리의 반응형 Web 디자인 튜토리얼.
실례
/* 플렉시블 박스의 컨테이너 */
.row {
display: flex;
flex-wrap: wrap;
}
/* 네 개의 동일한 열을 생성합니다 */
.column {
flex: 25%;
padding: 20px;
}
/* 992px 또는 더 작은 화면에서 네 열을 두 열로 변경합니다 */
@media screen and (max-width: 992px) {
.column {
flex: 50%;
}
}
/* 너비가 600픽셀 이하 또는 같다면, 열을 겹치게 하고 평행하게 하지 않도록 합니다 */
@media screen and (max-width: 600px) {
.row {
flex-direction: column;
}
}
미디어 쿼리로 요소 숨기기
화면 크기에 따라 요소를 숨기는 또 다른 일반적인 미디어 쿼리 사용법은 다음과 같습니다：
작은 스크린에서 숨기기.
실례
/* 스크린 크기가 600픽셀 또는 더 작을 때, 요소를 숨깁니다 */
@media screen and (max-width: 600px) {
div.example {
display: none;
}
}
미디어 쿼리로 글꼴 크기 변경
다른 스크린 크기에 따라 요소의 글꼴 크기를 변경할 수 있는 미디어 쿼리를 사용할 수 있습니다:
가변 글꼴 크기
실례
/* 스크린 크기가 600픽셀 이상일 때, <div>의 글꼴 크기를 80픽셀로 설정합니다 */
@media screen and (min-width: 600px) {
div.example {
font-size: 80px;
}
}
/* 스크린 크기가 600px 또는 더 작을 때, <div>의 글꼴 크기를 30px로 설정합니다 */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
유연한 웹사이트
이 예제에서는 미디어 쿼리와 flexbox를 함께 사용하여 반응형 웹사이트를 만들어, 유연한 네비게이션 패널과 유연한 콘텐츠를 포함합니다.
실례
방향: 인물 / 풍경
미디어 쿼리는 브라우저의 방향에 따라 페이지 레이아웃을 변경할 수 있습니다.
브라우저 창의 너비가 높이보다 크면 적용되는 CSS 속성 집합을 설정할 수 있습니다. 이는 대칭 모드라고 합니다:
실례
가로 모드에 있을 때는 연한 파란 배경색을 사용합니다:
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
최소 너비에서 최대 너비로
max-width와 min-width 속성을 사용하여 최소 너비와 최대 너비를 설정할 수 있습니다.
예를 들어, 브라우저의 너비가 600에서 900 픽셀 사이이면, <div> 요소의 외관을 변경합니다:
실례
@media screen and (max-width: 900px) and (min-width: 600px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
추가적인 값 사용: 아래 예제에서는, 추가적인 미디어 쿼리를 기존 미디어 쿼리에 추가하기 위해 콤마(OR 연산자와 유사)를 사용합니다:
실례
/* 当宽度在 600 像素到 900 像素之间或大于 1100 像素时 - 更改 <div> 的外观 */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
CSS @media 참조 가이드
모든 미디어 타입과 특성/표현식의 완전한 설명을 확인하려면 CSS 참조에서 @media 규칙.
훌륭한 팁:반응형 Web 디자인(다양한 장치와 스크린에 대한 대응)에 대해 더 많은 지식을 습득하고, 미디어 쿼리 브레이크포인트를 사용하는 방법을 배우기 위해, 우리의 반응형 Web 디자인 튜토리얼.
- 이전 페이지 CSS 미디어 쿼리
- 다음 페이지 RWD 개요
