반응형 웹을 위한 미디어쿼리 정보
CSS 반응형 웹을 위한 미디어쿼리본문
미디어 쿼리란?
- 화면 너비, 해상도, 장치 유형에 따라 CSS를 다르게 적용하는 방법
기본 문법
@media screen and (max-width: 768px) {
body {
font-size: 14px;
}
}
- max-width: 768px → 화면이 768px 이하일 때 적용
- min-width도 반대로 사용 가능
자주 쓰는 구간 예시
@media (max-width: 1200px) { ... } // 태블릿~데스크탑 중간
@media (max-width: 992px) { ... } // 태블릿
@media (max-width: 768px) { ... } // 모바일 기준
@media (max-width: 480px) { ... } // 작은 모바일
실전 팁
- 모바일부터 스타일을 먼저 작성하고, 점점 넓히는 “모바일 퍼스트” 방식이 유지보수에 유리
- 요소의 크기, 정렬, 여백, 폰트 등을 미디어 쿼리에서 세분화 가능
예시
.box {
width: 100%;
padding: 20px;
}
@media (max-width: 768px) {
.box {
padding: 10px;
}
}
- 화면 너비, 해상도, 장치 유형에 따라 CSS를 다르게 적용하는 방법
기본 문법
@media screen and (max-width: 768px) {
body {
font-size: 14px;
}
}
- max-width: 768px → 화면이 768px 이하일 때 적용
- min-width도 반대로 사용 가능
자주 쓰는 구간 예시
@media (max-width: 1200px) { ... } // 태블릿~데스크탑 중간
@media (max-width: 992px) { ... } // 태블릿
@media (max-width: 768px) { ... } // 모바일 기준
@media (max-width: 480px) { ... } // 작은 모바일
실전 팁
- 모바일부터 스타일을 먼저 작성하고, 점점 넓히는 “모바일 퍼스트” 방식이 유지보수에 유리
- 요소의 크기, 정렬, 여백, 폰트 등을 미디어 쿼리에서 세분화 가능
예시
.box {
width: 100%;
padding: 20px;
}
@media (max-width: 768px) {
.box {
padding: 10px;
}
}
추천
0
0
댓글 1개
깔끔한 정리 감사합니다. 부트스트랩을 써서 하느냐, 아니면 미디어쿼리를 쓰는데 개인적으로 둘다 좋습니다.
