[ CSS ] 반응형 웹/Viewport/Media Query/Breakpoint

ꕥ

웹뷰 프로젝트를 업무로 맡고 있기 때문에 뷰포트에 대해 알아보겠습니다!

ꕥ

• 반응형 디자인(Responsive Design) : 세상엔 수많은 기기가 있는데, 다양한 화면 크기에 따라 레이아웃과 스타일을 동적으로 조정하여 웹 페이지를 최적화된 형태로 보여주는 디자인이다.
• 적응적 디자인(Adaptive Design) : 특정 화면 크기(해상도)에 맞게 레이아웃이 변하는 디자인이다. 미디어 쿼리를 사용한다.
• 유동적 디자인(Fluid Design) : 화면 크기에 맞게 요소의 크기가 변하는 디자인이다. %, vw, vh 비율을 사용하고, 요소를 Flex, Grid로 유연하게 배치한다.
• 뷰포트(Viewport) : 사용자가 웹 브라우저를 통해 보는 화면 영역이다.

• MetaTag

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• vw : 뷰포트 너비의 비율이다.
• vh : 뷰포트 높이의 비율이다.

• 미디어 쿼리(Media Query) : HTML 코드는 1개인데, 기기 조건에 따라서 각각 다른 CSS 코드를 적용하는 문법이다.

Ex) 연산자

@media screen and (max-width: 480px) {
  /* 일반적인 화면이고, 최대 너비가 480px 보다 작은 경우에 적용할 스타일 */
}

Ex) 조건문

/* 최소 너비(min-width) */
@media (min-width: 1280px) {
  /* 1280px 보다 큰 경우에 적용할 스타일 */
}

/* 최대 너비(max-width) */
@media (max-width: 480px) {
  /* 480px 보다 작은 경우에 적용할 스타일 */
}

/* 웹 브라우저의 컬러 모드(prefers-color-scheme) */
@media (prefers-color-scheme: dark) {
  /* 브라우저가 다크 모드일 때 적용할 스타일 */
}

• 브레이크포인트(Breakpoint) : 미디어 쿼리를 사용할 때 기준이 되는 보편적인 화면 크기이다.

• 동작 순서

Ex) max-width : 큰 화면 → 작은 화면

...A

@media (max-width: 1280px) {
  ...B
}

@media (max-width: 768px) {
  ...C
}

@media (max-width: 480px) {
  ...D
}

Ex) min-width : 작은 화면 →  큰 화면

...D

@media (min-width: 481px) {
  ...C
}

@media (min-width: 769px) {
  ...B
}

@media (min-width: 1281px) {
  ...A
}