코딩/HTML

섹션과 문서에 관련된 태그를 알아보자!

우당당쿵당콩탕 2023. 2. 22. 17:38
728x90
반응형

🥲초보는 오늘도 공부합니다. 코딩과 웹 공부를 시작한지 얼마되지도 않았는데 벌써부터 절망을 느끼고 있어요. 

하지만 꾸준하게 하다보면 언젠가 저도 괜찮아지겠지, 그렇게 생각하며 블로그에 글을 씁니다!

 

오늘은 HTML중에서 SECTION이라는 요소를 알아보려고 하는데요.

HTML5에 새롭게 추가된 요소로서, 섹션을 표시합니다.

 

예시를 보면,

<section>
     <article>
          <h1>제목</h1>
          <p>본문</p>
      </article>
</section>

여기서 섹션이라는 요소의 용도 '내용적 흐름과 구조를 만들기 위해 내용을 나누는 용도' 입니다. 쉽게 말해 같은 성격의 내용,

즉 관련있는 내용을 section에 묶어서 표시하는 겁니다.

 

이렇게 section을 사용하게 되면 장점이 뭐가 있을까요?

광고나 뉴스 섹션처럼 서로 다른 성격을 가진 것들을 이 섹션요소로 표현해주면 영역 구분이 아주 명확하구요.

문서 내 내비게이션 검색이 조금 더 수월해집니다.

 

그렇다면 이 section이라는 친구와 긴밀한 관계를 가진 친구들도 있을 것 같은데요. 

그 친구들에 대해서 알아보겠습니다.

 

또 우리가 알아야 할 것은 '문서'에서 사용되는 태그인데요. 자주 사용되는 태그들 위주로 정리를 해놓았습니다.

head에는 title, meta 등이 들어가고 boady는 브라우저에 실제 표시되는 내용입니다.

이 표 안에 있는 것 말고도 많은 태그가 있지만 자주사용하는 것들입니다. 

오늘도 이렇게 정리를 해보았습니다. 

코딩 공부 모두 화이팅!