[CSS] 가시속성 (display)

*작성자는 공부 중인 학생으로 잘못 된 정보가 있을 수 있음을 알려드립니다.

 

가끔 우리는 요소를 만들지만 눈에 보이지 않게 하고 싶을 때가 있다.

예를 들면, 잘못된 입력값을 입력했을 때 x표를 띄우게 하고싶다고 하자.

이미 존재는 하지만 입력값이 잘못되지 않았다면 x표를 보이지 않게 하면 된다.

 

이 때, 가시속성을 사용할 수 있는데

CSS에서는 이를 display속성을 이용하여 설정할 수 있다.

 

display속성

태그가 화면에서 어떻게 보일지를 지정한다.

속성값으로 none, block, inline, inline-block 등을 가질 수 있다.

 

none

화면에 보이지 않으며 공간도 차지하지 않는다. 하지만 DOM에는 남아 있는 상태이다.

공간을 차지하지 않는다는 점에서 visibility:hidden;과 차이를 가진다.

h1.hidden {
  display: none;
}

 

inline

한 줄로 나열한다. block요소를 inline으로 지정하면 한 줄로 나열이 된다.

대표적인 예로, li태그는 block요소로 아래로 나열되는 것이 기본이지만,

아래 코드를 이용하면 한 줄로 나열된다.

li {
  display: inline;
}

 

block

inline과 반대로 inline요소를 block형태로 변화시켜 자동으로 줄바꿈 된다.

a {
  display: block;
}

 

기타

그 외에도 다양한 display의 속성 값들이 있다.

크게 중요하지는 않지만, 가끔 inline-block, grid, flex는 나오는 편이기 때문에 읽어두면 좋다.

값	설명
inline-block	요소를 인라인 레벨 블록 컨테이너로 표시한다. 요소 자체는 인라인 요소로 포맷되지만 높이와 너비 값을 적용할 수 있다.
grid	요소를 블록 레벨 그리드 컨테이너로 표시한다.
inline-grid	요소를 인라인 레벨 그리드 컨테이너로 표시한다.
flex	요소를 블록 레벨 플렉스 컨테이너로 표시한다.
inline-flex	요소를 인라인 레벨 블록 컨테이너로 표시한다.
list-item	요소를 <li>요소처럼 동작하게 한다.
table	요소를 table 요소처럼 동작하게 한다.
table-caption	요소를 caption 요소처럼 동작하게 한다.
table-column-group	요소를 colgroup 요소처럼 동작하게 한다.
table-header-group	요소를 thead 요소처럼 동작하게 한다.
table-footer-group	요소를 tfoot 요소처럼 동작하게 한다.
table-row-group	요소를 tbody 요소처럼 동작하게 한다.
table-cell	요소를 td 요소처럼 동작하게 한다.
table-column	요소를 col 요소처럼 동작하게 한다.
table-row	요소를 tr 요소처럼 동작하게 한다.
contents	컨테이너를 사라지게 하여 자식 요소를 DOM 상위 레벨의 자식으로 만든다.
run-in	문맥에 따라 요소를 블록 또는 인라인으로 표시한다.
initial	이 속성을 기본값으로 설정한다.
inherit	이 속성을 부모 요소로부터 상속받는다.