[CSS] 디스플레이(block, inline, inline-block)

🌱 블록(Block)

<div>, <p>, <h1> 등의 태그가 기본적으로 가지게 되는 속성입니다.

자신의 부모 요소의 너비를 100% 꽉 채워 차지하므로

나머지 요소들은 다른 줄로 밀어내고 한 줄을 온전히 혼자 차지합니다.

.special {
  width: 100%;
  height: 30px;
}

.login-btn {
  display: block;
  width: 30px;
  height: 20px;
  padding: 16px 0;
  text-align: center;
}

----------------------------------------------

<div>block1</div>
<div>block2</div>
<div class="special">block3</div>
<a class="login-btn" href="/login">로그인</a>

width와 height, margin과 padding 속성을 모두 지정할 수 있으며

아래에서 살펴볼 높이와 너비값을 지정할 수 없는 inline 속성을 가진 요소에게

display: block 속성을 부여하면 해당 요소 또한 너비와 높이값을 지정할 수 있게 됩니다.

display: block

아래는 block 속성을 가지는 태그의 예시입니다.

• <div>
• <h1> - <h6>
• <p>
• <form>
• <table>
• <hr>
• <footer>, <section>
• ...

 

---

🌱 인라인(Inline)

<span>, <a>, <b> 등의 태그가 기본적으로 가지게 되는 속성입니다.

태그 속 콘텐츠를 감쌀 정도의 크기만을 가지며 텍스트에 볼드, 이탤릭, 색상, 밑줄과 같은 효과를 부여하기 위해 사용됩니다.

a {
	padding: 16px;
}

span {
	color: blue;
}

.div-inline {
	display: inline;
    width: 100%;
    height: 30px;
}

---------------------------------

<div>
    This is inline. 
    <a href="/login">로그인</a>
    <span>SPAN</span>
    <div class="div-inline">
        This is inline div.
    <div>
<div>

block 속성과는 달리 줄바꿈이 일어나지 않고, 크기도 지정할 수 없습니다.

margin과 padding 속성은 좌우값(left, right)만 반영됩니다.

width와 height값 또는 위아래(top, bottom) margin과 padding값을 부여하면 해당 속성값은 무시됩니다.

 

높이와 너비값을 지정할 수 있는 block 속성을 가진 요소에게 display: inline 속성을 부여하면

해당 요소 또한 너비와 높이값을 지정할 수 없게 됩니다.

display: inline

아래는 inline 속성을 가지는 태그의 예시입니다.

• <span>
• <a>
• <img>
• ...

 

---

🌱 인라인 블록(Inline-block)

<button>, <input>, <select> 등의 태그가 기본적으로 가지게 되는 속성으로,

위에서 본 inline과 block의 특징을 합쳐놓은 속성입니다.

.span-inline-block {
	width: 30px;
    height: 40px;
    padding: 10px;
}

span {
	color: blue;
}

.div-inline {
	display: inline;
    width: 100%;
    height: 30px;
}

---------------------------------------------------------------

<div>
    This is inline. 
    <span class="span-inline-block">I'm inline-block.</span>
    <span>SPAN</span>
    <div class="div-inline">
        This is inline div.
    <div>
    Blah blah blah blah blah blah blah
<div>

inline처럼 줄바꿈이 일어나지 않지만, block처럼 요소의 너비와 높이를 지정할 수 있습니다.

top/right/bottom/left 방향의 margin과 padding값 모두 적용됩니다.

display: inline-block

 

---

위의 세 가지 속성은 해당 속성을 부여하고 싶은 주체 요소 스타일에 직접 작성해주면 됩니다.

display: flex, grid 속성은 속성을 부여하고 싶은 요소가 들어있는 부모 요소의 스타일에 작성해주어야 합니다.

 

---

읽어주셔서 감사합니다:)