<HTML5+CSS3>반응형 웹 사이트 만들기

반응형 웹 디자인- 브라우저 화면 크기에 따라 웹 페이지 각 요소의 크기나 위치를 변화시키는 웹 디자인 기법

 

원래 웹사이트 내용을 그대로 유지하면서 다양한 화면 크기에 맞게 웹사이트를 표시할수 있는 방법이 반응형 웹 디자인이다.

 

대표적인 사이트 : http://colly.com 이 사이트는 브라우저 창의 크기를 조절하면 화면이 바뀐다.

기기에 맞는 사이트를 따로 제작하지 않고 화면 크기에“반응”하여 화면 요소들을 자동적으로 바꾸어 사이트를 구현하는 것이 반응형 웹 디자인 이다.

미디어 쿼리

-CSS3모듈 중 하나로 사이트에 접속하는 장치에 따라 특정한 CSS스타일을 사용하도록 해 주는 기능.

 

미디어 쿼리 구문

-미디어 쿼리는 @media 속성을 사용해 특정 미디어에서 어떤 CSS를 적용할 것인지 지정해 줍니다.

ex) @media [ONLY | NOT ] 미디어 유형 [AND조건] * [AND조건]

 

미디어 쿼리 구문은 대,소문자를 구별하지 않습니다. 기본으로 미디어 유형이 지정되어야 하고 필요할 경우 AND연산자로 조건을 적용합니다.

 

예를 들어 미디어 유형이 ‘screen’ 이면서 최소 너비: ‘200px’ 최대 너비: ‘360px’일 경우

ex) @media screen and (min-width:200px) and (max-width:360px) {

...

}

->이처럼 필요할 경우 조건을 계속 추가할 수 있다. 쉼표를 사용해 새로운 미디어 유형과 조건을 추가하면 된다. 

% ONYL 는 미디어 쿼리를 지원하는 웹 브라우저에서만 조건을 인식하게 합니다. 이 키워드를 사용하면 미디어 쿼리를 지원하지 않는 웹 브라우저에서는 미디어 쿼리를 무시하고 실행하지 않습니다. IE 외의 대부분 브라우저에선 미디어 쿼리를 인식한다.

%IE에서는 미디어 쿼리를 제대로 인식하지 못하기 때문에 ONLY키워드를 사용하더라도 큰 의미는 없다.

 

%NOT은 NOT다음에 지정하는 미디어 유형을 제외하다. ex) ‘NOT tv’라고 지정하면 TV를 제외한 미디어 유형에만 적용한다.

미디어 유형의 종류

 

미디어 유형

(1) all : 모든 미디어 유형에서 사용할 CSS를 정의한다.

(2) print : 인쇄 장치에서 사용할 CSS를 정의한다.

(3) screen : 컴퓨터 스크린에서 사용할 CSS를 정의한다. 스마트폰의 스크린도 포함된다.

(4) tv : 음성과 영상이 동시 출력되는 TV에서 사용할 CSS를 정의합니다.

(5) aural : 음성 합성 장치 (주로 화면을 읽어 소리로 출력해 주는 장치)에서 사용할 CSS정의

(6) braille : 점자 표시 장치에서 사용할 CSS를 정의한다.

(7) handheld ; 패드처럼 손에 들고 다니는 장치를 위한 CSS정의

(8) projection : 프로젝터를 위한 CSS 정의

(9) tty : 디스플레이 기능이 제한된 장치에 맞는 CSS를 정의, 이런 장치에서는 픽셀 단위를 사용할 수 없다

(10) embossed : 점자 프린터를 위한 CSS정의

 

미디어 쿼리에서 사용하는 조건

-미디어 쿼리에서 사용하는 조건은 주로 화면의 크기와 관련된 조건들이 많다. 화면의 크기를 체크하여 크기에 따라 다른 CSS가 적용되도록 하는 것이다.

 

미디어 쿼리에서 체크하는 조건

 

가로 너비와 세로 높이

-뷰포트 : 실제 웹 문서 내용이 화면에 보여지는 영역. 뷰포트의 너비와 높이를 미디어의 쿼리의 조건으로 사용할 수 있다 높이 값은 미디어에 따라 달라지기 때문에 주의

 

가로 너비와 세로 높이를 지정할 수 있는 속성

(1) width , height : 웹 페이지의 가로 너비, 세로 높이

(2) min-width, min-height : 최소 너비,최소 높이

(3) max-width, max-height : 최대 너비, 최대 높이

 

% screen이 아닌 미디어에서는 스크롤을 포함한 전체 문서를 height로 지정, print에서는 한 페이지 높이를 기준으로 한다.

 

예를 들어, 뷰포트의 너비가 600px 이상이고 959px 이하일 경우 적용할 CSS는 다음과 같이 정의 합니다

ex) @media all (min-width:600px) and (max-width:959px) { ... }

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

-단말기에서 기본으로 제공하는 물리적인 가로 너비와 세로 높이 크기를 체크합니다.

단말기의 너비와 높이는 단말기 브라우저 창의 너비와 높이를 말합니다.

단말기 대부분이 단말기 해상도와 실제 브라우저의 너비가 다릅니다.

ex) 아이폰4 해상도 : 640 * 960 이지만, 아이폰4의 사파리 브라우저의 너비는 320*480이다.

 

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

(1) device-width, device-height : 단말기의 가로 너비,세로 높이

(2) min-device-width, min-device-height : 단말기의 최소 너비, 최소 높이

(3) max-device-width, max-device-height : 단말기의 최대 너비, 최대 높이

 

다음은 단말기 너비 :320px 높이 480px 일 때 실행할 미디어 쿼리와, 단말기 너비가 320px 이상이고 높이가 480px 이상일 때 실행할 미디어 쿼리이다.

ex) @media all and (device-width:320px) and (device-height:480px) { . . . }

->단말기 너비가 320px , 높이가 480px 이면 실행

 

@media all and (min-device-width:320px) and (min-device-height:480px) {. . .}

->단말기 최소 너비가 320px 이고 최소 높이가 480px이면 실행

 

화면 회전 (orientation)

-미디어 쿼리를 작성할 경우 orientation 속성을 사용하면 화면이 어느 방향인지 체크할 수 있습니다. orientation 속성은 portrait 값과 landscape값을 사용할 수 있다.

 

속성 값

(1) portrait : 초상화처럼 긴 높이가 큰 값  단말기의 세로방향

(2) landscape : 풍경화처럼 가로가 넓은 값 width가 큰 값 단말기의 가로 방향 (기본 값)

 

ex) @media all and ( orientation:portrait) { . . . }   -> 단말기 방향이 세로일 때 즉, 뷰포트의 높이가 너비보다 크면 실행

     @media all and (orientation :landscape) { . . . } -> 단말기 방향이 가로일때 즉 뷰포트의 너비가 높이보다 크면 실행

 

화면 비율

-화면 비율은 브라우저 화면 너비 값을 높이 값으로 나눈 것으로 숫자 값을 사용하거나 계산식을 사용할 수 있다.

 

화면 비율 속상

(1)aspect-ratio : 화면 비율 (width 값 / height 값)

(2)min-aspect-ratio : 최소 화면 비율

(3)max-aspect-ratio : 최대 화면 비율

 

다음은 화면 비율을 조건으로 하는 미디어 쿼리의 작성 예이다

ex) @media all and ( aspect-ratio : 16/9) { . . . }

->뷰포트의 화면 비율이 16:9 (너비가 16 높이가 9인 비율)이면 실행

@media all and ( min-aspect-ration : 16/9) {. . . }

->뷰포트 화면 비율이 16:9 이상 이면 실행

@media all and ( max-aspect-ratio : 16/9) { . . . }

->뷰포트의 화면 비율이 16:9 이하면 실행

 

단말기의 물리적 화면 비율

-단말기 브라우저의 너비 값(device-width)과 높이 값(device-height)을 이용해 화면 비율을 계산 합니다

 

속성

(1) device-aspect-ratio :단말기 화면 비율 (단말기 너비/단말기 높이)

(2) min-device-aspect-ratio : 단말기 최소 화면 비율

(3) max-device-aspcet-ratio : 단말기 최대 화면 비율

 

다음은 화면 비율이 16:9일 때와 16:9 이상일 때, 그리고 16:9 이하일 때로 나누어 실행할 미디어 쿼리를 정의한 것이다

ex)@media all and (device-aspcet-ratio:16/9) ->화면 비율이ㅣ 16:9이면 실행

@media all and (min-device-aspect-ratio : 16/9 ) { . . .} ->단말기의 화면 비율이 16:9 이상이면 실행

@media all and (max-device-aspect-ratio : 16/9) { . . .} ->단말기의 화면 비율이 16:9 이하면 실행

 

%뷰포트와 단말기의 화면 비율은 device를 붙이냐 안붙이냐 차이이다 

색상당 비트 수

-단말기에서 사용하는 최대 색상 비트 수를 나타냅니다 color:1 이면 최대 두가지(2^1)색상을 나타내고 color:3이면 (2^3) 최대 여덟가지 색상을 표현하고 미디어가 컬러 색상을 지원하지 않으면 color:0으로 표시합니다

 

속성

(1) color : 비트수

(2) min-color :최소 비트 수

(3) max-color :최대 비트 수

 

다음은 색상에 대한 비트 수를 미디어 쿼리 조건으로 사용한 예이다 컬러를 지원하면 실행 조건, 아니면 실행 X 조건 이다

 

ex)@media all and (color) { . . . } ->컬러를 지원하면 실행

@media all and (color:0) { . . . }->컬러를 지원하지 않으면 실행

@media all and (color:3 ) { . . . } ->8비트 색상이라면 실행

@media all and (min-color:3) { . . . } - > 8비트 이하 색상이라면 실행