1. 웹 디자인
ㅇ 웹 문서를 `내용(content)`, `구조(layout/structure) 및 표현(presentation)`,
`동작(behavior)` 으로 분리하여 디자인/설계하는 것
2. 웹 디자인 분리 例
ㅇ 표현 및 구조의 분리 (CSS 및 HTML)
- 구조는 HTML에 의해, 표현은 별도의 CSS 에 의함
ㅇ 행동 및 구조의 분리 (Javascript 및 HTML)
- 행동은 별도 자바스크립트 에 의해, 구조는 HTML에 의함
ㅇ 행동 및 표현의 분리 (Javascript 및 CSS)
- 행동 및 표현을 별도의 자바스크립트 및 CSS 에 의함
3. 반응형 웹 디자인 (RWD, Responsive Web Design)
ㅇ 단일 웹 사이트에, PC,스마트폰,태블릿,TV 등 서로다른 장치들이 접속할 때,
- 장치 마다 다른 디스플레이,환경에 따라,
- 화면 크기 등이 자동으로 변하게끔 하여, 최적화된 웹페이지를 만들 수 있는 기법을 말함
ㅇ 감지된 미디어 타입, 화면 크기 등에 따라, 스타일 시트를 다르게 적용할 수 있게 해 줌
ㅇ 필요 기술
- 화면 크기를 감지하고 정확하게 제어,변환하는 기술
- 환경 변화를 감지하는 기술 등
ㅇ 주요 개념 넷
- 가변 그리드 (Fluid Grid, Fluid Layout, Flexible Layout, Flexible Grid)
. 기존의 픽셀(px) 위주의 고정 표현 방식에서, 퍼센트(%)에 의한 가변 표현 방식을 사용
- 미디어 쿼리 (Media Query)
. 현재 사용 중인, 입출력 미디어의 유형,특성에 대한 쿼리 및 그에따른 스타일 지정
- 뷰포트 (Viewport)
. 웹브라우저 상에 사용자에게 실제 보이는 화면 크기를 제어 가능하게 하는 기술
- 플렉시블 박스 (Flexible Box)
. 화면의 구조 설계를 쉽게 하기 위해, 가변적인 박스를 만들어내는 기술
ㅇ 반응형 웹 디자인을 위해 새겨둘 점
- 요소들을 각각 또는 그룹으로 배치할 것
- ... 편집중 ...