Publishing/Css

CSS란[2]

Raconer 2023. 4. 15. 16:51
728x90

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 흐름과 분리됩니다.
728x90

'Publishing > Css' 카테고리의 다른 글

Css란[4]  (0) 2023.04.15
Css란[3]  (0) 2023.04.15
CSS란[1]  (0) 2023.04.15