0049 <div> 요소와 <span> 요소
<div>와 <span> 요소는 인접한 HTML 요소와 텍스트들을 묶는 역할을 하는 요소다. 인접한 요소들을 묶어 구분된 영역인 섹션을 만들어낸다는 점이 클래스 속성(class attribute)과 다르다.
<div> 요소와 <span> 요소는 다른 HTML 요소들을 묶는 역할만 하기 때문에 보통 여러 요소들을 담는 용기(container)로 이해할 수 있다는 점에서 서로 거의 동일하다. 단지, <div> 요소는 블록 요소이고 <span> 요소는 인라인 요소라는 것이 서로 다를 뿐이다.
<div> 요소
<div> 요소는 HTML 문서에서 섹션이나 영역을 정의하는 블록 요소다.
<div> 요소에 아이디(id), 클래스(class) 속성(attribute) 등을 자유롭게 부여할 수 있다.
다음과 같이 
0049_div.html 파일을 만들어 <div> 요소를 실제 사용해보자.
<!DOCTYPE html>
<html>
<head>
<title>div 요소</title>
<style>
#first {
background-color: red;
color: blue;
}
#second {
background-color: blue;
color: red;
}
</style>
</head>
<body>
<div id="first">
<h3>first섹션 제목</h3>
<p>first섹션의 문단</p>
</div>
<div id="second">
<h3>second섹션 제목</h3>
<p>second섹션의 문단</p>
</div>
</body>
</html>
실행해보면 다음과 같이 2개의 섹션으로 나누어진 HTML 문서를 볼 수 있다.
위의 사례에서 <div> 요소는 <h3>와 <p> 요소를 담고 있으며 아이디(id) 속성으로 구분되어 별도의 CSS를 적용하고 있다.
<div> 요소에 담겨 있는 <h3>와 <p> 요소는 모두 <div> 요소에 적용된 CSS가 그대로 상속되어 적용되는 것을 확인할 수 있다.
<span> 요소
<span> 요소는 인라인 요소로 다른 인라인 요소나 텍스트들을 묶는 용도로 사용된다.
인라인 요소라는 점을 제외하면 <span> 요소는 <div> 요소와 동일하다.
다음과 같이 0049_span.html 파일을 만들어 <span> 요소를 실제 사용해보자.
<!DOCTYPE html>
<html>
<head>
<title>span 요소</title>
<style>
#first {
background-color: red;
color: blue;
}
#second {
background-color: yellow;
color: red;
}
</style>
</head>
<body>
<p>
span 요소는 <strong>인라인 요소</strong>로 <span id="first">다른 <strong>인라인 요소</strong>나 <em>텍스트</em>들을 묶는 용도</span>로 사용된다. <span id="second"><strong>인라인 요소</strong>라는 점을 제외하면 <strong>span 요소는 div 요소와 동일</strong></span>하다.
</p>
</body>
</html>
실행 결과는 다음과 같다.
위의 사례에서 <span> 요소의 내부에 텍스트와 <strong> 요소, <em> 요소 등이 중첩(nesting)되어도 문제없이 작동하는 것을 확인할 수 있다.
<span> 요소도 <div> 처럼 아이디(id) 속성을 이용하여 CSS를 적용하고 있는데 <div>와 마찬가지로 아이디(id), 클래스(class) 속성(attribute) 등을 자유롭게 부여할 수 있다.
Anki 파일
아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다.
Ankilog 파일: 
0049 div 요소와 span 요소.apkg
'Anki로 공부하기 > HTML공부' 카테고리의 다른 글
| 0051 CSS 테두리 스타일 설정하기 (0) | 2019.01.26 |
|---|---|
| 0050 CSS 박스 모델(box model) (0) | 2019.01.25 |
| 0048 CSS로 색깔 넣기 (0) | 2019.01.11 |
| 0047 CSS의 Font Weight, Style, Variant (0) | 2019.01.08 |
| 0046 font-size 설정하기 (0) | 2019.01.07 |