반응형 웹 디자인(Responsive Web Design)
화면 크기에 따라 화면 요소들을 다르게 보여주도록 웹 페이지를 디자인하는 것을 말한다. 쉽게 말해 디바이스 종류에 따라 웹 페이지의 크기가 자동적으로 재조정되는 것이다. 하나의 HTML 소스 만으로 사용자의 특정 장치에 최적화된 환경을 제공한다.
미디어 쿼리(Media Query)
CSS 모듈 중 하나로, 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하도록 해주는 기능으로 반응형 웹 디자인의 핵심이다. 뷰포트의 크기에 따라 서로 다른 조판을 생성할 수 있다. 또한, 마우스가 아닌 터치스크린을 사용하는지와 같이 장치를 탐지하는 데도 사용할 수 있다.
연산자
and, not, only, ","(쉼표)가 있다. 이 중 쉼표는 논리 or 연산자처럼 동작한다.
미디어 유형 종류
all | 모든 장치에 적합 |
인쇄 결과물 및 출력 미리보기 화면에 표시 중인 문서 | |
screen | 컴퓨터, 태블릿 PC, 스마트폰 등의 화면 |
speech | 음성 합성 장치 |
이전에 tty, tv, projection, handheld, barille, embossed, aural 등이 있었으나 Media Queries 4에서 제거되었으므로 사용해서는 안된다. |
너비와 높이
@media screen and (max-width: 600px) {
body {
color: red;
}
}
위 코드는 뷰포트가 600px 이하인 경우 본문 색상을 빨간색으로 변경한다. max-width 외에, width, height, max-height 를 적용할 수 있다.
방향성
@media (orientation: landscape) {
body {
color: rebeccapurple;
}
}
orientation은 세로 모드인지 가로 모드인지 검사한다. 위 코드는 가로 모드일 때 본문 색상을 변경한다.
포인팅 장치의 사용
사용자가 요소 위에 마우스 커서를 올릴 수 있는 능력을 가진 조건인지를 확인할 수 있는 hover 미디어 기능이 Media Query 4에서 추가되었다. 사용자가 포인팅 장치를 사용할 수 없다고 파악했다면 기본적으로 대화형 기능을 표시할 수 있다. 포인팅 장치를 사용할 수 있는 사용자의 경우, 링크에 마우스를 올리는 기능을 이용하게 할 수 있다.
@media (hover: hover) {
body {
color: purple;
}
}
마찬가지로 pointer 미디어 기능도 Media Query 4에서 추가되었는데, 이는 세 가지 - none, fine, coarse - 속성 값을 가질 수 있다.
- fine: 마우스나 트랙패드와 같이 사용자가 작은 영역을 포인팅 할 수 있음
- coarse: 터치스크린상의 손가락
- none: 포인팅 장치가 없음을 의미
'웹_프론트엔드 > 로드맵 챌린지' 카테고리의 다른 글
JavaScript - DOM 조작 방법 (0) | 2021.12.31 |
---|---|
JavaScript - 구문과 기본 문법 (0) | 2021.12.29 |
CSS - 레이아웃 만들기 (0) | 2021.12.27 |
CSS - 기초 배우기 (0) | 2021.12.23 |
HTML - 기본 SEO (0) | 2021.12.22 |