#2. HTML 공간 분할 요소:: 블록과 인라인(Block, Inline)

# HTML의 모든 요소는 해당 요소가 Web browser에 어떻게 보이는가를 결정짓는 display 속성을 갖습니다.
# 대부분의 HTML 요소는 이러한 display 속성값으로 다음 두 가지 값 중 하나를 가지게 됩니다.
# 블록(Block)타입의 요소와 인라인(Inline)타입의 요소입니다.
# tag 목록을 볼 수 있는 페이지로 이동합니다.

# 비전공자가 이해한 HTML

---

1. 블록(block)타입의 요소

1) 블록(block)타입의 요소

display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지합니다.
<p>, <div>, <h>, <ul>, <ol>, <form>요소는 display 속성값이 블록(block)인 대표적인 요소입니다.

<p style="border: 3px solid red">
  p요소는 display 속성값이 블록인 요소
</p>

2) <div>요소

<div>요소는 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록(block) 요소입니다.
<div>요소는 주로 여러 요소들의 스타일을 한 번에 적용하기 위해 사용합니다.

<div style="background-color:lightgrey; color:green; text-align:center">
  <h1>div 요소를 이용한 스타일 적용</h1>
  <p>
    이렇게 div요소로 여러 요소들을 묶은 다음에 
    style 속성과 클래스 등을 이용하여 한 번에 스타일을 적용할 수 있음
  </p>
</div>

 

---

2. 인라인(inline)타입의 요소

1) 인라인(inline)타입의 요소

display 속성값이 인라인(inline)인 요소는 새로운 라인(line)에서 시작하지 않습니다.
또한, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지합니다.
<span>, <a>, <img>요소는 display 속성값이 인라인(inline)인 대표적인 요소입니다.

<p>
  <span style="background-color:grey; color:orange">span태그</span>는 display 속성값이 인라인인 요소
</p>

2) <span>요소

<span>요소는 텍스트(text)의 특정 부분을 묶는 데 자주 사용되는 인라인(inline)요소입니다.
<span>요소는 주로 텍스트의 특정 부분에 따로 스타일을 적용하기 위해 사용합니다.

<p>이렇게
  <span style="border: 3px solid red">span요소로 텍스트의 일부분</span>
  만을 따로 묶은 후에 스타일을 적용할 수 있습니다.
</p>

 

---

해당 글은 TCP School에 있는 글을 토대로 공부한 내용입니다.