본문 바로가기

Webstoryboy

Category

Explanation

CSS

[CSS] 미디어쿼리

미디어 쿼리

CSS에서 레이아웃을 작성하기 위한 새로운 속성입니다.


미디어 쿼리(Media Queries)

미디어 쿼리는 화면 크기에 따른 각각의 속성 값을 지정하여, 여러가지 화면을 구성하는 기술입니다.

미디어 쿼리 사용 방법

  • CSS 파일 내에 사용하는 방법
  • link 요소에 사용하는 방법
  • @import에 사용하는 방법

미디어쿼리 속성

종류 예시
aspect-ratio 화면의 가로 세로 비율(1/1)을 설정합니다.
device-aspect-ratio 모니터 화면의 가로 세로 비율(16/9)을 설정합니다.
width 브라우저 화면의 가로 크기를 설정합니다.
height 브라우저 화면의 세로 크기를 설정합니다.
device-width 모니터 화면의 가로 크기를 설정합니다.
device-height 모니터 화면의 세로 크기를 설정합니다.
device-pixel-ratio 화면의 픽셀 밀도값을 설정합니다.
resolution 화면의 픽셀 밀도값을 설정합니다.
orientation 디바이스의 가로(landscape), 세로(portrait)방향을 설정합니다.

더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기