반응형 웹을 구현할 때 유용한 CSS 기법들

1. 미디어 쿼리 (Media Queries)

반응형 웹의 핵심 요소로, 다양한 화면 크기에 맞춰 스타일을 적용할 수 있습니다.

/* 기본 스타일 (모바일 우선) */
body {
  font-size: 16px;
}

/* 태블릿 (768px 이상) */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

/* 데스크톱 (1024px 이상) */
@media (min-width: 1024px) {
  body {
    font-size: 20px;
  }
}

2. 플렉스박스 (Flexbox)

레이아웃을 쉽게 조정할 수 있는 강력한 도구입니다.

.container {
  display: flex;
  flex-wrap: wrap; /* 화면 크기에 따라 줄바꿈 */
  justify-content: space-between; /* 요소를 균등 정렬 */
}

.item {
  flex: 1; /* 각 항목이 동일한 너비를 가짐 */
  min-width: 200px; /* 최소 너비 설정 */
}

3. CSS 그리드 (CSS Grid)

복잡한 레이아웃을 쉽게 구현할 수 있습니다.

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 자동 조정되는 그리드 */
  gap: 10px;
}

4. 뷰포트 단위 (Viewport Units)

반응형 크기를 조절할 때 유용한 단위입니다.

.container {
  width: 80vw; /* 뷰포트 너비의 80% */
  height: 50vh; /* 뷰포트 높이의 50% */
}

5. 유동적 크기 조정 (Fluid Sizing)

상대적인 단위를 사용하면 다양한 화면 크기에 유연하게 대응할 수 있습니다.

.container {
  width: 90%; /* 부모 요소의 90% */
  max-width: 1200px; /* 최대 너비 제한 */
  margin: 0 auto; /* 중앙 정렬 */
}

6. 반응형 이미지

이미지가 컨테이너에 맞게 조정되도록 설정합니다.

img {
  max-width: 100%;
  height: auto;
}

7. 버튼 크기 자동 조정

버튼 크기가 텍스트 크기에 맞게 조정되도록 설정합니다.

button {
  padding: 1em 2em;
  font-size: 1rem;
  width: auto;
}

8. 텍스트 자동 줄바꿈

텍스트가 너무 길어질 경우 자동으로 줄바꿈됩니다.

.text {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

 

이 CSS 기법들을 조합하면 반응형 웹을 효과적으로 제작할 수 있습니다.