반응형웹(Responsive Web)
디바이스의 종류에 따라 웹페이지의 크기가 자동적으로 재조명 되는 것을 말한다.
1. 미디어 쿼리(Media Query)
단말기 종류에 따라 각각 다른 스타일을 적용시키게해준다.
미디어 쿼리 문법
only | not
- only 키워드는 뒤에있는 조건만 , not 키워드는 뒤에 조건을 제외한 조건을 뜻한다.
미디어타입
- all : 모든 미디어 타입
- print : 프린터 기기
- screen : 크린(screen)이 있는 매체
속성
- width , height : 웹페이지 가로,세로 길이
- min-width , min-height : 웹페이지 최소 가로,세로 길이
- max-width , max-height : 웹페이지 최대 가로,세로 길이
2. 유동형 그리드(Fluid Grid)
그리드의 폭을 고정값(px) 이 아닌 em 또는 %값으로 설정해 웹의 가로길이에 따라 div의 width값이 바뀌는기법이다.
하지만 가로 폭에 반응을하는데 레이아웃에는 변화가없어 폭이 많이 좁은 모바일에는 큰 효과를 볼 수 없다.
3. 유동형 레이아웃(Liquid Layouts)
레이아웃 크기를 상대적 단위로 지정해 웹의 크기에 유동적으로 변화를 주고 , 미디어 쿼리를 사용해 일정크기가 되면 레이아웃구조를 바꿔주는 방법이다.
Mostly Fluid
가장 작은 화면에서만 수직으로 컬럼을 세우는 구조를 가지는 패턴이다.
Column Drop
화면이 작아짐에 따라 컬럼폭의 변화 대신 컬럼을 아래로 떨어뜨리는 방법을 쓰는 패턴
이다.
Laout Shifter
화면이 작아짐에 따라 각기다른 레이아웃을 보여주는 패턴여서 많은 작업이 필요하지만 혁신적인 디자인을 담을 수 있다.
Tiny Tweaks
하나의 컬럼을 사용하는 패턴으로 주로 글 내용을 중시하는 웹에서 많이쓰인다.
Off Canvas
큰 화면에서는 모든 컬럼들을 보여주고 작은화면은 다른 부가적인 컬럼들을 화면 밖에 숨겨놓은 패턴이다.
숨겨져 있는 다른컬럼은 필요할 때만 접근 하도록 한다.
적응형 웹(Adaptive Web)
특정 뷰포트의 크기에 맞게끔 설계된 웹 페이지를 만든다.
서버나 클라이언트에서 웹에 접근한 기기를 체크해 그 기기에 맞는 템플릿을 제공하는 개념이다.(HTTP GET 요청의 user-agent 헤더 정보)
ex) 스마트폰으로 네이버에 접속할 경우 m.naver.com로 리디렉션 시킨다.
vs 반응형
반응형에 반해 사용자의 기기에 맞는 템플릿 및 CSS만 다운로드 하므로 데이터 낭비가 적고 로딩 속도가 빠르다.
하지만 , 각 기기별로 별로의 템플릿을 작성해야 하므로 개발이 복잡해진다.
