📅 2025-09-08

➡️ CSS에 대해 새롭게 알게 된 것 또는 헷갈리는 부분 정리 + 🤔❓

---

🔎 학습 리마인드

📌 표시 방식

• display: none과 visibility: hidden의 차이
  • none은 영역을 아예 없애고, hidden은 영역이 남아 있는 상태로 없어짐

---

📌 CSS 단위

• px
  • 화면 실제 픽셀 기준으로 하는 단위
  • 실무에서는 많이 안 씀
• em
  • 부모 font-size 기준의 상대 단위
  • 중첩되면 곱해짐
  • 거의 쓰지 않음
• rem
  • 문서 최상위 요소(루트) 기준의 상대 단위 (기본 설정 시 1rem = 16px)
  • 어디서든 일정함
  • 반응형 디자인 rem 사용이 표준처럼 쓰임
• %
  • 부모 요소의 크기 기준으로 비율 적용
• vw/vh
  • 뷰포트(화면) 너비/높이 기준비율 1vw = 가로, 1vh = 세로
  • 풀 스크린으로 영역을 잡을 때 많이 쓰임

---

📌 box-sizing

• content-box : 너비와 높이를 content를 기준으로 잡음 (기본값)
• border-box : 너비와 높이를 border까지 기준으로 잡음
  • 보통 전체 요소를 border-box로 설정하고 개발함

    * {
    	box-sizing: border-box;
    }

---

🌊 Deep Dive

🤔 전체 요소를 border-box로 설정해야 하는 이유

• content-box (초기값)
  • 설정한 width와 height는 콘텐츠 영역만 포함
• border-box
  • 설정한 width와 height는 패딩과 테두리를 포함한 전체 박스 크기

➡️ padding이나 border를 추가해도 박스 전체 크기가 깨지지 않고, CSS 레이아웃 관리가 훨씬 수월해짐

---

📎 https://developer.mozilla.org/ko/docs/Web/CSS/box-sizing