반응형 디자인

1. 반응형 웹이란

반응형 웹 디자인(Responsive Web Design)이란 하나의 HTML/CSS 코드로 모바일·태블릿·PC 등 다양한 화면 크기에 최적화된 레이아웃을 제공하는 것입니다. 2015년 이후 모바일 웹 트래픽이 PC를 초과했고, 구글은 모바일 우선 인덱싱(Mobile-First Indexing)을 적용 중입니다.

/* 모바일 퍼스트 전략 — 작은 화면이 기본, 큰 화면을 덮어씌움 */

/* 기본 (모바일 ~767px) */
.container { padding: 16px; }
.card-grid { grid-template-columns: 1fr; }  /* 1열 */

/* 태블릿 (768px~) */
@media (min-width: 768px) {
  .container { padding: 24px; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }  /* 2열 */
}

/* 데스크탑 (1024px~) */
@media (min-width: 1024px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }  /* 3열 */
}

/* 와이드 (1280px~) */
@media (min-width: 1280px) {
  .container { max-width: 1200px; margin: 0 auto; }
}

2. 미디어쿼리 기본 문법

/* 기본 형식 */
@media 미디어타입 and (조건) {
  /* 조건 충족 시 적용할 CSS */
}

/* 화면 너비 기준 */
@media screen and (min-width: 768px) { }   /* 768px 이상 */
@media screen and (max-width: 767px) { }   /* 767px 이하 */
@media (min-width: 768px) and (max-width: 1023px) { } /* 범위 지정 */

/* 다크모드 대응 */
@media (prefers-color-scheme: dark) {
  body { background: #111; color: #f5f5f5; }
}

/* 인쇄 */
@media print {
  .no-print { display: none; }
  body { font-size: 12pt; color: black; }
}

/* 가로/세로 방향 */
@media (orientation: landscape) { }  /* 가로 모드 */
@media (orientation: portrait) { }   /* 세로 모드 */

3. 표준 브레이크포인트

이름	기준값	대상 기기
xs (default)	~479px	소형 스마트폰
sm	480px~	일반 스마트폰
md	768px~	태블릿
lg	1024px~	노트북·소형 데스크탑
xl	1280px~	대형 모니터

4. 뷰포트 단위 vw, vh, dvh

/* vw/vh: 뷰포트 너비/높이의 % */
.hero { height: 100vh; }   /* 화면 전체 높이 */
.text { font-size: 5vw; }  /* 화면 너비의 5% */

/* dvh(Dynamic Viewport Height): 모바일 주소창 고려 */
/* iOS 사파리의 주소창 등장/숨김에 따른 높이 변동 대응 */
.hero { height: 100dvh; }  /* 실제 보이는 화면 높이 */

/* 유용한 조합 */
.full-screen { width: 100vw; height: 100dvh; }
.min-full { min-height: 100dvh; }  /* 최소 전체 화면, 내용 많으면 더 늘어남 */

5. 반응형 이미지

/* CSS로 반응형 이미지 */
img {
  max-width: 100%;
  height: auto;
}

/* object-fit: 이미지 비율 유지하며 크기 제어 */
.card-thumb {
  width: 100%;
  height: 200px;
  object-fit: cover;    /* 잘라서 채움 (자주 사용) */
  object-fit: contain;  /* 비율 유지, 여백 생김 */
  object-position: center top;  /* 잘릴 때 기준 위치 */
}

/* picture 태그: 화면 크기별 다른 이미지 제공 */
<picture>
  <source media="(min-width: 1024px)" srcset="hero-desktop.jpg">
  <source media="(min-width: 768px)"  srcset="hero-tablet.jpg">
  <img src="hero-mobile.jpg" alt="히어로 이미지">  <!-- 기본값 -->
</picture>

6. CSS transition — 부드러운 전환 효과

/* transition: 속성 지속시간 타이밍함수 지연 */
.btn {
  background: #6366f1;
  color: white;
  transition: background 0.3s ease, transform 0.2s ease;
}
.btn:hover {
  background: #4f46e5;
  transform: translateY(-2px);   /* 위로 2px 이동 */
}

/* 여러 속성 한번에 */
.card { transition: all 0.3s ease; }

/* 타이밍 함수 */
transition-timing-function: ease;        /* 처음 빠르고 끝 느림 (기본) */
transition-timing-function: ease-in;     /* 처음 느림 */
transition-timing-function: ease-out;    /* 끝 느림 */
transition-timing-function: linear;      /* 일정 속도 */
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); /* 스프링 효과 */

/* transform: 이동, 회전, 크기 변환 (GPU 가속으로 빠름) */
transform: translateX(20px);    /* 가로 이동 */
transform: translateY(-10px);   /* 세로 이동 */
transform: scale(1.05);         /* 1.05배로 확대 */
transform: rotate(45deg);       /* 45도 회전 */
transform: scale(1.1) translateY(-4px); /* 복합 적용 */

관련 검색어  ·  CSS반응형, 미디어쿼리, 모바일퍼스트, viewport단위, object-fit, CSS transition, transform애니메이션