✅단위와 값

단위에서 length 자료형에는 단위가 2가지 카테고리로 나뉜다.

1) 상대길이단위 : 기준점보다 n이나 n배 만큼
2) 절대길이단위 : 기준점이 없고 모니터에 보여지는 자체로 계산이 된다.

많은 사용자가 사용자 에이전트의 기본 글꼴 크기를 늘려 읽기 쉽도록 설정한다. 절대길이는 사용자 설정을 따르지 않기 때문에 접근성 문제를 유발할 수 있다. 따라서 font-size를 설정할 땐 em, rem 등 상대길이를 사용을 권장한다.

1. 절대길이 - px

• px은 고정된 값을 출력하며 절대 크기가 변하지 않는다.
• 크기가 가변적인 웹사이트가 아닌 경우에는 유용하지만, 반응형 사이트에 적용하기 위해서는 매우 복잡하다는 단점이 있다.

2. 상대길이 - em, rem

• 글꼴에 상대길이 - em, rem
  뷰포트 백분율길이 - vw, vh

1em : 부모의 font-size
1rem : root의 font-size

여기서 root는 html body를 의미한다. 브라우저에서 설정한 font-size를 상속받는다.
chrome에서 글꼴 크기를 설정 할 수 있다.

예시로, 아래의 코드처럼 작성한다면

<p>
	안녕하세요. 반갑습니다. <span> 잘부탁드립니다.</span>
</p>

p {
	font-size : 15px;
}

span {
	font-size : 2em;
}

span에 부모인 p의 font-size가 15px이기 때문에 span의 font-size는 2em === 15px * 2 가 된다.

3. 상대길이 - vw, vh

viewport(뷰포트) 영역 중 얼마만큼 지정할 지 정한다.
디바이스의 크기에 따라서 반응형으로 만들 때 유용하게 사용할 수 있다.

viewport(뷰포트) : 현재 화면에 보여지고 있는 다각형(보통 직사각형)의 영역을 뜻한다.

100vw : 뷰포트의 width 100%
100vh : 뷰포트의 heigth 100%

4. 상대길이 - vmin, vmax

• vmin, vmax는 실제 화면의 크기에 따라 달라진다.
• 길이가 더 큰게 vmax, 작은게 vmin으로 지정이 된다.
• 가로모드, 세로모드에 따라 vmax와 vmin이 바뀐다.

가로모드일 경우 vw가 vmax vh가 vmin이 된다.
세로모드일 경우 vw가 vmin vh가 vmax가 된다.

즉, 뷰포트가 바뀌는 시점에 바뀐다.
따라서, 반응형 웹사이트를 다룰 때 사용할 수 있다.

5. percentage

• 백분율 값을 나타낸다.
• 부모 객체의 크기를 상속받는다.

부모 객체의 크기를 상속받는다는게 무슨 뜻이냐면
만약, 부모의 width값이 1000px으로 지정하고 자식의 width값을 50%로 하면 1000px의 50% 즉, 500px를 뜻한다.

개발자 도구에서 요소를 선택하고 computed에서 상세하게 값을 확인할 수 있다.

6. 함수 표기법 - calc(), min(), max()

• 단위들에 대한 계산을 뜻한다.

1. calc(계산식)
   • 여러개의 단위를 섞어서 사용하고 싶을때 사용한다.
   • 사칙연산을 다 지원한다.
   • 사칙연사 앞뒤로 공백을 꼭 넣어야 한다.
2. min(값, 값)
   • 두개 값 중에서 작은값을 자동으로 선택해준다
3. max(값, 값)
   • 두개 값 중에 큰 값을 자동으로 선택해준다.

div {
	width : calc(500px - 10%);
}

div {
	width : min(100%, 500px);
}  

div {
	width : max(50%, 100px);
}