반응형 웹

반응형 웹이란

• 접속하는 디바이스에 따라 레이아웃 배치를 자동으로 변환하여 다양한 디바이스에 대응하는 웹 사이트이다.
• flex box, grid box, 미디어쿼리, 상대 단위 등을 사용하여 화면에 크기에 맞게 변환하는 사이트를 만든다.

상대 단위

• px, cm 등과 같이 값이 고정되어 있는 고정 단위와 반대로 %, em, vw와 같이 상황에 따라 값이 변하는 단위이다.
• 반응형 웹을 만들기 위해서는 고정 단위보다는 상대 단위를 활용하는 것이 좋다.

단위	설명
em	부모 요소의 글꼴 크기에 대한 비율.
rem	최상위 요소(html)의 글꼴 크기에 대한 비율.
vw	뷰포트 너비에 대한 100분율.
vh	뷰포트 높이에 대한 100분율.
vmin	뷰포트의 너비와 높이 중 작은 값
vmax	뷰포트의 너비와 높이 중 높은 값

미디어 쿼리

• 조건에 만족하는 디바이스에만 css 적용 가능하다.
• 주로 max-width 혹은 min-width로 디바이스의 크기에 따른 css 처리를 한다.

/* 미디어 쿼리 기본 문법 */
@media 종류 and (조건) {
	/* 적용할 스타일 */
}

1. 디바이스의 종류

• 특정 종류의 디바이스에만 css를 적용한다.

값	설명
all	모든 종류의 디바이스에 적용한다.
print	인쇄 결과물 및 미리보기 표시 중인 문서에 적용한다.
screen	모니터, 핸드폰, 태블릿 등 일반적인 화면에 적용한다.

/* 프린터 장치에만 스타일 적용*/
@media print {
	color : red;
}

/* 모든 미디어 장치에 스타일 적용 */
@media all {
	font-size : 1.2rem;
}

2. 논리 연산자

• 여러 조건과 논리 연산자를 통해 복잡한 조건을 만들어낸다.

값	설명
and	조건이 모두 충족할 때만 적용한다.
,(or)	같은 스타일을 여러 조건에 적용한다.
not	조건이 충족하지 않을 때(미디어 쿼리 전체를 반전)만 적용한다.
only	미디어 쿼리를 지원하는 브라우저에만 적용한다.

/* 화면이면서 너비가 1080px 이내인 장치에만 스타일 적용 */
@media screen and (max-width: 1080px) { ... }

/* 680px 이내인 인쇄장치와 너비가 720px 이내인 화면에 적용 */
@media print and (min-height : 680px), screen and (max-width : 720px) { ... }

/* 높이가 320px 이상 720px 이하인 화면 장치를 제외하고 모두 적용 */
@media not screen and (min-height : 320px) and (max-height: 720px) { ... }

/* 미디어쿼리를 지원하는 브라우저에만 스타일 적용 */
@media only screen { ... }

3. 조건

• 디바이스의 크기 등을 고려하여 선택적으로 스타일을 적용한다.

속성	설명
width	웹 페이지의 너비
height	웹 페이지의 높이
min-width	웹 페이지의 최소 너비
max-width	웹 페이지의 최대 너비
min-height	웹 페이지의 최소 높이
max-height	웹 페이지의 최대 높이
orientation	가로모드와 세로모드(화면의 가로와 세로의 비율)

@media (max-width: 768px) {
	/* 화면 너비 768px 이하의 디바이스에 적용 */
}