[css] block, inline의 뜻과 사용법(ft. display, inline-block)

css block inline

 

CSS, display의 block과 inline의 

개념과 사용법에 대하여

알아보겠습니다. 

 

display

display 속성이란 화면을 배치하는 방법입니다.

 

display 종류

none | contents | block | inline | inline-block | table | table-cell

block과 inline 요소의 개념을 잡는 것은 html 마크업 요소에서 가장 중요하다고 할 수 있습니다.
그래서 이번 기회에 확실하게 짚고 넘어가겠습니다.

이 두 가지의 요소에 따라 전체 레이아웃이 변합니다.

block 요소

• block 요소는 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지합니다. 즉, 해당 요소의 너비가 100%라는 의미입니다.
• 따라서 그 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없습니다.
• width, margin, padding을 이용하여 크기나 위치를 지정하려면 block 요소여야 합니다.
• block 요소 태그: <div>, <p>, <h1> ~ <h6>, <ul>, <ol>, <li>, <form> <hr> <table> <address>
• display: block;으로 지정하면 해당 요소를 block으로 지정합니다.
• block 요소가 다른 block 또는 inline 요소를 감쌀 수 있습니다.

inline 요소

• inline 요소는 한 줄을 다 차지하지 않습니다.
• 화면에 표시되는 영역만큼만 차지합니다.
• 따라서 나머지 공간에 다른 요소가 올 수 있습니다.
• inline 요소 태그: <img>, <br>, <a>, <span>, <input>, <button>, <label>
• display: inline;으로 지정하면 해당 요소를 inline으로 지정합니다.
• inline 요소 안에 inline 요소가 포함 가능하나 block 요소는 포함할 수 없습니다.

 

inline 요소 높이 가운데 조정

inline 요소는 html에서 기본적으로 글자로 취급하는 요소입니다. 

글자를 취급하는 요소는 알파벳을 기준으로 높이가 정해져 영역 아래에 약간의 공간을 가질수 있기때문에 img와 같은 태그의 영역이 아래의 공간을 갖은 채 위로 붙어 있습니다.  

예제)

before

<img> 태그 사용시, 이미지가 위로 올라가있음

 

해결 방법 display: block;

img {display: block;}

 

after

<img>를 block 요소로 변경하여 높이를 중간으로 맞출 수 있습니다. 

 

display: inline-block

· display: inline;으로 지정하면 요소들을 한 줄에 옆으로 배치할 수 있지만
너비나, 높이, 마진 같은 박스 모델 값이 정확하게 적용되지 않습니다.
즉 css상에 적용한 너비, 높이, 마진 값들이 먹히지 않으며 크기는 적절히 지정됩니다.
·즉, div 태그를 inline처럼 배치하고 싶지만 크기 값을 주어야 할 경우, display: inline-block을 사용하면 됩니다.

display: none

· 해당 요소를 화면에 아예 표시하지 않습니다.
· visible: hidden도 갚은 역할을 하는데 visibility 속성은 화면에서 감추기만 할 뿐 원래 요소가 있는
공간은 그대로 영역을 차지하지만 display: none은 공간조차 차지하지 않습니다.
· 반응형 웹을 제작할 때 pc용에서는 표시하지만, 태블릿, 모바일에서는 감춤 처리를 할 때 사용합니다.

 

block, inline 예제 (Result 클릭)

예제와 같이 display 속성을 사용하여 block요소를 inline요소로, inline요소를 block요소로 바꿀 수 있습니다.
inline 요소인 img태그에 margin: 0 auto를 사용하기 위해서 display: block을 지정하여 요소의 성격을 바꿨습니다.