HTML/CSS - display 란 ?

HTML/CSS - display 란 ?

 

 

 

HTML 요소의 레이아웃을 정하는데 있어 가장 중요한 역할을 하는 것은 display 이다.

 

display 에는 여러 속성 값이 존재하는데, inline, block, inline-block, flex, list-item, none... 등등이 있다.

 

이중 가장 대표적인 것은 inline 과 block 이다.

 

 

 

 

 

* inline

 

display: inline;

 

 

 

inline은 요소들이 한 라인에 최대한 배치하려는 속성을 가진다.

 

그래서 inline 속성을 부여 받은 요소들은 자신들이 필요로 하는 최소한의 가로크기만을 가져간다.

 

inline 의 요소들로는 <span> , <a> , <i> , <img> , <button> 등이 있다.

 

inline 의 또다른 특징으로는 안에 내용이 있어야 표기가 된다는 것이다.

 

속성값만 부여하고 내용을 적지 않으면 브라우저상에 나타나지 않는다.

 

 

 

 

 

* block

 

display: block;

 

 

bolck 은 요소들이 최대한의 가로크기를 가지려는 속성이 있다.

 

그래서 block 속성을 부여 받은 요소들은 위 아래로 배치된다.

 

block 요소에는 <div> , <h> , <p> , <nav> , <ul> , <li> 등이 있다.

 

block 은 inline 과 달리 내용이 없더라도 주어진 크기에 따라 브라우저상에 표시가 된다는 특징이 있다.

 

 

 

 

 

* inline-block

 

display: inline-block;

 

 

다른 display 속성인 inline-block 은 inline 요소 처럼 같은 라인에 머무르면서 block 과 같이 가로 세로 길이를 설정할 때 주로 사용한다.