절대 단위 (Absolute length units)

: 다른 것과 상관 없이 항상 동일한 크기인 단위
px pt

단위	관련 사항
px	픽셀
pt	포인트

• 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우 px을 사용한다.
• 크기가 고정된 절대 단위이기 때문에 사용자 접근성이 불리하다.
• 인쇄처럼 화면의 사이즈가 정해진 경우에 유리하다.

---

상대 단위 (Relative length units)

: 다른 요소(ex. 상위 요소의 폰트 크기/viewport 크기)에 비례하여 조정되는 단위
% em rem ch vw vh

단위	관련 사항
%	부모 요소를 기준으로 %
em	부모 요소의 폰트 크기
rem	브라우저의 기본 폰트 크기 (1rem = 16px)
ch	너비 "0"에 상대적인 값
vw	viewport 너비의 1%
vh	viewport 높이의 1%

em 과 rem 의 차이

• rem : root 요소의 폰트 크기로, 1rem이 브라우저의 기본 글자 크기이다. rem은 사용자가 브라우저에서 설정한 기본 폰트 크기를 따르므로 접근성에 유리하다.
• em은 부모 요소의 폰트 크기에 따라 상대적으로 크기가 변경되므로 계산하기 어렵다.

vw, vh 와 % 의 차이

: 너비나 높이를 vw, vh를 이용해 지정하는 것과 width: ~%, height: ~%로 지정하는 것은 무슨 차이가 있을까?

• vw, vh : 브라우저의 viewport를 기준으로 한다. (브라우저가 기준)
• % : 부모 요소를 기준으로 한다.

---

반응형 웹(Responsive web)

: 디바이스의 너비(width)에 따라 유동적인 레이아웃이 적용되는 웹사이트
ex. 데스크탑, 태블릿, 스마트폰 세로 모드, 스마트폰 가로 모드...
➡️ 디바이스 크기별로 CSS를 다르게 적용해야 한다. 이때, 디바이스 크기를 나누는 기준은 px로 정한다.

반응형 웹 기준 (Device breakpoints)

Extra small devices : 핸드폰

@media only screen and (max-width: 600px) {} /* 너비 600px 이하 */

Small devices : 세로 태블릿, 큰 핸드폰

@media only screen and (min-width: 600px) {} /* 너비 600px 이상 */

Medium devices : 가로 태블릿

@media only screen and (min-width: 768px) {} /* 너비 768px 이상 */

Large devices : 노트북, 데스크탑

@media only screen and (min-width: 992px) {} /* 너비 992px 이상 */

Extra large devices : 큰 노트북, 데스크탑

@media only screen and (min-width: 1200px) {} /* 너비 1200px 이상 */

---

미디어 쿼리(Media Query)

: @media를 사용하여 미디어 별로 style을 지정하는 것

@media screen and (min-width: 800px) { /* 최소 길이가 800px일 때 */
	.container {       /* .container의 margin을 1em 2em으로 설정 */
    	margin: 1em 2em;
    }
}

Responsive web design W3C

---

Viewport

: 웹사이트의 보이는 영역
vw (viewpoint width) : 1vw = 보이는 너비의 1%
vh (viewpoint height) : 1vh = 보이는 너비의 1%

• 화면을 가득 채우면 딱 떨어지게 스크롤 되는 사이트 : 100vw 100vh 사용

CSS Values and units MDN

❔ 학습 후 궁금한 점

• ch 단위가 정확히 무엇인지 이해하지 못했다..
• 웹사이트를 만들 때 body요소의 너비와 높이는 주로 어떤 단위로 지정하는지?