3. 자주 쓰는 HTML 태그들

글, 텍스트, 링크

<h1> <h2> <h3> <h4> <h5> h6

제목. 숫자가 작을 수록 큰 내용 그룹의 제목 h1은 검색에 아주 중요한 영향을 미침


<h1>이 페이지의 대표 제목입니다</h1>

문장과 문단 - p

문장, 문단 일반적인 텍스트 콘텐츠


<p>이건 문단이에요</p>

줄바꿈 - br, wbr

br은 그냥 줄바꿈, wbr은 한 줄로 표시가 불가능할 때만 줄바꿈


<p>
	이 텍스트는 한 줄로 표현이 가능하다면 한 줄로 쭉 나오고,
	자리가 모자라서 다음 줄로 넘어간다면 바로<wbr>
	여기부터 다음 줄에 표시될 겁니다.
</p>

목록 - ul, ol, dl

ul - 순서가 없는 목록 ol - 순서가 있는 목록 dl - 제목-설명 형태의 목록


<h2>내가 좋아하는 음식</h2>
<ul>
	<li>초밥</li>
	<li>라면</li>
	<li>삼겹살</li>
</ul>


<h2>세계 인구 순위 TOP 5</h2>
<ol>
	<li>중국 1,412,360,000</li>
	<li>인도 1,393,409,033</li>
	<li>미국 331,893,745</li>
	<li>인도네시아 276,361,788</li>
	<li>브라질 213,993,441</li>
</ol>


<dl>
	<dt>자바스크립트</dt>
	<dd>브랜든 아이크</dd>
	<dt>파이썬</dt>
	<dd>귀도 반 로섬</dd>
</dl>

링크 - a


<a href="https://studiomeal.com">스튜디오밀</a>
<a href="https://studiomeal.com" target="_blank">스튜디오밀(새창)</a>

<strong> <em>

strong - 매우 강조 em - 적당히 강조

<span>

특별한 의미 없이, 디자인이나 값 지정 등의 목적으로 텍스트를 감싸는 용도


<span></span>

외부 콘텐츠

<img>

이미지


<img src="images/sonic.jpg" alt="바람돌이 소닉">

<figure>

내용과 관련된 이미지, 비디오, 오디오 등을 감싸는 용도


<figure>
	<img src="images/sonic.jpg" alt="바람돌이 소닉">
	<figcaption>엄청 빠르고 용감한 고슴도치</figcaption>
</figure>

<video>

비디오를 로드하고 재생

muted - 소리 제거 autoplay - 자동 재생 loop - 반복 재생


<video muted autoplay loop src="intro.mp4"></video>

레이아웃을 구성하는 태그들

<section> <article>

한 개의 주제를 가진 콘텐츠 그룹 단위 article은 콘텐츠를 단독으로 다른 곳에 사용할 수 있는 콘텐츠를 담음

<header>

콘텐츠 그룹의 시작 부분 section이나 article의 시작 부분


<!-- 나쁨 -->
<header>
	<h1>라면 끓이기</h1>
	<h2>쉬우면서도 더 맛있게 끓이는 방법</h2>
</header>

<!-- 좋음 -->
<header>
	<h1>라면 끓이기</h1>
	<p>쉬우면서도 더 맛있게 끓이는 방법</p>
</header>

<!-- 좋음 -->
<header>
	<hgroup>
		<h1>라면 끓이기</h1>
		<h2>쉬우면서도 더 맛있게 끓이는 방법</h2>
	</hgroup>
</header>

<footer>

콘텐츠 그룹의 끝 부분 section이나 article의 끝 부분


<footer>
	<p>Copyright &copy; 2022 blahblah</p>
	<address>
		<p>제주특별자치도 제주시</p>
		<p>xxxxx@xxx.com</p>
	</address>
</footer>

<aside>

페이지의 주요 내용와 직접 관련이 없는 부수적인 내용의 그룹 광고, 위젯, 연관 링크 목록 등

<main>

페이지에서 가장 핵심이 되는 내용을 감싸는 태그 한 페이지에 한 개만 허용(눈에 안보이는 경우 여러개 존재 가능)

<div>

특별한 의미 없이 레이아웃 구현 등의 이유로 요소들을 그룹핑하는 태그

<h1> … <h6>

Sectioning content의 제목을 나타냅니다. 서브타이틀로 사용하면 안됩니다.

앞서 배운 태그를 사용해서 레이아웃을 만들어 볼까요? 왼쪽 화면의 레이아웃을 코드로 작성하면 오른쪽과 같습니다.


<article>
	<header>
		내용
	</header>
	<section>
		<header></header>
		내용
	</section>
	<section>
		<header></header>
		내용
	</section>
</article>