-
반응형 웹 기초 뷰포트(View port) 와 미디어 쿼리(Media Queries)Knowledge/HTML & CSS 2019. 11. 13. 16:19반응형
- 뷰포트 ( View Port )
본격적으로 뷰포트에 대해 얘기하기 전에 먼저 픽셀에 대해 짚고 넘어갈 필요가 있다.
픽셀은 화면을 구성하는 가장 기본이 되는 단위다. 예를 들어 15인치 모니터의 해상도가 1024 X 768의 라고 하면 수평으로는 1024개의 픽셀이, 수직으로는 768개의 픽셀이 배치되어 있다고 보면 된다. 즉 786,432개의 픽셀로 화면이 이루어진 셈이다. 모바일이 대두되기 전의 웹은 이 정도 수준의 해상도를 기준으로 제작되었다. 문제는 거기서 발생했다. 모바일과 태블릿 등 손 안에 들어오는 작은 디스플에이에 일반 모니터의 픽셀 기준을 적용할 수 없었기 때문이다.
이런 문제를 해결하기 위해 모바일 브라우져에서 시도한 것이 가상 viewport 개념의 도입이다. 처음에는 980px인 가상의 화면 사이즈에 웹 페이지를 담고 이를 기기의 스크린에 뿌려주는 방식으로 시작되었는데 이러한 시도 덕분에 이제 모바일 기기에서도 웹 페이지를 한 눈에 볼 수 있게 됐지만 문제는 가독성이었다. 넓은 화면을 좁은 기기에서도 한 눈에 볼 수 있게 넣다보니 당연히 가독성이 매우 떨어졌던 것.
이 문제를 해결하기 위해 등장한 것이 meta 태그를 활용해 viewport의 크기와 초기 줌 레벨 등을 기기에 맞게 적용되도록 선언하는 방식이었다. 그것이
1<meta name="viewport" content="width=device-width, initial-scale=1.0">요즘은 Visual Studio Code에서 html5 템플릿을 생성하면 자동으로 적용되는 저 한 줄이 탄생하기 까지의 과정이다. 이 부분이 누락되면 아래 설명할 미디어 쿼리를 활용해도 viewport의 너비가 기본값인 980px로 세팅되기 때문에 pc버전이 계속 보이게 된다
참고
Responsive Web ① – 반응형 웹을 위해 개발자가 꼭 알아야 하는 기술들
Responsive Web ① – 반응형 웹을 위해 개발자가 꼭 알아야 하는 기술들
www.samsungsds.com
[LECTURE] 추가. Viewport의 이해 : edwith
들어가기 전에 스마트폰을 사용하여 웹을 이용하는 사용자의 빈도가 급격히 높아지면서 모바일 웹 제작에 대한 이해가 아주 중요해졌습니다. 뷰포트는 미디어 쿼리 수업의 범위에서 벗어나기... - 부스트코스
www.edwith.org
- 미디어쿼리 ( Media Queries )
미디어 쿼리는 CSS3의기술로 각 미디어 매체에 따라 다른 스타일을 적용할 수 있게 만드는 것이다.
여기서 미디어 매체는 와이드 모니터, 태블릿, 모바일, 프린트, 스크린 리더기와 같은 것들을 이야기한다.
미디어 쿼리는 @media로 시작하며 미디어 쿼리 구문은 미디어 타입과 미디어 특성으로 이루어져 있는데 미디어 타입에서는 all, print, screen 정도, 미디어 특성은 뷰포트의 너비를 뜻하는 width와 미디어가 세로모드인지 가로모드인지 구분하는 orentation 정도만 알아두면 된다.
( 그 외 것들이 궁금하신 분들은 옆의 링크를 클릭하세요 https://www.edwith.org/boostcourse-ui/lecture/37435/ )
미디어 쿼리도 별도의 문법을 가지고 있는데 필자는 문법을 보니 괜히 더 헷갈리는 것 같아 바로 실습 코드 공개로 넘어가려 한다. ( 자세한 문법이 궁금하신 분들 역시 링크를.. https://www.edwith.org/boostcourse-ui/lecture/37465/ )
123456789101112131415161718192021222324252627282930313233343536373839404142434445<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/*0 ~ 767 gold , 768~1024 lightblue , 1025 ~ lightpink0 ~ 767 모바일 , 768~1024 태블릿 , 1025 ~ PC*/body {background: lightpink;}@media screen and (max-width : 767px) {body { background: gold;}}@media screen and (min-width : 768px) and (max-width : 1024px) {body { background: lightblue;}}a {text-decoration: none;color: black;}@media print{a:after{display: inline;content : '(' attr(href) ')';}}</style></head><body><p>W3C는 <a href="https://www.w3.org/TR/css3-mediaqueries/">CSS 미디어쿼리 문서</a>를 2012년 6월에 표준 권고안으로 제정하였습니다</p><p>또한 기존의 미디어쿼리 개선 작업을 진행중이며, 2017년 9월에 <a href="https://www.w3.org/Style/2012/MediaQueriesDisposalOfComments.html">미디어쿼리 레벨4</a>를 발표했습니다. 이 문서는 현재 유력 표준 권고안입니다</p></body></html>width의 변화에 따라 배경색이 변하는 간단한 코드인데
PC로 볼 때는 기본적으로 lightpink 지만 태블릿에선 lightblue, 모바일에선 gold로 변하도록 하게 만드는 코드다.
주석으로도 적어놨지만 실무에서도 0~767 까지를 모바일, 768~1024를 태블릿, 1025~ 을 PC의 기준으로 사용한다고.
이제 코드의 내용을 개발자 도구를 활용해 확인해보면
의도대로 배경색이 잘 바뀌는 걸 확인할 수 있다.
또 하나 확인할 게 있는데 바로 @media print 부분이다.
위 코드의 내용을 브라우저 화면에서 보면
위와 같이 나오지만 브라우저의 인쇄 버튼을 눌러서 인쇄 미리보기로 보면
위와 같이 a태그 href 속성에 적어둔 주소가 함께 보이는 걸 확인할 수 있다. 미디어 타입이 print 일때 저렇게 나오도록 세팅해 둔 덕이다.
미디어 쿼리는 위와 같은 방식 외에도
12이렇게 link 태그에 media 속성을 활용하여 미디어 타입에 따라 각각 다른 css 파일이 적용되도록 사용할 수도 있다
참고
Responsive Web ② – 반응형 웹을 위한 레이아웃 설계 방법
Responsive Web ② – 반응형 웹을 위한 레이아웃 설계 방법
www.samsungsds.com
[LECTURE] 4) 실습 : edwith
들어가기 전에 두 가지의 실습 예제를 준비했습니다. 준비된 예제의 조건을 만족하는 미디어 쿼리를 같이 작성해봅니다. 그리고 브라우저의 개발자 도구의 가상 미디어 환경을 이용해서 작... - 양동현
www.edwith.org
반응형'Knowledge > HTML & CSS' 카테고리의 다른 글
블록 레벨 ( Block level ) 요소와 인라인 ( Inline ) 요소에 대하여 (0) 2019.12.10 CSS 클래스명을 정돈해보자 BEM ( Block, Element, Modifier ) 방법론 (0) 2019.11.14 HTML 문서의 기본구조 ( DOCTYPE, html, head , meta, title, body ) (0) 2019.10.08 클릭시 스크롤이 상단으로 이동하거나 주소 뒤에 #이 붙으면 범인은 A태그! (0) 2019.08.22 strong과 em 사용이 웹 표준에 어긋나지 않는 이유 (0) 2018.03.05