오늘은 반응형 웹에 대한 개념 정리와 반응형 웹 구현을 위해 필요한 요소들을 정리해보고, 실제로 반응형 헤더를 만들어보았다.
- 반응형 웹의 필요성
과거에는 웹싸이트가 오직 데스크탑에서만 보여졌기 때문에, 모든 게 고정값이었다.
그러나, 테블릿과 모바일폰 등의 등장으로 다양한 디바이스를 통해서 웹싸이트를 보게 됐고, 이에 따라 데스크탑 사이즈에 맞춰서 고정된 웹사이트의 사이즈 역시도 다양한 디바이스에 맞게 반응해야 될 필요가 생겼다.
그래서, 디바이스에 맞게 더이상 "고정된게 아닌 반응해서 변한다"라고 해서 "반응형 웹"이라고 부른다.
웹싸이트가 반응형이 되지 않으면,
이렇게 컨텐츠가 잘려나가서 일일히 스크롤해서 봐야만 한다.
이제 어떻게 컨텐츠가 유동적으로 컨테이너에 맞게 변화해서 내용들이 잘 보여질 수 있는지 알아보자!!
요즘은 구분이 확실하지 않지만, 구지 나누자면 이렇다.
- 해상도 320px 이상 또는 768px 미만 -> 스마트폰
- 해상도 768px 이상 또는 1024px 미만 -> 태블릿
- 해상도 1024px 초과 -> PC
또한, 이미지에 나와있듯이 Media Query라는 기능을 사용해서 스크린 사이즈에 따른 박스들의 재배치가 가능하다.
- Media Query
CSS파일이나 style 태그에서 사용한다.
- 미디어쿼리 작성법
@media only | not 미디어유형 and | , (조건문) {적용할 css}
이런 식으로 특정 조건에 맞춰서 움직임을 바꿔주거나 동작하는 것이 가능하다.
좀 더 자세한 설명은 미디어 쿼리 MDN에서 확인하자!
- CSS unit 정리
=> 과거 정리했던 부분은 링크를 남겨놓고 넘어가겠다.
- 뷰포트 ( viewport )
모바일에서 웹을 볼 때 사용되는 개념이다.
모바일 브라우저들은 viewport 로 알려진 가상 window상에 페이지를 렌더링한다. 즉 화면(Display) 상의 표시 영역을 뜻한다. 모바일 Safari는 viewport meta태그를 도입해 웹 개발자들이 viewport 크기와 스케일을 조정할 수 있게 했고, 웹 표준은 아니지만 이제 대부분 모바일 브라우저들도 이를 지원한다.
한 번 더 반복하자면, 뷰포트는 웹페이지가 사용자에게 보여지는 영역을 말한다. 데스크탑 PC에서 브라우저의 크기를 줄이면 웹페이지의 내용이 다보여지지 않고 스크롤 해서 봐야 되는 경우가 있다.
이때도 브라우저에 보여지는 부분이 뷰포트이다.
하지만, 데스크탑과 모바일의 viewport는 다른점이 있다. 데스크탑의 viewport는 브라우저 창(visible area)의 viewport와 같고, 사용자가 브라우저 창의 크기를 조절하면서 viewport의 크기도 조절할 수 있다. 웹페이지가 viewport보다 크면, 스크롤을 하여 나머지 영역을 볼 수 있다. 반면에, 모바일 viewport는 웹브라우저 창보다 크거나 작을 수 있고 상하좌우로 움직이거나, 더블탭, 줌인, 줌아웃을 통해 viewport의 배율을 변경할 수 있습니다.(크기가 아니다)
- 필요한 이유
모바일 브라우저에서 viewport가 중요한 이유는 모바일 브라우저가 웹 페이지를 브라우징 하는 특징에 있다. 현재 스마트폰 브라우저는 모바일 환경에서도 데스크탑 환경처럼 웹 페이지 전체를 자연스럽게 브라우징 할 수 있도록 풀브라우징을 지원한다. 이 때문에 데스크탑에 기반하여 설계된 웹페이지를 모바일에서 보면 기본 viewport가 980px 이고, 이로 인해 내용이 작게 보인다.(width가 980px 이상인 컨텐츠가 있다면 좌우로 스크롤 됨)
- width 375인 아이폰6 브라우저에서 980px을 가진 페이지를 풀브라으징 할 경우
- 동일한 아이폰6 브라우져에서 viewport 메타 태그를 사용할 경우
간단히 말하면, 작은 화면의 모바일 단말기에 웹 페이지 모두를 표시하려하니 전체적인 페이지의 배율이 조정되는것이다. 결과적으로 모바일 화면에 맞도록 전체적인 페이지가 축소되어 보이지만 페이지의 컨텐츠는 배율축소가 발생해 가독성이 떨어지게 된다. 바로 이때 viewport를 설정하면 다양한 모바일 기기에서도 페이지의 너비나 화면 배율을 설정할 수 있다.
- 사용 방법
head 태그 사이에 다음을 코드를 입력합니다. 기본적으로 데스크탑 브라우저에서는 viewport 메타 태그를 사용하지 않아 무시합니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">1. viewport의 속성
width : viewport의 가로 크기를 조정한다. 일반적인 숫자값이 들어갈 수도 있고, device-width와 같은 특정한 값을 사용할 수도 있다. device-width는 100% 스케일에서 CSS 픽셀들로 계산된 화면의 폭을 의미한다.
height : viewport의 세로 크기를 조정한다.
initial-scale : 페이지가 처음 로딩될 때 줌 레벨을 조정한다. 값이 1일때는 CSS 픽셀과 기기 종속적인 픽셀 간의 1:1 관계를 형성한다.
minimum-scale : viewport의 최소 배율값, 기본값은 0.25이다.
maximum-scale : viewport의 최대 배율값, 기본값은 1.6이다.
user-scalable : 사용자의 확대/축소 기능을 설정, 기본값은 yes이다.
2. 정의된 속성 값
device-width : 기기의 가로 넓이 픽셀 값 (웹페이지의 가로(width) 값은 기기가 사용하는 가로 넓이 값(device-width) 만큼 적용하여 사용하라는 의미)
device-height : 기기의 세로 높이 픽셀 값
3. 주의사항
contents보다 작은 viewport width/height를 설정하면 무시된다.
viewport에서 initial-scale을 설정하지 않고 width/height를 설정하면 전체화면이 표시된다.
viewport에서 initial-scale도 width/height도 설정하지 않으면 width=980px/height=1091px이 된다.
표시영역과 contents의 크기가 일치하지 않을때 initial-scale를 설정하면, 의도하지 않은 layout이 발생한다.
뷰포트에 대한 정의와 사용법을 마친다. 그러나, 아직도 더 알아볼 것들이 남아있기 때문에, 여러가지 실험을 더 해보고 추가적으로 업데이트하도록 하겠다.
- 반응형 헤더를 만들어보고 느낀점
- flex 밑에 또다른 flex 설정이 가능하다.
- 개념을 정리하는 것과 그것을 적용해보는 것은 또 다른 문제이다.
- 모든 웹싸이트에 경외심을 갖게 된다.
- 때로는 에러가 났을 시, 무엇을 찾아야되는지 아는 것도 쉽지 않다.
- 내가 만든 코드가 잘 작동하면, 무진장 행복하다.
자료출처
오늘 TIL은 드림 코딩 엘리님의 강의와 코드스테이츠에서 학습한 내용 등을 바탕으로 작성됐다. 또한, 그 어떠한 상업적인 용도도 없음을 밝힌다.
