반응형 웹 viewport / @media / screen / max-width /min-width

[ 반응형 웹 ] viewport / @media
- media query => 기기별로 세팅

1. < View Port > 사용
: 1개 html 파일만으로도, 자동 크기 세팅 해주는 기능

- meta 태그
<meta charset = "UTF-8">
<meta title = "java" >
- 검색엔진을 사용하는 기능인데, 이걸 사용해서 View Port 를 활성화 시킨다

html 브라우저 => pc, 노트북, 패드, 스마트폰, 워치
( 브라우저에서도 크기에 따라 세팅 )

[ viewport 설정 ]
< meta
name="viewport"
content="user-scalable=yes, initial-scale=1, maximum-scale=2" >

- scalable : 확대축소 yes가능 no불가능
세트로 initial maximum 설정 필요
(1: 원본 / 2 : 두배 )
(no 일땐 initial만 1로 설정)

=> no 일때도 이렇게 뷰폴트 설정을 해줘야 기기별로 크기조절해줌



2. < @media > 사용 screen / max min / orientation

[1. 기기별 구별 ]

@media screen (max:899 min 499){
width:500}
=> 화면이 min~max 크기일 때, width 500으로 지정

@media print (max:899 min 499){
width:500}

=> print 인쇄 크기 해당사항일 때, 크기설정 width 설정
[ width - device ]
width = device-width
: 너비 이런식으로 줄 수 있다.


< CSS파일로 따로 빼놓고 link 로 사용하기 >

<link href="screen.css" rel="stylesheet" media="screen">
<link href="Printer.css" rel="stylesheet" media="print">

link href : css파일 불러와서 사용하겠다.
rel : 종류는 stylesheet 다
media : 미디어가 screen일때 / print 일때


[ 2. 화면크기로 구별 ]
- and 조건 사용
- 보통 가로 크기만으로 구별 가능
( 웹브라우저 창 크기에 따라서도 구별됨 )


<style>
//스마트폰
@media screen and (max-width : 767px)
{ body { brack-color:~}
//테블릿
@media screen and (min-width : 768px) and
(maxwidth 959px){ body{backcolor green;} }
//PC
@media screen and (min-width : 960px)
{ body { brack-color:~} }

</style>


[3. orientation 으로 구별 ]
- orientation : portrait 세로 / landscape 가로


@media screen and (orientation: portrait) { CSS }
- 스크린이고, 세로가 더 긴 화면일 때 (스마트폰)
@media screen and (orientation: landscape) { CSS }
- 스크린이고, 가로가 더 긴 화면일 때 (테블릿)


---

[ 특정 미디어 적용 시키기 ]

- 기본적으로 style에서 반응형 웹 CSS 줄 때,
기본 CSS 먼저 써서 적용 시키고,
맨 밑에 반응형 CSS 줘서,
해당 사항 없는 기기들은 공통으로 기본 CSS 받고,
해당 되는 특정 기기들은 반응형 CSS 적용 되게끔 구성 할 수 있다.

예)
<style>
기본 CSS 전체적용 할거 줘놓고,

마지막에, 반응형 CSS 넣기

@media screen and (max-width: 767px) {
( 핸드폰 규격에 해당한다면 )
body { width: auto }
#menu { width: auto; float: none; }
#section { width: auto; float: none; }

ul li { list-style-type: none; }
h1 {display : none;}

=> screen이고, 크기 스마트폰 화면 크기일 때,
너비 다 auto로 주고, float 도 없애버리고, h1 안보이게 해버리고
하는식으로, 작은 화면에 대한 설정을 걸어 놓는 식으로 사용



이런 ViewPort , @media를 이용한 반응형 웹 기능으로, ( media query )
하나의 HTML 만으로도, 전혀 다른 크기의 기기들에 적절하게 화면을 뿌릴 수 있는
매우 편리한 개발 환경이 만들어졌다.