구문과 일반 중단점
미디어 쿼리 구문과 현대 웹 디자인에서 사용하는 표준 중단점을 학습합니다.
구문과 일반 중단점은(는) CoddyKit의 무료 CSS Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
미디어 쿼리 구문
미디어 쿼리는 CSS 규칙을 감싸며 조건이 참일 때만 해당 규칙을 적용합니다. 기본 구문은 다음과 같습니다.
<div class="box">Media query syntax demo</div>
미디어 유형
가장 일반적인 미디어 유형은 다음과 같습니다.
all— 모든 출력 장치에 적용(기본값)screen— 컴퓨터 및 휴대폰 화면print— 인쇄 미리 보기 및 인쇄용speech— 화면 낭독기
<div class="layout">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
미디어 기능
미디어 기능은 장치 또는 뷰포트의 특성을 나타냅니다. 일반적인 기능으로는 width, height, orientation, resolution, prefers-color-scheme, hover가 있습니다.
최소 너비 쿼리
가장 많이 사용되는 기능으로, 특정 너비 이상인 화면을 대상으로 합니다. 모바일 우선 방식입니다.
<div class="box">Breakpoint ladder</div>
일반적인 중단점
모든 상황에 보편적으로 맞는 중단점은 없습니다. 다음은 일반적인 장치 너비를 기준으로 한 자주 사용하는 설정입니다.
- 480픽셀 — 큰 휴대폰
- 768픽셀 — 태블릿
- 1024픽셀 — 소형 데스크톱, 가로 방향 태블릿
- 1280픽셀 — 일반 데스크톱
- 1536픽셀 — 대형 데스크톱
콘텐츠 기반 중단점
장치별 중단점을 정하는 대신, 현대적인 방식에서는 콘텐츠가 깨지는 지점에 중단점을 설정합니다. 한 크기에서 디자인한 뒤 크기를 조정하고, 레이아웃이 보기 좋지 않게 변하기 시작하는 지점에 중단점을 추가하십시오.
범위 구문(최신 방식)
최신 CSS는 미디어 쿼리 안에서 범위 구문을 지원하므로 min과 max를 조합하는 것보다 읽기 쉽습니다.
<div class="panel">Range syntax demo</div>
여러 조건으로 결합하기
여러 조건을 동시에 요구하려면 and를 사용하십시오.
<div class="sidebar">Sidebar</div>
조건 부정하기
미디어 쿼리를 부정하려면 not을 사용하십시오. 쿼리와 일치하지 않는 모든 대상에 적용됩니다.
<div class="doc">Not-screen demo (affects print/speech only)</div>
쉼표로 여러 쿼리 사용하기
선택자 목록처럼 여러 쿼리를 쉼표로 구분하십시오. ANY 쿼리가 일치하면 스타일이 적용됩니다.
<div class="page">
Multiple queries with comma
<div class="nav-drawer">Nav drawer (hidden on wide screens or print)</div>
</div>
em 기반 중단점
중단점에 px 대신 em 단위를 사용하면 사용자의 브라우저 글꼴 크기 설정에 따라 중단점도 조정되어 접근성이 향상됩니다.
<div class="box">Em-based breakpoints</div>
빠른 확인
너비가 최소 1024픽셀인 화면과 일치하는 미디어 쿼리는 무엇입니까?
복습
미디어 쿼리는 장치 또는 뷰포트의 특성에 따라 조건부로 CSS를 적용합니다. 모바일 우선 방식에는 min-width를, 데스크톱 우선 방식에는 max-width를 사용하십시오. 임의의 장치 크기가 아니라 콘텐츠에 필요한 지점에 중단점을 설정하십시오. 최신 범위 구문을 사용하면 가독성이 향상됩니다.
자주 묻는 질문
“구문과 일반 중단점” 강의는 무료인가요?
네 — “구문과 일반 중단점” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 CSS Academy 강의 전체를 잠금 해제할 수 있습니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“구문과 일반 중단점”에서 뭘 배우나요?
미디어 쿼리 구문과 현대 웹 디자인에서 사용하는 표준 중단점을 학습합니다. 브라우저에서 직접 실행하는 실습 코드로 CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
CSS Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“구문과 일반 중단점” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.