CSS 미디어 유형 및 쿼리는 사용자가 장치의 일반 유형(화면, 인쇄 등) 또는 특성(화면 해상도, 표시 영역 크기 등)에 따라 특정 스타일을 정의하는 데 도움이 됩니다.
구문
다음은 미디어 쿼리 구문입니다. -
@미디어 아님 | 미디어 유형 및 (표현식) { CSS-Code;}만 여기에서 미디어 쿼리는 다음과 같은 경우 적용됩니다. -
- mediatype은 문서가 렌더링되는 기기 유형과 일치합니다.
- not/only 연산자가 정의되지 않은 경우 미디어 쿼리가 모든 미디어 유형에 적용됩니다.
- not/only 연산자를 지정하면 미디어 쿼리가 특정 미디어 유형에만 적용되지 않습니다.
사용자는 각각 다른 미디어에 해당하는 다른 스타일시트를 가질 수 있습니다. 예를 들어, 사용자는 인쇄 매체와 스크린 매체에 대해 다른 스타일시트를 가질 수 있습니다.
그리고,
다음은 CSS3에 나열된 미디어 유형입니다 -
| Sr.No | 값 및 설명 |
|---|---|
| 1 | 전체 스타일시트는 모든 미디어 유형 장치에 적용됩니다. |
| 2 | 인쇄 스타일시트는 프린터에 적용됩니다. |
| 3 | 화면 스타일시트는 컴퓨터 화면, 태블릿, 스마트폰 등에 적용됩니다. |
| 4 | 음성 스타일시트는 페이지를 소리내어 "읽는" 스크린 리더에 적용됩니다. |
다음은 미디어 종속 스타일시트를 만드는 방법입니다 -
- @media At-rules 사용
- @import At-rules 사용
- 미디어 속성이 있는 HTML 요소 사용
예시
CSS 미디어 쿼리의 예를 살펴보겠습니다 -
출력
이것은 다음과 같은 출력을 생성합니다 -
화면 크기가 850px 이상인 경우 -
화면 크기가 550px에서 850px 사이인 경우 -
화면 크기가 550px 미만인 경우 -
예시
CSS 미디어 쿼리에 대한 또 다른 예를 살펴보겠습니다. HTML 문서 -
Vivamus commodo, dolor eu porttitor sagittis, orci nisl consectetur ipsum, vel volutpat nibh lectus at erat. Cras scelerisque faucibus tellus aliquam commodo.Donec sem urna, facilis at ipsum id, viverra sollicitudin est. Nam rhoncus sollicitudin lorem, accumsan purus varius eget.
울트라스 렉투스 니시. Nulla varius ex ut totortor congue viverra. Sed sodales vehicula leo, vitae interdum elit vehicula nec. Donec turpis nunc, iaculis et nisi sit amet, feugiat lacinia metus.
Suspendisse eget ligula et risus lobortis ornare id at elit. 일시 중단 가능성. 비바무스 펠렌테스크 엘리펜드 펠렌테스크. Vestibulum neque ante, iaculis a sagittis et, fermentum at metus.
CSS 문서(screen.css):p { 색상:네이비; 글꼴 스타일:기울임꼴; }.two { 색상:#c303c3; 글꼴 크기:20px; }body { background-color:Honeydew;}CSS 문서(print.css):p { color:red; 글꼴 스타일:기울임꼴;}.two { 색상:#989898; 글꼴 크기:40px; }출력
이것은 다음과 같은 출력을 생성합니다 -
문서가 화면 미디어 유형에 표시되는 경우 -
문서가 인쇄 매체 유형에서 보이는 경우 -
