html 시멘트태그

willy·2022년 1월 11일
0

시멘트 태그

이전에는 Div에 id를 할당해서 html을 구성했다고 한다.
근데 이는 수 많은 Id와 class값을 할당해야하기에,
어떤 역할을 하는 컨테이너인지 알기 위해서는 시간이 들 수 밖에 없었다.
그래서 각태그가 어떤 역할을 하는지 한눈에 구분하기 위해 나타난 것이 시멘트 태그다.

웹브라우저의 기본적인 구조를 활용해, 구성을 도와주는 html태그다.
고로, 해당 태그가 나타내는 것이 어디에 위치할지 한눈에 알 수 있는 장점이 있다.

대표적으로 header, section, footer등이 있다.

header 태그

헤더 태그는 최상단에 주로 위치하며, 로고나 메뉴바, 서치엔진 등, 웹 브라우저의 머리 격에 해당한다.
form을 활용해 감싸주는 경우도 있고
Nav를 통해 메뉴판을 추가하기도 한다.

예를 들어

<body>
	<header>
		<form></form>
	        <nav></nav>
	</header>
</body>

이런식으로 사용되는 느낌이다.

section 태그

해당 태그는 본문을 구성한다.
주로 주제별로 묶으며 h태그와 활용되는 경우가 있따.
그리고 해당 섹션 내에 article 태그가 배치되며 실제 내용이 담기게 된다.

aside는 목차 등 부차적인 내용을 담고 있다.

footer 태그는 가장 하단에, 사업자 정보나, 출처 표기를 위해 활용하는 태그라고 이해하면 좋다.

profile
같은 문제에 헤매지 않기 위해 기록합니다.

0개의 댓글