CSS - display

display

1) display 란?

• display 속성은 웹 페이지 내의 요소가 어떻게 보여질지, 요소의 레이아웃 박스 유형을 결정하는 중요한 속성

• 요소가 문서 흐름에 어떻게 포함될지, 다른 요소들과 어떻게 상호 작용할지를 정의

• block inline inline-block flex grid none 등이 있음

2) display 속성 종류

(2-1) none

• none 을 설정하면 요소가 화면에서 보이지 않게 됨

• visibility: hidden 과 다르게 요소가 차지하는 공간조차 없애버림

(2-2) block

• 요소를 블록 레벨 요소로 만듦

• 요소의 가로 너비는 부모 요소의 전체 너비를 차지하며, 세로 너비는 내용에 따라 결정

• width height margin padding 과 같은 속성을 적용할 수 있음

• <div> <p> <h1> 등 대부분의 HTML 요소는 기본적으로 block 요소임

(2-3) inline

• 요소를 인라인 레벨로 만듦

• 주로 텍스트 내에서 사용

• width height margin-top margin-bottom 속성이 적용되지 않음

• padding 속성은 적용되지만 레이아웃에 영향을 주지 않음

• <span> <a> <img> 등이 inline 요소임

(2-4) inline-block

• inline 과 block 의 중간 형태

• 줄 바꿈 없이 다른 요소와 같은 줄에 배치

• width height margin padding 과 같은 속성을 적용할 수 있음

• <button> <input> 등이 inline-block 요소임

(2-5) flex

• 유연한 박스 모델을 제공

• 자식 요소들을 다양한 방향과 순서로 정렬할 수 있게 해줌

(2-6) grid

• 2차원 레이아웃 시스템을 제공

• 행과 열의 형태로 공간을 분할하여 요소를 배치할 수 있음

• 복잡한 레이아웃을 구현할 때 유용함