PC 퍼스트·모바일 퍼스트 중 고르고 기기별 폭만 넣으면 미디어쿼리 뼈대 코드를 바로 만들고 복사할 수 있습니다.
💡 미디어쿼리 코드
📊 적용 안내
* 미디어쿼리 안 스타일은 CSS 파일 맨 아래에 두는 편이 안전합니다. 위에 두면 아래에 있는 일반 규칙에 덮여 적용이 안 될 수 있습니다.
💡 미디어쿼리로 화면 폭마다 스타일 나누기
스마트폰·태블릿·PC에서 같은 페이지를 쓸 때, 폭마다 레이아웃을 바꾸는 데 쓰는 것이 미디어쿼리(@media)입니다. 중단점(브레이크포인트) 숫자와 작성 순서가 어긋나면, 기대한 폭에서 스타일이 안 바뀌거나 가로·세로를 돌렸을 때 깨져 보이기 쉽습니다. 이 도구는 PC 퍼스트·모바일 퍼스트 중 하나와 기기별 폭만 고르면, 그 순서에 맞는 미디어쿼리 뼈대 코드를 바로 만들어 줍니다.
기본 숫자는 부트스트랩 계열에서 자주 쓰는 구간에 가깝습니다(예: 576·768·1024·1200). 프로젝트에 맞게 값을 바꾸거나, 필요 없는 기기만 체크를 끌 수 있습니다.
📊 자주 쓰는 폭 구간
아래는 실무에서 자주 나누는 대략적인 구간입니다. 생성기 기본값과 맞춰 두었고, 사이트 디자인에 따라 숫자를 조금 옮겨도 됩니다.
| 기기 | 흔한 폭 기준 | 레이아웃 느낌 | 자주 하는 조정 |
|---|---|---|---|
| 스마트폰 | 576px 이하 | 1열 세로 배치가 많음 | 메뉴를 접는 버튼으로 바꾸기 |
| 태블릿 | 577px ~ 768px | 2열 카드·여백 조정 | 가로·세로 전환 시 여백 확인 |
| 노트북 | 769px ~ 1024px | 3열 이상 목록이 나오기 쉬움 | 사이드바·본문 폭 조절 |
| 일반 PC / 넓은 모니터 | 1200px 이상 | 가로로 넓은 배치 | 본문 max-width로 너무 퍼지지 않게 |
📌 PC 퍼스트와 모바일 퍼스트
PC 퍼스트는 넓은 화면용 CSS를 먼저 쓰고, max-width로 화면이 좁아질 때마다 스타일을 줄이거나 바꿉니다. 모바일 퍼스트는 좁은 화면을 기본으로 두고, min-width로 화면이 넓어질 때마다 스타일을 더합니다. 이 생성기는 선택한 방식에 맞춰 @media 블록 순서와 조건을 맞춰 줍니다.
생성되는 코드에는 예시로 .container 폭·패딩이 들어 있습니다. 실제 클래스명과 수치로 바꿔 쓰면 됩니다. 체크를 끈 기기는 해당 블록이 빠집니다.
⚙️ 왜 CSS 맨 아래에 붙이나요
같은 선택자라도 나중에 나온 규칙이 이깁니다. 미디어쿼리를 파일 위쪽에만 두고 아래에 일반 규칙을 또 쓰면, 폭 조건과 관계없이 아래 규칙이 덮어 버릴 수 있습니다. 복사한 코드를 공통 CSS 맨 아래에 두고, 크롬 개발자 도구로 폭을 줄였다 늘이며 구간이 맞는지 보면 됩니다.
윈도우 화면 배율(125%·150% 등)이나 브라우저 확대가 켜져 있으면, 실제 기기가 아니라 브라우저가 보는 폭 기준으로 바뀌니 실기기에서도 한 번 확인하는 편이 좋습니다.
같은 사이트라도 헤더·카드·표는 다른 폭에서 깨질 수 있습니다. 전역 뼈대를 만든 뒤, 문제가 있는 부분만 추가로 @media를 넣으면 관리가 수월합니다. 생성 코드의 .container는 예시이니, 프로젝트에 있는 클래스 이름으로 바꿔 쓰세요.
🚨 이용 시 주의사항
여기서 쓰는 숫자는 기기 화면의 실제 크기가 아니라, 브라우저가 인식하는 화면 폭(뷰포트) 기준입니다. 값을 너무 가깝게 잡으면 구간이 겹쳐 보이거나 어색할 수 있으니, 태블릿·노트북 숫자를 서로 너무 가깝게 두지 마세요. 붙여넣은 뒤에는 모바일·태블릿·데스크톱 폭을 짧게라도 한 번씩 확인하세요.
