인터넷을 사용하다 보면 전문적으로 웹페이지를 만들거나 블로그를 운영하는 등 HTML을 접하게 되는 경우가 많습니다. HTML에서 가장 많이 보이는 것 중의 하나가 "<div>"와 "<span>" 이라는 tag입니다.
HTML에서 "<div>"와 "<span>"의 차이점은 무엇일까요?
간단히 이야기해보면 "<div>"는 block 수준의 영역에서 선을 만들거나, 구조화하는 데 사용되고, "<span>"은 텍스트를 스타일링(컬러를 주거나 크기를 조절하거나 좌우 간격을 조절하는 등) 하기 위한 inline 요소라고 할 수 있습니다.
div 태그
블록 레벨 요소: div 태그는 블록 레벨 요소로, 항상 새로운 줄에서 시작하여 페이지의 가로나비를 차지합니다.
구조화: 웹 페이지의 내용을 논리적인 섹션으로 나누는 데 주로 사용됩니다. 예를 들어, 헤더, 푸터, 메인 콘텐츠 영역 등을 구분할 때 div 태그를 활용합니다.
레이아웃: CSS를 사용하여 div 태그에 다양한 스타일을 적용하여 페이지의 레이아웃을 구성할 수 있습니다.
다른 요소 포함: div 태그는 다른 모든 HTML 요소를 포함할 수 있습니다.
span 태그
인라인 레벨 요소: span 태그는 인라인 레벨 요소로, 주변 텍스트의 흐름을 방해하지 않고 특정 텍스트 부분만 감쌉니다.
스타일링: 텍스트의 일부분에만 특정 스타일을 적용하고 싶을 때 사용합니다. 예를 들어, 텍스트의 색상, 폰트, 크기 등을 변경할 때 span 태그를 활용합니다.
스크립팅: 자바스크립트와 함께 사용하여 동적인 효과를 구현할 수 있습니다.
언제 어떤 태그를 사용해야 할까요?
div 태그
- 페이지의 구조를 정의할 때
- CSS를 사용하여 레이아웃을 디자인할 때
- JavaScript와 함께 동적인 효과를 구현할 때
span 태그:
- 텍스트의 일부분에만 스타일을 적용할 때
- 자바스크립트를 사용하여 특정 텍스트 부분에 이벤트를 연결할 때
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
<style>
#header {
background-color: #ffcc00;
padding: 10px;
text-align: center;
}
#content {
background-color: #e0e0e0;
padding: 20px;
}
#footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<div id="header">
<h1>div 태그를 함께 배워봐요</h1>
</div>
</body>
</html>
div 태그를 함께 배워봐요
<!DOCTYPE html>
<html>
<head>
<title>Span Tag Example</title>
<style>
.강조된 {
color: red;
font-weight: bold;
}
.강조된배경 {
background-color: yellow;
font-style: italic;
}
</style>
</head>
<body>
<p>span 태그를 사용하여 <span class="강조된">강조된</span> 단어와 <span class="강조된배경">강조된배경</span> 텍스트 예시입니다.</p>
</body>
</html>
span 태그를 사용하여 강조된 단어와 강조된배경 텍스트 예시입니다.
위 예시에서:
div 태그는 header 클래스를 사용하여 헤더 영역을 정의합니다.
span 태그는 style 속성을 사용하여 텍스트의 일부분의 색상을 변경합니다.
HTML에서 div와 span 태그의 차이
HTML에서 <div>와 <span> tag는 다음과 같은 차이가 있습니다
| div | span | |
| Level | block | inline |
| 주요용도 | 내용 구조화, 레이아웃 구성 | 텍스트 스타일링, 스크립팅 |
| Styling | 너비, 높이, 위치, 여백, padding 등 HTML 요소의 컨테이너 역할 | layout에 영향을 주지 않으며, 여백과 padding이 다르게 적용 |
| Layout | 페이지 가로 너비를 차지 다른 요소들을 위한 block 형성하여 구조 틀을 만듬 |
주변 텍스트 흐름을 방해하지 않음. 텍스트 또는 텍스트일부의 styling |
| 포함가능 요소 | 모든 HTML 요소를 포함할 수 있으며, javascript를 통해 하는 작업을 수행, 다양한 동적 효과 추가 가능 | 텍스트 또는 다른 인라인 요소 |
| 줄바꿈 | 줄바꿈 가능 | 줄바꿈 불가능 <span>태그 역시 block속성을 별도로 지정해서 사용 가능 |
주의
div 태그는 남용하면 HTML 코드가 복잡해지고 유지보수가 어려워질 수 있습니다.
semantic HTML을 사용하여 의미 있는 태그를 선택하는 것이 좋습니다. 예를 들어, 헤더 영역은 header 태그, 섹션은 section 태그를 사용하는 것이 더 적절할 수 있습니다.
'HTML 공부' 카테고리의 다른 글
| 손상된 한글 문서와 삭제된 파일, 이렇게 하면 되살릴 수 있습니다! (0) | 2024.12.14 |
|---|---|
| Google 블로그 스팟에서 줄간격 조절하는 방법: 완벽 가이드 (1) | 2024.09.24 |
| HTML 색상 코드 지정방법 (0) | 2024.07.27 |
| HTML이란 무엇인가요? (0) | 2024.07.23 |
| 웹페이지, 웹사이트,웹서버, 검색엔진은 어떻게 다른가요? (1) | 2024.07.23 |