스마트폰, 태블릿, 스마트TV 등 브라우저 환경이 다양하게 바뀌는데 기존 웹 사이트의 내용을 그대로 유지하면서 다양한 화면 크기에 맞게 표시할 수 있도록 해줌.
모바일 기기를 위한 뷰포트
뷰포트(viewport)란, 스마트폰 화면에서 실제 내용이 표시되는 영역. 뷰포트를 지정하면 접속한 기기의 화면에 맞추어 확대하거나 축소해서 표시할 수 있음.- pc화면에 맞춰 제작한 사이트를 모바일 기기에서 확인하면 원래 pc화면 크기만큼 표시하므로 글자가 아주 작음. 또한 모바일 기기에 적합한 사이트를 제작했더라도 정작 스마트폰 화면에서 내용을 확인하면 원래 의도한 대로 표시되지 않기도 함. 이것은
웹키트(webkit)를 기반으로 한 모바일 브라우저의 기본 뷰포트 너비가980px이기 때문.- 웹키트를 기반으로 한 브라우저(webkit-based browser)란, 브라우저를 동작시키는 실행 엔진이 '웹키트(webkit)' 엔진이라서 붙은 이름임. pc용 크롬, 엣지, 사파리 브라우저를 비롯해 대부분의 모바일 브라우저는 웹키트 엔진을 기반으로 함.
뷰포트 지정하기
기본형
<meta name="viewport" content="속성1=값1", "속성2=값2", ...">
-
뷰포트의 속성
-
가장 많이 사용하는 뷰포트 속성 : 웹 페이지 뷰포트의 너비를 스마트폰 화면 너비에 맞추고 초기 화면 배율을 '1'로 지정
<meta name="viewport" content="width=device-width, initial-scale">뷰포트 단위
뷰포트 개념이 등장하기 전까지는 CSS에서 크기를 지정할 때 주로 px, %의 단위를 사용했지만 이제는 다음과 같이 뷰포트를 기준으로 하는 단위를 사용할 수도 있음.
vw(viewport width) :1vw는뷰표트 너비의 1%와 같음.vh(viewport height) :1vh는뷰포트 높이의 1%와 같음.vmin(viewport minimum) : 뷰포트의너비와 높이 중에서 작은 값의 1%와 같음.vmax(viewport maximum) : 뷰포트의너비와 높이 중에서 큰 값의 1%와 같음.
예를 들어, 뷰포트의 너비가 1000px, 높이가 800px일 경우 1vw는 10px, 1vh는 8px임. 1vmin은 8px, 1vmax는 10px이 됨. 만일 화면을 돌리면 방향이 바뀌므로 1vw는 8px, 1vh는 10px, vmin과 vmax는 큰 값과 작은 값 변화가 없으므로 그대로 유지됨.
미디어 쿼리
참조 사이트 : Media Queries, W3C, YESVIZ(뷰포트크기)
CSS모듈인 미디어 쿼리(media queries)는 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하는 방법임. 미디어 쿼리를 사용하면 접속하는 기기의 화면 크기에 따라 레이아웃이 달라짐.
미디어 쿼리 구문
기본형
@media [only | not] 미디어 유형 [and 조건] * [and 조건]
① only : 미디어 쿼리를 지원하지 않는 웹 브라우저에서는 미디어 쿼리를 무시하고 실행하지 않음.
② not : not 다음에 지정하는 미디어 유형을 제외함. 예를 들어 not tv라고 지정하면 tv를 제외한 미디어 유형에만 적용
③ and : 조건을 여러 개 연결해서 추가할 수 있음.
미디어 쿼리 구문은 <style>과 </style>사이에 사용하며 대소문자를 구별하지 않음. 기본적으로 미디어 유형을 지정해야 하고 필요할 경우 and 연산자로 조건을 적용함.
예를 들어, 미디어 유형이 screen이면서 최소 너비가 768px이고 최대 너비는 1439px일 경우 아래와 같이 CSS를 정의함.
@media screen and (min-width: 768px) and (max-width:1439px) {
... 생략 ...
}① 미디어 유형의 종류
미디어 쿼리는 미디어별로 적용할 CSS를 따로 작성하므로 @media속성 다음에 미디어 유형을 알려 줘야 함.
- @media 속성의 미디어 유형
② 웹 문서의 가로 너비와 세로 높이 속성
실제 웹 문서 내용이 화면에 나타나는 영역을 뷰포트라고 하는데 뷰포트의 너비와 높이를 미디어의 쿼리 조건으로 사용할 수 있음. 이때 높이값은 미디어에 따라 달라지므로 주의해야 함. (★ screen이 아닌 미디어에서는 스크롤을 포함한 전체 문서를 height로 지정해야 하며, print에서는 한 페이지 높이를 기준으로 함.)
- 웹 문서의 가로 세로 속성
예를 들어, 너비가 1440px이상일 때 미디어 쿼리는 다음과 같이 정의함.
@media screen and (min-width: 1440px) {
... 생략 ...
}③ 단말기(device)의 가로 너비와 세로 높이 속성
대부분의 단말기 해상도와 실제 브라우저의 너비가 다름. 예를 들어, 아이폰 단말기 자체의 해상도와 아이폰의 웹 브라우저인 사파리의 너비는 다름.
- 단말기의 가로 세로 속성
예를 들어, iPhone X일 경우 미디어 쿼리는 다음과 같음.
@media screen and (min-device-width: 375px) and (min-device-height: 812px) {
... 생략 ...
}④ 화면 회전 속성
미디어 쿼리에서 orientation 속성을 사용하면 기기의 방향을 확인할 수 있고, 그에 따라서 웹 사이트의 레이아웃을 바꿀 수 있음.
- 화면 회전 속성
예를 들어, iPhone X를 가로로 돌릴 경우에 미디어 쿼리는 다음과 같이 작성할 수 있음.
@media screen and (min-device-width: 812px) and (orientation: landscape) {
... 생략 ...
}⑤ 미디어 쿼리의 중단점
미디어 쿼리를 작성할 때 화면 크기에 따라 서로 다른 CSS를 적용할 분기점을 중단점(break point) 이라고 함. 이 중단점을 어떻게 지정하느냐에 따라 CSS가 달라지고 화면 레이아웃이 바뀌는데, 대부분 기기의 화면 크기를 기준으로 함.
스마트폰: 모바일 페이지는 미디어 쿼리를 사용하지 않고 기본 CSS로 작성함. 만일 스마트폰 방향까지 고려해서 제작한다면min-width의 세로와 가로를 각각portrait 320px,landscape 480px로 지정함.태블릿: 세로 크기가768px이상이면 태블릿으로 지정. 가로 크기는 데스크톱과 같이1024px로 지정데스크톱: 화면 크기가1024px이상이면 데스크톱으로 설정함.
미디어 쿼리 적용하기
① 외부 CSS 파일 연결하기
기본형
<link rel="stylesheet" media="미디어 쿼리 조건" href="CSS 파일 경로">
예를 들어, 인쇄용 CSS를 정의한 css\print.css 파일을 만들어 놓았다면 아래와 같은 코드를 작성하여 웹 문서와 연결
<link rel="stylesheet" media="print" href="css\print.css">또는 @import문을 사용할 수 있음.
기본형
@import url(css 파일 경로) 미디어 쿼리 조건
예를 들어, 태블릿용 CSS를 정의한 css\tablet.css 파일을 만들고, 너비값이 321px 이상이면서 768px 이하일 때에 미디어 뭐리를 적용하면 다음과 같이 지정할 수 있음.
@import url("css/tablet.css") only screen and (min-width: 321px) and (max-width: 768px);② 웹 문서에 직접 정의하기
기본형
<style media="<조건>"> { <스타일 규칙> } </style>
예를 들어, media 속성을 사용해 화면 너비가 320px 이하일 때 배경색을 주황색으로 바꾸는 미디어 쿼리는 아래와 같음.
<style media = "screen and (max-width: 320px)">
body {
background-color: orange;
}
</style>
기본형
<style> @media <조건> { <스타일 규칙> } </style>
에를 들어, @media 문을 사용해 화면 너비가 320px이하일 경우 배경색을 주황색으로 바꾸는 미디어 쿼리는 아래와 같음.
<style>
@media screen and (max-width: 320px) {
body {
background-color: orange;
}
}
</style> 
