본문 바로가기
CSS

[CSS] display - block과 inline 그리고 inline-block

seungwoo_h 2018. 8. 2. 00:37



안녕하세요. 

오늘은 display porperty에 대해서 알아 보겠습니다. 그 중에서 inline과 block 그리고 inline-block에 대해서 알아보겠습니다.


먼저 display property에서 간단히 설명하면 display는 화면이 렌더링 되었을때 어떠한 특정 영역이 표시 되는데 성질을 부여하는 property입니다. 그 중 가장 많이 사용 되는 inline과 block 성질(display property의 값)입니다.


우선, html의 태그들은 크게 block 요소와 inline 요소로 나눌 수 있다.


  • block 요소
<address>, <article>, <aside>, <blockgquote>, <canvas>, <dd>, <div>, <dl>, <hr>, <header>, <form>,<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <table>, <pre>, <ul>, <p>, <ol>, <video>


block 요소들은 위와 같은 요소들이 있으며 위에 나열된 태그들 말고도 많은 태그들이 있습니다.


  • inline 요소

<a>, <i>, <span>, <abbr>, <img>, <strong>, <b>, <input>, <sub>, <br>, <code>, <em>, <small>, <tt>, <map>, <textarea>, <label>, <sup>, <q>, <button>, <cite>


inline 요소들은 위와 같은 요소들이 있으며 위에 나열된 태그들 말고도 많은 태그들이 있습니다.


이 외 태그들이 어떠한 성질의 요소인지 확인 하고 싶으시다면 쉬운 방법이 한 가지 있습니다.


태그들의 display 기본값 확인하기


각 브라우저의 개발자 도구를 이용하시면 확인 할 수 있는데 저는 크롬을 통해 알아보겠습니다.



<html>
<head>
<style>
#box-container > div,
#box-container > span{
border: 2px solid #09c;
margin: 3px 0;
padding: 5px;
}
.none{ display: none }
.block1{ display: block }
.block2{ display: block; width: 300px; height: 60px; }
.inline{ display: inline; width: 200px; height: 60px; }
.inline-block{ display: inline-block; width: 200px; height: 60px; }
.default-inline, .default-block{ width: 200px; height: 60px; }
</style>
</head>
<body>
<div id="box-container">
<div class="none">none</div>
<div class="block1">block1</div>
<div class="block2">block2</div>
<span class="inline">inline</span>
<span class="inline-block">inline-block</span>
<span>detualt inline-block</span>
<div>block3</div>
</div>
</body>
</html>




우선 이러한 예제를 작성해 보았습니다. 아래 참고자료에서 필요한 코드를 좀 더 추가 하여 작성하였습니다.


예제 아래쪽 block3 이라고 적혀 있는 div 박스와 default inline-block 이라고 적혀 있는 span 태그를 주목 해주세요.

display를 따로 명시하여 주지 않은 이 두 요소를 검사 해보겠습니다.






이렇게 크롬 개발자 도구에서 Style매뉴와 Computed메뉴를 통해 tag들이 가지고 있는 스타일을 확인 할 수 있는데 위에 사진은 <span> 태그에 대한 스타일인데 display가 inline으로 설정되어 있음을 볼 수 있고  user agent stylesheet를 보시면 <div>의 display가 block으로 명시 되어 있음을 볼 수 있습니다.


그럼, user agent stylesheet에 명시 된 것은 뭐고 Computed 메뉴에 명시 된 것은 무엇 인지궁금 하실텐데 user agent stylesheet는 각 브라우저에서 지정한 스타일을 의미 하며 Computed 메뉴에 지정된 스타일은 그 태그가 가지고 있는 고유 스타일을 의미합니다. 


그럼 본격적으로 이 두 성질의 차이를 알아보죠.




block vs inline



block


block은 한 영역을 차지 하는 박스형태을 가지는 성질입니다. 그렇기 때문에 기본적으로 block은 width값이 100%가 됩니다. 그리고 라인이 새로 추가된다는 것을 알 수 있습니다. 


  • block은 height와 width 값을 지정 할 수 있다.
  • block은 margin과 padding을 지정 할 수 있다.


inline


inline은 주로 텍스트를 주입 할 때 사용 되는 형태입니다. 그렇기 때문에 기본적으로 block처럼 width값이 100%가 아닌 컨텐츠 영역 만큼 자동으로 잡히게 되며 라인이 새로 추가 되지 않습니다. 높이 또한 폰트의 크기만큼 잡힙니다.(line-height로 설정이 가능 하긴 합니다.)


  • width와 height를 명시 할 수 없다.
  • margin은 위아래엔 적용 되지 않는다.
  • padding은 좌우는 공간과 시각적인 부분이 모두 적용 되지만 위아래는 시각적으로는 추가되지만 공간을 차지 하지는 않는다.

block3 위에 <span> 영역을 보시면 겹쳐있는 것을 볼 수 있습니다. 위 이미지를 보시면서 위에 적어 놓은 특징들을 보시면 이해하는데 더 도움이 되실 겁니다.



inline-block


inline-block 은 말그대로 inline의 특징과 block의 특징을 모두 가진 요소입니다. inline-block의 특징은 다음과 같습니다.


  • 줄바꿈이 이루어지지 않는다.
  • block처럼 width와 height를 지정 할 수 있다.
  • 만약 width와 height를 지정하지 않을 경우, inline과 같이 컨텐츠만큼 영역이 잡힌다.

이상 포스팅을 마치겠습니다.



'CSS' 카테고리의 다른 글

[CSS] position  (0) 2018.08.17
[CSS] margin collapsing (마진 상쇄)  (0) 2018.08.05
[CSS] box model과 box-sizing  (0) 2018.08.02
Text 개행 처리 및 글자 자르기  (0) 2017.07.18

'CSS' Related Articles

티스토리툴바