[CSS ] 04. 레이아웃 기본 (display / position)

[CSS ] 04. 레이아웃 기본 (display / position)

---

1. 레이아웃이란?

레이아웃은 화면에서 요소들이 어떻게 배치되는지를 의미한다. CSS는 display와 position 속성을 통해 요소의 배치를 제어한다.

---

2. display 속성이란?

display 속성은 요소가 화면에 어떻게 표시될지를 결정한다.

---

3. block 요소

block 요소는 한 줄을 모두 차지하며, 항상 새로운 줄에서 시작한다.

div {
    display: block;
}

• width, height 지정 가능
• margin, padding 정상 적용

대표적인 block 요소:

• div
• p
• h1 ~ h6

---

4. inline 요소

inline 요소는 내용만큼의 공간만 차지한다.

span {
    display: inline;
}

• width, height 지정 불가
• 좌우 margin, padding만 적용

대표적인 inline 요소:

• span
• a
• strong

---

5. inline-block 요소

inline과 block의 특징을 모두 가진 형태이다.

div {
    display: inline-block;
}

• 한 줄에 배치 가능
• width, height 지정 가능

---

6. display: none

요소를 화면에서 완전히 제거한다. 공간도 함께 사라진다.

div {
    display: none;
}

---

7. position 속성이란?

position 속성은 요소의 위치 기준을 설정한다.

---

8. position: static

기본값이며, 문서의 흐름에 따라 배치된다.

div {
    position: static;
}

---

9. position: relative

자기 자신을 기준으로 위치를 이동한다.

div {
    position: relative;
    top: 10px;
    left: 20px;
}

• 원래 위치는 유지
• 이동 기준점 역할 가능

---

10. position: absolute

가장 가까운 position이 설정된 조상을 기준으로 배치된다.

div {
    position: absolute;
    top: 0;
    right: 0;
}

• 문서 흐름에서 제거됨
• 부모 기준 배치에 자주 사용

---

11. position: fixed

브라우저 화면을 기준으로 고정된다.

div {
    position: fixed;
    bottom: 0;
    right: 0;
}

스크롤을 내려도 위치가 변하지 않는다.

---

12. position: sticky

스크롤 위치에 따라 relative와 fixed처럼 동작한다.

div {
    position: sticky;
    top: 0;
}

---

13. 정리

• display는 요소의 표시 방식을 결정한다
• block과 inline의 차이를 이해해야 한다
• position은 위치 기준을 설정한다
• relative와 absolute는 함께 사용되는 경우가 많다