HTML (HyperText Markup Language)
HTML은 웹페이지를 제작하기 위한 가장 기초적인 마크업 언어입니다. HTML은 <꺽쇠>이루어진 태그라는 것으로 이루어져 있습니다. 이 태그들이 모여 우리 눈에 보이는 페이지를 구성하게 됩니다. 그래서 HTML문서를 들여다보면 웹페이지의 구조를 알 수 있습니다.
태그는 <여는 태그>와 </닫는 태그>를 통해 요소(element)를 나타냅니다. 여는 태그부터 닫는 태그 사이에만 태그에 맞는 효과가 적용됩니다. 닫는 태그를 반드시 적용해주어야 원하는 효과를 나타낼 수 있습니다. 프로그래밍의 세미콜론;처럼 처음 접하시는 분들이 닫는 태그를 적는 것을 종종 잊기에 주의해야합니다.
여는 태그와 닫는 태그 사이에는 콘텐츠가 오는데 이곳에는 텍스트, 다른 태그 등 다양한 내용이 올 수 있고, 여는 태그, 닫는 태그, 콘텐츠들을 합쳐서 요소(element)라고 부릅니다. 다음은 HTML의 코드입니다.
<여는_태그>콘텐츠</닫는_태그>
<p>Hello HTML!</p>그리고 태그에는 속성(attribute)이 들어갈 수 있는데, 보통 속성=값의 형태를 취하며 태그마다 사용가능한 속성을 다르게 가지고 있습니다. 하나의 태그에는 여러개의 속성이 올 수 있습니다.
<태그 속성=값>
<태그 속성=값 속성=값>HTML 문서 만들어보기
메모장을 열고 다음과 같은 코드를 복사 붙여넣기 해줍니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>파일명.html이라고 저장하면 우리는 첫 html 문서를 만들게 되었습니다.
문서 구조 살펴보기
문서의 각 부분에 대해서 좀 더 자세히 살펴보겠습니다.
<!DOCTYPE html> <!DOCTYPE>: 문서 유형을 명시하는 태그입니다. 우리는 html 문서라는 것을 명시했고, 웹 브라우저는 이 태그를 확인하고 html 문서를 처리하게 됩니다.
<html lang="ko"><html>: 이 태그는 html 문서의 시작과 끝을 알리는 태그입니다. 태그 안에 lang="ko"라는 것이 보이는데, 이것은 속성입니다.
지금 쓰인 속성의 의미는 사용자 언어를 지정한 것인데, 화면 낭독기를 사용했을 때 lang에 지정된 언어(ko는 한국어, en은 영어)에 적합한 억양과 음성을 지원해줍니다. 이외에도 검색 엔진에서 검색 언어 범위를 지정했을 때도 영향을 받게 되는 속성입니다.
<head>
</head><head>: head는 문서에 대한 정보나 스타일시트, 스크립트 문서가 포함됩니다. 이 곳에 포함된 정보들은 웹페이지 상에서 보이지 않습니다.
<meta><meta>: meta 태그는 문서에 대한 정보들을 지정하고, 브라우저에 알리는 역할을 합니다. 이 정보들은 검색 엔진 등에서 사용됩니다.
<title></title><title>: 브라우저 상단의 제목 표시줄에 표시될 제목은 적는 태그입니다.
<body>
</body><body>: body 태그의 내부에 포함되는 요소들은 웹 브라우저 상에서 직접 나타나게 됩니다. 앞으로 우리가 공부해나가면서 작성할 태그들은 태부분 이곳에 포함이 됩니다.
