DIV & SPAN
div와 span 태그는 HTML에서 정말 많이 사용되는 중요한 태그이다. 두 태그의 공통점은 다른 요소들을 담는 용도(Container)로서 주로 사용된다는 것이다. 이를 통해 div와 span 태그를 이용하여 화면 레이아웃 상의 구역을 나누는 용도로 사용되는 것이다. HTML은 웹사이트의 구조를 설계하는 언어이기 때문에 이러한 div, span 태그가 얼마나 중요한지를 알 수 있다.
그렇다면 div와 span 태그의 차이점은 무엇일까? 두 태그의 결정적 차이점은 div는 sytile property의 display가 block이고 span은 inline이라는 것이다. 간단하게 말하면, div는 태그가 끝맺을 때, 줄바꿈을 한다는 것이고 span은 줄바꿈하지 않고 이어나간다.
또 다른 차이점으로는 영역을 지정하는 방식의 차이이다. div는 사각형의 영역을 구역으로 지정하지만, span은 문장 단위로 영역을 지정한다. div, span의 역할과 두 가지 태그의 차이점을 잘 알고 적재적소에 사용하는 것이 중요하다.
DIV 예제
div는 위에서 설명하였듯이, 영역을 사각형의 영역을 지정한다. div를 더 잘 쓰기 위해서는 이 때의 div의 사각형 영역이 무엇에 의해서 결정되는지를 알아야 한다.
div는 div 태그 안에 있는 컨텐츠의 영향을 받아 사각형 영역을 지정한다. 만약 div 영역안의 높이와 너비가 100px인 컨텐츠가 들어가 있다면 div 영역은 높이가 100px의 사각형 영역으로 지정되는 것이다.
그렇다면 div 영역의 컨텐츠가 아무것도 없다면 어떻게 될까? 그렇게 되면 height가 0이 되어 div는 존재하지만 보이지 않는 영역이 되어버린다. 이 특징은 div의 매우 중요한 특징이다!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 속성 </title>
</head>
<body>
<!--
div -> 끝맺음 -> 줄바꿈 진행
-->
<div style="background: yellow; padding: 5px;">
div2
<div style="background: green; padding: 5px;">
div2안의 div1
</div> <!-- 줄바꿈 -->
여기도 div2
<div style="background: cyan; padding: 5px;">
div2안의 div2
<div style="background-color: violet; padding: 5px;">
div2안의 div2의 div1
</div> <!-- 줄바꿈 -->
<div style="background-color: lightgray; padding: 5px;">
div2안의 div2의 div2
</div> <!-- 줄바꿈 -->
</div> <!-- 줄바꿈 -->
</div> <!-- 줄바꿈 -->
<!--
div는 영역안의 문장 단위의 영향 X
div에 담긴 content의 높이에 따른 사각형의 영역을 범위로 지정
-->
<div style="background: red;">
<div style="width: 100px; height: 100px; background: yellow;">영역지정</div>
</div> <!-- 줄바꿈 -->
<!--
div가 없으면?
존재하지만 보이지 않음 -> 보이지 않지만 분명히 존재함
-->
<div></div>
</body>
</html>코드를 돌리면 아래와 같은 웹페이지를 볼 수 있다.
SPAN 예제
span은 줄바꿈이 되지 않는 container이다. 또한, 문장 단위로 영역이 지정되는 태그이다. 즉, span 태그가 가지고 있는 문장의 양에 따라 span 태그의 영역이 지정되는 것이다.
문장의 의해 영역이 지정된다는 것은, width와 height 속성을 지정해 줄 수 없음을 뜻한다. 또한, 문장에 의해서만 결정되기 때문에 span 요소안의 다른 span 요소 등 문장을 제외한 요소가 들어가 있어도 해당 span은 영역이 지정되지 않는다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 속성 </title>
</head>
<body>
<!--
span -> 끝맺음 -> 줄바꿈 진행X
-->
<span style="background: yellow; padding: 5px;">
span2
<span style="background: green; padding: 5px;">
span21
</span>
span2
<span style="background: cyan; padding: 5px;">
span22
<span style="background-color: violet; padding: 5px;">
span221
</span>
<span style="background-color: lightgray; padding: 5px;">
span222
</span>
</span>
</span>
<!--
문장에 의해 영역 지정
width, height 설정X <- 해줘도 소용없음
span요소는 문장X -> span요소(그 외 문장을 제외한 요소)만 담고 있는 span 영역이 없음
-->
<span style= "background: red;">
<span style="width: 100px; height: 100px; background: yellow;">hi</span>
</span>
<span style= "background: red;"> hello
<span style="width: 100px; height: 100px; background: yellow;">hi</span>
</span>
<!--
빈 span : 존재하되 보이지 않는...
-->
<span></span>
</body>
</html>
코드를 돌리면 아래와 같은 웹페이지를 볼 수 있다.
'Web > HTML' 카테고리의 다른 글
| [HTML] Table (0) | 2023.10.28 |
|---|---|
| [HTML] Tag - Image (0) | 2023.10.20 |
| [HTML] Style 속성 (0) | 2023.10.20 |
| [HTML] 속성(Attribute) (0) | 2023.10.19 |
| [HTML] HTML 문서 정보 태그 (0) | 2023.10.19 |