<HTML5+CSS3> 미디어 쿼리 적용하기

“미디어 쿼리 적용하기〃

-미디어 쿼리는 웹 문서 안에서 @media 문 다음에 조건에 맞는 CSS규칙을 직접 추가할 수도 있고 각 미디어 조건에 맞는 별도의 CSS파일을 만들어 <link>태그로 연결해서 사용할 수도 있습니다.

 

CSS파일 연결하기

-각 조건별로 스타일시트 파일을 따로 저장한 후, <link>태그나 @import문을 사용해서 미디어 유형에 따라 CSS파일을 가져와 연결합니다.

 

ex) <link href=“css 파일경로 ” rel=“stylesheet” type=“text/css” media=“미디어 쿼리 조건”>

 

예를 들어 , 인쇄용 스타일시트 print.css를 만들어 놓았다면 다음과 같이 연결한다

ex)<link href=“css/print.css” rel=“stylesheet” type=“text/css” media=“print”>

->프린트를 사용할 경우 외부 스타일시트 파일 print.css를 불러와서 사용하도록 링크

 

태블릿 PC에 맞는 스타일시트 tablet.css를 만들어 두었다면 너비가 321px이상일 때 적용되도록 다음과 같이 작성할 수 있다

ex)<link href=“css/tablet.css” rel=“stylesheet” type=“text/css” media=“screen and (min-width:321px) ” > ->321px이상의 화면에서는 tablet.css를 링크해서 사용하도록 지정

 

또다른 예로 너비가 321px이상 768px이하일 때 적용하는 것은

ex) <link href=“css/tablet.css” rel=“stylesheet” type=“text/css” media=“screen and (min-width:321px) and (max-width:768px) ” >

->화면 너비가 321px , 768px이하일 경우 tablet.css를 링크해서 사용

 

외부 CSS파일을 연결할 때 <link>태그 대신 import문을 사용할 수도 있다.

ex) @import url(css 파일 경로)

 

예로, 태블릿 PC에 맞는 스타일시트 tablet.css가 있고 , 너비가 321px이상 768px이하일 때 적용하도록 하고 싶다면 다음과 같이 지정한다

ex) @import url (“CSS/table.css”) screen and (min-width:321px) and (max-width:768px); ->화면 너비 321이상768이하일 경우 tablet.css를 문서 안에 포함 시켜서 (import) 사용

웹 문서에서 직접 정의하기

-2가지 방법이 있다

1번째: <style>태그 안에서 media속성을 사용해 조건 지정후 조건에 맞는 스타일 정의

ex1) <style media=“미디어 쿼리 조건”>

스타일 규칙들

</style>

ex2) <style media=“screen and (max-width:320px)”>

body {

background-color:orange; }

</style>

->최대 너비가 320px일 때 즉 너비가 320px 이하인 경우에 적용할 미딩어 쿼리이다

 

2번째: 스타일을 선언할 때 @media 문을 사용해 각 조건별로 스타일을 지정해 놓고 선택적으로 스타일을 적용하는 것이다.

 

 

ex 1.) <style>

@media 미디어 쿼리 조건 {

스타일 규칙들

}

</style>

 

ex 2.) <style>

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

body {background-color : orange}

}

</style>

-> @media문을 사용해 화면 너비가 320px이하일 경우 배경색을 오렌지로 바꾸는 미디어 쿼리문이다.

 

%차이점 : 1번째는 하나의 <style>태그 안에서 하나의 조건을 지정, but 2번째는 <style>태그 안에 여러 개의 조건에 따른 스타일을 모두 나열한 뒤 선택

반응형 웹 제작 시 고려해야 할 모바일 해상도

 

 

뷰포트 지정하기

-스마트 폰 화면에서 실제 내용이 표시되는 영역을 뷰포트라고 합니다. 

미디어 쿼리를 이용해 스마트폰의 뷰포트에 맞게 스타일을 정의했다 하더라도, 정작 스마트폰 화면에서 내용을 확인하면 페이지의 글자들이 아주 작게 표시되는 것을 보게 됩니다.

Why ??

웹키트기반인 모바일 브라우저들의 기본 뷰포트 너비가 980px이기 때문입니다. 따라서, 스마트폰용으로 웹 페이지 너비를 320px로 맞춰 웹사이트를 제작하더라도, 스마트폰의 모바일 브라우저의 기본 뷰포트 너비가 980px이기 때문에 웹 페이지 너비를 무조건 980px로 표시하려고 합니다. 결국, 스마트폰용으로 제작한 웹 페이지의 내용들은 의도한 것과 달리 작은 글씨와 작은 그림으로 표시됩니다.

이런 상황이 발생하지 않게 하려면 <meta>태그를 이용해 뷰포트 크기나 배율을 조절해야 합니다.

 

ex) <meta name=“viewport” content=“width=device-width”>

->이렇게 설정하면 뷰포트의 가로 너비와 단말기의 가로 너비를 맞출 수 있습니다.

width속성 외에도 여러 속성을 지정할 수 있다

 

ex) <meta name=“viewport” content=“속성1=값,속성2=값 , . . . ”　＞

 

뷰포트의 속성 값

(1)width : 뷰포트의 너비를 지정합니다. 기본 값은 device-width입니다

(2)height : 뷰포트의 높이 지정 기본 값은 device-height

(3)initial-scale : 초기 배율을 나타내며, 기본 값은 1 , 1보다 작은 값 사용시 축소된 페이지 큰값은 확대 페이지 표시.

(4)user-scalable : 사용자가 페이지를 확대/축소할 수 있는지 결정 기본값 : yes

(5)minimum-scale : 사용자가 축소할 수 있는 최솟값 지정 기본 값:0.25 가로 값을 기준으로함.

(6)maximum-scale : 사용자가 확대할 수 있는 최댓값 기본 값 5.0

 

 

% 5번과6번속성은 각각 값을 1.0으로 지정할 경우 user-scalable을 ‘yes’로 하더라도 사용자가 화면을 확대 or 축소할 수 없다.

 

 

 

다음 소스는 뷰포트 너비를 기기의 너비에 맞추고 초기 배율은 1.0 , 최고 확대 비율은 3.0으로 하고 사용자가 확대 / 축소할 수 있도록 뷰포트를 지정한 예이다.

 

ex) <meta name=“viewport” content=“width=device-width, user-scalable=yes , initial-scale=1.0 , maximum-scale=3.0” >

 

 

25