| 인라인 요소 | 블록요소 |
| 텍스트요소 -> 기존 내용에 이어서 작성됨 |
문서 구조요소 -> 새로운 행에 작성됨 |
| 입력 내용만큼의 공간을 차지해서 내용을 표시 | 하나의 줄을 전부 차지해서 내용을 표시 |
| 줄바꿈이 수행되지 않아 앞뒤 내용이 이어져서 한 줄에 표시됨 | 자동으로 줄바꿈 수행 |
| <span>, <img>, <strong> ... | <div>, <p>, <h1> ... |
콘텐츠 컨테이너로서 <div>, <span>
| <div> 태그 | <span> 태그 |
| 블록 요소 | 인라인 요소 |
| HTML 요소를 묶어 하나의 논리적인 단위의 영역을 구성 | 텍스트를 위한 컨테이너 |
| 논리적으로 구분된 대량의 내용에 대해 CSS스타일 지정 또는 전체 페이지의 공간을 분할하여 레이아웃을 구성하는 데 사용 |
텍스트의 일부에 대해 CSS스타일 지정 또는 자바스크립트에서 조작할때 유용 |
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.color1{background-color: lightgreen}
.color2{height:50px; background-color:yellow}
</style>
</head>
<body>
<div class="color1">div태그의 특징1: 한 줄 공간을 제공</div>
<div class="color2">div태그의 특징2: 앞뒤로 자동으로 줄바꿈이 수행됨</div>
<hr/>
span 태그는 <span class="color1">입력하는 내용만큼의 공간을 제공하며,</span>
<span class="color1">줄바꿈이 없어서 앞뒤 내용이 이어져서 나타난다.</span>
</body>
</html>▼
'WEB > HTML' 카테고리의 다른 글
| HTML - 하이퍼링크 삽입 (0) | 2021.04.13 |
|---|---|
| HTML - 그림과 링크 (0) | 2021.04.13 |
| 목록 지정 (0) | 2021.04.13 |
| 글자 스타일 지정 (0) | 2021.04.13 |
| 텍스트 표현 (0) | 2021.04.13 |
