CSS란[2]

HTML 태그를 화면에 어떤 방식으로 보여줄 것인지를 결정하는 속성입니다.

---

1. 📦 Box Model (박스 모델)

HTML 요소는 기본적으로 박스 형태로 렌더링되며, 대표적인 Display 유형은 다음과 같습니다:

• Block

  • 한 줄 전체를 차지함
  • 예: <div>, <p>, <h1>, <ul> 등
  • width, height 지정 가능

• Inline

  • 내부 콘텐츠 크기에 맞게만 영역을 차지함
  • width와 height 속성 적용 불가
  • 예: <span>, <a>, <strong>

---

2. 📌 Position 속성

요소의 배치 방식(위치)을 지정합니다.

속성	설명
static	기본 위치 (흐름 그대로 배치됨)
relative	요소 자신을 기준으로 top, left 등 위치 조정
absolute	가장 가까운 position 지정 부모 요소를 기준으로 절대 위치 지정
fixed	화면 기준으로 고정, 스크롤에도 위치 고정

💡 absolute 위치 기준

• 부모 중 position: relative, absolute, fixed가 설정된 가장 가까운 요소가 기준이 됩니다.
• 상속이 끊기며 일반적인 DOM 흐름과 분리됩니다.