CSS - 미디어 쿼리: 초보자 가이드
안녕하세요, 미래의 웹 개발자 여러분! 오늘 우리는 CSS 미디어 쿼리의 흥미로운 세상으로 뛰어들어 볼 거예요. 여러분의 친절한 이웃 컴퓨터 선생님이자, 저는 이 여정을 단계별로 안내해드리겠습니다. 걱정하지 마세요, 코드를 작성한 적이 없어도 괜찮아요 - 기본부터 시작해 점진적으로 학습해 나갈 거예요. 그러니 커피 한 잔 (또는 차, 만약 그게 당신의 취향이라면)을 마시고, 시작해 보세요!
미디어 쿼리는 무엇인가요?
복잡한 부분에 이전하기 전에, 미디어 쿼리가 무엇인지 이해해 보겠습니다. 당신이 컴퓨터에서 멋지게 보이는 웹사이트를 디자인하고 있다고 상상해 봅시다. 하지만 누군가가 그것을 휴대폰에서 볼 때 어떻게 될까요? 여기서 미디어 쿼리가 유용하게 쓰입니다! 미디어 쿼리는 당신의 웹사이트가 다양한 화면 크기와 장치에 맞게 적응할 수 있게 해줍니다. 마치 환경에 따라 모습을 바꾸는 변色竜 웹사이트 같은 것입니다.
문법
이제 미디어 쿼리의 기본 문법을 살펴보겠습니다:
@media mediatype and (condition) {
/* CSS 규칙을 여기에 작성합니다 */
}이것이 무서워하지 마세요! 하나씩 풀어설명해드리겠습니다:
-
@media: 이는 브라우저에게 "이제 조건을 설정할 거야!"라고 알립니다. -
mediatype: 이는 우리가 타겟으로 삼는 미디어 유형을 지정합니다 (곧 다루겠습니다). -
and: 이는 조건을 결합하는 데 사용됩니다. -
(condition): 이는 우리가 설정하는 구체적인 조건입니다.
미디어 유형
미디어 유형은 브라우저에게 어떤 종류의 장치를 타겟으로 삼는지 알립니다. 주요 유형은 다음과 같습니다:
| 미디어 유형 | 설명 |
|---|---|
| all | 모든 장치에 적용됨 |
| 프린터용 | |
| screen | 컴퓨터 화면, 태블릿, 스마트폰용 |
논리 연산자
논리 연산자를 사용하여 더 복잡한 쿼리를 만들 수 있습니다:
| 연산자 | 설명 |
|---|---|
| and | 여러 미디어 기능을 결합 |
| not | 미디어 쿼리를 부정 |
| only | 전체 쿼리가 일치할 때에만 스타일 적용 |
| , | 여러 미디어 쿼리를 결합 |
CSS 미디어 유형 - All
all 미디어 유형은 다양한 장치에 작동하는 스위스 아ーノ이 다이스 - 모든 장치에 적용됩니다. 예를 들어보겠습니다:
@media all {
body {
background-color: lightblue;
}
}이것은 모든 장치에서 배경색을 연蓝으로 설정합니다. 간단하지 않나요?
CSS 미디어 유형 - Print
print 미디어 유형은 누군가가 인쇄를 원할 때 웹 페이지를 스타일링하는 데 완벽합니다. 실제로 사용해 보겠습니다:
@media print {
body {
font-size: 12pt;
}
.no-print {
display: none;
}
}이것은 인쇄 시 읽기 쉽도록 글자 크기를 늘리고, no-print 클래스를 가진 요소를 숨깁니다.
CSS 미디어 유형 - Screen
screen 미디어 유형은 가장 자주 사용할 것입니다. 모든 화면 기반 장치에 적용됩니다. 예를 들어보겠습니다:
@media screen and (max-width: 600px) {
.menu {
width: 100%;
}
}이것은 화면 너비가 600픽셀 이하일 때 메뉴를 화면 전체 너비로 설정합니다.
CSS 미디어 유형 - 쉼표 사용
쉼표를 사용하여 여러 미디어 유형을 타겟으로 삼을 수 있습니다. 여러 친구를 파티에 초대하는 것과 같습니다:
@media screen, print {
body {
line-height: 1.5;
}
}이것은 화면과 인쇄 미디어 유형 모두에 줄 간격을 설정합니다.
CSS 미디어 유형 - Only 사용
only 키워드는 클럽의 경비원과 같습니다. 오래된 브라우저가 미디어 쿼리를 지원하지 않아도 스타일이 적용되지 않도록 합니다:
@media only screen and (max-width: 600px) {
.container {
width: 100%;
}
}CSS 미디어 쿼리 - 범위 지정
우리는 조건에 대해 범위를 지정할 수도 있습니다:
@media screen and (min-width: 600px) and (max-width: 900px) {
.sidebar {
display: none;
}
}이것은 화면 너비가 600px에서 900px 사이일 때 사이드바를 숨깁니다.
미디어 기능
미디어 기능은 사용자의 장치나 브라우저의 특정 특성을 테스트할 수 있게 해줍니다. 일반적인 기능을 몇 가지 소개하겠습니다:
| 기능 | 설명 |
|---|---|
| width | 뷰포트의 너비 |
| height | 뷰포트의 높이 |
| aspect-ratio | 너비와 높이의 비율 |
| orientation | 풍경 모드 또는 세로 모드 |
| resolution | 장치의 픽셀 밀도 |
복잡한 미디어 쿼리 생성
이제 모든 것을 하나로 모아 더 복잡한 예제를 보겠습니다:
@media screen and (min-width: 600px) and (max-width: 900px) and (orientation: landscape) {
.grid {
display: flex;
flex-wrap: wrap;
}
.grid-item {
width: 50%;
}
}이것은 풍경 모드로 화면 너비가 600px에서 900px 사이인 경우에 2열 레이아웃을 만듭니다.
CSS 미디어 쿼리 - 여러 유형 또는 기능 결합
and 연산자를 사용하여 여러 유형 또는 기능을 결합할 수 있습니다:
@media screen and (min-width: 600px) and (max-width: 900px), print and (max-width: 600px) {
.content {
font-size: 14px;
}
}이것은 화면 너비가 600px에서 900px 사이인 경우 또는 인쇄 시 너비가 600px 이하인 경우에 스타일을 적용합니다.
CSS 미디어 쿼리 - 여러 쿼리 테스트
때로는 여러 쿼리 중 하나가 참이면 스타일을 적용하고 싶을 수 있습니다. 이 경우 쉼표를 사용합니다:
@media (min-width: 600px), (orientation: landscape) {
.header {
position: sticky;
top: 0;
}
}이것은 화면 너비가 최소 600px인 경우 또는 풍경 모드인 경우에 헤더를 고정합니다.
CSS 미디어 쿼리 - 쿼리 의미 반전
not 키워드를 사용하여 쿼리의 의미를 반전할 수 있습니다:
@media not all and (orientation: landscape) {
.sidebar {
float: left;
}
}이것은 장치가 풍경 모드인 경우를 제외하고 사이드바를 왼쪽에浮动시킵니다.
CSS 미디어 쿼리 - 오래된 브라우저와의 호환성 개선
오래된 브라우저가 미디어 쿼리를 지원하지 않는 경우, 대체 스타일을 제공할 수 있습니다:
.container {
width: 100%; /* 오래된 브라우저 대체 스타일 */
}
@media screen and (min-width: 600px) {
.container {
width: 80%;
}
}이것은 오래된 브라우저에서도 적절한 레이아웃을 유지합니다.
그리고 이제 여러분은 CSS 미디어 쿼리의 세계로 첫 걸음을 뗐습니다. 연습이 완벽을 이루는 것을 잊지 마세요, 그러니 이 개념들을 실험해 보세요. 행복한 코딩을!
Credits: Image by storyset