8-8-1. CSS 속성 : 레이아웃-디스플레이 {display: none / block / inline / inline-block;}

카테고리 없음

김종원 2021. 9. 3. 00:01

8-8-1. CSS 속성 : 레이아웃-디스플레이(display)

- 모든 요소는 자기가 기본적으로 가지고 있는 display 속성의 속성값이 있음

- 그 속성값에 따라 요소의 block level, inline level 렌더링 박스 유형이 결정됨

- 이와 같이 display 속성은 요소의 렌더링 박스 유형을 결정하는 속성

- 이 display 속성을 통해 요소의 렌더링 박스 유형을 변경 및 여부를 결정할 수 있음

- 그래서 block level 요소를 inline level 요소처럼 '보이게' 또는 그 반대로 '보이게' 할 수 있음

- 단, display 속성을 통해 변경되는 요소처럼 '보이게'끔 할 뿐이지, 그 요소 자체의 본연의 성질을 변경하

는 것은 아니기에, "인라인레벨요소의 안에 블록레벨요소를 선언하고, 인라인레벨요소의 display 속성값

을 block 값으로 선언하는 것은 잘못된 것"이므로, 이와 같이 문법적 오류를 해서는 안되며 문법에 맞춰

선언하는 것이 중요함

- 기본값 : 블록레벨요소의 기본 속성값 block

인라인레벨요소의 기본 속성값 inline

속성값	내용
none	ㆍ요소가 렌더링 되지 않아, 화면에 내용이 노출되지 않음
block	ㆍblock level 요소처럼 렌더링 ㆍ이에, 한 행 전체를 해당 요소가 차지함 ㆍ따라서, 여러 개의 요소를 선언하면 하나의 행에 하나의 요소만 표현됨
inline	ㆍinline level 요소처럼 렌더링 ㆍ이에, 해당 요소의 컨텐츠 범위만큼만 해당 요소가 차지함 ㆍ따라서, 여러 개의 요소를 선언하면 하나의 행에 여러 개의 요소가 같이 표현됨
inline-block	ㆍinline level 요소처럼 렌더링 ㆍ단, block level 요소의 성질을 가짐 ㆍ이에, 해당 요소의 컨텐츠 범위만큼만 해당 요소가 차지함 ㆍ따라서, 여러 개의 요소를 선언하면 하나의 행에 여러 개의 요소가 같이 표현됨

※ 위 외에 list-item / flex / inline-flex / table / table-cell 등 display 속성의 속성값이 있음

- inline 레벨 요소의 경우, 코드 선언시 태그와 태그 사이에 띄어쓰기 또는 개행이 있으면, 실제로 요소와

요소 사이에 약 4px 정도의 여백이 있는 모습으로 표현됨

- 이에, display 속성값에 inline 및 inline-block 선언된 요소 중에 태그와 태그 사이에 띄어쓰기 또는 개행

이 있으면, 아래와 같이 약 4px 정도의 여백이 표현됨