Eveningstar

MediaQuery & Veiwport 본문

HTML&CSS

MediaQuery & Veiwport

두루루루루 2017. 10. 17. 18:21

**미디어 쿼리와 뷰포트는 반응형 웹사이트를 만들기위해 꼭 필요한 방법이다. 디바이스의 화면크기를 감지하고 그에 따른 코드를 화면에 보여줄수있도록 하는 기술이다.


 [ 미디어쿼리 ]

- 화면의 크기나 환경에 따라 웹사이트를 변경하는 기술

  

 

1.기본문법

 

@media [only or not] [미디어유형] [and or ,(콤마)] (조건문) { 실행문 }

 

 

  1) only or not

 

   - only 키워드는  미디어쿼리를 지원하는 브라우저에서만 미디어쿼리를 해석하게 해주는 키워드로써 ie 8이하에서 지원하지 않기때문에 사용하지 않는 편

   - not 다음에 따라오는 조건을 부정하는 키워드임으로 not (조건문)은 "조건문"의 경우를 제외한 모든 미디어유형을 뜻함

 

   2) 미디어 유형

 

   - all, screen, tv, aural 등 많은 유형이 있음

 

 all

모든 장치

screen

컴퓨터와 스마트 기기의 화면

print

인쇄장치

 

   3) and or ,(콤마) - 논리 연산자를 사용함

 

     - and는 앞뒤 조건이 모두 사실일때  뒤에 따라오는 것을 해석해라라는 의미(all과 함께 쓰일땐 all생략가능)

       * and 구문 뒤에 공백 한칸을 꼭 띄어쓰기 해줘야함

     - , 는 앞뒤 조건 중 하나만 사실이더라도 뒤에 따라오는것을 해석하라는 의미


   4) 조건문


     4-1) @media (min-width:320px){ 실행문 } 

     4-2) @media (min-width:320px) and (max-width:768px){실행문}

   

 width

 웹페이지의 가로값

 

 min/max 

 height

 웹페이지의 세로값 

 

 min/max 

 device-width

 기기의 가로값 

 

 min/max 

 device-height

 기기의 세로값 

 

 min/max 

 orientation

 기기의 화면방향  

 portrait(세로) / landscape(가로)

 

 aspect-ratio

 화면비율 

 브라우저 화면비율(1)/종횡비(16/9),

 해상도(1280/720)

 


     기타 조건문 ->  https://www.w3schools.com/cssref/css3_pr_mediaquery.asp


 2. 적용 방법

  

   1) 링크방식

         


<link rel="stylesheet" href="mediaquery.css">


   

   2) 링크방식2 

     


<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">

<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">

   


   3) html 문서 내에 instyle로 작성

    


[ 뷰포트 ]


- 화면에서 실제 내용이 표시되는 영역, 스마트기기에 설정되어있는 뷰포트 영역으로 인해 미디어쿼리가 오작동 하지 않도록 뷰포트 메타태그를 꼭 추가해야함

- <head></head>사이에 meta viewport tag를 넣을 것




 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">


1) width : 뷰포트의 너비 지정 (device-width/양수), height : 뷰포트 높이 지정(device-height/양수)

2) initial-scale : 초기 배율 설정 - 기본값 1( a<1면 축소페이지, a>1면 확대페이지)

3) minimum-scale : 최소 축소비율 설정 – 최소 축소 비율 지정, 기본값 0.25

4) maximum-scale : 최대 확대비율 설정 – 최대 확대비율 지정, 기본값 0.5

5) user-scalable : 확대/축소여부 설정 - yes/no(no로 설정하면 사용자가 페이지 확대할 수 없음)



이외에도 디자인적으로 유동형 레이아웃[Liquid Layout]과 적응형 레이아웃[Adaptive Layout], 유동형 그리드[Fluid grid]등으로 반응형 웹사이트에 따른 화면구현에 대한 고찰이 필요하다.


1) 유동형 레이아웃의 한계 : 최대너비에 최적화된 레이아웃을 줄이게 되면 가독성이 떨어기는 단점이 있음(단순히 퍼센트로 화면크기를 줄이는 방식을 뜻하는 듯)


2) 적응형 레이아웃 : http://alistapart.com/article/switchymclayout (swiching 기법, pc/tab/mo 클래스를 따로만들어 해당 크기에서 display:none, block으로 제어하는 것)

http://alistapart.com/d/switchymclayout/transition_layout_news.html

->위의 예제 페이지에서는 behaviors_new.js 로 화면크기에 따라 body의 클래스를 바꿔서 레이아웃을 변경하게 하고있음.


3) 유동형 그리드는 고정적인 단위 px 대신 em과 %를 사용하여 화면에 맞게 디자인이 변하는 것, 대표적으로 부트스트랩의 grid시스템

 -> https://www.w3schools.com/w3css/w3css_grid.asp

* 부트스트랩 :  http://bootstrapk.com/css/#grid



참고자료 

- MDN mediaQuery  : https://developer.mozilla.org/ko/docs/Web/Guide/CSS/Media_queries#%EA%B5%AC%EB%AC%B8


[ 브레이크 포인트를 통해 기기별 화면크기에 따른 css 대응 ]

**breakpoint**

- https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

- 모바일과 태블릿 크기에 대응하는 mideaquery : Size https://gist.github.com/englishextra/11084565




'HTML&CSS' 카테고리의 다른 글

input 타입&스타일  (0) 2018.02.02
css3에 추가된 속성들(정리중)  (0) 2018.01.17
css3 transition/animation  (0) 2017.09.09
css3  (0) 2017.09.06
scrollbar 디자인  (0) 2017.08.23
'HTML&CSS' Related Articles more
Comments