HTML 쉽게 배우기 | HTML 문서와 구조
저번 편에서 HTML에 대해 간단해 알아봤으니까 이젠 HTML을 직접 작성해 봐야겠죠.
먼저 바탕화면에 폴더를 하나 만들어 주세요. 폴더 이름은 맘대로.
이 폴더를 저번에 설치한 VSCode로 열어주세요.
'새 파일' 만들기를 눌러서 index.html을 만들어 주세요
파일에 아무거나 쓰고 폴더에서 index.html을 열면 브라우저에 서 볼 수 있습니다.
이렇게 해도 브라우저에 보이지만, 이건 HTML이라고 할 수 없습니다.
저번에 HTML 문서는 태그와 요소들로 만들어진다고 했었죠.
그럼 HTML문서는 어떻게 작성해야 하나?
HTML 문서를 만들기 위해선 HTML 문서의 구조를 먼저 갖춰야 합니다.
HTML 문서의 구조를 보기 전에 "태그", "요소" 이 두 단 어가 많이 나왔죠.
태그는 뭐고 요소는 뭔지 먼저 알아볼게요.
태그: '<'와 '>' 사이에 태그 이름을 넣은걸 태그라고 합니다. 태그에는 열림 태그와 닫힘 태그가 있습니다.
요소: 요소는 열림 태그와 닫힘 태그 사이에 내용이 들어가 있는걸 요소라고 합니다. 요소 중에는 닫힘 태그가 없는 요소도 있습니다.
이제 HTML 문서의 구조를 작성해 볼게요.
*HTML구조는 브라우저에 표시되지 않습니다.*
먼저 <!Doctype html>을 써주세요
이건 태그도 요소도 아닌 선언문이라고 합니다.
이게 뭐냐면, 브라우저에 "이거 HTML5 문서 임"이라고 말해주는 겁니다.
다음엔 선언문 밑에 <html></html> 태그를 써주세요
<html></html>은 HTML 문서의 HTML시작점입니다.
위 선언문 빼고 모든 HTML요소들이 들어가는 컨테이너라고 할 수 있습니다.
lang="ko"
lang은 태그와 같이 사용할수있는 속성입니다.
이 속성은 요소의 언어를 정의합니다.
lang="ko"는 한국어를 뜻합니다.
이처럼 <html>과 같이 사용한경우 웹사이트의 언어를 정의합니다.
이 속성을 사용 하든 안하든 유저에게는 별차이 없어보이지만 브라우저, 검색 엔진에는 필요한 정보입니다.
<html>안에 <head></head>(해드) 를 써주세요.
<head>는 웹사이트의 머리말 이라고 할수있습니다.
웹사이트에 대한 정보들을 여기에 넣습니다. 이 정보들을 메타 데이터라고도 합니다.
여기에 들어가는 메타 데이터 대부분은 검색 엔진이 사용하고 몇몇은 브라우저가 사용합니다.
메타 데이터에 대해서는 조금씩 알아 볼게요.
이 <head>안에 메타 데이터 하나를 써주세요
<meta charset="UTF-8">
여기 우리의 첫번째 메타 데이터입니다.
메타 데이터는 <meta> 태그를 사용합니다. <meta> 태그는 닫힘 태그가 없습니다.
이 메타 데이터는 HTML의 문자 인코딩을 뜻합니다.
컴퓨터는 우리처럼 언어를 인식하지 못합니다. 그래서 인코딩을 통해서 각 나라의 언어를 표시합니다.
HTML의 경우 UTF-8방식의 인코딩을 사용해서 언어들을 표시합니다.
이제 언어 메타 데이터 밑에 반응형 메타 데이터를 넣어 주세요
<meta name="viewport" content="width=device-width, initial-scale=1.0">
페이지의 크기 및 크기 조정을 제어하는 방법을 브라우저에 알려줍니다.
이 메타 데이터를 사용해서 개발자가 뷰포트를 조절할수 있습니다.
뷰포트는 사용자에 보이는 웹 페이지의 공간입니다.
이 공간은 사용자가 사용하는 기기에따라 다릅니다.
예: 컴퓨터로 본 네이버 뷰포트컴퓨터 화면으로 본 네이버
예: 핸드폰으로 본 네이버 뷰포트핸드폰으로 본 네이버
반응형에 대해서는 CSS에서 더 자세하게 다룰게요.
위 두 메타 데이터들은 웹 사이트를 만들때 기본으로 들어가는 데이터로 기억해두시면 좋아요.
이제 필요한 메타 데이터들을 넣었으니까 제목도 넣어줘야죠?
메타 데이터들 밑에 <title></title>(타이틀) 을 넣어주세요.
<title>은 웹 사이트/웹 페이지의 제목입니다. 이거는 브라우저 탭에서 볼수 있습니다.
마지막으로 <body></body>(바디) 를 <head></head> 아래에 넣어 주세요
<body></body>는 HTML문서의 본문입니다.
이 안에 들어가는 요소들이 브라우저에서 우리가 보는 내용들 입니다.
휴,
이렇게해서 HTML문서의 기본틀이 완성됐습니다.
여기까지 읽으시느라고 고생하셨습니다.
최대한 쉽게 풀었는데, 이해가 되셨는지 모르겠네요.
다음부터는 내용을 어떻게 채워넣을수 있는지 알아보겠습니다.
궁금한거 있으시면 댓글 남겨주세요.
끝!