[HTML] HTML 요소에 공간 할당하기(Block, Inline, Inline-blcock)

HTML 요소에 공간 할당하기(Block, Inline, Inline-blcock)

HTML 문서에 존재하는 거의 모든 요소는 저마다의 공간을 할당받아 차지하게 됩니다.
어떤 요소가 얼마만큼의 공간을 할당받는지 결정하는 속성이 바로 "display"입니다.

display 속성의 값

요소가 화면에 어떻게 표시되는지를 정의하며 속성 값으로는 네 가지 값을 가지게 됩니다.

• none
• block
• inline
• inline-block

각각 속성에 따라 화면에 어떻게 표시되는지 간단히 알아보겠습니다.

---

"display: none"

"display: block"

"display: inline"

"display: inline-block"

<div>
    <div class="comm none">"display: none"</div>
    <div class="comm block">"display: block"</div>
    <div class="comm inline">"display: inline"</div>
    <div class="comm inline-block">"display: inline-block"</div>
</div>
<style>
 .comm {
      width: 400px;
      text-align: center;
 }
 .none {
     display: none;
     background: #6b9ff2;
 }
 .block {
     display: block;
     background: #6bf2a5;
 }
 .inline {
     display: inline;
     background: #acf26b;
 }
 .inline-block {
     display: inline-block;
     background: #e4f26b;
 }
</style>

---

none

• 요소가 화면에서 보이지 않게 됩니다.
• 화면에서 보이지 않을 뿐 아니라 공간조차도 차지하지 않습니다.

inline

• 요소 내 콘텐츠만큼의 길이만 공간을 사용합니다.
• 너비를 따로 지정해도 너비가 변하지 않게 됩니다.
• 또 다른 inline 속성의 요소와 같은 줄에 배치할 수 있습니다.

block

• 요소의 너비(width)를 100%로 설정합니다.
• 너비를 따로 지정하면 너비가 변합니다.
• 너비와 상관없이 같은 줄에 다른 요소가 포함될 수 없게 됩니다.

inline-block

• 요소의 기본 너비는 inline과 같습니다.
• 너비를 따로 지정하면 너비가 변합니다.
• inline처럼 다른 요소와 같은 줄 내에 위치할 수 있게 됩니다.

HTML이 제공하는 여러 가지 요소는 저마다 기본적인 display 속성을 가지고 있습니다.
아래에서 마저 알아보도록 하겠습니다.

block 속성을 가진 요소

대표적으로 <p>, <div> 등이 있고 아래처럼 여러 가지 요소들이 존재합니다.

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

inline 속성을 가진 요소

대표적으로 <i>, <span> 등이 있습니다.

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

오늘 내용은 HTML보다는 CSS와 크게 관련된 내용이지만 HTML 요소들의 배치 방식을 설명하기 위해 작성했습니다.

도움이 되어드렸다면 구독 / 좋아요 부탁드립니다.👏🏻

감사합니다.🙂

 

* 참고 : http://www.tcpschool.com/