반응형 웹 디자인

<!-- 반응형 디자인의 필수 설정 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!--
  width=device-width: 뷰포트 너비를 기기 화면 너비에 맞춤
  initial-scale=1.0:  초기 줌 레벨을 100%로 설정
  이 태그가 없으면 모바일에서 데스크톱 레이아웃이 축소되어 보입니다
-->

/* 기본 스타일: 모바일 우선 (Mobile First) */
.container {
  padding: 16px;
}

.nav-menu {
  display: none;  /* 모바일에서는 숨김 */
}

.card-grid {
  display: grid;
  grid-template-columns: 1fr;  /* 1열 */
  gap: 16px;
}

/* 태블릿 (768px 이상) */
@media (min-width: 768px) {
  .container {
    padding: 24px;
    max-width: 768px;
    margin: 0 auto;
  }

  .nav-menu {
    display: flex;  /* 메뉴 표시 */
  }

  .card-grid {
    grid-template-columns: repeat(2, 1fr);  /* 2열 */
  }
}

/* 데스크톱 (1024px 이상) */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    padding: 32px;
  }

  .card-grid {
    grid-template-columns: repeat(3, 1fr);  /* 3열 */
    gap: 24px;
  }
}

/* 대형 화면 (1440px 이상) */
@media (min-width: 1440px) {
  .card-grid {
    grid-template-columns: repeat(4, 1fr);  /* 4열 */
  }
}

/* ── rem: 루트 폰트 크기 기준 ── */
html {
  font-size: 16px;  /* 1rem = 16px */
}

h1 { font-size: 2rem; }     /* 32px */
h2 { font-size: 1.5rem; }   /* 24px */
p  { font-size: 1rem; }     /* 16px */

/* ── vw/vh: 뷰포트 기준 ── */
.hero {
  height: 100vh;              /* 화면 전체 높이 */
  font-size: clamp(1.5rem, 4vw, 3rem);  /* 반응형 폰트 */
}

/* ── %: 부모 기준 ── */
.sidebar {
  width: 30%;
}

.content {
  width: 70%;
}

/* ── clamp(): 최소, 선호, 최대값 ── */
.container {
  /* 최소 320px, 선호 90%, 최대 1200px */
  width: clamp(320px, 90%, 1200px);
  margin: 0 auto;
}

/* 반응형 폰트 크기: 미디어 쿼리 없이도 가능 */
h1 {
  font-size: clamp(1.5rem, 2.5vw + 1rem, 3rem);
}

/* 기본: 이미지가 컨테이너를 넘지 않도록 */
img {
  max-width: 100%;
  height: auto;
}

/* 비율 유지하며 영역 채우기 */
.cover-image {
  width: 100%;
  height: 300px;
  object-fit: cover;       /* 비율 유지, 잘림 허용 */
  object-position: center; /* 잘릴 때 중심 기준 */
}