본문 바로가기
HTML

[HTML] Inline VS Block Element

쌈뽕코딩 2024. 8. 9. 22:15

Inline VS Block Element

모든 HTML 태그들은 각 태그의 용도에 따른 default display value(기본 표시 값)를 가진다.

이때 default display value는 블록 레벨 요소(Block-level Elements)와

인라인 레벨 요소(Inline-level Elements) 두 가지 범주로 나뉜다.

예를들면 <div>태그는 블록 레벨 요소이고, <span>태그는 인라인 레벨 요소이다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Inline block</title>
    <style>
      div {
        background-color: red;
      }

      span {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <h2>작사자 논쟁</h2>
    <div>
      작사자가 누구인지를 두고 논쟁이 있다. 윤치호설, 안창호설, 민영환설,
      공동작사설등이 있다.
    </div>
    <span>
      작사자가 누구인지를 두고 논쟁이 있다. 윤치호설, 안창호설, 민영환설,
      공동작사설등이 있다.
    </span>
  </body>
</html>

 

<div>: Division

  • div 태그는 Division 즉! 분할, 분배, 분류를 뜻한다.
  • <div> 태그는 영역을 분할할 때 자주 사용한다.
  • HTML 안에 존재하는 <h2> 태그나 <p> 태그 등 여러 개의 태그들을 <div> 라는 큰 단위로 묶어주는 컨테이너 같은 역할을 한다.

 

<span>

  • <span> 태그도 <div> 태그와 같이 여러 개의 태그들을 묶어주는 주머니 역할을 한다.
  • <span> 태그도 div 태그와 마찬가지로 영역 태그이다.
  • 차이점에는 div 태그는 박스 형태로 담는 컨테이너 역할을 하면서 영역을 구분하지만 <span> 태그는 다른 태그들을 담는 역할을 하기보다는 특정 텍스트와 문장 영역을 지정하여 스타일링을 할 때 사용한다.

Block Element

블록 레벨 요소는 부모 요소의 전체 공간을 차지하여 "블록"을 만든다.

<h1>~<h6> <ol> <ul> <li> <p> 태그 등이 블록 요소에 속한다.

  • 화면 구성이나 레이아웃을 짤 때는 블록 레벨 요소를 사용한다.
  • 블록 레벨 요소는 한칸을 모두 차지하기 때문에 세로로 나열 된다.
  • width, height, margin CSS 속성 값이 적용됨.

 

📄 블록 레벨 요소 목록

Inline Element

인라인 레벨 요소는 콘텐츠의 흐름을 끊지 않고(줄바꿈X), 요소를 구성하는 태그에 할당된 공간만 차지한다.

<a> <em> <img> <span> 태그 등이 인라인 요소에 속한다.

  • 인라인 레벨 요소는 콘텐츠 영역 만큼 차지하기 때문에 가로로 나열된다.
  • margin-top, margin-bottom 적용되지 않는다. 대신에 line-height 이용
  • width, height CSS 속성 값이 적용되지 않는다.
  • 태그가 콘텐츠의 할당 된 공간만 갖고 있기 때문에 text-align과 같은 속성은 사용할 수 없다.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Inline Block2</title>

    <style>
      div {
        background-color: red;
        width: 100px;
        height: 100px;
        border: 1px solid blue;
      }

      span {
        background-color: yellow;
        width: 100px;
        height: 100px;
        border: 1px solid blue;
      }
    </style>
  </head>
  <body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </body>
</html>

CSS Display 속성

CSS의 display 속성은 요소가 화면에 어떻게 표시되는시 설정하는 역할을 한다.

위에서 언급했던 것처럼 CSS default display value가 block 이면 해당 태그는 블록 요소이고, inline 이면 인라인 요소이다.

그리고 우리는 이 display 속성의 값을 변경함으로써 시각적인 표현을 변경할 수 있다.

즉, 블록 요소를 인라인 요소 등으로 바꿀 수 있다.

/* 블록 요소인 div를 인라인 요소로 변경 */
div {
	display: inline;
}

 

Display 속성 값

  • none: 보이지 않음
  • block: block 요소로 표시
  • inline: inline 요소로 표시
  • inline-block: block과 inline의 중간 형태로 요소는 inline인데 내부는 block처럼 표시함
  • flex: Layout을 만들때 자주 사용하는 값

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Inline Block2</title>

    <style>
      div {
        background-color: red;
        width: 100px;
        height: 100px;
        border: 1px solid blue;
      }

      div.change-Inline {
        display: inline;
      }

      span {
        background-color: yellow;
        width: 100px;
        height: 100px;
        border: 1px solid blue;
      }

      span.change-Block {
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="change-Inline">1</div>
    <div>2</div>
    <div>3</div>
    <span class="change-Block">1</span>
    <span>2</span>
    <span>3</span>
  </body>
</html>

 

📝 정리

div, span

  • div, span 둘 다 영역 태그이다.
  • div는 영역을 분할하며, 컨테이너의 역할도 한다.
  • span은 영역태그이며, 특정 아이템을 꾸밀 때 사용한다.

 

block vs inline

  • div는 block level element 이다.(전체공간, 세로배치, width&height 적용 O)
  • span은 inline level element 이다. (전체공간, 세로배치, width&height 적용 X)
  • 하지만 CSS 속성으로 바꿀 수 있다.

본 내용은 유튜버 짐코딩님의 웹 개발 강의를 정리한 것 입니다. 하단 링크 참고해주세요!

 

짐코딩 - 웹 개발 입문부터 실무까지

【실전코딩 짐코딩 클럽 💪🏋️‍♀️】 👉 https://gymcoding.co (짐코딩 사이트, 강의교안 등등) 【짐코딩 클럽 온라인 강의 🎉】 👉 https://edu.gymcoding.co 👉 모든 유료강의 구독자 할인 쿠폰코드

www.youtube.com

'HTML' 카테고리의 다른 글

[HTML] Form 다루기  (0) 2024.08.14
[HTML] 🖼️ 이미지 & 멀티미디어  (0) 2024.08.12
[HTML] Sementic Tag 란?  (0) 2024.08.08
[HTML] HTML 기본 태그  (0) 2024.08.08
[HTML] Emmet  (0) 2024.08.06

'HTML' Related Articles

티스토리툴바