[CSS] display 속성 block/none

 

CSS의 display 속성은 요소가 화면에 어떻게 표시되는지를 지정하는 데 사용된다.

display 속성은 요소의 레이아웃 동작을 변경할 수 있으며, 다양한 값을 가질 수 있다.

일반적으로 사용되는 display 속성 값과 그 의미는 다음과 같다:

1.block: 요소를 블록 레벨 상자로 지정한다. 즉, 요소는 새로운 줄에서 시작하며, 가능한 최대 가로 너비를 차지한다.
예: <div>, <p>, <h1> 등

2.inline: 요소를 인라인 상자로 지정한다. 즉, 요소는 문장의 일부로 간주되며, 가로 너비는 필요한 만큼만 차지한다.
예: <span>, <a>, <strong> 등

3.inline-block: 요소를 인라인 레벨 상자로 지정하지만, 블록 레벨 요소처럼 내용을 포함할 수 있다. 즉, 인라인 요소처럼 옆으로 흐르면서 내용을 감싸지만, 블록 요소처럼 너비와 높이를 지정할 수 있다.
예: <input>, <button> 등

반응형

4.none: 요소를 화면에서 숨긴다. 즉, 요소가 보이지 않지만, 레이아웃에는 공간을 차지한다.
예: 요소를 동적으로 숨기고 보여줄 때 사용할 수 있다.

5.flex: 요소를 유연한(flexible) 박스 모델로 지정한다. 즉, 요소를 부모 요소 안에서 유연하게 배치할 수 있으며, 주축과 교차축에 따라 정렬 및 정렬 순서를 설정할 수 있다.
예: <div> 등

6.grid: 요소를 그리드(grid) 컨테이너로 지정한다. 즉, 요소를 그리드 셀로 배치할 수 있으며, 행과 열의 크기와 위치를 설정할 수 있습니다..
예: <div> 등

그 외의 값: table (테이블 형식으로 렌더링), table-cell (테이블 셀로 렌더링), table-row (테이블 행으로 렌더링) 등

 

더 알게되는 내용은 다음에 추가하도록 하자