반응형 디자인

다양한 기기에 맞추는 웹의 기본

​오늘날 대부분의 사용자는 스마트폰으로 웹사이트에 접속합니다. 하지만 여전히 데스크톱과 태블릿도 무시할 수 없습니다. 따라서 웹사이트는 어떤 화면 크기에서도 잘 보여야 하는데, 이를 가능하게 해주는 기술이 바로 반응형 디자인(Responsive Design) 입니다.

미디어 쿼리 기본

반응형 디자인의 핵심은 미디어 쿼리(media query) 입니다. 화면 크기에 따라 다른 CSS를 적용할 수 있습니다.

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

위 코드는 화면 폭이 768px 이하일 때 .container의 레이아웃을 세로 방향으로 전환합니다.

반응형 디자인 원칙

1. 유동적 단위 사용: px 대신 %, em, rem, vw, vh 같은 단위 사용

2. 이미지와 동영상 크기 제어: max-width: 100%로 부모 요소를 넘지 않도록 설정

3. 브레이크포인트 설정: 일반적으로 모바일(≤768px), 태블릿(769~1024px), 데스크톱(1025px 이상)

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

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