css_미디어 쿼리(media query)

jhson·2023년 12월 18일
0

css

목록 보기
21/28

미디어 쿼리(media query)

  • 미디어 타입을 인식하고 콘텐츠를 읽어들이는 기기나 브라우저의 물리적 속성을 감지할 수 있는 유용한 모듈(기능)

미디어 쿼리의 구성 요소

  • 미디어 타입
  • 조건에 대한 쿼리(물음) : ex)화면 크기, 배율
@media 미디어 타입 and 조건에 대한 쿼리{
	미디어 타입 & 조건 모두 만족 시 덮어씌울 스타일 선언문
}
@media screen and (max-width: 800px){
=>스크린의 width가 800px 이하일 때(최대 너비 768px 이하일 때) 스타일 선언문 추가
}

### 미디어 타입과 쿼리 속성명과 정의 - min-width : 디스플레이 영역의 최소 너비 - max-width : 디스플레이 영역의 최대 너비 - min-height : 디스필레이 영역의 최소 높이 - max-height : 디스플레이 영역의 최대 높이
  • orientation : portrait 또는 landscape 감지
  • color : 기기의 색상 당 비트 수
  • color-index : 출력 기기의 색상 테이블 수
  • aspect-ratio : 디스필레이 영역의 너비와 높이의 비율

profile
게임회사 주니어 개발pm에서 프론트엔드 개발자로 전향하는 과정

0개의 댓글