반응형 웹

반응형 웹사이트?

반응형 웹사이트란 한 가지의 웹사이트로 다양한 종류의 화면 크기에 최적화된 화면을 보여주는 것을 뜻합니다. 반응형 웹은 브라우저의 크기(스크린의 크기, 디바이스의 종류)에 실시간으로 반응하여 크기에 따라 레이아웃이 변합니다.

반응형 웹사이트에 필요한 CSS 속성들

Viewport 단위

• vw (viewport width) : 브라우저의 넓이를 기준으로 하는 백분율 단위

  1vw = 뷰포트(브라우저) 너비의 1%

• vh (viewport height) : 브라우저의 높이를 기준으로 하는 백분율 단위

  1vh = 뷰포트(브라우저) 높이의 1%

• vmin (viewport minimum) : 브라우저의 넓이와 높이 중 작은 값을 기준으로 하는 백분율 단위

• vmax (viewport maximum) : 브라우저의 넓이와 높이 중 큰 값을 기준으로 하는 백분율 단위

상대적 단위

• %

  부모 요소의 크기를 기준으로 하는 백분율 단위

  • 폰트 크기 설정

    body {
      font-size: 100%; /* 16px (기본값) */
    }
    
    h1 {
      font-size: 150%; /* 24px (16px의 150%) */
    }
    
    p {
      font-size: 50%; /* 8px (16px의 50%) */
    }

  • 넓이, 높이 설정

    /* 부모 요소의 크기 설정 */
    .container {
      width: 70%; /* 부모 요소의 너비의 70% */
      height: 400px; /* 고정된 높이 */
    }
    
    /* 자식 요소의 크기 설정 */
    .container > .content {
      width: 50%; /* 부모 요소의 너비의 50% */
      height: 50%; /* 부모 요소의 높이의 50% = 200px (400px의 50%) */
    }

• em

  부모 요소의 폰트 사이즈를 기준으로 하는 상대적인 단위
  
  1em = 부모 요소의 폰트 사이즈

  /* 부모 요소의 폰트 크기를 16px로 설정 */
  .parent {
    font-size: 16px;
  }
  
  /* 자식 요소의 폰트 크기 */
  .child {
    font-size: 2em; /* 부모의 폰트 크기의 2배, 즉 32px */
  }

  /*
  * em을 중첩해서 사용하는 경우
  * 최상위 요소의 폰트 크기를 16px로 설정
  */
  .box {
    font-size: 16px;
  }
  
  /* box 자식 요소의 폰트 크기 */
  .box-inner {
    font-size: 1.5em; /* 16px의 1.5배 = 24px */
  }
  
  /* box-inner 자식 요소의 폰트 크기 */
  .box-inner-inner {
    font-size: 2em; /* box-inner 폰트 크기의 2배 = 48px */
  }

• rem

  루트 요소(html)의 폰트 크기를 기준으로 상대적인 크기를 설정하는 단위
  
  1rem = html 요소의 폰트 사이즈

  html {
    font-size: 16px;
  }
  
  body {
    font-size: 2rem; /* 루트 요소(html) 폰트 크기의 2배, 32px */
  }

미디어 쿼리

미디어 쿼리는 웹 디자인에서 다양한 화면 크기와 장치 특성에 따라 스타일을 조정할 수 있는 CSS 기능입니다. 이를 통해 다양한 디바이스(모바일, 태블릿, 데스크톱 등)에서 최적화된 화면을 보여 줄 수 있습니다.

/* 기본 사용법 */
@media (조건) {
  /* 조건이 만족될 때 적용될 스타일 */
}

• max-width / min-width

  @media (max-width: 480px) {
    /* 화면 너비가 480px 이하일 때 적용되는 스타일 */
  }
  
  @media (min-width: 768px) {
    /* 화면 너비가 768px 이상일 때 적용되는 스타일 */
  }

미디어 쿼리 초보자 안내서 - Web 개발 학습하기 | MDN

CSS Media Query는 예를 들어 "뷰포트가 480 픽셀보다 넓다."라고 여러분이 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 CSS를 적용할 수 있는 방법을 제공합니다. 미디어 쿼리는 뷰포트의 크기에 따라 서로 다른 레이아웃을 생성할 수 있기 때문에 반응형 웹 디자인의 중요한 부분입니다. 하지만 사용자가 실행 중인 환경에 대해서 다른 것들을 감지하는 데에도 사용할 수 있습니다. 예를 들면 사용자가 마우스가 아닌 터치스크린을 사용하는지와 같이 실행 중인 환경에 대한 여러 내용들을 탐지하는 데도 사용할 수 있습니다. 이번 단원에서는 먼저 미디어 쿼리에 사용된 구문에 대해 배우고, 이어 해당 구문을 가공의 예제에서 사용하여 간단한 디자인이 어떻게 반응할 수 있는지 살펴보겠습니다.

https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Media_queries

브라우저의 사이즈 변경에 대응하는 반응형 스타일

html {
  font-size: 62.5%; /* font-size: 10px (브라우저 폰트 사이즈 16px * 0.625 = 10px) */
}

body {
  font-size: 1rem; /* font-size: 10px */
}

@media (max-width: 1200px) {
  html {
    font-size: 50%; /* font-size: 8px (브라우저 폰트 사이즈 16px * 0.5 = 8px) */
  }
}

@media (max-width: 768px) {
  html {
    font-size: 40%; /* font-size: 6.4px (브라우저 폰트 사이즈 16px * 0.4 = 6.4px) */
  }
}