반응형 웹

태블릿, PC, 모바일 등 다양한 디바이스의 해상도로 접근할 때 불편함이 없는 서비스를 제공하기 위해 디바이스에 맞는 해상도에 따라서 레이아웃과 스타일에 최적화를 해주어 사용자에게 편의성이 높은 UI 화면을 제공한다.

Media Qeury

• only|not
  -only : 뒤의 조건에서 만
  -not : 뒤의 조건을 제외한

• 미디어 타입
  -all : 모든 미디어 타입
  -aural : 음성 합성 장치
  -braille : 점자 표시 장치
  -handheld : 손으로 들고 다니면서 볼 수 있는 작은 스크린에 대응
  -print : 인쇄 용도
  -projection : 프로젝터
  -screen : 컴퓨터 스크린
  -tty : 디스플레이 능력이 한정된 릴랙스, 터미널, 수동 이동 장치 등 고정된 글자를 사용하는 미디어
  -tv : 음성과 영상이 동시 출력되는 장치
  -embrossed : 페이지에 인쇄된 점자 표시 장치

• 속성
  -width : 웹 페이지의 가로길이
  -height : 웹 페이지의 세로 길이
  -device-width : 단말기의 가로길이
  -device-height : 단말기의 세로 길이
  -orientation : width와 height을 구해
  -width > height 일 경우 landscape
  -height > width 일 경우 portrait
  -aspect-ratio : width / height 비율
  -device-aspect-ratio : 단말기의 물리적인 화면 비율
  -color-index : 단말기에서 사용하는 최대 색상 수
  -monochrom : 흑백 컬러만을 사용하는 단말기에서 흰색과 검은색 사이의 단계
  -resolution : 지원하는 해상도를 판단
  -color : 단말기에서 사용하는 최대 색상 수의 비트 수
  (2의 지수를 뜻한다) ex) 1 은 2, 2는 4, 3 은 8

Fluid Grid

그리드의 폭을 고정 값이 아닌 em 또는 % 의 값으로 설정하는 것을 뜻하며 가로 폭의 길이의 변화에 따라서 칼럼의 크기가 상대적으로 변하게 하는 방법이다. 레이아웃에는 변화가 없을 수 있으므로 폭이 많이 좁은 모바일에서 큰 효과를 볼 수 없을 수도 있다.

Liquid Layouts

유동형 그리드와 같이 반응형 웹 기법 중 하나로 레이아웃 크기를 유동형 그리드와 같이 상대적 단위로 지정하여 웹의 크기에 따라 유동적으로 변화를 준다. 반응형 그리드와 같이 미디어 쿼리를 사용하여 일정 크기가 되면 레이아웃 구조를 바꾸어 준다.