728x90
- HTML 코드를 작성하다 보면 관련 있는 요소를 그룹으로 묶어야 하는 경우가 많다.
예를 들어, 네이버 페이지를 보면 알 수 있다. 검색 영역, 로그인 영역, 내용 영역, 등 관련 있는 요소들끼리 그룹이
되어있는 것을 확인할 수 있다.
웹페이지는 관련있는 그룹끼리 묶으면 레이아웃을 구성하기가 쉬워진다.
그리고 더 깔끔한 구조의 HTML 웹 페이지를 만들 수 있다. HTML에서는 이런 그룹 짓기 작업을 div와 span 태그로 수행한다.
| 공간 분할 태그 : 관련 있는 요소끼리 그룹 짓는 작업을 다른 영역과 분리한다는 의미로 공간 분할 이라고한다. 대표적으로 <div>, <span> 태그를 공간 분할 태그라고도 한다. |
1. div 태그
<div></div>div 태그는 블록요소 (block-element)이다.
블록 요소와 인라인 요소를 그룹으로 묶을 때 사용하는 것이 div 태그이다.
아래 예시를 통해 그룹을 묶지 않고 사용할 경우 어떻게 보이는지 확인해보자
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Div 태그</title>
</head>
<body>
<p>산과 바다</p>
<p>유명한 산을 소개하는 페이지</p>
<p>산에 대한 내용을 적는 곳</p>
<p>산에서 살고있는 동물들</p>
<p>유명한 바다를 소개하는 페이지</p>
<p>바다에 대한 내용을 적는곳</p>
<p>바다에 살고있는 동물들</p>
<p></p>
</body>
</html>body 태그 안에 그룹을 지정하지 않고 설정했다. 만약 코드가 훨씬 더 복잡하게 된다면 어떻겠는가?
보기 정말 안좋겠다. 그래서 div 태그를 사용하여 영역별로 그룹을 지어보면 어떻게 보이는지 확인해 보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Div 태그</title>
</head>
<body>
<div>
<p>유명한 산을 소개하는 페이지</p>
<p>산에 대한 내용을 적는 곳</p>
<p>산에서 살고있는 동물들</p>
</div>
<div>
<p>유명한 바다를 소개하는 페이지</p>
<p>바다에 대한 내용을 적는곳</p>
<p>바다에 살고있는 동물들</p>
</div>
</body>
</html>
관련된 있는 요소들끼리 그룹으로 묶기만 했을 뿐인데 보기 좋은 코드로 바뀌었다.
div는 박스형태의 블록 요소로 홈페이지의 레이아웃을 구성하는 데에도 많이 사용한다.
이번 편은 html이므로 자세한 건 css에서 조금 더 자세하게 설명을 하도록 하겠다.
728x90
'Front-end Developer > HTML' 카테고리의 다른 글
| 6.HTML의 부모, 자식, 형제 관계 / 줄 바꿈과 들여쓰기 (0) | 2022.10.23 |
|---|---|
| 4.HTML 태그를 사용하여 텍스트 만들기 <h>,<p>,<br>,<span> (0) | 2022.10.22 |
| 3. HTML의 기본 구조 (html, meta, head, body) (0) | 2022.10.22 |
| 2. HTML의 특징 블록(block) 요소 vs 인라인(inline) 요소 (0) | 2022.10.22 |
| 1.HTML의 기본 구성 요소 (0) | 2022.10.21 |
