CSS : display 태그 속성 - none, block, inline, inline-block

1. display

display은 웹페이지 상에서 요소들이 화면에서 어떻게 보여지는지, 다른 요소와 어떻게 상호 배치되는지를 결정한다.주로 태그마다 display기본값이 다르며, 주로 사용되는 속성값은 아래와 같다. 

1. none : 화면에 표시하지 않음
2. block : 블록 박스
3. inline : 인라인 박스
4. inline-block : block과 inline의 중간 형태

 

 

2.  display 속성

1. none

display : none

화면에서 표시하지 않고 영역도 차지 하지 않는다.

 

 

 

2. block

display : block

Block 태그는 블럭 형태로 영역을 잡는 태그로 한 줄에 하나만 나타나는 박스형태이다.

기본적으로 좌우 너비 100%이며 가로 영역을 모두 채운다.

해당 태그 다음에 오는 새로운 태그는 줄바꿈이 되어 다음줄에 나타난다. 항상 새로운 줄에 태그가 시작된다. width, height, margin, padding 속성 모두 반영 된다.

 

<div>, <form>, <li>, <ul>, <ol>, <p>, <h1>, <h2>, <h3> ...

 

 

3. inline

display : inline

Inline 태그는 박스가 아닌 내용을 포함하는 태그로 block 과 달리 줄 바꿈이 되지 않는다. 내용만큼(글자만큼) 공간을 차지하기 때문이다.

다른태그와 같은 줄에 배치 될 수 있다.

width와 height를 지정 할 수 없고, 지정하더라도 무시된다.

인라인 태그를 이용해서 개별 글자, 문장에 볼드 밑줄 색상 등의 효과를 줄 수 있다.

 

<a>, <span>, <button>, <input>, <img>, <video>, <audio>, <textarea> ...

 

 

 

4. inline-block

display : inline-block

block과inline의 중간 형태

block과 다르게 줄 바꿈이 되지 않아서 한 줄에 여러개가 올 수 있고, inline과 다르게 크기를 지정 할 수 있다.

 

 

 

3. display:none과 visibility:hidden 차이

visibility 속성을 hidden으로 설정한 것은 내용은 보이지 않지만 영역은 차지한다. 빈 공간이 생긴다.

display : none으로 설정하면 내용도 없고, 영역도 잡히지 않는다.