HTML 블록 및 인라인 차이 with div vs span

HTML 블록

블록 요소란 HTML 태그가 화면에서 적용되는 범위가 왼쪽부터 오른쪽 끝까지 이어진 경우를 말합니다.

블록 태그 예시

예를 들어 <p> 태그나 <h1> 태그의 경우 태그가 적용되는 범위는 한 줄을 다 사용합니다. 태그 안의 값이 짧아도 전체 태그의 범위는 넓습니다.

style 속성으로 테두리나 배경색을 줘보면 블록 요소가 뭔지 직관적으로 이해할 수 있습니다.

<h1 style="border:3px solid red;">블록 요소</h1>
  <p style="background-color:hotpink;">한 줄의 블록을 모두 사용</p>

예제 ▷

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <p> <li>, <ol>, <ul>, <dl>, <dd>, <dt>, <div>, <table> 등의 태그는 모두 블록 요소로 적용됩니다.

<div> 태그

<div> 태그는 원하는 범위에 임의로 블록을 지정하는 태그입니다.

<div> 태그에 style 속성을 직접 입력하거나 class, id 값을 부여할 수 있습니다.

<div> 태그로 블록을 지정하면, 아래 처럼 텍스트 범위 밖도 모두 블록 요소로 효과를 받습니다.

<div style="background-color:silver;padding:5px;">
  <h1>div 태그의 사용</h1>
    <p>div 태그는 블록을 임의로 지정합니다.</p>
</div>

예제 ▷

HTML 인라인

인라인 태그 예시

인라인 요소란 HTML 태그로 둘러싸인 부분만 범위가 적용됩니다.

inline 속성으로 css 효과를 줘도, 블록 태그들과 달리 범위로 둘러싸인 텍스트 부분만 적용이 됩니다.

<em style="font-size:20px;">인라인 요소</em>는 <sub>태그</sub>로 감싸진 <strong style="color:orange;">범위</strong>만 적용이 됩니다.

예제 ▷

<em>, <i>, <strong> <b>, <sub>, <sup>, <button>, <img>, <small>, <big> 등이 인라인 요소에 속하는 태그입니다.

<span> 태그

<span> 태그는 문자가 태그로 둘러싸인 부분만 인라인 요소로 지정합니다.

<h1>인라인 <span style="color:green;">요소</span>의 범위</h1>
  <p>span 태그는 <span style="background-color:yellow;">특정 범위</span>만 효과를 줍니다.</p>

예제 ▷