[HTML/CSS] 📚 단위와 값

📋 기억하고 싶은 내용

📌 절대 길이 - px

• 고정값이라고 보면 된다.
• 현실 세계에서 사용하는 절대 길이 단위들은 웹 세계에서 사용하면 px로 재해석되서 표현된다.
• 절대 길이 단위 중에서 px을 많이 사용한다.
• 절대 길이는 사용자 설정을 따르지 않기 때문에 접근성 문제가 발생할 수 있다. 따라서 font-size를 설정할 땐 em, rem 등 상대 길이를 사용하는 것이 좋다.

📌 글꼴 상대 길이 - em, rem

• 1em은 부모 요소의 font-size 값과 같다.
• 1rem은 root의 font-size 값과 같다.
  • root는 웹 브라우저를 의미하며, font-size 값은 16px이다.
• em은 부모 요소 마다 기본 크기가 바뀌지만, rem은 root를 따르기 때문에 기본 크기가 고정되어 있어 계산하기 편하다.

📌 뷰포트 백분율 길이 - vw, vh

• 디바이스의 크기에 따라 반응형 웹 페이지를 만들 때 유용하다.

📌 vmin, vmax

• 디비이스의 너비가 크면 vmax로 나타나고, 좁으면 vmin으로 나타난다.
• 가로 모드와 세로 모드를 대응하기 위한 상대 길이 단위다.

📌 %

• 부모 요소의 percentage 값을 계산해서 나타난다.

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

.container {
	width: calc(100% - 50px);
    width: min(100%, 500px);
    width: max(100%, 500px);
}

• calc() 함수에서 연산자를 사용할 때 좌우에 공백이 있어야 한다.
• min(), max() 함수는 유용하게 사용할 수 있지만, IE에서 지원하지 않는다.
• max-width, min-width 속성으로 대체할 수 있다.

🧐 궁금한 내용 & 부족한 내용

• min(), max() 함수의 동작 원리가 헷갈려서 조금 더 살펴보았다.
  • CSS 함수 - min(), max()
  • min() 함수는 반응형 웹 페이지에서 어떤 속성의 최대값을 설정하기 위해 사용한다.
  • 최소값을 설정하는 것은 드물기 때문에 max() 함수는 자주 사용하지 않는다.

🌝 수강한 소감 & 떠오르는 생각

• 개발자 도구에서 Computed 탭을 살펴보면 요소의 정확한 크기를 알 수 있다. 상대 길이 단위로 작성한 값을 확인할 때 매우 유용할 것 같다.

🔗 참고 래퍼런스

• width - MDN
• <length> - MDN
• calc() - MDN