1. 반응형 웹 디자인이란?
반응형 웹디자인(Responsive Web Design) 은 하나의 웹사이트를 구축하여 다양한 디바이스의 화면 해상도에 최적화된 웹사이트를 제공하는 것이다.
2. viewport meta tag
viewport meta tag는 브라우저의 화면 설정과 관련된 정보를 제공한다.
meta tag에서는 px단위를 사용하며 단위 표현은 생략한다. 복수개의 프로퍼티를 사용할 때는 쉼표(,)로 구분한다.
일반적으로 viewport meta tag는 모바일 디바이스에서만 적용된다.
프로퍼티 | Description | 사용예 |
---|---|---|
width | viewport 너비(px). 기본값: 980px | width=240 |
height | viewport 높이(px) | height=800 |
initial-scale | viewport초기 배율 | initial-scale=1.0 |
user-scale | 확대 축소 가능 여부 | user-scale=no |
maximum-scale | viewport 최대 배율 | maximum-scale=2.0 |
minimum-scale | viewport 최소 배율 | minimum-scale=1.0 |
3. @media
이것은 서로 다른 미디어 타입(print, screen, speech…)에 따라 각각의 styles을 지정하는 것을 가능하게 한다.
@media screen {
* { color: red; }
}
@media print {
* { color: blue; }
}
@media
을 사용하여 미디어 별로 style을 지정하는 것을 Media Query
라 한다. 디바이스를 지정하는 것뿐만 아니라 디바이스의 크기나 비율까지 구분할 수 있다.
/* @media not|only mediatype and (expressions) { CSS-Code; } */
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
※ Media Query의 표현식에서 사용할 수 있는 프로퍼티
orientation을 제외한 모든 프로퍼티는 min/max 접두사를 사용할 수 있다.
프로퍼티 | Description |
---|---|
width | viewport 너비(px) |
height | viewport 높이(px) |
device-width | 디바이스의 물리적 너비(px) |
device-height | 디바이스의 물리적 높이(px) |
orientation | 디바이스 방향 (가로 방향: landscape, 세로방향: portrait) |
device-aspect-ratio | 디바이스의 물리적 width/height 비율 |
color | 디바이스에서 표현 가능한 최대 색상 비트수 |
monochrome | 흑백 디바이스의 픽셀 당 비트수 |
resolution | 디바이스 해상도 |
예시
/*========== Mobile First Method ==========*/
/* All Device */
/* Custom, iPhone Retina : 320px ~ */
@media only screen and (min-width : 320px) {}
/* Extra Small Devices, Phones : 480px ~ */
@media only screen and (min-width : 480px) {}
/* Small Devices, Tablets : 768px ~ */
@media only screen and (min-width : 768px) {}
/* Medium Devices, Desktops : 992px ~ */
@media only screen and (min-width : 992px) {}
/* Large Devices, Wide Screens : 1200px ~ */
@media only screen and (min-width : 1200px) {}
/*========== Non-Mobile First Method ==========*/
/* All Device */
/* Large Devices, Wide Screens : ~ 1200px */
@media only screen and (max-width : 1200px) {}
/* Medium Devices, Desktops : ~ 992px */
@media only screen and (max-width : 992px) {}
/* Small Devices, Tablets : ~ 768px */
@media only screen and (max-width : 768px) {}
/* Extra Small Devices, Phones : ~ 480px */
@media only screen and (max-width : 480px) {}
/* Custom, iPhone Retina : ~ 320px */
@media only screen and (max-width : 320px) {}
'HTML CSS' 카테고리의 다른 글
CSS 이론 채워 넣기 - 10. flex box (0) | 2023.09.19 |
---|---|
CSS 이론 채워 넣기 - 8. 트랜스폼(Transform) (0) | 2023.09.18 |
CSS 이론 채워 넣기 - 7. 애니메이션 (0) | 2023.09.18 |
CSS 이론 채워 넣기 - 6. 트랜지션 (transition) (0) | 2023.09.18 |
CSS 이론 채워 넣기 - 5. CSS 속성의 상속과 적용 우선 순위 (0) | 2023.09.15 |