🖥️ CSS 미디어쿼리 생성기

브레이크포인트 목록 (한 줄에 "이름, 폭")

작성 방식

max-width 겹침 방지 간격 (소수 2자리)

브레이크포인트 이름과 폭을 한 줄에 하나씩 적으면 @media 블록을 순서대로 만들어 줍니다. 쉼표나 탭, 공백으로 이름과 폭을 나눌 수 있고 폭에 px을 붙여도 됩니다. 폭이 작은 쪽부터 자동으로 정렬하므로 적는 순서는 상관없습니다.

모바일 퍼스트는 min-width만 써서 기본 스타일 위에 조건을 쌓고, 데스크톱 퍼스트는 max-width로 좁은 화면을 덮습니다. 구간 지정은 각 블록이 한 구간만 담당하도록 min-width와 max-width를 함께 넣습니다. max-width 쪽은 창 폭이 소수로 나오는 경우를 대비해 입력한 겹침 방지 간격만큼 뺀 값을 씁니다. 문법은 W3C CSS Media Queries Level 4 를 따릅니다(2026년 10월 기준).

이 도구는 블록의 뼈대만 만들고 안쪽 선언은 채우지 않습니다. 또한 clamp() 식이나 컨테이너 쿼리, 높이·방향·해상도 조건은 지원하지 않습니다. 이름에 주석을 닫는 문자가 들어 있으면 코드가 깨지지 않도록 지우고 넣습니다. 기기 규격 목록은 수시로 바뀌므로 직접 측정한 폭을 쓰는 편을 권합니다.

자주 묻는 질문

왜 max-width에서 0.02px을 빼나요?

창 폭은 소수로 나올 수 있어서 max-width 768px과 min-width 768px이 동시에 맞는 구간이 생깁니다. 아주 작은 값을 빼면 두 블록이 겹치지 않습니다.

브레이크포인트는 몇 개가 적당한가요?

정해진 정답은 없습니다. 디자인이 실제로 깨지는 폭을 직접 재서 넣는 편이 기기 목록을 따라가는 것보다 안정적입니다.

글자 크기를 폭에 따라 늘리는 식도 나오나요?

아니요. clamp() 식 생성은 지원하지 않고 @media 블록만 만듭니다. 반응형 글자 크기 계산은 별도 도구가 담당합니다.

🖥️CSS 미디어쿼리 브레이크포인트 생성기

관련된 도구

CSS Grid 템플릿 코드 생성기

CSS aspect-ratio 코드 생성기

자주 묻는 질문

관련된 도구

CSS Grid 템플릿 코드 생성기

CSS aspect-ratio 코드 생성기

자주 묻는 질문

같은 카테고리 도구