[HTML/CSS] display 속성 inline과 block, span과 div

제작된 웹 페이지를 F12버튼을 눌러서 개발자 모드로 보다보면

HTML 태그의 display 속성을 자주 보게 됩니다.

 

 

display는 보여준다는 의미인데... inline, block 이라는 속성은 대체 무엇을 의미하는지 궁금해서 찾아보았습니다!

 

 

 

 

1. inline, block, inline-block

 

예전에 웹 페이지를 공부했을 때, HTML을 처음 배웠을 때 span과 div 태그에 대해 공부했었던 기억이 있는데요.

 

span과 관련된 태그가 무엇무엇이 있고,

div와 관련된 태그가 무엇무엇이 있는지 나열된 것을 본 기억은 있는데 지금와서 생각해보니 머릿속에 잘 정리가 되질 않아서, 한번 다시 찾아보았습니다.

 

먼저 HTML은 문자 일부분만 선택해서 지정하는 Inline 방식과, 넓은 범위를 묶어서 지정하는 block 방식이 있습니다.

inline 방식 태그 : <span>, <a>, <em> 등

block 방식 태그 : <div>, <p>, <h1> 등

 

span 태그 같은 경우는 기본적으로 inline이 default로 되어 있고, div 태그는 block 방식이 default로 되어 있다는 차이가 있습니다.

 

 

 

inline 방식 태그 사용 예

before
<a>A</a>
<span>SPAN</span>
<em>EM</em>
after

 

 

block 방식 태그 사용 예

before
<h1>H1</h1>
<div>DIV</div>
<p>P</p>
after

 

 

 

인라인 방식은 이전 태그와 붙어서 차곡차곡 쌓인다는 느낌으로 이해하시면 됩니다!

위 태그들이 마크업하고 있는 컨텐츠들의 크기만큼만 공간을 차지하도록 되어있어서, width와 height 속성과 같은 간격과 넓이 지정에 대한 속성은 반영이 되지 않는다는 점을 주의하시면 될 것 같습니다.

* margin과 padding은 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않습니다.

이러한 제약 조건 때문에 인라인 방식도 제한된 곳에서만 사용되는 편입니다.

 

반대로, block 방식은 태그를 마크업하게 되면 매번 줄바꿈(가로 화면 100% 적용)이 일어나 여러 줄에 보이게 되는 특성을 가지고 있습니다. 그렇기 때문에 width와 height과 같은 간격과 넓이에 대한 속성을 자유롭게 지정할 수 있습니다.

 

 

 

 

마지막으로 inline-block라는 방식이 있는데요.

inline-block 방식 태그 : <button>, <input>, <select> 등

 

이 태그들은 기본적으로 inline 엘리먼트 처럼 전후 줄바꿈이 적용되지 않고 한줄에 나란히 배치가 되는데, inline 방식에서 적용되지 않던 width와 heigth, margin, padding에 대한 간격과 넓이에 대한 지정이 자유롭다는 차이가 있습니다!

 

회원가입 같은 것을 진행할 때, 확인과 취소 버튼이 있다는 점을 떠올리시면 이해하기가 쉽습니다.

 

 

 

 

 

2. display

display는 요소의 방식을 선택하는 속성입니다.

inline으로 할지, block으로 할지, 태생과 다르게 후천적으로 요소의 방식을 주입하는 것이지요.

 

<span>태그에 block 방식의 속성을 주입할 수 있고, <div>태그에 inline 방식을 주입할 수도 있습니다.

이렇게 되면 유동적으로 마크업을 진행 할 수 있게 됩니다.

 

 

 

다만, display: none이라는 속성이 있는데 이 속성을 사용하면 앞에서 설명한 방식들을 모두 제거하고 마치 이 요소가 존재하지 않았던 것처럼 사라지게 된다는 점을 기억해주시면 됩니다!