[CSS] 반응형 웹디자인 기본: 미디어쿼리 & 뷰포트

미디어쿼리는?

미디어쿼리는 CSS3에 도입된 기능으로, 다양한 디스플레이 유형과 환경에 따라 다른 스타일을 적용할 수 있게 해줍니다. 이는 반응형 웹 디자인의 핵심 요소로, 화면크기, 해상도, 방향 등의 조건에 따라 웹사이트의 레이아웃, 이미지, 기타 UI 요소를 동적으로 조정할 수 있습니다.

미디어 쿼리의 기본구조

미디어 쿼리는 @media 규칙과 함께 사용되며, 이어지는 조건문과 중괄호 {} 안에 적용할 CSS 스타일을 작성합니다.

@media (max-width: 800px) {
  .heading {
    margin: 10px 0;
    font-size: 35px;
  }
}

위의 예시에서, max-width: 800px는 미디어 쿼리의 조건을 나타냅니다. 이 조건은 뷰포트의 최대 너비가 800px 이하일 때 참이 됩니다. 이 조건이 참일 때, 중괄호 {} 안에 있는 CSS 스타일이 적용됩니다. 따라서 위의 코드는 뷰포트 너비가 800px 이하일 때 .heading 클래스를 가진 요소의 마진을 위아래로 10px, 좌우로 0으로 설정하고, 글꼴 크기를 35px로 설정합니다.

뷰포트

뷰포트(viewport)는 웹사이트가 사용자에게 보여지는 영역을 의미합니다. 브라우저 창의 보이는 부분이 뷰포트라고 생각하면 됩니다. 뷰포트의 크기는 사용자가 사용하는 디바이스나 브라우저 창의 크기에 따라 달라집니다. 예를 들어, 데스크톱 컴퓨터의 뷰포트는 일반적으로 휴대폰의 뷰포트보다 큽니다. 또한, 사용자가 브라우저 창의 크기를 조절하면 뷰포트의 크기도 변합니다. CSS에서는 vw (viewport width)와 vh (viewport height) 단위를 사용하여 뷰포트의 크기에 따라 요소의 크기를 동적으로 조절할 수 있습니다. 1vw는 뷰포트 너비의 1%를, 1vh는 뷰포트 높이의 1%를 나타냅니다.

뷰포트는 반응형 웹 디자인에서 중요한 개념입니다. 뷰포트의 크기에 따라 웹사이트의 레이아웃이나 요소의 크기를 조절하면, 다양한 디바이스에서 웹사이트가 올바르게 보이도록 할 수 있습니다. 이를 위해 미디어 쿼리와 함께 뷰포트를 사용하는 경우가 많습니다.

미디어 쿼리의 활용

미디어 쿼리의 활용
미디어 쿼리는 웹사이트가 다양한 디바이스와 환경에서 일관된 사용자 경험을 제공하는 데 도움이 됩니다. 예를 들어, 스마트폰에서 보는 웹사이트는 데스크톱에서 보는 것과 다르게 보일 수 있습니다. 미디어 쿼리를 사용하면, 이러한 환경 차이를 감안하여 각 디바이스에 맞는 최적의 레이아웃과 디자인을 제공할 수 있습니다.

미디어 쿼리는 반응형 웹 디자인의 핵심 요소이며, 웹 개발자들은 이를 활용하여 사용자에게 최적화된 웹사이트를 제공할 수 있습니다.