HTML 블록(block), 인라인(inline), 인라인 블록(inline-block) 요소들의 특성

소재헌·2022년 9월 17일

MegabyteSchool html css 개발자취업부트캠프 국비지원교육 내일배움카드 메가바이트스쿨 패스트캠퍼스

HTML CSS

목록 보기

1/2

모든 HTML 요소들은 화면에 출력되는 기본적인 특성들을 가지고 있다.
대표적으로 block, inline, inline-block까지 3가지 특성이 있는데 이번 포스팅에서 이들에 대해 알아보자.

1. block

좌우로 최대한 늘어나려는 특성을 가진다.(사용 가능한 최대 너비를 가짐)
포함한 콘텐츠의 크기만큼의 높이를 가진다.
수직으로 쌓이는 특성이 있다.(화면에서 한줄 전체를 차지)
width, height, margin, padding 속성을 지정할 수 있다.
block 요소의 종류로는 <div>, <p>, <h1>, <header> 등이 있다.

1.1 div 예시1

보다시피 block 요소들은 수직으로 쌓안다. block1처럼 width 속성을 따로 설정하지 않으면 기본적으로 최대 너비로 설정된다. block2처럼 width 와 height 속성을 지정할 수도 있다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        padding: 0;
        margin: 0;
      }
      .block1 {
        background-color: aqua;
      }
      .block2 {
        background-color: blueviolet;
        width: 300px;
        height: 300px;
      }
    </style>
    <title>Block vs Inline</title>
  </head>
  <body>
    <div class="block1">div 블록요소</div>
    <div class="block2">div 블록요소</div>
  </body>
</html>

1.2 div 예시2

이번에는 margin, padding 속성을 지정해보았다. 보다시피 잘 적용되는 것을 볼 수 있다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        padding: 0;
        margin: 0;
      }
      .block1 {
        background-color: aqua;
        margin: 20px;
      }
      .block2 {
        background-color: blueviolet;
        width: 200px;
        height: 200px;
        padding: 20px;
      }
      .block3 {
        background-color: brown;
        margin: 20px;
        padding: 20px;
      }
    </style>
    <title>Block vs Inline</title>
  </head>
  <body>
    <div class="block1">div 블록요소 margin</div>
    <div class="block2">div 블록요소 padding</div>
    <div class="block3">div 블록요소 margin, padding</div>
  </body>
</html>

2. inline

너비와 높이 모두 포함한 콘텐츠의 크기만큼의 길이를 가진다.
수평으로 쌓이는 특성이 있다.(한줄에 여러개의 inline 요소 배치 가능)
width, height 속성을 지정할 수 없다.(지정해도 적용 X)
margin, padding 속성 같은 경우 좌우만 지정 가능하다.(상하는 적용 X)
inline 요소의 종류로는 <span>, <img>, <a> 등이 있다

2.1 span 예시

보다시피 inline 요소들은 수평으로 쌓인다. inline2처럼 width, height 속성을 지정해도 적용이 되지 않는다. inline3처럼 margin, padding 속성을 지정하면 좌우만 적용되고 상하는 적용되지 않는다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        padding: 0;
        margin: 0;
      }
      .inline1 {
        background-color: aqua;
      }
      .inline2 {
        background-color: blueviolet;
        width: 200px;
        height: 200px;
      }
      .inline3 {
        background-color: brown;
        margin: 40px;
        padding: 20px;
      }
    </style>
    <title>Block vs Inline</title>
  </head>
  <body>
    <span class="inline1">span 인라인 요소</span>
    <span class="inline2">span 인라인 요소</span>
    <span class="inline3">span 인라인 요소</span>
  </body>
</html>

3. inline-block

inline과 block 요소의 특징이 합쳐진 요소이다.
inline 요소처럼 줄바꿈 없이 한 줄에 다른 요소들과 배치된다.
block 요소처럼 width, height, margin, padding 속성을 다룰 수 있다.
display 속성을 inline-block으로 적용하면 사용 가능하다.

3.1 div 예시

<div> 태그의 display 속성을 inline-block으로 적용했다. <div> 태그임에도 불구하고 수평으로 한 줄에 쌓이는 것을 볼 수 있다. inline-block2와 inline-block3 에서 볼 수 있듯이 기존의 <div> 태그에서 적용되던 width , height, margin, padding 속성도 잘 작동한다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        padding: 0;
        margin: 0;
      }
      .inline-block1 {
        background-color: aqua;
        display: inline-block;
      }
      .inline-block2 {
        background-color: blueviolet;
        display: inline-block;
        width: 300px;
        height: 100px;
      }
      .inline-block3 {
        background-color: brown;
        display: inline-block;
        margin: 20px;
        padding: 20px;
      }
    </style>
    <title>Block vs Inline</title>
  </head>
  <body>
    <div class="inline-block1">div 인라인-블록 요소</div>
    <div class="inline-block2">div 인라인-블록 요소</div>
    <div class="inline-block3">div 인라인-블록 요소</div>
  </body>
</html>

3.2 span 예시

이번에는 <span> 태그의 display 속성을 inline-block으로 적용했다. 기존의 <span> 태그처럼 요소들이 수평으로 쌓이는 모습을 볼 수 있다. 반면에 inline-block2처럼 <span> 태그임에도 불구하고 width , height 속성이 잘 적용된다. inline-block3처럼 margin, padding 속성 또한 상하좌우 모두 잘 작동하는 것을 볼 수 있다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        padding: 0;
        margin: 0;
      }
      .inline-block1 {
        background-color: aqua;
        display: inline-block;
      }
      .inline-block2 {
        background-color: blueviolet;
        display: inline-block;
        width: 300px;
        height: 100px;
      }
      .inline-block3 {
        background-color: brown;
        display: inline-block;
        margin: 20px;
        padding: 20px;
      }
    </style>
    <title>Block vs Inline</title>
  </head>
  <body>
    <span class="inline-block1">span 인라인-블록 요소</span>
    <span class="inline-block2">span 인라인-블록 요소</span>
    <span class="inline-block3">span 인라인-블록 요소</span>
  </body>
</html>

마치며

블록(block), 인라인(inline), 인라인 블록(inline-block) 요소들의 특성에 대해서 알아보았다. 그리고 내 인생 처음으로 블로그를 작성해보았다. 마크다운 작성법에 좀 더 익숙해질 필요가 있다 느꼈다. 아직 많이 부족한 프론트엔드 실력이지만 점점 성장하는 나의 모습을 이 블로그에 기록해 나가고 싶다. 모두들 파이팅!!! (●'◡'●)