HTML - div 와 span
컴퓨터/HTML&CSS
728x90
반응형
div와 span 태그
여러분들이 HTML을 통하여 웹페이지를 만들 때 자주 사용하는 태그입니다.
이 div와 span 태그의 HTML에서의 역할은 단순이 영역을 지정하여 구분하기 위한 용도로 사용됩니다.
이후 더 나아서 구분된 영역에 CSS를 통해 속성을 지정합니다.
그렇다면 단순히 영역만을 지정해주는 div와 span태그 그 차이에 대해 알아보도록 하겠습니다.
div - Block 레벨에서의 사용
HTML에서 bolck단위의 개념의 영역을 지정할 때 주로 div 태그를 사용합니다.
아래와 같이 하나의 큰 영역을 div 태그를 이용하여 표현합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="background-color: blue;">
<h1>이곳은 헤더 영역입니다.</h1>
<p>헤더 내용입니다.</p>
</div>
<div style="background-color: blueviolet;">
<h3>이곳은 본문 영역입니다.</h3>
<p>본문 내용입니다.</p>
</div>
</body>
</html>
이처럼 전체의 영역 자체를 div 태그를 이용해 구분할 수 있습니다.
Span - inline 레벨에서의 사용
반면 Span태그는 inline 레벨에서 주로 사용됩니다. 보통 text단위의 경우 span을 사용하여 표현하곤 합니다.
특정 text에 span 태그를 이용해 범위를 지정해주고 그 부분만을 CSS를 통해 디자인할 수 있는 것입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>이곳은 <span style="background-color: blue;">헤더</span> 영역입니다.</h1>
<p>헤더 내용입니다.</p>
<h3>이곳은 <span style="background-color: blueviolet;">본문</span> 영역입니다.</h3>
<p>본문 내용입니다.</p>
</body>
</html>
이처럼 HTML에서 특정한 기능은 없지만 아무 기능없이 영역을 지정해 줄 수 있는 div와 span태그에 대해 알아봤습니다.
728x90
반응형
'컴퓨터 > HTML&CSS' 카테고리의 다른 글
| HTML - iframes(문서안의 문서) (0) | 2022.02.19 |
|---|---|
| HTML - Class 와 Id(태그의 정체성을 부여해 주다) (0) | 2022.01.09 |
| HTML-Block and Inline 1 (0) | 2021.02.17 |
| HTML-List(목록) (0) | 2021.02.03 |
| HTML-tables(행과열의 구성 또는 표) (0) | 2021.01.20 |
Commnet