week 9

9주차

12 반응형 웹과 미디어 쿼리

12-1 반응형 웹 알아보기

반응형 웹 디자인이란

반응형 웹 디자인(responsive web desing)은 웹 요소를 화면 크기에 맞게 재배치하고 각 요소의 표시 방법만 바꾸어 사이트를 구현해 줌. *CSS3를 지원하는 모던 브라우저에서만 사용 가능

모바일 기기를 위한 뷰포트

뷰포트(viewport) : 스마트폰 화면에서 실제 내용이 표시되는 영역 뷰포트를 지정하면 접속한 기기의 화면에 맞추어 확대하거나 축소해서 표시할 수 있음 *웹키트를 기반으로 한 브라우저(webkit-based browser)란 브라우저를 동작시키는 실행 엔진이 웹키트(webkit) 엔진이라서 붙은 이름. PC용 크롬, 엣지, 사파리 브라우저를 비롯해 대부분의 모바일 브라우저는 웹키트 엔진을 기반으로 함

뷰포트 지정하기

뷰포트는 <head>와 </head> 태그 사이에 작성 기본형 <meta name="viewprot" content="속성1=값1, 속성2=값2, ...">

width : 뷰포트 너비 값 : device-width 또는 크기 | 기본값 : 브라우저 기본값
height : 뷰포트 높이 값 : device-height 또는 크기 | 기본값 : 브라우저 기본값
user-scalable : 확대/축소 가능 여부 값 : yes/no (yes는 1로, device-width와 device-height값은 10으로 간주) | 기본값 : yes
initial-scale : 초기 확대/축소 값 값 : 1~10 | 기본값 : 1

가장 많이 사용하는 뷰포트 속성 : 웹 페이지 뷰포트의 너비를 스마트폰 화면 너비에 맞추고 초기 화면 배율을 1로 지정 <meta name="viewport" content="width=device-width, initial-scale=1">

뷰포트 단위

vw(viewport width): 1vw는 뷰포트 너비의 1%와 같습니다.
vh(viewport height): 1vh는 뷰포트 높이의 1%와 같습니다.
vmin(viewport minimum): 뷰포트의 너비와 높이 중에서 작은 값의 1%와 같습니다.
vmax(viewport maximum): 뷰포트의 너비와 높이 중에서 큰 값의 1%와 같습니다.

12-2 미디어 쿼리 알아보기

미디어 쿼리 알아보기

미디어 쿼리 (media queries) : CSS 모듈. 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하는 방법

미디어 쿼리 구문

미디어 쿼리는 @media 속성을 사용해 특정 미디어에서 어떤 CSS를 적용할 것인지 지정해줌. 기본형 @media [only | not] 미디어 유형 [and 조건] * [and 조건]

only : 미디어 쿼리를 지원하지 않는 웹 브라우저에서는 미디어 쿼리를 무시하고 실행하지 않음
not : not 다음에 지정하는 미디어 유형을 제외. ex) not tv : TV를 제외한 미디어 유형에만 적용
and : 조건을 여러 개 연결해서 추가 *조건이 같은 미디어 유형이 여러 개라면 쉼표로 구분해서 추가

미디어 쿼리 구문은 <style>과 </style> 사이에 사용하며 대소문자를 구별하지 않음 기본적으로 미디어 유형을 지정해야 하고 필요할 경우 and 연산자로 조건 적용

미디어 유형의 종류

all : 모든 미디어 유형
print : 인쇄 장치
screen : 컴퓨터 스크린. 스마트폰 스크린 포함
tv : 음성과 영상이 동시에 출력되는 TV
aural : 음성 합성 장치(주로 화면을 읽어 소리로 출력해 주는 장치)
braille : 점자 표시 장치
handheld : 패드처럼 손에 들고 다니는 장치
projection : 프로젝터
tty : 디스플레이 기능이 제한된 장치. 픽셀(px) 단위 사용할 수 없음
embossed : 점자 프린터

웹 문서의 가로 너비와 세로 높이 속성 뷰포트 : 실제 웹 문서 내용이 화면에 나타나는 영역 뷰포트의 너비와 높이를 미디어 쿼리의 조건으로 사용할 수 있음. *screen이 아닌 미디어에서는 스크롤을 포함한 전체 문서를 height로 지정해야 하며, print에서는 한 페이지 높이를 기준으로 함

width, height : 웹 페이지의 가로 너비, 세로 높이
min-*, max-* : 웹 페이지의 최소/최대 너비, 높이

단말기의 가로 너비와 세로 높이 속성

device-width, device-height : 단말기의 가로 너비, 세로 높이
min-device-*, max-device-* : 단말기의 최소/최대 너비, 높이

화면 회전 속성 orientation 속성을 사용하면 기기의 방향을 확인할 수 있고, 그에 따라 웹 사이트의 레이아웃을 바꿀 수 있음

orientation: portrait : 단말기의 세로 모드 지정
orientation: landscape : 단말기의 가로 모드 지정. 기본값.

미디어 쿼리의 중단점 중단점(break point) : 화면 크기에 따라 서로 다른 CSS를 적용할 분기점 이 중단점을 어떻게 지정하느냐에 따라 CSS가 달라지고 화면 레이아웃이 바뀌는데, 대부분 기기의 화면 크기를 기준 모바일의 제약 조건이 더 많으므로 모바일의 레이아웃을 기본으로 하고, 태블릿과 데스크톱에 맞춰 더 많은 기능과 스타일 추가 -> 모바일 퍼스트(mobile first) 기법 : 모바일을 먼저 고려하여 미디어 쿼리를 작성하는 것 *모바일 기기 뷰포트 크기 정리 사이트 : yesviz.com/devices.php

미디어 쿼리 적용하기

외부 CSS 파일로 연결하는 방법 각 조건별로 CSS 파일을 따로 저장한 뒤 <link>태그나 @import문을 사용해서 연결
1. <link>태그는 <head>와 </head> 사이에 위치 기본형 <link rel="stylesheet" media="미디어 쿼리 조건" href="css 파일 경로">
2. @import문은 <style>과 </style> 사이에 위치 기본형 @import url(css 파일 경로) 미디어 쿼리 조건
*CSS파일이 많고 규모가 큰 사이트 개발 시 @import문보다 <link> 태그를 주로 사용
웹 문서에 직접 정의하는 방법
1. <style> 태그 안에서 media 속성을 사용하여 조건을 지정하고, 그 조건에 맞는 스타일 규칙을 정의 기본형
```
 <style media="<조건>" {
 	<스타일 규칙>
 }
 </style>
```
1. 스타일을 선언할 때 @media문을 사용해 각 조건별로 스타일을 지정해 놓고 스타일을 선택해서 적용 기본형
```
 <style>
 @media <조건> {
 	<스타일 규칙>
 }
 </style>
```