분류 html

HTML 컨테이너 태그

컨텐츠 정보

  • 조회 467 (작성일 )

본문

컨테이너 태그 


HTML은 컨테이너 태그 세트를 제공합니다. 이러한 태그에는 지정되지 않은 다른 태그 세트가 포함될 수 있습니다.

  • article
  • section
  • div

그들 사이의 차이점을 이해하는 것은 혼란스러울 수 있습니다.


각각을 언제 사용해야 하는지 봅시다.


article 


article 태그는 페이지의 다른 것들과 독립적일 수 있는 것을 식별합니다.


예를 들어 홈페이지의 블로그 게시물 목록입니다.


또는 링크 목록.

<div>
	<article>
		<h2>A blog post</h2>
		<a ...>Read more</a>
	</article>
	<article>
		<h2>Another blog post</h2>
		<a ...>Read more</a>
	</article>
</div>


우리는 목록에만 국한되지 않습니다. article는 페이지의 주요 요소가 될 수 있습니다.

<article>
	<h2>A blog post</h2>
	<p>Here is the content...</p>
</article>


article 태그 안에 제목 (h1-h6)이 있어야 합니다.


section 


문서의 섹션을 나타냅니다. 각 섹션에는 제목 태그 (h1-h6)가 있고 섹션 본문이 있습니다.


예:

<section>
	<h2>A section of the page</h2>
	<p>...</p>
	<img ... />
</section>


긴 기사를 여러 섹션으로 나누는 것이 좋습니다.


일반 컨테이너 요소로 사용해서는 안됩니다. 이를 위해 div가 만들어집니다.


div 


div는 일반 컨테이너 요소입니다.

<div>
	...
</div>


CSS를 사용하여 스타일을 지정할 수 있도록 이 요소에 클래스 또는 id 속성을 추가하는 경우가 종종 있습니다.


컨테이너가 필요하지만 기존 태그가 적합하지 않은 곳에서 div를 사용합니다.


페이지 관련 태그 


nav 


이 태그는 페이지 탐색을 정의하는 마크 업을 작성하는 데 사용됩니다. 여기에 일반적으로 ul 또는 ol 목록을 추가합니다.

<nav>
	<ol>
		<li><a href="/">Home</a></li>
		<li><a href="/blog">Blog</a></li>
	</ol>
</nav>


aside 


aside 태그는 기본 컨텐츠와 관련된 컨텐츠를 추가하는 데 사용됩니다.


예를 들어 따옴표를 추가 할 수 있는 상자입니다. 또는 사이드 바.


예:

<div>
  <p>some text..</p>
  <aside>
    <p>A quote..</p>
  </aside>
  <p>other text...</p>
</div>


따로 사용한다는 것은 그 안에 들어있는 것들이 그 부분이 규칙적으로 흘러가는 부분이 아니라는 신호입니다.


header 


헤더 태그는 소개 페이지 인 부분을 나타냅니다. 예를 들어 하나 이상의 제목 태그 (h1-h6), 기사의 태그 라인, 이미지를 포함 할 수 있습니다.

<article>
  <header>
	  <h1>Article title</h1>
  </header>
  ...
</div>


main 


main 태그는 페이지의 주요 부분을 나타냅니다.

<body>
  ....
  <main>
    <p>....</p>
  </main>
</body>


footer 


footer 태그는 기사의 바닥 글 또는 페이지의 바닥 글을 결정하는 데 사용됩니다.

<article>
 ....
	<footer>
    <p>Footer notes..</p>
  </footer>
</div>



컨테이너 태그