티스토리 뷰

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)방향을 설정합니다.

공유하기(Share) 더보기

  • 네이버 블러그 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
  • 트위터 공유하기

공감하기(Like) 더보기

UP NEXT : Ads by Google

질문하기(Questions)
댓글쓰기 폼