CSS : display와 float

gpt로 만들어봤다

목차

1. display 속성

2. display 속성값 - 기본 박스 유형

3. display 속성값 - 레이아웃 컨테이너 유형

4. float 속성

---

1. display 속성

display 속성은 HTML 요소가 웹 페이지에서 어떻게 배치되고, 공간을 차지할지 결정하는 속성이다.
각 요소의 기본적인 박스 유형과 내부 배치 방식을 제어합니다.

• 요소의 박스 유형 지정 (display, inline 등)
• 요소의 레이아웃 컨텍스트 설정 (flex, grid 등)
• 요소를 숨기거나 제거 (none)

 

block	블록 박스. 줄 바꿈이 생기고, 너비는 기본적으로 부모에 맞춤. (div, section 등)
inline	인라인 박스. 줄 바꿈 없이 내용만큼만 차지. (span, a, strong 등)
inline-block	인라인처럼 흐르지만, 블록처럼 width/height 지정 가능
none	요소 자체를 DOM 렌더링에서 제거 (공간도 차지하지 않음)

 

---

2. display 속성값 - 기본 박스 유형

속성값	설명
block	줄바꿈이 생기며, 너비는 부모에 맞춤
inline	줄바꿈 없이 내용만큼만 차지
inline-block	inline과 비슷하지만 block처럼 width/height 지정 가능
none	요소 자체를 DOM 렌더링에서 제거 (공간도 차지하지 않음)

기본적으로 block, inline 값을 가지는 태그들이 있다.

• block : <h1>, <h2>, <p>, <div>, ....
• inline : <a>, <br>, <img>, <span>, ....

 

---

3. display 속성값 - 레이아웃 컨테이너 유형

속성값	설명
flex	Flexbox 레이아웃의 부모 요소로 설정됨
inline-flex	인라인 컨텍스트에서 Flexbox
grid	Grid 레이아웃의 부모 요소로 설정됨
inline-grid	인라인 컨텍스트에서 Grid
flow-root	새 BFC(Block Formatting Context)를 생성 (clearfix 대체용)

 

---

4. float 속성

요소를 페이지 왼쪽이나 오른쪽에 나란히 배치할 때 사용하는 속성이다.

현재는 flex, grid가 주로 쓰이며, float는 특정 레이아웃이나 텍스트 흐름 제어 시 제한적으로 사용한다.

속성값	설명
left	요소를 왼쪽으로 띄움. 다음 콘텐츠는 오른쪽에 배치됨
right	요소를 오른쪽으로 띄움. 다음 콘텐츠는 왼쪽에 배치됨
none	기본값. 플로팅 없음
inline-start / inline-end	양방향 텍스트(Bidi)를 위한 시작/끝 방향 float (IE 미지원)

 

 

 

 

 

 

참고

codeit