HTML은 웹 사이트의 기능, 콘텐츠가 여러분이 보시는 화면에서 나타나게 해 주는 컴퓨터 언어입니다.
HTML은 다양한 브라우저에서 웹 사이트가 일관적으로 보여질 수 있도록 만들어졌습니다.
지금 읽고 계신 이 글도 HTML을 통해 여러분들에게 보여지고 있는 것입니다.
윈도우에서는 ctrl + shift + i 버튼을 동시에 눌러, 맥(애플) 에서는 option + command + U 버튼으로 html을 확인하실 수 있습니다.
console 창이 먼저 뜨게 될 텐데, 당황하지 마시고 바로 왼쪽의 Elements를 클릭해 주세요.
그렇게 html를 확인하게 되시면 굉장히 많은 글자들이
<꺾쇠괄호>
안에 있는 것을 확인하실 수 있습니다.
그것들이 바로 태그이며, html은 그러한 태그들로 구성이 됩니다.
태그들은 html 안에서, html 이 브라우저에 어떻게 보여지고 기능할 지를 정의하게 됩니다.
어떤 태그가 어떤 기능을 하게 되는지에 대해서 오늘은 중요한 것만 간략하게 짚고 넘어가겠습니다.
태그들은
<꺾쇠괄호로 열고>
</슬러시로 닫습니다.>
한 번 연 태그는 반드시 </닫아야> 정상적으로 작동합니다.
HTML이 정상적으로 기능하기 위해서는 반드시 지켜야 하는 기본적인 구조가 있는데요,
그러한 구조또한 <태그>들을 이용해서 작성하게 됩니다.
기본적인 구조는 다음과 같습니다.
<!DOCTYPE html> html 지정
<html lang="ko"> 언어 설정, 가장 큰 범위로 html문서가 여기서 시작됩니다
<head> 문서의 머리 부분에 해당, 실제 문서에서는 보여지지 않는 영역으로
여기에 css, 자바 스크립트나 외부 페이지를 연결해 줌
<meta charset="utf-8"> 어떤 언어까지 지원하는 지 설정할 수 있음
<title></title> 브라우저에 이 문서의 제목을 보여주는 역할
</head>
<body>
실질적인 컨텐츠와 기능들은 전부 바디 안에서 표기됨
</body>
</html>제일 먼저 해야 할 것은 !DOCTYPE html 을 이용해서 문서가 html이라는 것을 작성해 주는 일입니다.
원래는 다른 태그들과 마찬가지로 <> 안에 넣어야 합니다. 저는 지금 블로그에 버그가 있어서 못 넣었습니다.
그 다음에는 html lang="00" 태그를 사용해 00에 웹 사이트에서 사용할 언어를 지정해 줍니다. 태그 안의 lang은 언어를 의미합니다. /html로 닫아주시면 됩니다.
00부분에는 쓰고싶은 언어의 앞글자 두 개를 따서 써 줍시다.
한국어면 "ko" 영어면 "en" 등등 주로 사용할 언어를 지정해 주시면 되겠습니다.
간혹 중국어의 경우처럼 "zh" 같은 형태로 지정해 주어야 하는 경우도 있으니 사용하시기 전에 한 번 검색해 보시는 걸 추천드립니다.
이제 head 부분을 지정해 주고, 그 안에 meta charset으로 어떤 언어까지 지원하고 지원하지 않을 것인지를 정하고, title로 브라우저 상단에 문서의 제목을 지정해 줍니다.
meta charset과 title만 넣어 주긴 했지만,
head 안에는 css나 자바스크립트를 연결해 줄 수도 있습니다.
meta charset은 사이트 안에서 통용되는 언어의 범위를 지정해줍니다.
charset 안의 uft-8은 지원되는 언어의 범위로서, 가장 많은 언어를 지원합니다.
그 밖에 euc-kr처럼 다른 언어 범위를 지정할 수도 있지만, 그럴 경우 지원되지 않는 외국어 텍스트는 화면 상에 깨져서 나오게 됩니다.
title은 말 그대로 제목을 지정해 주는 태그입니다.
브라우저 상단 바에 보이는 설명같은 게 이 title로 지정되서 나온거구나~ 하고 이해하시면 되겠습니다.
이제 body 태그로 웹 사이트에서 사용자에 보여질 부분들을 지정하게 됩니다.
메인 컨텐츠들과 기능들은 모두 body 태그 안에서 사용자에게 전달되게 됩니다.
설명은 가장 짧지만 html안에서 가장 중요한 부분입니다.
이 단계까지 지나고 나면
/html로 html문서가 끝나게 됨을 알 수 있습니다.
이렇게 HTML이 어떤 언어이고 어떤 구조를 가지고 있는지 알아봤습니다.
한 가지 주의하실 점은 html을 작성하실 때
<html>
<head>같이 위부터 아래로 작성하시지 마시고
<html>
</html><html>
<head></head>
</html>처럼 더 큰 범위에서 작은 범위로 작성하시길 바랍니다.
또 다른 글로 찾아뵙겠습니다. 읽어주셔서 감사합니다~
