02. Tailwind CSS와 CSS 기초 (display 속성)

Display 속성

display 속성에는 inline, inline-block, block 세 가지가 있다.

 

1. inline 

width와 height 값을 주어도 무시하다. 

즉, 오로지 박스 안의 content 크기에 따라 박스 크기가 정해진다.

y축 margin값을 넣어줘도 다 무시한다.

x축 margin 값은 적용된다.

<div class="m-2 inline h-10 w-10 border-2 border-black">1</div>
<div class="m-2 inline h-10 w-10 border-2 border-black">2</div>
<div class="m-2 inline h-10 w-10 border-2 border-black">3</div>
<div class="m-2 inline h-10 w-10 border-2 border-black">4</div>
<div class="m-2 inline h-10 w-10 border-2 border-black">5</div>

m-2  ( margin: 0.5rem (8px) )

h-10  ( height: 2.5rem (40px) )

border는 그냥 보기 위해 넣었다.

 

2. inline-block

위의 inline처럼 하나의 가로줄에 여러 개를 나열할 수 있고,

width와 height 값을 적용할 수 있다.

여전히 y축 margin은 무시, x축 margin만 적용된다.

위의 코드에서 inline을 →  inline-block으로만 수정해보겠다.

<div class="m-2 inline-block h-10 w-10 border-2 border-black">1</div>
<div class="m-2 inline-block h-10 w-10 border-2 border-black">2</div>
<div class="m-2 inline-block h-10 w-10 border-2 border-black">3</div>
<div class="m-2 inline-block h-10 w-10 border-2 border-black">4</div>
<div class="m-5 inline-block h-10 w-10 border-2 border-black">5</div>

다섯번째 줄에 margin을 m-5 (margin: 1.25rem)으로 해주었지만 여전히 y축은 적용이 안 되는 것을 볼 수 있다.

 

3. block

width, height는 물론, x축 y축 모든 margin이 적용된다.

대신... 한 가로줄에 한 상자밖에 안 들어간다. 

위 코드에서 inline-block만 block으로 바꾸어 보았다.

<div class="m-2 block h-10 w-10 border-2 border-black">1</div>
<div class="m-2 block h-10 w-10 border-2 border-black">2</div>
<div class="m-2 block h-10 w-10 border-2 border-black">3</div>
<div class="m-2 block h-10 w-10 border-2 border-black">4</div>
<div class="m-5 block h-10 w-10 border-2 border-black">5</div>

마지막 margin이 x축과 y축 전부 적용되었다.

 

Default display 속성

display 속성을 조정해주지 않으면 HTML element는 기본적으로 가지고 있는 display 속성이 있다. (HTML 5 specification에 따름)

1. inline : 

    <a>  -  anchor tag

    <b>  -  굵게

2. inline-block :

    <img>

    <button>

3. block :

    <div>

    <p>