2장 HTML5 기본 구조와 작성법
학습 목표
- 태그(Tag), 요소(Element), 소성(Attribute)의 의미를 파악합니다.
- HTML 페이지의 기본 작성방법을 파악합니다.
- 검사로 디버그하는 방법을 익힙니다.
Preview
이 장에서는 HTML 페이지의 기본 구조와 더불어 웹 개발에서 전반적으로 사용하는 기본 용어를 살펴봅니다. 용어를 기억하지 못하면 이후 내용을 진행하기 어려우므로 반드시 확실하게 정리하고 넘어갑시다.
1. HTML5 기본 용어 정리
HTML5를 공부하려면 기본적으로 태그, 요소, 속성 용어를 알아야 합니다.
웹 페이지를작성하기 전에 기본 용어를 먼저 정리하겠습니다.
1.1 태그와요소
요소는 제목, 본문, 이미지 등 HTML 페이지에 위치하고, 태그는 이러한 요소를 만들 때 사용하는 기호입니다.
TIP : 요소를 객체라고도 합니다. 여기서 객체는 존재하는 무언가로, 자바스크립트에서 사용하는 객체와는 다른 의미입니다.
<h1>Hello HTMl5</h1>
시작태그 종료태그
HTML5에는 시작 ㅌ채그와 끝 태그를 따로 입력하는 요소도 있지만 시작 태그와 끝태그를 함께 입력하는 요소도 있습니다. 이렇게 단독으로 사용하는 태그는 HTML5표기법이나 XHTML5 표기법을 사용해 입력합니다.
어떠한 표기방법을 사용해도 상관없지만 대부분의 개발자는 XHTML5 방법을 선호합니다. XHTML5 방법을 사용해 코드를 작성합니다.
일부 태그는 태그 내부에 다른 태그를 넣을 수 있습니다. article 태그 내부에 h1 태그와 p태그를 삽입한 형태입니다. '일부 태그는 태그 내부에 다른 태그를 넣을 수 있다'는 말은 '태그 내부에 다른 태그를 넣을 수 없는 태그도 있다'는 말과 같으므로 주의하기 바랍니다.
<article>
<h1>Article Header</h1>
<p>Lorem ipsum dolor sit amet.</p>
</article>
사용할 수 있는 태그는 모두 W3C에서 미리 정해 놓았습니다. 어떠한 태그가 있는지 3~4장에서 살펴보겠습니다.
TIP : 대부분 요소와 태그를 구분하지 않습니다. 요소를 생성하는 것과 태그를 생성하는 것은 같은 의미로 봐도 됩니다.
1.2 속성
태그에 추가 정보를 부여할 때는 속성을 사용합니다. 속성은 다음과 같은 형태로 사용합니다. 다음은 간단하게 h1 태그에 title 속성을 부여하는 코드 입니다.
<h1 title="header">Hello HTML5</h1>
title : 속성 이름
"" : 속성 블록
header : 속성 값
Hello HTML5 내부 문자
내부 글자가 없는 태그도 다음 처럼 속성을 사용합니다. img 태그는 이미지를 만들 때 사용하며 src 속성에 이미지 출력과 관련된 정보를 입력합니다.
<img src="image.png" />
src : 속성 이름
"" : 속성 블록
image.png : 속성 값
속성도 마음대로 입력하는 것이 아니라 W3C에서 정의한 표준에 맞춰 사용합니다. 각 태그의 속성도 3~4장에서 알아보겠습니다.
1.3 주석
프로그램의 규모가 커지면 직접 작성한 코드도 어떠한 목적으로 작성했는지 알아보기 힘듭니다. 따라서 어떠한 기능을 수행하는 코드인지 설명을 기록할 수 있는 방법이 필요합니다. 프로그래밍 언어에서는 프로그램의 실행에 영향을 미치지 않고 설명을 목적으로 사용하는 코드를 주석이라고 합니다. HTML 페이지는 다음 방법으로 주석을 처리합니다.
<!-- 주석 -->
다음 예제처럼 쉽게 이해할 수 있는 코드에는 주석을 사용할 필요가 없지만 보통 주석을 얼마나 잘 활용하는지로 프로그래밍 실력을 평가 합니다.
<!DOCTYPE html>
<html>
<head>
<!-- title 태그 -->
<title>TITLE</title>
</head>
<body>
<!-- h1 태그 -->
<h1>Hello HTML5</h1>
</body>
</html>
2. HTML5 페이지 기본 구조
앞에서 HTMl5 기본 용어를 알아보았다면 이번에는 HTML 페이지의 기본 구조를 살펴봅니다. 아직 코드를 직접 입력하지 않아서 어려운 내용도 있겠지만, 다음 예제를 직접 실습해보면 별로 어렵지 않으므로 미리 겁먹지 마세요.
모든 HTMl5 페이지는 크게 다음 구조로 작성합니다.
①<!DOCTYPE html>
③<html>
<head>
④<title>HTML5 Basic Page</title>
</head>
②<body>
</body>
</html>
① !DOCTYPE html 태그
웹 브라우저에 HTML5 문서라는 것을 알려 줍니다. W3C의 HTML5 명세에 따르면 모든 HTML5 문서는 반드시 <!DOCTYPE html> 태그를 문서의 첫 행에 표기해야 합니다.
② html 태그
모든 HTML 페이지의 루트(기본) 요소로, 모든 HTML 태그는 html 태그의 내ㅑ부에 작성합니다. html 태그에는 lang 속성을 입력할 수 있습니다.
lang 속성은 우베 브라우저의 동작에는 어떠한 영향도 미치지 않습니다. 대신 구글과 같은 검색 엔진이 웹 페이지를 탐색할 때 해당 웹페이지를 어떠한 언어로 작성했는지 쉽게 알 수 있도록 도와줍니다. 전 세계적인 데이터 네트워크를 구축하려면 lang 속성을 입력하는 것이 좋습니다. 하지만 이 내용에서는 간단한 예제를 만드므로 lang 속성은 사용하지 않습니다.
<html lang="ko">
lang 속성에는 다음 값을 입력할 수 있습니다.
언어 속성 값
한국어 ko
일본어 ja
중국어 zh
영어 en
러시아어 ru
독일어 de
③ head와 body 태그
body 태그는 사용자에게 실제로 보이는 부분입니다. head 태그는 body 태그에서 필요한 스타일 시트와 자바스크립트를 제공하는 데 사용합니다. head 태그 내부에는 다음과 같이 해당하는 태그만 입력할 수 있습니다. 다른 태그를 넣으면 웹 브라우저가 자동으로 해당 태그를 body 태그로 옮깁니다.
태그 설명
meta 웹 페이지에 추가 정보 전달
title 웹 페이지에 제목 지정
script 웹 페이지에 스크립트 추가
link 웹 페이지에 다른 파일 추가
style 웹 페이지에 스타일시트 추가
base 웹 페이지의 기본 경로 지정
body 태그에 삽입하는 태그는 매우 많으므로 3장에서 차근차근 살펴보겠습니다. 또 head 태그 내부에 사용하는 태그는 조금 어렵기 때문에 이 내용 전체에서 다룹니다.
④ title 태그
웹 브라우저에 표시하는 제목을 지정하는 태그입니다. title 태그에 글자를 입력하면 웹브라우저의 제목에 표시 됩니다.
title 태그도 html 태그의 lang 속성처럼 웹 페이지 정보를 검색 엔진에 제공하므로 입력하면 좋습니다.
NOTE_ HTML5 이하에서 사용한 문서 형식
HTML4에서는 다음과 같은 DOCTYPE을 사용했습니다. 이전 표준보다 DOCTYPE 부분이 많이 간단해 졌음을 알 수 있습니다.
<!-- HTML4 Frameset -->
<!DOCTYPE HTML PUBLIC "-//w3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<!-- HTML4 Strict -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!-- HTML4 Traditional -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
'프로그래밍 > HTML' 카테고리의 다른 글
| 2장 자바스크립트의 종류와 기본 작성법 (0) | 2017.08.19 |
|---|---|
| 2장 CSS3의 종류와 기본 작성법 (0) | 2017.08.19 |
| 1장 웹 개요와 실습 환경 구축 (0) | 2017.07.28 |
| Part 1 웹 프로그래밍 첫 걸음 Preview (0) | 2017.07.28 |
| 빠르고 가벼운 웹 세상의 시작, HTML5 (0) | 2017.07.28 |
