티스토리 스킨 만들기 (2) - HTML 개요

2018.11.28.프로그래밍/웹 프로그래밍

HTML은 크롬, 인터넷 익스플로어, 엣지, 사파리, 파이어폭스 등 웹페이지를 보여주는 웹 브라우저를 위한 마크업 언어입니다.
보여줄 웹페이지가 어떤 구조를 가지고 있으며, 어떤 내용을 보여줄지 설명하는 역할을 합니다.
여기서는 태그와 HTML5 기본적인 구조를 다루며, 꾸미거나 배치하는 방법은 나중에 스타일시트(CSS)를 다룰때 하도록 하겠습니다.

HTML은 태그를 이용해 문서의 구조를 표현합니다.
특별한 몇 가지 경우를 제외하고는 태그는 항상 <태그>와 같은 여는 태그와 </태그>와 같이 닫는 태그가 쌍을 이룹니다.
미리 약속되어 있는 태그를 활용할 수도 있고, 필요에 따라 새로운 종류의 태그를 직접 만들 수도 있습니다.

기본 구조

구조는 HTML의 5번째 버전인 HTML5를 기준으로 하겠습니다.
HTML5문서의 기본 구조는 아래와 같이 크게 두 부분으로 나눌 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
  </head>

  <body>
  </body>
</html>

위 코드에서 <!DOCTYPE html>는 "이 코드가 HTML5 양식으로 작성되었음"을 알려주는 역할을 합니다.
<html>의 속성인 lang="ko"는 이 HTML문서가 한국어 사용자를 위해 작성되었음을 알려줍니다.
HTML 문서의 내용이 담기는 <html>태그에는 <head>태그와 <body>태그가 들어있습니다.

HEAD 태그

head 태그에는 문서의 제목, 간단한 내용, 키워드, 작성자, 작성일자 등 웹페이지의 메타정보와 SNS 등에 공유할 때 보일 그림, 메시지 등이 들어갑니다.
그리고 문서의 내용을 본격적으로 불러들이기 전에 로드해야 하는 외부 스타일시트나 스크립트도 이곳에 들어갑니다.

헤드 태그의 내용을 채우는 것은 나중에 다루도록 하겠습니다.

BODY 태그

본격적으로 표시할 내용이 들어가는 부분입니다.
검색엔진 등이 웹페이지를 분석할 때 도움을 줄 수 있는 시멘틱 태그를 활용하여 구역별로 관리하는 것이 좋습니다.

시멘틱 요소의 활용

시멘틱 요소(Semantic Elements)는 검색엔진 등이 웹페이지를 분석하기 쉽게 해주고, 나중에 편집할 때도 편리합니다.
아래와 같은 방식으로 활용합니다. 시멘틱요소는 일반적으로 DIV와 같은 기본 블록 요소 스타일을 가지게 됩니다.

<body>
  <nav>네비게이션 요소</nav>
  <header>머릿글 요소</header>

  <main> 페이지의 핵심 요소들
    <article> 기사나 포스트의 본문 </article>
    <section> 구역 </section>
  </main>

  <footer>바닥글 요소</footer>
  <aside>사이드바 요소</aside>
</body>

주석 활용

티스토리는 하나의 html로 모든 페이지를 구현해야 하기 때문에 문서가 아주 길어지게 됩니다.
주석을 활용하면 쉽고 빠르게 수정이 필요한 부분에 접근할 수 있습니다.

<!-- 주석 내용 -->
<p>웹페이지에 표시하는 내용</p>
<!--
주석으로 처리한 내용은
웹페이지에서 보이지 않습니다.
-->

주석은 로 끝냅니다.
주석은 웹페이지 방문자에게는 보이지 않으므로 소스코드를 직접 볼 개발자가 참고할 내용들을 작성합니다.
가령, "여기서부터 댓글 요소", "여기까지 댓글 요소"와 같이 구역을 나누는 내용이나 "헤더 이미지는 사용자가 직접 지정"과 같은 간단한 설명, 기능, 위치, 지시사항, 추후개발사항등을 메모하는 용도로 사용할 수 있습니다.

저작자표시 비영리 변경금지

'프로그래밍 > 웹 프로그래밍' 카테고리의 다른 글

jQuery: 티스토리 마크다운을 지원하는 목차 생성 스크립트 (0)	2019.04.08
티스토리 스킨 만들기 (4) - CSS 개요 (0)	2018.11.29
티스토리 스킨 만들기 (3) - 기본 홈, 포스트, 사이드바 (0)	2018.11.28
티스토리 스킨 만들기 (1) - 티스토리 스킨의 특징 (0)	2018.11.27
showdown.js를 사용하여 티스토리에 마크다운 적용하기 (0)	2018.11.15

태그:

soma0sd