📏 모던 웹 CSS 단위 정리
절대 단위
.box {
width: 16px; /* 픽셀 - 고정 크기 */
}상대 단위
.box {
width: 1.5rem; /* HTML 기본 폰트사이즈의 1.5배 */
width: 2em; /* 현재 요소 폰트사이즈의 2배 */
width: 50vw; /* 브라우저 화면 폭의 50% */
width: 50vh; /* 브라우저 화면 높이의 50% */
}단위별 특징
| 단위 | 기준 | 활용 |
|---|---|---|
px | 절대값 | 정확한 크기 필요할 때 |
rem | 루트 폰트사이즈 | 타이포그래피, 일관성 필요할 때 |
em | 부모 폰트사이즈 | 중첩된 요소 크기 조절 |
vw/vh | 뷰포트 크기 | 화면 비율 기준 레이아웃 |
rem 활용 팁
/* 기억하기 쉬운 폰트 사이즈 */
h1 { font-size: 2rem; } /* 32px (16px × 2) */
h2 { font-size: 1.5rem; } /* 24px (16px × 1.5) */
h3 { font-size: 1.25rem; } /* 20px (16px × 1.25) */
p { font-size: 1rem; } /* 16px (기본) */
/* px보다 기억하기 쉬움 */
/* 18px, 22px 대신 1.125rem, 1.375rem */📱 반응형 웹 기본 설정
필수 메타 태그
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>역할: 모바일에서 올바른 화면 크기로 렌더링
📐 Media Query 사용법
기본 문법
@media screen and (max-width: 1200px) {
.box {
font-size: 40px;
}
}
@media screen and (max-width: 768px) {
.box {
font-size: 30px;
}
}동작 원리
- 브라우저 폭 1200px 이하: font-size 40px 적용
- 브라우저 폭 768px 이하: font-size 30px 적용
- CSS 우선순위: 아래쪽 스타일이 위쪽보다 우선
작성 위치
/* 일반 스타일 */
.box {
font-size: 50px;
}
/* CSS 파일 최하단에 작성 */
@media screen and (max-width: 768px) {
.box {
font-size: 30px;
}
}🎯 권장 Breakpoint
Bootstrap 기준 표준
/* 데스크톱 */
@media screen and (max-width: 1200px) { /* 태블릿 */ }
@media screen and (max-width: 992px) { /* 태블릿 */ }
@media screen and (max-width: 768px) { /* 모바일 */ }
@media screen and (max-width: 576px) { /* 모바일 */ }실무 권장 (간소화)
/* 데스크톱 기본 */
.container {
width: 100%;
max-width: 1200px;
}
/* 태블릿 */
@media screen and (max-width: 1200px) {
.container {
padding: 0 20px;
}
}
/* 모바일 */
@media screen and (max-width: 768px) {
.container {
padding: 0 15px;
}
}💻 실제 반응형 예제
HTML 구조
<div class="explain-container">
<div>
<h4>제목1</h4>
<p>내용1</p>
</div>
<div>
<h4>제목2</h4>
<p>내용2</p>
</div>
<div>
<h4>제목3</h4>
<p>내용3</p>
</div>
<div>
<h4>제목4</h4>
<p>내용4</p>
</div>
<div style="clear: both;"></div>
</div>CSS 스타일
/* 데스크톱: 4열 */
.explain-container > div {
float: left;
width: 25%;
padding: 15px;
box-sizing: border-box;
}
/* 태블릿: 2열 */
@media screen and (max-width: 992px) {
.explain-container > div {
width: 50%;
}
}
/* 모바일: 1열 */
@media screen and (max-width: 768px) {
.explain-container > div {
float: none;
width: 100%;
}
}🔧 모던 반응형 (Flexbox/Grid)
Flexbox 방식
.explain-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.explain-container > div {
flex: 1 1 calc(25% - 15px); /* 4열 */
}
@media screen and (max-width: 992px) {
.explain-container > div {
flex: 1 1 calc(50% - 10px); /* 2열 */
}
}
@media screen and (max-width: 768px) {
.explain-container > div {
flex: 1 1 100%; /* 1열 */
}
}CSS Grid 방식
.explain-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
@media screen and (max-width: 992px) {
.explain-container {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 768px) {
.explain-container {
grid-template-columns: 1fr;
}
}📝 반응형 개발 팁
모바일 퍼스트 접근
/* 모바일 기본 */
.container {
padding: 15px;
}
/* 태블릿 이상 */
@media screen and (min-width: 768px) {
.container {
padding: 30px;
}
}
/* 데스크톱 이상 */
@media screen and (min-width: 1200px) {
.container {
padding: 50px;
}
}유용한 반응형 패턴
/* 텍스트 크기 조절 */
h1 {
font-size: clamp(1.5rem, 4vw, 3rem);
}
/* 여백 조절 */
.section {
padding: clamp(2rem, 5vw, 5rem) 0;
}
/* 컨테이너 최대 너비 */
.container {
width: min(90%, 1200px);
margin: 0 auto;
}이 가이드로 효율적이고 유지보수하기 쉬운 반응형 웹을 만들 수 있습니다! 🎯
App, Web Developer