CSS

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
• print
• 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) { ... }