Html 배우기 - Section 요소(태그) - 네이버 블로그

Home » What Is Section In Html » Html 배우기 - Section 요소(태그) - 네이버 블로그

Maybe your like

본문 바로가기 블로그

카테고리 이동 하늘문

검색 MY메뉴 열기 Web-library

html 배우기 - section 요소(태그)

프로필 하늘문

2017. 11. 25. 0:10

이웃추가 본문 기타 기능
  • 본문 폰트 크기 조정 본문 폰트 크기 작게 보기 본문 폰트 크기 크게 보기 가
  • 공유하기
  • URL복사
  • 신고하기
html 기본 구조와 section 요소

html 배우기기본 태그 <section></section> 요소

섹션 요소라고 하는 것이 html5에 새롭게 추가되어졌는데요, 일반적으로 섹션(부문, 구역, 영역)을 나타내는 기능을 합니다. 문단이라던지 1장, 2장, 1절, 2절 등과 같이 이루어지는 글 등을 하나의 그룹 혹은 묶음으로 다루어주는 역할을 하는 것이라고 보면 되는데요.이러한 섹션을 나타내주는 요소들에는 section, nav, aticle, aside가 있습니다. 이 요소들에 대해서는 차후에 글을 올리도록 할게요.

이 네 가지 중에서 우리들이 흔히들 말하는 섹션 개념으로 많이 사용하게 되는 게 section 요소입니다. 그럼, 나머지 3가지는 어디에 사용이 되는지 궁금하게 되는데요~.

nav는 네비게이션 즉 메뉴를 나타낼 때에 사용을 하고, aticle의 경우는 블로그라든지 뉴스, 기사 내용, 공지사항 등을 나타낼 때 사용을 하면 적절할 것 같고요. 마지막 aside는, 예를 들면 사이드바에 최근 글 목록이라던지 인기글 목록, 즐겨찾기 리스트, 링크 달린 배너 리스트 등이 있을 경우에 사용을 하면 되겠네요.

페이지에 보여지는 콘텐츠 부분

이 section 태그는 보통 제목을 나타내는 tag들을 포함하고 있다는 게 큰 특징입니다.여기서 말하는 제목 tag들에는 h1을 시작으로 h2, h3, h4, h5, h6가 있습니다. 여기에 대해서도 다음에 자세히 알아보도록 하고 오늘은 그냥 넘어가도록 할게요. 다만 h1 태그는 title 태그와 함께 검색엔진의 내부 SEO 대책에 상당히 중요한 역할을 한다는 것만 기억해 두시면 좋겠습니다.

기초 html 배우기니까 전체적인 기본 구조도 한번 눈으로 파악해 보도록 하세요.
참고로, 아래 소스에서 처음 시작하는 <! DOCTYPE> 부분은 태그가 아닙니다. 웹브라우저에 html 이 사용되어진 버전을 선언, 미리 알려줌으로해서 페이지가 올바르게 표시될 수 있도록 해 주는 부분입니다. 밑의 소스는 html5로 작성되었다는 것을 선언해 준 것입니다.
<!DOCTYPE html> <html> <head> <title>일본 라면 | HTML 배우기</title> <meta name="Generator" content=""> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> </head> <body> <h1>일본 라면</h1> <section> <h2>돈코츠 라면</h2> <p>돼지뼈를 우려서 스프를 만들며 ...</p> </section> <section> <h2>쇼-유 라면</h2> <p>간장으로 맛을 낸 깔끔하면서 ...</p> </section> <section> <h2>돈코츠 쇼-유 라면</h2> <p>돼지뼈 스프와 간장을 섞어서 ...</p> </section> <section> <h2>미소 라면</h2> <p>일본 전통 된장을 사용해서 스프맛을 살리고 ...</p> </section> <section> <h2>시오 라면</h2> <p>스프의 기본적인 맛을 소금을 이용해서 ...</p> </section> </body> </html>

소스 내용을 보게 되면, 큰 제목을 h1으로 큰 제목 잡아주고,라면 종류별로 섹션으로 묶어줬구요, 그 안에 소제목에 h2도 함께 사용을 했습니다. 이게 기본 스타일이라고 생각하고 익혀두면 언젠가는 도움이 될 듯 싶네요.

그런데, 어디 부분에 어떤 요소를 어떻게 적용을 시켜야지 확실히 모를 경우가 있을겁니다.그럴 경우에는 그냥 div를 사용하시면 됩니다. 새로운 것을 틀리게 사용을 하는 것보다는 기존의 것으로 정확하게 사용을 하는 게 좋겠죠^^

물론 웹사이트나 블로그의 기사 혹은 글 내용들에 section 태그를 적용시켜 주는 게 문법적으로 틀린 것은 아닙니다. 다만, 정성을 들여 작성한 이렇나 콘텐츠가 실질적으로 어떤 성질을 띠고 있으며 어떠한 내용이 실려 있는지 명확하게 해주는 게 좋지 않겠냐는 의미에서 이 요소보다는 article 요소를 사용하는 게 좋답니다.

사실은 저도 아직 이 태그를 그다지 많이 사용해 보지는 않았습니다. 알고는 있지만, 그냥 무심코 사용하기에는 div가 최고 거든요~. 이것 저것 생각 안해도 되고, 특히 시간적 여유가 없을 때 그냥 습관처럼 사용해 버리는게 태반입니다.

이 글을 계기로 저도 이제 많이 사용을 해 볼까 합니다.
{"title":"html 배우기 - section 요소(태그)","source":"https://blog.naver.com/skydoor2014/221147725417","blogName":"하늘문","domainIdOrBlogId":"skydoor2014","nicknameOrBlogId":"하늘문","logNo":221147725417,"smartEditorVersion":3,"meDisplay":true,"lineDisplay":true,"blogDisplay":true,"outsideDisplay":false,"cafeDisplay":true} 닫기

카테고리

이 블로그 홈 하늘문(skydoor2014) 님을 이웃추가하고 새글을 받아보세요 취소 이웃추가

Tag » What Is Section In Html