[ FE ] Do it! 프런트엔드 웹디자인 입문 07-1 뷰포트와 미디어 쿼리 알아보기

뷰포트

뷰포트 : 스마트폰에서 실제 콘텐츠가 표시되는 부분

설정하지 않을 경우, 데스크탑과 스마트폰의 1px가 같지 않기에 스마트폰의 글씨가 pc 대비 작아짐

사용하는 태그 <meta>

뷰포트 설정 소스

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<!-- content="width=device-width 문서를 현재 기기의 너비에 맞춘다 -->
<!-- initial-scale=1 문서를 불러와 표시할 때 기본 배율을 1로 지정한다 -->

<meta> 속성

width 뷰포트의 너비 - 기본값 device-width

height	뷰포트의 높이 - 기본값 device-height
inital-scale	초기 배율 - 기본값 1 (1보다 작은 값이면 축소 페이지, 크면 확대페이지를 표시)
user-scalable	사용자가 페이지를 확대/축소할 수 있는지 여부 지정 - 기본값 yes
minimum-scale	확대/축소할 수 있는 최솟값(가로기준) - 기본값 0.25
maximum-scale	확대/축소할 수 있는 최댓값(가로기준) - 기본값 5.0
target-dendityDpi	고해상도 단말기의 화면 해상도에 맞출 수 있도록 페이지 확대 - 기본값 device-dpi

미디어 쿼리 구문

미디어 쿼리를 사용하기 위해서는 CSS를 정의하는 <style> 태그 안에 구문을 삽입해야 함

@media [only/not] 미디어 유형 [and 조건] * [and 조건]

• @media : 스타일 시트 안에서 미디어 쿼리를 시작하는 속성
• only/not : 미디어 쿼리를 적용할 유형을 지정할 떄 사용하는 접두어
  • only를 사용하면 only 다음의 미디어 유형에만 적용된다
  • not을 사용하면 not 다음의 미디어 유형을 제외한 나머지 유형에만 적용된다
• 미디어 유형 : 화면인지 프린터인지 tv인지 등 미디어 쿼리를 적용할 기기를 지정하는 부분 쉼표를 사용해 여러가지 미디어 유형을 나열할 수 있다
• 조건 : 미디어 유형 외에 기기와 관련된 조건을 지정한 후 해당 조건에 맞는 경우에만 CSS가 적용되도록 지정할 수 있다 조건은 () 로 묶어서 표현하며 두개 이상의 조건을 나열할 경우 and 연산자를 사용한다

미디어 유형

all 모든 미디어

screen	화면이 달려있는 기기, 스마트폰 pc 모두 해당
print	인쇄 장치
tv	음성과 영상이 동시 송출되는 tv
aural	음성합성장치

기타 등등

조건 - 디스플레이

width 웹 문서의 너비

height	웹 문서의 높이
device-width	기기의 높이
orientation	화면의 방향 landscape 가로 / portrait 세로 중 선택
aspect-ratio	화면 비율
device-aspect-ratio	기기의 화면 비율
resolution	기기의 해상도

조건 - 색상

color 기기의 비트 수

color-index

기기의 색상 수

Ex

• 화면 너빗값이 1260px 이하일 경우 적용한 스타일을 정의하는 경우 {} 안에 스타일 속성 표시

@media screen and(max-width: 1260px)  {}

• 다른 조건을 더 넣고 싶은 경우 and ( 조건 )

@media screen and(min-width:921px)and(max-width: 1260px) {}

미디어 쿼리 중단점

미디어 쿼리를 작성할 때 화면 크기에 따라 서로 다른 CSS를 적용할 분기점

@media screen and (max-width: 1260px) {}

다음 미디어 쿼리는 1260px 일 경우에 적용되므로 1260px가 중단점이 된다

미디어 쿼리 중단점을 어떻게 지정하느냐에 따라 CSS가 달라지고 화면 레이아웃이 바뀐다

대부분 기기의 화면 크기를 기준으로 한다

+@ 미디어 쿼리를 지원하지 않는 브라우저에 대응하는 법

respond.js 자바스크립트 라이브러리를 다운로드 후 링크하면 됨

1. github.com/scottjehl/Respond 페이지에서 다운로드 후 src\respond.js 파일을 원하는 폴더로 복사
2. CSS의 조건 주석문을 사용하여 인터넷 익스프로어 9 이하 버전에서만 가져오도록 한다

<!-- [if it IE 9]
	<script src="script/respond.js"></script>
<[endif]-->

script 폴더 안에 respond.js 파일을 저장한 경우