반응형 작업을 간단하게 설명하자면 특정 뷰포트의 크기에서 웹사이트의 구조를 어떻게 바꿀 것인가를 설정하는 것이다.
반응형 작업을 할때 꼭 알아야 하는 것이 미디어 쿼리이다.
미디어 쿼리는 다양한 미디어 유형이나 장치에 따라, 서로 다른 스타일 규칙을 적용하는 것이다.
문법은 아래와 같다.
@media 미디어타입 and (미디어특성) {
CSS코드
}
미디어 타입
타입 | 의미 | 기본값 |
all | 모든 미디어 타입에 적용 | all (생략 가능) |
screen | 컴퓨터 화면, 타블렛, 스마트폰 등 | |
인쇄 전용 |
미디어 특성
특성 | 의미 |
width | 뷰포트의 가로 너비 |
max-width | 뷰포트 최대 가로 너비(이하) |
min-width | 뷰포트 최대 가로 너비(이상) |
height | 뷰포트의 세로 너비 |
max-height | 뷰포트의 최대 세로 너비(이하) |
min-height | 보포트의 최대 새로 너비(이상) |
orientation | 뷰포트의 방향(portrait, landscape) |
기타 | 다른 특성들 ... |
반응형 웹사이트를 만들 때 디바이스 종류에 따른 단위는 '기획/디자인' 단계에서 결정하는 것이 효과적이다.
이것은 정의하기 나름이고, 어떤 표준 기준 같은 것은 아니다. 나는 아래와 같이 기획했다.
종류 | 디바이스 | 단위(px) |
Large Devices | Desktops | 1024px 이상 |
Medium Devices | Tablets | 1024px 이하 |
Small Devices | Tablets + Phones | 768px 이하 |
이 내용을 이용해서 웹사이트를 만들어보자.
'Today I Learned' 카테고리의 다른 글
<TIL>15일 프로젝트 후기 -1-</TIL> (0) | 2021.10.06 |
---|---|
<TIL>venv</TIL> (0) | 2021.09.27 |
<TIL>GitHup</TIL> (0) | 2021.09.24 |
<TIL>Flask를 이용한 API 만들기</TIL> (0) | 2021.09.20 |
<TIL>Flask</TIL> (0) | 2021.09.20 |