[CSS] 미디어 쿼리(Media Query) 장치 화면 너비 브레이크포인트 정리

미디어 쿼리(Media Query) 장치 화면 너비 브레이크포인트 정리

들어가며

• CSS의 미디어 쿼리(Media Query)를 이용하여 반응형 디자인(Responsive Design)을 만들 수 있다.
• 이때 사용할 수 있는 장치(Device)의 화면 너비 브레이크포인트(Breakpoint)에 대해 정리해본다.

 

장치 화면 너비 브레이크포인트

• Portrait 모드는 세로 화면, Landscape 모드는 가로 화면을 의미한다.

장치	브레이크포인트	비고
모바일	320px	Portrait 모드 예) iPhone 5, iPhone SE
	480px	Landscape 모드
태블릿	768px	Portrait 모드 예) iPad
태블릿 / 컴퓨터	1024px	Landscape 모드
컴퓨터	1200px 이상	Desktop, Laptop

ⓒ PureCode AI blog

예제 코드

/* 모바일 Portrait 모드 (320px 이상) */
@media only screen and (min-width: 320px) { ... }

/* 모바일 Landscape 모드 (480px 이상) */
@media only screen and (min-width: 480px) { ... }

/* 태블릿 Portrait 모드 (768px 이상) */
@media only screen and (min-width: 768px) { ... }

/* 태블릿 / 컴퓨터 Landscape 모드 (1024px 이상) */
@media only screen and (min-width: 1024px) { ... }

/* 컴퓨터 Desktop, Laptop (1200px 이상) */
@media only screen and (min-width: 1200px) { ... }

 

@only screen@은 CSS 미디어 쿼리에서 사용하는 미디어 타입 중 하나로, 해당 스타일이 화면을 가진 디스플레이 장치(컴퓨터 모니터, 스마트폰, 태블릿 등)에서만 적용되도록 하는 조건이다.

 

(참고) Tailwind CSS

• Tailwind CSS에서는 장치의 브레이크포인트를 다음과 같이 정의한다.

Breakpoint Prefix	최소 너비	CSS	비고
@sm@	640px	@＠media (min-width: 640px) { ... }@	모바일 기기
@md@	768px	@＠media (min-width: 768px) { ... }@	태블릿 기기
@lg@	1024px	@＠media (min-width: 1024px) { ... }@	작은 노트북, 데스크탑 화면
@xl@	1280px	@＠media (min-width: 1280px) { ... }@	더 큰 데스크탑 화면
@2xl@	1536px	@＠media (min-width: 1536px) { ... }@	고해상도 모니터, 대형 화면

 

참고 사이트

Essential CSS Breakpoints for The Ultimate Responsive Design - Blogs

미디어 쿼리 초보자 안내서 - Web 개발 학습하기 | MDN

Responsive Design - Tailwind CSS