HTML의 태그 구조 [Jquery, CSS]

공부/Jquery,CSS  2016.03.24 01:11

안녕하세요. 명월입니다.
이번 포스트는 HTML의 태그 구조에 대해서 공부하겠습니다. Jquery, CSS 카테고리에 HTML 태그 구조에 대해 공부하는 이유는 CSS와 Jquery의 Selecter와 연관이 있어서입니다.


사실 이 부분은 CSS 스타일 공부하기 전에 해야 했는데 HTML 태그 구조가 별거 아닐 거로 생각해서 패스했었습니다. 그런데 티스토리 블로그 스킨을 만들면서 예전에 제가 알던 것과 많이 다르다는 걸 느껴 지금에 와서 정리해 보네요.


HTML 태그 부분은 제가 신입개발자 일 때 보통 디자이너가 드림위버로 만들었습니다. 그리고 그것을 서버사이드 개발자가 서버 스크립트를 붙이고 사이트를 구축하는 방식으로 작업했었습니다. 그 당시의 태그 정보를 보면 head 태그에서 라이브러리 링크, body 태그 부분에서 div, img로 작성하는 것으로 사이트를 구축했습니다. 그중에서도 특히 div가 80%를 차지했던 거로 기억하네요.


body 구조


지금에 와서 같은 방식으로 웹을 작성하니 그때보다 복잡한 요소(반응형)도 생기고 가독성이 많이 떨어지네요. div 안의 div 안의 div안의 ...
그래서 찾아보니 HTML5부터는 이전과 비교해서 많은 태그 요소를 제공하고 태그의 가독성을 높여주는 요소가 많이 있네요.


링크 - W3schools - HTML5 Elements


그럼 핵심적인 태그부터 간략하게 설명하겠습니다.


태그 설명
html HTML 태그의 최상위 태그입니다. (필수)
head HTML 하위 태그로서 head에는 타이틀, 메타정보가 포함됩니다.
body HTML의 하위 태그로서 HTML 문서정보가 포함됩니다.
meta head의 하위 태그로서 문서의 메타정보가 포함됩니다.
메타정보는 문서의 인코딩 정보, 키워드, 검색사이트의 제어설정, 외부링크정보가 포함됩니다.
title head의 하위 태그로서 HTML 문서의 제목을 나타내며 브라우저의 타이틀에 표시됩니다.
link head의 하위 태그로서 라이브러리등을 연결할 때 사용됩니다.
header body의 하위 태그로서 문서의 상단 부분을 나태낼 때 사용합니다..
main body의 하위 태그로서 주요 콘텐츠를 작성할 때 사용됩니다.
article body의 하위 태그로서 독립적은 콘텐츠를 작성할 때 사용합니다.
session body의 하위 태그로서 콘텐츠의 세션을 구분할 때 사용합니다.
nav body의 하위태그로서 웹 문서의 내이게이션을 나타낼 때 사용합니다.
aside body의 하위태그로서 main 태그의 주요 콘텐츠와 정보를 분리할 때 사용합니다.
footer body의 하위태그로서 문서의 하단 부분을 나타낼 때 사용합니다.

구조적인 HTML을 나열하였으나 설명만으로는 이해가 힘드니 이미지로 부연설명을 하겠습니다.


body 구조


위 이미지는 일단 head 태그의 영역은 생략하고 body 영역만 입력해 넣었습니다. 보시면 태그로서 header, main, footer 영역이 구분되어서 CSS의 가독성도 좋고 실제로 작성을 하게 되면 엄청나게 깔끔해 보입니다.


샘플 링크 - 명월일지 티스토리 스킨


예전에 저는 head 부분은 비슷하게 사용하였으나 body 부분이 예전과 확실히 다르게 사용하네요. div 부분은 있지도 않고 각각의 영역에 요소가 있습니다. 확실히 이전보다 가독성이 올라갑니다.
그리고 또 HTML5의 이런 요소들이 웹 최적화와 관련이 있는 것같네요. 확인된 사항은 아니고 지극히 제 개인적인 생각입니다만 웹 크롤링들은 HTML5의 표준을 지켜서 만든 웹문서를 더 신뢰하는 문서로 인식하는 것입니다. 신뢰한다는 뜻은 아무래도 검색할 때 상위에 노출되겠지요..
스킨을 바꾸고 나서 이전보다 확실히 방문자 수가 늘어났습니다.
그런 점에서라도 HTML 태그를 반드시 알아두어야 할 필요성이 있을 겁니다.



댓글 1개가 달렸습니다.
댓글쓰기
  1. Normal One
    2016.04.01 00:41 신고 |  수정/삭제  댓글쓰기

    예전에 국비지원과정으로 HTML5를 배웠던 적이 있는데, 그 때 기억이 새록새록..

    물론 안쓴 지 오래돼서 완전히 제대로 하려면 다시 공부해야 하지만요(...)