Responsive Design
반응형 웹 디자인(Responsive Design)이란 웹 디자인 기법 중 하나로,
하나의 웹사이트에서 PC, 스마트폰, 태블릿 등 접속하는 디스플레이 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 의미한다.
이를 사용할 때, 미디어 쿼리를 이용해 사용할 수 있다.
@media
@media CSS 규칙은 스타일 시트의 일부를
하나 이상의 미디어 쿼리 결과에 따라 적용할 때 사용할 수 있다.
@media를 사용해 미디어 쿼리를 지정하면
해당 쿼리를 만족하는 장치에서만 CSS 블록을 적용할 수 있다.
@media @규칭은 최상위 코드나, 아무 조건부 그룹 @규칙 안에 중첩해 작성할 수 있다.
미디어 쿼리
-
미디어 쿼리는 단말기 유형과 어떤 특성이나 수치에 따라
웹 사이트나 앱의 스타일을 수정할 때 유용하다. -
미디어 쿼리는 선택 사항인 미디어 유형과,
자유로운 수의 미디어 특성 표현식으로 이루어진다.
/* 최상위 코드 레벨 */
@media screen and (min-width: 900px) {
article {
padding: 1rem 3rem;
}
}
/* 다른 조건부 @규칙 내에 중첩 */
@supports (display: flex) {
@media screen and (min-width: 900px) {
article {
display: flex;
}
}
}조건부 @규칙이란?
속성값과 마찬가지로, 각각의 @규칙은 다른 구문이 있다.
그럼에도 그 중 몇몇은 그룹 규칙으로 불리는 특별한 범주로 분류될 수 있다.
이들 문은 공통 구문을 공유하고 그 각각은 중첩 문 또는 중첩 @규칙을 포함할 수 있다.
모두 어떤 유형의 조건을 링크한다. 언제라도 참 또는 거짓 중 하나로 평가하는 조건을
참으로 평가하면 그룹 내 모든 문이 적용된다.
@media print {
body { font-size: 10pt; }
}
@media screen {
body { font-size: 13px; }
}
@media screen, print {
body { line-height: 1.2; }
}
@media only screen
and (min-width: 320px)
and (max-width: 480px)
and (resolution: 150dpi) {
body { line-height: 1.4; }
}미디어 유형
- all : 모든 장치에 적합
- print : 인쇄 결과물 및 출력 미리보기 화면에 표시중인 문서
- screen : 주로 화면이 대상
- speech : 음성 합성장치 대상
- Media Queries Level 4부터는 새로운 범위 표현 구문을 사용해
더 간결한 미디어 쿼리를 작성할 수 있다.
@media (height > 600px) {
body { line-height: 1.4; }
}
@media (400px <= width <= 700px) {
body { line-height: 1.4; }
}