준비중..
04 div 와 span
# div 와 span
이번 장에서는 `<div>`와 `<span>`에 대해 알아봅시다.
### div 태그
`<div>`는 division의 약자로, 여러 태그들을 분할 관리하기 위해 사용합니다. 예를 들어 봅시다.
위의 결과화면은 다음과 같은 코드로 작성하였습니다.
```
<!DOCTYPE html>
<html>
<head>
<title>Division</title>
</head>
<body>
<div>
<h1>가나다라</h1>
<p>마바사</p>
</div>
<div>
<h1>ABCD</h1>
<p>EFG</p>
</div>
<div>
<h1>1234</h1>
<p>567</p>
</div>
</body>
</html>
```
코드를 분석해봅시다. 한글, 영어 그리고 숫자. 이렇게 총 3개의 `<div>`로 분할되어 있습니다.
네..?? 실제로 페이지를 만들면 색상효과가 나타나지 않는다구요? 맞습니다.
사실 여기에 몇 가지 추가해 줄 코드가 있습니다. `<div>`의 속성으로 style값을 지정해주어야 합니다.
```
...
<div style="background-color:red; color: white;">
<h1>가나다라</h1>
<p>마바사</p>
</div>
<div style="background-color:blue; color: white;">
<h1>ABCD</h1>
<p>EFG</p>
</div>
<div style="color: white;background-color:green">
<h1>1234</h1>
<p>567</p>
</div>
...
```
style 속성의 값으로 준 두 코드는 앞으로 배울 `CSS`에서 다시 자세히 배우도록 하겠습니다. 간단히 설명하자면 배경색을 변경(`background-color:red;`)하였고, 글자의 색(`color: white;`)을 변경해주는 코드입니다.
### span 태그
`<span>`은 글자와 같은 inline 요소를 꾸며줄 때 사용합니다.
사용방법은 아래와 같습니다.
```
<p>This text is black, except for the word
<span style="color: red">red!</span>
</p>
```
인라인 요소가 무엇이냐구요? 자세한 설명은 구글링 또는 다음 링크를 참조하세요. ([HTML: block과 inline 요소](http://html5tutorial.github.io/docs/Block_and_inline_element.html))
### Next..
CSS를 사용하여 웹페이지를 꾸며봅시다.