[HTML] div 태그로 그룹화
2023. 3. 7. 00:58ㆍ기술 창고/HTML
728x90
SMALL
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>div 그룹화</title>
</head>
<body>
<div id="wrapper"> <!-- 내용을 모두 포함한 가장 큰 범위의 섹션 구역 -->
<div id="header"> <!-- 헤더 내용 -->
<h1>Logo</h1>
<h2>menu</h2>
</div>
<div id="content"> <!-- 사이트 페이지 가장 중요한 본문 내용 -->
<div><h2>Sub Menu</h2></div>
<div><h2>Main Menu</h2></div>
</div>
<div id="footer"> <!-- 사이트 가장 밑 하단의 foot 내용 -->
<h2>footer</h2>
</div>
</div>
</body>
</html>
<!--
# <div> = div 태그는 섹션 구역을 나누는 태그이다.
각 div 태그는 스타일이나 css, js가 올바르게 적용될 수 있도록
네이밍을 지정해주어 구분을 해주어여한다. (id, class 속성)
-->- <div> : 섹션 구역을 나누는 태그. 네이버나 다음과 같은 홈페이지를 보면 뉴스 섹션란, 검색란, 타이틀 로고란 등등 각각의 섹션 구역이 나눠져있고 기능마다 분할되고 할당되어있다. 이후에 css를 이 div 태그에 적용하는데 적용하려면 각 div 태그들을 구분할 수 있게 해주어야한다. 여기서는 id 속성을 통해 일일히 구분값을 지정해주었다. 이후에는 필요한 경우에만 id 혹은 class 속성으로 구분값을 줄 것이다.
- id="wrapper" : 모든 구현 구조들을 감싸는 최상단 div 태그를 뜻하는 id값
- id="header" : 상단 구조 섹션을 담당하는 div id 값
- id="content" : 메인 내용 구조 섹션을 담당하는 div id 값
- id="footer" : 하단 구조 섹션을 담당하는 div id 값
여기서는 앞서 말했던 것처럼 css와 같은 스타일을 적용하기 위해 id로 구분을 해주었다고 했다.
이 css 나 동작을 담당하는 js 는 파일을 따로 만들어서 import 해주어야 한다.
728x90
반응형
LIST
'기술 창고 > HTML' 카테고리의 다른 글
| [HTML] Heading 태그 (0) | 2023.03.07 |
|---|---|
| [HTML] 시멘틱 (semantic) 태그 (0) | 2023.03.07 |
| [HTML] 텍스트 정의 요소들 (0) | 2023.03.07 |
| [HTML] 태그 블록 인라인 요소 (0) | 2023.03.07 |
| [HTML] 기본적인 태그 블록 요소 (0) | 2023.03.07 |