[CSS] Unit(단위) & calc(),min(),max()

♏Unit(단위)

➰ px(절대길이)

• 픽셀. 가장 자주 쓰이는 단위.
• font같은 경우 지정해주지 않으면 브라우저가 기본으로 설정해둔 값으로 정해진다..
• 브라우저는 모든 크기를 px단위로 계산한다.
• px로 font-size를 정해줄 경우, 사용자들이 화면을 늘리거나 줄이거나 하더라도 절대길이는 변하지 않으므로, 접근성 면에서 좋지 않을 수 있다.

➰상대길이 - 글꼴

em / rem

• 위에서 말한 이유 때문에 font-size는 em, rem을 사용하는 것이 좋다.
• em : 1em = 부모의 font-size를 의미한다. ex)부모가 24px일 경우, 0.5em은 12px이 된다.
• rem : 1rem = root의 font-size. root의 값이 기준이기 때문에 브라우저가 기본으로 설정해둔 값이 기준이 된다. 사용자가 화면을 조정할 때 값이 반영되기 때문에, 접근성 면에서 더 낫다. em보다 사용하기 용이하다.
• ex) font-size: 50rem

➰상대길이 - viewport

• 디바이스의 크기에 따른 반응형으로 작동시키기 위해 사용한다.
• vw : 100vw가 viewport의 가로 전체를 꽉 채웠을 때를 의미한다. 가로길이만큼의 정사각형을 만들고 싶으면 width/height를 모두 100vw로 해주 면 된다.
• vh : 100vh는 viewport의 가로 전체를 꽉 채웠을 때를 의미한다.
• ex) width: 50vw
• vmin : viewport의 가장 작은 길이. / vmax : viewport의 가장 긴 길이.
• 가로모드/세로모드가 필요한 경우 사용되곤 한다.
• percentage : 부모의 값에 대해 작용한다.

➰관련 함수 - calc(), min(), max()

• calc() : 사칙연산을 사용해서 속성을 적의할 수 있다. ex) width: calc(100% - 50px) 처럼 사용한다.
• min()/max() : ,로 값들을 나열한 후, 그 중 작은 것/큰 것을 선택한다. **ex) width: max(100%, 500px) 인 경우, 가로를 꽉 채우다가 500px보다 작아지게 되면 더 이상 줄어들지 않는다.