모든 것이 되고싶은 밍구
[HTML] <div> vs <span> 콘텐츠 컨테이너의 차이 본문
반응형
콘텐츠 컨테이너인 <div> 와 <span>의 차이점을 알기 위해서는
블록요소와 인라인요소를 알아야한다.
| 블록 요소 | 인라인 요소 |
| 문서 구조 | 텍스트 |
| 하나의 줄 전체 | 입력하는 내용만큼만 |
| 자동으로 줄바꿈 | 줄바꿈 미수행 |
| div, p, h1 ... | span, img, strong ... |
그렇다면, div 와 span은 어떻게 다를까요!
<div>
HTML 요소를 묶어 하나의 논리적인 단위 영역을 구성논리적으로 구분된 대량의 내용에 대해 CSS 스타일 지정또는,전체 페이지의 공간을 분할하여 레이아웃을 구성하는 데 사용
<span>
텍스트를 위한 컨테이너로서,텍스트의 일부에 대해 CSS 스타일 지정 또는 자바스크립트 조작에 유용
예시를 보자.
<!DOCTYPE html>
<html>
<head>
<title>Example of div and span elements</title>
<style>
.box {
border: 1px solid black;
padding: 10px;
}
.red {
color: red;
}
</style>
</head>
<body>
<div class="box">
This is a box.
</div>
<div class="red">
This is a red box.
</div>
<p>
This is a paragraph with some <span class="red">red</span> text.
</p>
</body>
</html>
<head>에서 지정해둔 CSS 스타일에 따라 div는 결과값을 가져올 것이다.
출력물을 보자.
span의 경우 기존의 라인과 어우러져 한 라인에서 영향을 끼칠 수 있다는 점!
*요약*
div vs span
- div → 여러 HTML 요소를 묶어 하나의 논리적인 영역으로 구성한 후 CSS 스타일 등을 적용할 때 사용하는 블록 요소
- span → 텍스트의 일부에 대해 CSS 스타일 지정이나 자바스크립트에서 조작할 때 사용하는인라인 요소
'💻 IT 프로그래밍' 카테고리의 다른 글
'💻 IT 프로그래밍' Related Articles
more
