[HTML&CSS]4. CSS: inline, block, inline-block

[HTML] CSS의 display level: inline, block, inline-block

​
​

CSS에서 display 속성은 다른 엘리먼트들과 함께 배치시 가장 우선적으로 고려해야 하는 속성인 만큼 중요한 사항입니다.
​
이번에는 가장 기본적이면서도 중요한 이 display 속성에 대해 알아보겠습니다.
​
​

1. block-level

​
display 속성이 block-level인 엘리먼트는 엘리먼트 혼자 한 줄의 공간을 차지합니다.
즉, 주변에 다른 엘리먼트들이 있다면 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지하는 것입니다.
​
display의 default값으로 block-level을 갖는 태그의 대표적인 예시로는 <div>나, <li>,<p>등을 들 수 있습니다.
​
조금 시각적으로 나타내기 위해 이름이 각각 div1, div2, div3인 div 태그들을 생성해보곘습니다.
각 div 태그에는 각기 다른 background-color 속성값을 부여했습니다.
​

​ ​ 연속된 세 개의 div 태그들은 자동으로 서로 줄바꿈이 되어 나타나고, 또한 그 범위 또한 한 줄 전체를 차지합니다. ​ 이처럼 block-level 속성을 기본적으로 가지고 있는 div태그를 통해, 한 줄 전체를 차지하는 block-level 속성을 확인할 수 있었습니다. ​ ​

2. inline

​
display 속성이 inline인 엘리먼트는 한 줄 전체를 차지하는 block-level의 엘리먼트와 달리, 요소를 구성하는 태그에 할당된 공간만 차지합니다.
​
즉, 주변에 다른 엘리먼트가 있는지는 상관 없이 자신에게 할당된 공간만을 차지하는 것입니다.
​
display의 default값으로 inline을 갖는 태그의 대표적인 예시로는 <span>이나, <a>,<img>등을 들 수 있습니다.
​
이 역시 span1, span2, span3의 이름을 가진 각각의 span태그들을 생성하여 확인해보겠습니다.
​

​
연속된 세 개의 span 태그들은 색상이 딱 글씨만큼만 나타나고, 줄바꿈 없이 연속해서 나타납니다.
​
이를 통해 좀 전의 div태그와는 달리, 요소 안에 할당된 공간에만 (이 경우는 딱 span1이라는 공간 만큼만) 태그의 크기가 할당되며, 줄바꿈 없이 바로 옆에 이어져서 생성된다는 것을 알 수 있습니다.
​
그런데, 이 inline엘리먼트를 사용할 때 주의해야할 점은, width와 height속성을 지정할 수 없다는 것입니다.
​
왜냐하면 inline 이라는 속성 자체가, 해당 태그가 마크업하고 있는 컨텐츠의 크기 만큼만 공간을 차지하도록 되어 있기 때문입니다.
또한, margin과 padding속성을 부여햘 때에도 left right 속성값은 조정할 수 있지만, top bottom 속성값은 조정할 수 없다 는 점도 주의하셔야 합니다.
​
​

3. inline-block

​
앞서 display 속성의 서로 다른 두 속성값 block-level과inline을 확인해봤는데,
마지막으로 이 두 속성값의 특징을 합친 inline-block속성값을 알아보겠습니다.
​
inline-block엘리먼트는 기본적으로 inline엘리먼트처럼 줄바꿈 없이 다른 엘리먼트들과 나란히 배치지만, inline엘리먼트와는 달리 width와 height, 그리고 전(全) 방향의 margin과 padding 속성값을 부여할 수 있습니다.
​
inline-block를 default값으로 가지는 태그의 대표적인 예시로는 <button>이나, <select>,<input>등을 들 수 있습니다.
​

앞서 inline속성값의 예시로 확인했었던 코드에서, span2 영역의 display 값을 inline-block로 변경해주어 이를 살펴보겠습니다.
​

​

span2 영역의 display 값을 inline-block로 변경해주고, 여기에 width와 height, 그리고 padding-top값을 부여해주니, 실행 결과 잘 반영되어 나오는 것을 확인할 수 있습니다.
​
.
.
.
​
혹시 눈치 채셨나요?? 방금처럼 default값으로 block, inline, inline-block을 가진 태그들이라도 사용자는 언제든지 display 속성값을 부여함으로써 상황에 맞는 속성값을 선택할 수 있습니다!!
​
default 값이 block-level인 div태그라도, 사용자의 상황과 필요에 따라, 언제든지 이를 다른 속성값(inline, inline-block)으로 변경시킬 수 있는 것입니다.
​
개발하시면서 여러분 각각의 상황에 따라 적절한 display 값을 설정하시면 좋을 것 같습니다.
​
페이지를 구성하면서 가장 우선적으로 고려해야할 display속성의 세 가지 속성값: block-level, inline, inline-block의 특징과 쓰임에 대해 알아보았습니다.
​
​
​

*정리*

display의 속성값 세 가지

1) block-level : 엘리먼트 혼자 한 줄의 공간을 차지, 자동으로 줄바꿈.  
2) inline : 요소를 구성하는 태그에 할당된 공간만 차지, width, height, 그리고 margin, padding의 위/아래 설정 불가.  
3) inline-block : 기본적으로 inline태그와 동일하나, width, height, 그리고 margin, padding의 모든 영역을 설정할 수 있음.

display의 속성값은 사용자 정의에 따라 상황에 맞게 바꿀 수 있음.