3.4 HTML 기본문서 만들기 - <div>, <span>

4. <div> 와 <span>

<div>와 <span>에 들어가기 전에

블록 태그와 인라인 태그에 대해 간단하게 설명하겠습니다

 

1. 블록 태그 (block)

- <p>, <h1>...<h6>, <div>, <ul> 등이 있습니다.

- 말 그대로 "블록"입니다.

<p></p>, <div></div> 이런 식으로 

항상 새 라인에서 시작하고, 한 라인을 독점해서 사용한다는 특징이 있습니다. 

 

2. 인라인 태그 (in line)

- <strong>, <a>, <img>, <span> 등이 있습니다. 

- 블록 속에 삽입된다는 특징이 있습니다. 

(인라인 in line 이니까 한 라인을 독점하는 블록 안에 in line)

 

---

 

이제 블록 태그와 인라인 태그 중에

가장 많이 쓰는 <div> 와 <span>으로 예시를 들어드리겠습니다. 

 

 

<div>는 <p>와 비슷하게 사용할 수 있습니다. 둘 다 단락을 나눠줘요.

<div>는 네모 칸 안에 가둬둘 수 있는데

<div style = "background-color:~~~; padding:20px"> 로 작성하면

네모칸의 배경색과 크기를 설정할 수 있습니다. 

 

 

짠 이렇게 나옵니다

---

이 글에서 <span>을 사용해 볼까요

<span>은 강조할 때 주로 사용하는 듯 합니다 .

<span style = "color:~~~"> 으로 색을 설정할 수 도 있습니다. 

저는 "div"와 "색"에 span을 걸었습니다.

 

그럼 이런 식으로 출력됩니다 예힝