웹 개발을 위한 HTML 가이드 6편 - HTML의 기본적인 구조
분류포스트
작성일2021-06-05 01:53
수정일2021-11-14 00:35
웹 개발을 위한 HTML 가이드는 HTML을 모르는 분들이 HTML의 기능들에 대해서 배우고 웹 페이지의 뼈대를 구성할 수 있게 도와주는 시리즈 입니다. 순수하게 강의 목적만 있는 것은 아니며 제가 다시 처음부터 공부한다는 생각으로 조사하고 복습하는 느낌으로 작성하고 있습니다. 가이드 전체의 흐름은 가이드 모음 글을 참고하시면 됩니다.
이전 글들을 통해서 HTML의 기본적인 사전 지식에 대해 알아봤습니다. 우리는 HTML이 무엇인가에 대해서 알았고 어떻게 생긴 것인지 알았고 문법을 알아봤습니다. 무엇을 할 수 있는지 알았으며 태그의 특성에 대해서도 알아봤습니다. 개발환경도 갖췄으니 이제는 정말로 본격적인 코딩을 시작할 순간입니다.
이번 글에서 아주 간단한 페이지를 하나 만들어보는 것으로 우리는 웹을 이루는 가장 기본적인 구조에 대해서 알아보는 용기 있는 발걸음을 해보려고 합니다. 혹 아직 기초적인 지식이 없다면 이 가이드의 첫 글부터 보고 오시면 좋겠습니다. 그럼 웹 개발을 위한 HTML 가이드 6편 시작합니다.
기본적인 구조
<!DOCTYPE html>
<!-- 이 문서가 HTML5 문서임을 알리는 코드입니다. -->
<html lang="ko">
<!-- 모든 HTML 문서는 html 태그로 감싸야 합니다. -->
<head>
<!-- head 태그 안에는 페이지들의 메타데이터들이 들어갑니다. -->
<!-- 메타 데이터에 대해서는 나중에 알게 됩니다. -->
<meta charset="UTF-8" />
<!-- 이 태그는 다른 메타 데이터들과 다르게 언급하고 넘어가야 합니다. -->
<!-- 이 태그를 빼먹으면 경우에 따라서 한글이 깨질 수가 있습니다. UTF-8은 거의 모든 유니코드를 표현할 수 있는 체계입니다. -->
<title>Document</title>
<!-- title 태그는 말 그대로 페이지의 제목을 나타냅니다. -->
</head>
<body>
<!-- 여기에 가시적인 컨텐츠 내용이 들어갑니다. -->
</body>
</html>
웹 페이지들은 HTML의 태그로 이루어져 있습니다. 그리고 하나의 페이지에는 아주 기본적인 태그들이 반드시 들어갑니다. 위의 코드에 없는 태그들은 반드시 필요한 태그는 아니기 때문에 없어도 됩니다. 어디까지나 필수 조건에 대한 것입니다. 모든 페이지를 이렇게만 만들면 아무것도 없겠죠. 따라서 어차피 다양한 태그를 사용하게 됩니다.
이번 글에서는 기본적인 구조를 알아보는 것이니 다른 소리는 잘라내고, 다시 본론으로 돌아와서 위의 태그들에 주석으로 작성해둔 내용을 보면 대강 어떤 기능을 하는지 알 수 있습니다. 이렇게만 보면 이해하기가 어렵죠. 그러니 차근 차근 하나 하나 살펴보도록 합시다.
메모장을 켜고 순서대로 작성해보도록 합시다.
DOCTYPE
<!DOCTYPE html>
<!-- 이 문서가 HTML5 문서임을 알리는 코드입니다. -->
이 코드는 이 문서가 HTML 5로 만들어졌다는 것을 선언하는 코드입니다. 독타입이라고 부릅니다. 즉, 이 코드가 있으면 브라우저는 이 문서가 HTML 문서이고 어떤 버전인지를 알 수 있습니다. 우리가 배우려는 것은 HTML 중에서도 5버전에 해당합니다. 5버전의 선언문은 위와 같습니다.
가장 중요한 것은 이 코드는 항상 문서의 가장 첫줄에 있어야한다는 것입니다. 절대적으로 지켜져야 합니다.
html 태그
<html lang="ko">
<!-- 모든 HTML 문서는 html 태그로 감싸야 합니다. -->
</html>
html태그는 최상위의 부모 태그가 됩니다. 모든 태그들은 이 태그로 감싸야 합니다. html태그에는 lang이라는 속성이 있고, 속성 값으로는 국가코드를 적어주면 되겠습니다. ko는 한국을 의미하죠. 실제로 해외 사이트에 들어가보면 저 부분에 en이나 ja 같은 코드들이 들어가 있는 것을 볼 수 있을 겁니다.
크롬이나 웨일 브라우저 같은 최신식 브라우저들을 통해서 웹 페이지의 구성요소를 검사할 수 있는 기능을 사용하면 어떤 웹 페이지가 어떤 코드로 이루어져 있는지 알 수 있습니다. 크롬이나 웨일 브라우저를 기준으로 F12를 누르면 개발자 콘솔이 뜹니다.
이 국가 코드들은 ISO 639-1에 해당하는 약속된 문자열입니다. 우리는 한국인이고 한국어로 된 웹 페이지들을 만들 가능성이 높기 때문에 그냥 ko를 적어주면 되겠습니다.
HTML 문서에 반드시 필요한 네가지의 태그 중 하나로 이 문서가 HTML 문서라는 것을 알려주는 태그가 바로 html태그 입니다.
head 태그
<head>
<!-- head 태그 안에는 페이지들의 메타데이터들이 들어갑니다. -->
<!-- 메타 데이터에 대해서는 나중에 알게 됩니다. -->
</head>
head태그에는 웹 페이지의 메타데이터들이 들어갑니다. 메타데이터라는 것은 웹 페이지의 정보들을 말합니다. 눈에는 보이지 않지만 브라우저나 검색 엔진들은 이 메타데이터를 읽어서 적용합니다.
쉽게 말하면 웹 페이지의 컨텐츠에 직접적인 영향을 주지 않는 것들이 들어가는 태그라고 이해하면 되겠습니다.
title 태그
<title>Document</title>
<!-- title 태그는 말 그대로 페이지의 제목을 나타냅니다. -->
페이지의 제목을 설정할 때에 사용하는 태그입니다. head태그의 안에 들어가고 title태그를 작성하지 않으면 제목이 없는 페이지가 되어버립니다. 검색이 잘 되지 않을 뿐더러 구분도 어렵겠죠. 때문에 중요한 태그 중의 하나라고 할 수 있습니다.
meta 태그(charset="UTF-8")
<meta charset="UTF-8" />
<!-- 이 태그는 다른 메타 데이터들과 다르게 언급하고 넘어가야 합니다. -->
<!-- 이 태그를 빼먹으면 경우에 따라서 한글이 깨질 수가 있습니다. UTF-8은 거의 모든 유니코드를 표현할 수 있는 체계입니다. -->
head태그의 안에는 다양한 메타 데이터들이 들어갑니다. title태그도 그러한 메타 데이터 중의 하나입니다. meta태그는 종류가 많지만 그 중에서도 가장 중요하다고 할 수 있는 녀석에 대해 먼저 소개해야겠습니다. 이 녀석은 페이지의 문자와 관련이 되어있습니다. charset="UTF-8"라는 속성을 가지게 되면 이 태그가 있는 페이지는 거의 모든 유니코드를 표현할 수 있게 됩니다.
만일 이 태그가 없다면 경우에 따라서 한글이 깨질 수가 있습니다. 그래서 넣어주는 것이 좋습니다. 다음 메타 태그들은 나중에 알아보도록 합시다.
body 태그
<body>
<!-- 여기에 가시적인 컨텐츠 내용이 들어갑니다. -->
</body>
실질적인 컨텐츠가 들어가는 부분입니다. body태그의 안에 우리가 작성할 거의 모든 태그들이 들어갑니다. 화면에 보여야 하는 정보들은 전부 이 안에 들어간다고 보면 됩니다. 앞으로 배울 태그들은 거의 다 이 안에 들어갈겁니다.
파일 저장하기
여기까지가 기본적인 구조에 해당되는 부분입니다. 여기까지 작성했으면 저장을 합시다. 다른 이름으로 저장을 이용해서 파일 형식은 모든 파일로 설정하고, 파일 이름은 index.html 이라고 하겠습니다. 사실 아무거나 해도 됩니다. 인코딩은 UTF-8로 설정해두고 저장을 합시다.
위의 설명과 이미지를 참고해서 저장을 하시면 되겠습니다. 저장을 하고나면, 실행을 해보세요!
축하합니다! 이제 여러분은 웹 페이지를 만들 수 있습니다! 이것들이 웹 페이지의 가장 기본적인 정수입니다. 이 세상의 모든 웹 사이트들도 전부 이렇게 HTML로 구성되어있습니다.
웹 표준이나 SEO를 충족하기 위해선 더 많은 내용들이 들어가지만 지금은 몰라도 됩니다. 추후에 알게 될 내용들이기 때문이죠. 그런데도 지금 언급하는 이유는 이름이라도 언급해두면 그런게 있다 정도는 알 수 있기 때문입니다.
자, 그렇다면 이제 다음 글로 넘어가도록 합시다. 물론, 이 부분이 잘 이해되지 않는다면 여러 번 읽어보고 이해하고 넘어가는 게 좋습니다. 이번 글에서 배운 내용은 앞으로 다시는 언급되지 않고 기본적으로 알고 있는 것으로 간주합니다. 웹 페이지를 만든다고 하면 이 기본적인 구조를 적용한 상태로 시작하는 겁니다.
앞으로 배우는 거의 모든 태그들은 body태그의 안에 들어간다는 점 다시 한 번 기억하시면 되겠습니다. 그리고 오늘 만든 index.html파일은 우리의 프로젝트 폴더에 그대로 남겨두시면 됩니다. 앞으로 이 파일을 메인 프로젝트의 대문처럼 사용할 겁니다.
그럼 이번 글은 여기서 마치도록 하겠습니다. 다음 글에서 봅시다.
글을 읽고 혹은 읽으면서 하고 싶은 말이 있다면 아래의 덧글창에 적어주시면 됩니다. 최대한 빠르게 확인하고 답변을 드리겠습니다. 이 글을 보신 모든 분들의 하루가 좋은 하루이길 바랍니다.