반응형 웹 적용기 : 2. 반응형을 적용할 디바이스 해상도 확인하기

이전 포스팅에서는 반응형 웹과 적응형 웹의 장단점에 대해 알아보았다.

이전 포스팅을 보고 싶다면 아래를 클릭하여 이동하시길 바란다.

2024.06.15 - [프론트엔드/CSS & HTML] - 반응형 웹 적용기 : 1. 반응형 웹의 이해

반응형 웹 적용기 : 1. 반응형 웹의 이해

 

이번 편에서는 본격적으로 반응형 웹을 HTML과 CSS를 통해 적용하기 위한 필요사항을 알아보자.

미디어 쿼리(media query)란?

반응형 웹은 뷰포트(viewport:화면의 해상도)너비에 따라 유연하게 컨텐츠를 조율하는 작업이 필요하다.

이를 위해 아래와 같은 구문을 사용하여 CSS를 지정해준다.

@media (조건문) { 실행코드 }

다만, 이 작업을 먼저 진행하기 전에, 반응형 웹을 적용해주기 위한 디바이스의 기준을 정하는 작업이 선행되어야 한다.

 

1. 반응형 웹 디자인을 적용시킬 디바이스의 크기를 지정한다.

나의 토이 프로젝트에서는 모바일, 데스크탑, 태블릿 3가지 디바이스를 기준으로 반응형을 디자인해보기로 하였다.

인터넷에서 대략적인 조사를 해 본 결과, 아래와 같은 길이에 맞추면 충분히 세가지에 대처가 가능할 것 같다.

1. 모바일 세로 : ~ 480px
2.  모바일 가로, 타블렛 세로 : 481px ~ 768px
3.  타블렛 가로, 노트북 :769px ~ 1024px 또는 1280px
4. 데스크탑 :1025px 및 1281px ~

위의 스펙을 코드로 구현하면 아래와 같다.

@media screen and (max-width: 480px) {
  /** 1\. 모바일 세로 */
}

@media screen and (max-width: 768px) {
  /** 2. 모바일 가로, 타블렛 세로 */
}

@media screen and (max-width: 1024px) {
  /** 3. 타블렛 가로, 노트북 */
}

@media screen and (max-width: 1280px) {
  /** 4. 타블렛 가로, 노트북 */
}

@media screen and (min-width: 1281px) {
  /** 5. 데스크탑 */
}

웹dd

 

---

출처

https://velog.io/@sangpok/%EB%B0%98%EC%9D%91%ED%98%95-UI-%ED%95%B4%EC%83%81%EB%8F%84-%EA%B8%B0%EC%A4%80

반응형 웹 UI Breakpoint에 대한 고찰