[html/css] span, div 태그 차이

특정영역와 넓은 영역에 스타일을 주는 태그 span, div 태그

지난 시간에 span, div에 대해 다뤘는데요 오늘은 span, div 태그 2탄입니다.

글꼴, 색깔, 너비나 높이 등 스타일을 지정할 때, 두 가지 방식으로 지정할 수 있는데요.

1. 문자 일부분만을 선택해서 지정하거나 (inline)

2. 넓은 범위를 묶어서 지정하거나 (block)

[Inline Element]

1번은 줄 속에 끼워 넣는 요소(inline element) 라 하며,

예 :<span>, <b>, <a>, <img>태그 등

[사용 예]div.rtf

<p>지구별 홈페이지에 오신 것을 <span style="color:red;">환영합니다</span><p>

<p>지구별 홈페이지에 오신 것을 <b style="background-color:yellow;">환영합니다</b><p>

<p>지구별 홈페이지에 오신 것을 <img src="welcome.gif" style="width: 50px; height: 50px;">환영합니다<p>

사용 예에서 본 것처럼 특장 문자를 선택해서 지정할 때 편리합니다.

[lnline Element 적용 화면>]

[Block Element]

2번은 묶음 요소(block element)라고 합니다.

예 : <p>, <div>, <ol>, <ul>, <table> 등

특징 : inline과 달리 block 태그를 사용할 때는,

해당 요소가 속한 줄은 가로 화면 전체100%를 차지하며, 앞 뒤로 줄 바꿈이 됩니다.

위에 태그들은 마치 그릇처럼 담아서 넓은 영역에 스타일을 줄 때 편리합니다~

[사용 예]

</head>

<body>

밑에 P 화면이 div 적용 영역
<div style="background-color:yellow;">
<p>P 화면입니다</p>
<p>P 화면입니다</p>
<p>P 화면입니다</p>
</div>

<div style="background-color:pink;">
<h1>H1화면입니다 </h1>
<h2>H2화면입니다</h2>
<h3>H3화면입니다</h3>
<h4>H4화면입니다</h4>
<h5>H5화면입니다</h5>
<h6>H6화면입니다</h6>
</div>

</body>
</html>

[Block Element 적용화면]

liline element와 달리 모두 줄 바꿈되어 있습니다.

div와 span 차이점

위에서 살펴본 것처럼, span은 문자열을 선택해서 지정할 때

div는 비교적 넓은 범위를 묶어 지정할 때 사용합니다.

[div]에 대해서...

예전에는 웹문서 배치(layout)를 table 태그를 사용해서 하기도 했으나

원래 table을 데이터가 들어간 표를 만들 목적으로 만든 태그 입니다..

지금은 웹문서 구조나 배치는 div를 사용합니다(html5에서는 다른 의미적인 요소)

다음부터는 div로 레이아웃 만들기를 써 보겠습니다~