HTML5 기본구조와 작성법

티스토리 뷰

@Develop/web

조준점 2018. 6. 19. 14:24

안녕하세요 AimHo 입니다.

블로그를 시작한지 이제 10일째인데, 너무 글을 주제없이 작성하는 것 같아서 조금 걱정되기도 하네요

무튼 이번에는 HTML5의 기본구조와 작성법에 대한 글을 작성하려고 합니다.

기본구조와 태그의 속성만 이해해도 간단한 스킨편집은 쉽게 할 수 있을거라고 생각합니다.

HTML5 기본용어

우선 HTML5의 기본용어에 대해 정리해보겠습니다.

1. 태그와 요소

요소는 제목, 본문, 이미지 등 HTML 페이지에 존재하는 것을 말하며 태그는 요소를 만들 때 사용하는 기호 입니다.

위 이미지 <h1>처럼 시작과 끝 태그를 별도로 입력하는 요소도 있지만, <br>처럼 단독으로 사용하는 태그도 있습니다.

태그에 대한 자세한 내용은 추후에 다루도록 하겠습니다.

2. 속성

태그에 추가 정보를 부여할 때는 속성을 사용합니다.

아래 이미지는 예시 코드로 <h1>태그에 글자색상 흰색 속성을 추가했습니다.

3. 주석

프로그램 실행에 영향을 미치지 않고, 설명을 위한 목적으로 사용하는 코드를 주석이라고 합니다.

내가 작성해놓은 코드라도 코드의 양이 많아지거나 작성해놓은 기간이 오래되면 어떤 목적으로 작성한 코드인지 잊어버릴 수 있습니다. 그래서 주석으로 코드에 대한 설명을 적는겁니다. 특히, 팀 프로젝트에서 주석은 필수라고 할 수 있죠

항상 주석을 적어주는 습관을 들이시기 바랍니다.

※ 속성과 태그는 마음대로 입력하는 것이 아니라 W3C에서 정의한 표준에 맞춰 사용해야합니다. (추후 설명)

HTML5 페이지 기본구조

이번에는 HTML5의 페이지 기본구조에 대해 알아보도록 하겠습니다. 기본구조는 아래 이미지와 같습니다.

1. !DOCTYPE html 태그

W3C의 HTML5 명세에 따르면 모든 HTML5 문서는 반드시 <!DOCTYPE html> 태그를 문서의 첫 행에 표기해야합니다.

2. html 태그

html 태그는 모든 HTML 페이지의 루트(기본)요소로, 모든 HTML 태그는 html 태그의 내부에 작성해야합니다.

html 태그에는 언어속성(lang)을 입력할 수도 있습니다.

언어속성은 웹 브라우저의 동작에는 어떠한 영향도 끼치지 않습니다. 대신, 구글과 같은 검색엔진이 웹 페이지를 탐색할 때에 해당 웹 페이지가 어떠한 언어로 만들어져 있는지 쉽게 인식하도록 하기 위해 만들었습니다.

3. head, body 태그

head 태그는 body 태그에서 필요한 CSS와 JSP를 제공하는데 사용됩니다.

그리고 head 태그 내부에는 아래 표에 해당하는 태그만 입력할 수 있습니다. (나머지는 브라우저가 자동으로 body로 옮김)