반응형 웹이란?
반응형 웹은 웹사이트가 기기별로 최적화되어 보여지는 기능이다.
우리는 컴퓨터 모니터 뿐만 아니라 모바일(스마트폰 화면도 제각각임),태블릿 등 다양한 기기에서 웹사이트에 접근할 수 있다.
다양한 기기에서 웹사이트를 접근할 때 해당 기기의 화면에 적합한 구조로 변경해서 보여줄 수 있는 것이 바로 반응형 웹이다.
스마트폰이나 태블릿이 대중화되면서 모바일웹 접속률이 많이 늘어났기 때문에 웹사이트를 개발할때 모바일 버전도 신경써서 만들어줘야한다. 이를 도와주는게 바로 반응형웹 기술이다.
반응형 웹의 기본, viewport & media
반응형 웹을 만들기 위해 기본적으로 알아야할 것은 바로 뷰포트와 미디어쿼리이다.
1. 뷰포트(viewport)
뷰포트는 웹페이지가 사용자에게 보여지는 영역을 말한다. 이는 기기별로 다르게 보일 수 밖에 없다. (PC와 모바일의 화면 크기만 봐도 다르다.)
뷰포트는 태그를 사용해서 조절할 수 있다.
이 태그는
<meta name="viewport" content="width=device-width, initial-scale=1.0">위 태그의 속성을 살펴보자.
- width : viewport의 가로크기. 숫자 값 또는 device-width와 같은 특정 값 사용 가능
- height : viewport의 세로크기
- initial-scale : 페이지가 처음 로딩될 때 줌레벨을 조정한다. 값이 1일때는 확대/축소가 되지 않은 원래 크기. (0~10 사이의 값을 가짐)
- minium-scale : viewport의 최소 배율값, 기본은 0.25이다.
- maximum-scale : viewport의 최대 배율값, 기본은 1.6이다.
- user-scalable : 사용자의 확대/축소 기능을 설정, 기본은 yes
width,height 속성값
- device-width : 기기의 가로 넓이 픽셀 값
- device-height : 기기의 세로 높이 픽셀 값
2. 미디어 쿼리(media query)
반응형의 핵심!! 미디어 쿼리에 대해 알아보자.
미디어 쿼리 구문은 다음과 같이 사용할 수 있다.
@media media-type and (media-feature-rule) {
/* CSS rules go here */
}위 구문에 대해 알아보자.
미디어 타입(media-type)
- all : 전부
- screen : 스크린 화면
- print : 프린터
조건문
- min-width : 적용되는 화면의 최소 사이즈
- max-width : 적용되는 화면의 최대 사이즈
- min-height,max-height : 위 설명의 반대로 생각하면 된다.
그럼 위 미디어 쿼리를 사용한 예시들을 살펴보자.
@media (max-width: 576px) {...}
@media (min-width: 576px) {...}
@media (min-width: 576px) and (max-width: 768px) {...}위 예시처럼 미디어 쿼리를 사용해서 지정된 해상도 범위에서 보여지는 웹사이트의 형태를 달리할 수 있다.
그렇다면, 해상도의 범위를 어떻게 설정하는 것이 좋을까?
보통 기기별로 다음과 같은 분기점을 갖는다.
- 낮은 해상도의 PC, 태블릿(가로) : 1024px~
- 태블릿(가로) : 768px~1023px
- 모바일(가로),태블릿(세로) : 480px~767px
- 모바일(세로) : ~480px
분기점에 대한 더 자세한 내용은 이 블로그를 참고해도 좋을것 같다.
Media Queries BreakPoints 2021
또한, 모바일/데스크탑 중 어떤것을 중점으로 반응형을 개발할지에 따라 min-width,max-width를 사용하는것이 결정될 수 있다.
다음 블로그를 참고하면 좋을 것 같다.
반응형웹에 대한 미디어 쿼리의 사용
반응형 웹을 통해 모든 기기에서 부담없이 접근할 수 있는 웹사이트를 만들어보자!
