"CSS"의 두 판 사이의 차이
(→미디어 쿼리) |
|||
5번째 줄: | 5번째 줄: | ||
== 미디어 쿼리 == | == 미디어 쿼리 == | ||
− | https://developer.mozilla.org/ko/docs/Web/CSS/CSS_media_queries/Using_media_queries | + | 출처: https://developer.mozilla.org/ko/docs/Web/CSS/CSS_media_queries/Using_media_queries |
+ | |||
+ | 미디어 쿼리는 단말기의 유형(출력물 vs. 화면)과, 어떤 특성이나 수치(화면 해상도, 뷰포트 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용합니다. | ||
+ | |||
+ | === 미디어 유형 === | ||
+ | |||
+ | * all | ||
+ | * print | ||
+ | * screen | ||
+ | * speech | ||
+ | |||
+ | === 미디어 특성 === | ||
+ | 사용자 에이전트, 출력 장치, 환경 등의 특징을 나타냅니다. | ||
+ | {| class="wikitable" | ||
+ | |+ | ||
+ | !이름 | ||
+ | !요약 | ||
+ | !참고 | ||
+ | |- | ||
+ | |color | ||
+ | |출력 장치의 색상 채널별 비트 수, 흑백일 땐 0 | ||
+ | | | ||
+ | |- | ||
+ | |device-width (en-US) | ||
+ | |출력 장치 렌더링 표면의 너비 | ||
+ | |Media Queries Level 4에서 제거 | ||
+ | |- | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | |} | ||
+ | |||
+ | === 논리 연산자 === | ||
+ | |||
+ | * and | ||
+ | * not | ||
+ | * only | ||
+ | * , | ||
+ | |||
+ | === 미디어 유형 특정하기 === | ||
+ | <syntaxhighlight lang="css"> | ||
+ | @media print { ... } | ||
+ | |||
+ | </syntaxhighlight><syntaxhighlight lang="css"> | ||
+ | @media screen, print { ... } | ||
+ | </syntaxhighlight> | ||
+ | |||
+ | === 미디어 기능 특정하기 === | ||
+ | 다음의 예제는 사용자의 주 입력 방식(마우스 등)이 요소 위에 호버할 수 있으면 스타일을 적용합니다.<syntaxhighlight lang="css"> | ||
+ | @media (hover: hover) { ... } | ||
+ | </syntaxhighlight><syntaxhighlight lang="css"> | ||
+ | @media (max-width: 12450px) { ... } | ||
+ | </syntaxhighlight>미디어 기능 쿼리를 값 없이 생성할 경우 주어진 기능의 값이 <code>0</code>이 아닐 때 (Level 4부터는 <code>0</code>과 <code>none</code>이 아닐 때) 중첩 스타일을 적용합니다. 그러므로 다음 CSS는 흑백이 아닌 모든 장치에 해당합니다.<syntaxhighlight lang="css"> | ||
+ | @media (color) { ... } | ||
+ | </syntaxhighlight><syntaxhighlight lang="css"> | ||
+ | @media speech and (aspect-ratio: 11/5) { ... } | ||
+ | </syntaxhighlight> | ||
+ | |||
+ | === 복잡한 미디어 쿼리 생성 === | ||
+ | |||
+ | ==== 다수의 유형과 기능 조합하기 ==== | ||
+ | <syntaxhighlight lang="css"> | ||
+ | @media (min-width: 30em) and (orientation: landscape) { ... } | ||
+ | |||
+ | </syntaxhighlight> | ||
+ | |||
+ | ==== 다수의 쿼리 판별 ==== | ||
+ | or<syntaxhighlight lang="css"> | ||
+ | @media (min-height: 680px), screen and (orientation: portrait) { ... } | ||
+ | |||
+ | </syntaxhighlight> | ||
+ | |||
+ | ==== 쿼리의 뜻 반전하기 ==== | ||
+ | <syntaxhighlight lang="css"> | ||
+ | @media not all and (monochrome) { ... } | ||
+ | |||
+ | </syntaxhighlight> | ||
+ | |||
+ | ==== 구형 브라우저와의 호환성 향상하기 ==== | ||
+ | <code>only</code> 키워드는 미디어기능을 가진 미디어쿼리를 지원하지 않는 구형 브라우저가 주어진 스타일을 적용하지 못하게 합니다. ''신형브라우저에는 아무런 영향을 주지 않습니다.''<syntaxhighlight lang="css"> | ||
+ | @media only screen and (color) { ... } | ||
+ | |||
+ | </syntaxhighlight> | ||
+ | |||
+ | === Level 4의 구문 향상 === | ||
+ | '범위'<syntaxhighlight lang="css"> | ||
+ | @media (width <= 30em) { ... } | ||
+ | |||
+ | </syntaxhighlight><syntaxhighlight lang="css"> | ||
+ | @media (30em <= width <= 50em ) { ... } | ||
+ | |||
+ | </syntaxhighlight> | ||
+ | |||
+ | ==== not으로 기능 부정 ==== | ||
+ | <syntaxhighlight lang="css"> | ||
+ | @media (not(hover)) { ... } | ||
+ | |||
+ | </syntaxhighlight> | ||
+ | |||
+ | ==== or로 다수의 기능 판별 ==== | ||
+ | <syntaxhighlight lang="css"> | ||
+ | @media (not (color)) or (hover) { ... } | ||
+ | |||
+ | </syntaxhighlight><br /> | ||
[[분류:프로그래밍]] | [[분류:프로그래밍]] |
2023년 12월 1일 (금) 01:19 기준 최신판
Cascading Style Sheet (종속형 시트)
목차
selector[편집 | 원본 편집]
https://www.w3schools.com/cssref/css_selectors.asp
미디어 쿼리[편집 | 원본 편집]
출처: https://developer.mozilla.org/ko/docs/Web/CSS/CSS_media_queries/Using_media_queries
미디어 쿼리는 단말기의 유형(출력물 vs. 화면)과, 어떤 특성이나 수치(화면 해상도, 뷰포트 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용합니다.
미디어 유형[편집 | 원본 편집]
- all
- screen
- speech
미디어 특성[편집 | 원본 편집]
사용자 에이전트, 출력 장치, 환경 등의 특징을 나타냅니다.
이름 | 요약 | 참고 |
---|---|---|
color | 출력 장치의 색상 채널별 비트 수, 흑백일 땐 0 | |
device-width (en-US) | 출력 장치 렌더링 표면의 너비 | Media Queries Level 4에서 제거 |
논리 연산자[편집 | 원본 편집]
- and
- not
- only
- ,
미디어 유형 특정하기[편집 | 원본 편집]
@media print { ... }
@media screen, print { ... }
미디어 기능 특정하기[편집 | 원본 편집]
다음의 예제는 사용자의 주 입력 방식(마우스 등)이 요소 위에 호버할 수 있으면 스타일을 적용합니다.
@media (hover: hover) { ... }
@media (max-width: 12450px) { ... }
미디어 기능 쿼리를 값 없이 생성할 경우 주어진 기능의 값이 0
이 아닐 때 (Level 4부터는 0
과 none
이 아닐 때) 중첩 스타일을 적용합니다. 그러므로 다음 CSS는 흑백이 아닌 모든 장치에 해당합니다.
@media (color) { ... }
@media speech and (aspect-ratio: 11/5) { ... }
복잡한 미디어 쿼리 생성[편집 | 원본 편집]
다수의 유형과 기능 조합하기[편집 | 원본 편집]
@media (min-width: 30em) and (orientation: landscape) { ... }
다수의 쿼리 판별[편집 | 원본 편집]
or
@media (min-height: 680px), screen and (orientation: portrait) { ... }
쿼리의 뜻 반전하기[편집 | 원본 편집]
@media not all and (monochrome) { ... }
구형 브라우저와의 호환성 향상하기[편집 | 원본 편집]
only
키워드는 미디어기능을 가진 미디어쿼리를 지원하지 않는 구형 브라우저가 주어진 스타일을 적용하지 못하게 합니다. 신형브라우저에는 아무런 영향을 주지 않습니다.
@media only screen and (color) { ... }
Level 4의 구문 향상[편집 | 원본 편집]
'범위'
@media (width <= 30em) { ... }
@media (30em <= width <= 50em ) { ... }
not으로 기능 부정[편집 | 원본 편집]
@media (not(hover)) { ... }
or로 다수의 기능 판별[편집 | 원본 편집]
@media (not (color)) or (hover) { ... }