<TIL>Responsive WEB</TIL>

반응형 작업을 간단하게 설명하자면 특정 뷰포트의 크기에서 웹사이트의 구조를 어떻게 바꿀 것인가를 설정하는 것이다.

반응형 작업을 할때 꼭 알아야 하는 것이 미디어 쿼리이다. 

미디어 쿼리는 다양한 미디어 유형이나 장치에 따라, 서로 다른 스타일 규칙을 적용하는 것이다. 

문법은 아래와 같다.

@media 미디어타입 and (미디어특성) {
	CSS코드
}

미디어 타입

타입	의미	기본값
all	모든 미디어 타입에 적용	all (생략 가능)
screen	컴퓨터 화면, 타블렛, 스마트폰 등
print	인쇄 전용

미디어 특성

특성	의미
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 이하

이 내용을 이용해서 웹사이트를 만들어보자.