이제부터 본격적으로 HTML에 대해 배워 보도록 하겠습니다.
HTML은 앞에서 설명한 것 처럼 컨텐츠의 구조를 정의하는 마크업 언어입니다. HTML은 컨텐츠(내용)를 태그(마크)로 씌워서 구조를 구분하여 정의합니다.
앞에 예시를 갖고 와서 이를 HTML로 바꿔서 설명해 드리겠습니다. 제목:
이라는 마크를 통해 구조를 구분하여 정의하였습니다. 이러한 마크를 HTML에서는 <제목></제목>
의 형태로 씁니다.
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/6761687a-55d5-477e-8da1-e58ee5ff7629/untitled
HTML에서 이런 <제목>웹 프로그래밍 강좌</제목>
과 같은 한 덩어리를 **요소(Element)**라고 합니다. 요소의 구성에 대해 조금 더 자세히 살펴 보겠습니다.
HTML에서 요소는 **시작 태그(Start tag)**와 종료 태그(End tag) 그리고 **내용(Contents)**로 구성되어 있습니다.
시작 태그는 <>
로 종료 태그는 </>
로 감싸져 있습니다. 태그는 대문자도 가능하지만 소문자를 주로 권장합니다.
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/0ba23d56-0c66-4edb-8841-c9368317819d/untitled
태그는 마크입니다. 즉 표시를 통해 내용을 구분하여 구조화하고 있습니다. 앞의 예시를 조금 더 확대해 보면 다음과 같습니다. 여기서 두 컨텐츠 <제목>
과 <내용>
이라는 태그로 구분하고 있습니다.
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/19811fc0-de81-45ab-b4e5-2bb16446ccf3/untitled
앞의 예시를 HTML 코드로 표현하자면 다음과 같습니다. 여기서 <h1>
은 제목 태그(Heading tag), <p>
는 **단락 태그(Paragraph tag)**입니다. 각 태그들에 대해서는 차차 알려 드리겠습니다.
<제목>웹 프로그래밍 강좌</제목>
<내용>웹 프로그래밍, HTML/CSS 강의를 통해 친절히 ...</내용>
<h1>웹 프로그래밍 강좌</h1>
<p>웹 프로그래밍, HTML/CSS 강의를 통해 친절히 ...</p>
앞에서 배운 HTML의 요소들이 모이고 모여 HTML 문서를 이루게 됩니다.
HTML 문서는 요소만 갖는다고 완성되는 것이 아니라 정해진 양식을 갖고 있어야 웹 브라우저에서 제대로 인식합니다.
**웹 브라우저(Web browser)**는 인터넷 익스플로러, 크롬, 파이어폭스 등을 일컫는 말입니다.
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/c5040190-6642-42b9-bbb4-5ed6095ae40c/untitled
HTML은 다음과 같은 문서 구조를 가집니다. 아래와 같이 작성하고 직접 웹 브라우저에서 실행시켜 봅시다.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="utf-8">
<title>수노를 소개합니다.</title>
</head>
<body>
<h1>안녕하세요 저는 수노입니다!</h1>
<p>저는 현재 웹 프로그래밍을 공부하는 학생입니다.</p>
</body>
</html>
작성한 내용과는 다르게 아주 간단하게 제목과 내용만 나옵니다. 차근차근 HTML의 문서 구조에 대해 배워 보고 왜 이러한 결과가 나왔는지 설명하겠습니다.
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/78ea2d94-7e37-4f35-b90b-c971ce7be4b6/untitled
먼저 <!DOCTYPE html>
은 HTML이 아닙니다. 이는 **문서 형식(Document type)**을 정의할 때 쓰입니다. HTML 문서에서 가장 처음 와야 하는 내용 입니다. 그냥 이 문서는 HTML5로 작성된거야!
라고 브라우저에게 알려주는 역할을 한다고 이해하시면 편합니다.
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/34ed29c1-5b5e-4cce-9c5f-f9b04e4df4d4/untitled
<html lang="kr">
부터가 본격적으로 HTML 문서 입니다.
<html>
태그는 전체 HTML 문서를 감싸는 태그입니다. HTML 문서 내에서 한번만 쓰여야 하며 <html>
태그 밖에 다른 태그가 존재해서는 안됩니다.
lang="kr"
는 이 페이지의 주 언어가 한국어라는 것을 정해 두기 위해 적어야 합니다.lang="en"
으로 되어 있을 경우 한국어를 무시하고 영어만 읽는 경우가 더러 있습니다. 그렇기 때문에 반드시 kr
로 설정을 해주어야 합니다. 이는 접근성과 관련된 문제이기 때문에 자세한 내용은 따로 다루도록 하겠습니다.<html>
태그 안에는 크게 <head>
태그와 <body>
태그가 존재합니다. 각각에 들어가는 태그 들에 대해 차례대로 간단히 다루려고 합니다. 우선은 예제에 있는 태그들 부터 간단히 배워 봅시다.
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/8bbeda7b-4f67-4c28-98bc-024a405163b8/untitled
먼저 <head>
태그입니다. <head>
태그는 HTML 문서에 대한 정보를 담고 있습니다. 따라서 우리가 보는 웹 사이트에서는 이러한 정보들을 볼 수 없습니다. 문서 내에서 단 하나 존재해야 합니다. 위치는 <html>
바로 아래에 위치합니다.
<meta>
: 문서에 관련된 정보를 담는 태그입니다. 브라우저만 읽을 수 있으며 다양한 정보들을 담고 있습니다. 현재 예시에서는 <meta charset="utf-8">
이라고 되어 있는데 이는 HTML에서 쓰이는 한글이 깨어지지 않게 도와줍니다.
<title>
: 웹 페이지의 제목을 담는 태그입니다. 브라우저에서 탭의 제목이나 즐겨찾기 했을 때 이름으로 볼 수 있습니다.
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/3c8dbb24-abdd-4d05-8997-3c2b5aceec4a/untitled
그 외 : 그 외에 다른 태그들이 더 존재하지만 이에 대해서는 차근차근 알려드리도록 하겠습니다. 너무 조급해 하지 마세요.
다음은 <body>
태그입니다. <body>
태그는 HTML 문서에서 실질적으로 보여지는 부분입니다. 마찬가지로 문서 내에서 단 하나 존재해야 합니다. 위치는 <html>
내부 <head>
바로 아래에 위치합니다.
<h1>
: 제목을 표시하는 태그입니다. 중요도에 따라 1~6까지 있습니다(1이 가장 중요). 흔히 글을 쓸 때 대제목, 글 제목에 해당하는 부분입니다.<p>
: 단락을 표시하는 태그입니다. 컨텐츠 중 글, 본문에 해당하는 내용이 들어갑니다.<body>
태그 내에는 정말 많은 태그들이 존재합니다. 앞으로 우리는 HTML을 공부하는 동안 중요한 태그, 많이 쓰는 태그 들을 중점적으로 배울 예정입니다.<head>
태그와 <body>
태그는 <html>
태그 내에서 단 한번만 쓰인다고 했습니다. 하지만 <head>
태그와 <body>
태그 내부에 존재하는 태그들은 모두 여러번 사용할 수 있습니다. 이 점 유의하시기 바랍니다.