📅 날짜:

2025.06.30 (월)

📘 오늘 공부한 주제:

CSS 박스 모델, box-sizing, display 속성, float, 선택자 및 가상 클래스

📝 핵심 개념 요약:

• 박스 모델: content + padding + border + margin 구조로 요소의 전체 영역 구성
• box-sizing: border-box 사용 시, padding, border를 포함한 크기로 요소 너비 계산
• overflow: 콘텐츠가 요소를 넘어갈 경우 처리 방법 제어 (hidden, scroll, 등)
• margin 상쇄(Margin Collapse): 인접 요소 간 마진이 겹쳐 하나만 적용됨
• display 속성 비교: block, inline-block, inline의 레이아웃 특성
• float: 요소를 좌우로 띄워 배치, clear, overflow로 레이아웃 붕괴 방지 필요
• 선택자: 클래스(.class), 아이디(#id), 자손(A B), 자식(A > B) 등 다양한 방식 존재
• 가상 클래스: :hover, :focus, :active 등 사용자 인터랙션에 반응