[CSS: 반응형] 반응형 웹을 위한 CSS 단위 쉽게 정리! - 단위(px, rem, em) 완벽 가이드

 

 

1. CSS 단위 설명 🔍

px	절대 크기. 화면 크기에 상관없이 고정.	버튼 테두리, 작은 아이콘
rem	루트(html)의 폰트 크기 기준. 전체 디자인에 통일감 있게 설정할 때 유용.	본문 폰트, 여백
em	자기 자신 또는 부모 폰트 크기 기준. 상속 구조에서 유용.	버튼 내부 간격
%	부모 요소 기준 비율. 유동 레이아웃 만들기 좋음.	이미지, 박스 크기
vw / vh	뷰포트 너비/높이 기준. 화면 크기에 따라 자동 조정.	큰 타이틀, 풀스크린 영역

 

2. 반응형 디자인을 위한 레이아웃 설정 방법

 

📍상위 요소에서 Flexbox와 Grid 사용

• Flexbox와 CSS Grid는 반응형 레이아웃을 만들 때 매우 유용한 레이아웃 모델입니다. width, height 값은 상대적인 단위로 설정하여 유동적으로 크기를 조정할 수 있습니다.

✅ Flexbox

.container {
  display: flex;
  flex-wrap: wrap;
}
.item {
  flex: 1 1 300px; /* 기본 300px, 공간에 맞게 유동 조정 */
}

✅ Grid

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

 

3. 폰트 크기 반응형으로 설정하기 

✅ rem 기반

html { font-size: 16px; }
h1 { font-size: 2rem; } /* 32px */

✅ vw 기반

h1 { font-size: 5vw; } /* 뷰포트 크기 따라 글자 크기 자동 조정 */

 

4. 여백, 크기 단위 선택 팁 

✅ 여백 (padding, margin)

• rem을 사용하여 일관된 간격을 설정하는 것이 좋습니다. 화면 크기에 따라 비례적으로 크기를 변경할 수 있어 유연한 반응형 디자인을 만들 수 있습니다.

.container {
  padding: 2rem;
}
.item {
  margin: 1.5rem 0;
}

✅ 너비/높이( Width와 Height)

• vw와 vh를 사용하여 화면 크기에 비례한 요소의 크기를 설정할 수 있습니다. max-width와 min-width를 함께 사용하여 더 정밀한 반응형 디자인을 만들 수 있습니다.

.container {
  width: 80vw;
  height: 50vh;
  max-width: 1200px;
}​

 

✅ 이미지

img {
  width: 100%; /* 부모 요소의 너비에 맞게 크기 조정 */
  height: auto; /* 비율에 맞춰 자동으로 높이 조정 */
}

 

5. 미디어 쿼리로 디바이스 대응하기 📱

미디어 쿼리를 사용하여 화면 크기에 따라 스타일을 다르게 적용할 수 있습니다.px, rem, em 등을 잘 조합하여 다양한 화면 크기에 대응할 수 있습니다.

/* 기본 스타일 */
.container {
  padding: 2rem;
  width: 100%;
}

/* 태블릿 */
@media (max-width: 768px) {
  .container {
    padding: 1rem;
    width: 90%;
  }
}

/* 모바일 */
@media (max-width: 480px) {
  .container {
    padding: 0.5rem;
    width: 95%;
  }
}

 

6. 이미지 반응형 처리 ✨

이미지 크기를 뷰포트 크기에 맞게 최적화하려면 백분율(%), vw, max-width 등을 활용해 유동적으로 크기를 조정하는 것이 중요합니다.

img {
  width: 100%; /* 부모 너비에 맞게 */
  height: auto; /* 비율 유지 */
}

 

✅ 요약 정리

• rem / vw / % : 반응형에 최적
• px : 고정 크기 필요할 때만 사용
• Flex / Grid : 기본 레이아웃은 이걸로!
• 미디어 쿼리 : 디바이스 대응 필수