HTML의 기본구조에 대해 알아보기
HTML문서는 정해진 형식에 맞추어 내용을 작성해야한다.
기본적으로 HTML문서를 작성할때 넣어주어야하는 구조에 대해 알아보자
웹 문서의 구조는 크게 <!DOCTYPE html> <html> <head> <body> 로 나뉘어져있다.
나누어 설명을 하자면 우선
✏️ <!DOCTYPE html>
웹 문서의 유형을 지정하는 태그이다.
현재 작성하고있는 이 문서가 HTML 문서임을 웹 브라우저에게 알려주는 역할을 한다.
✏️<html>
웹 문서의 시작과 끝을 알리는 태그이다.
끝으로 아무런 코드도 작성하지않아야한다.
✏️ <head>
웹 브라우저에 문서 정보를 알려주는 태그이다.
이 태그의 정보들은 화면에 출력되지않으나 웹 브라우저가 알아야할 정보들이 담겨있다.
head영역에서는 meta 태그 라는 메타정보를 사용할수있다.
메타 정보?
메타 정보란 데이터에 관한 데이터 를 의미한다.
눈에 보이지는 않지만 웹 문서에 관련된 정보를 지정할때 사용한다.
메타 태그로 할수있는 일
🧨 1. 제목
<title> 태그를 통해 웹 페이지의 제목을 지정할수있다.
이 와같이 제목을 지정하여야하는 이유는
1. 검색 엔진의 결과로 나타나는 헤드라인에 적용된다.
2. 웹 페이지를 공유할때 노출되는 제목이 title 태그의 제목이기 때문이다.
🧨 2. 웹페이지의 설명
이 와같이 검색 결과에서 요약된 정보로 간결하게 웹 페이지에 대한 설명이 담겨있는 헤드라인이 있다.
이러한 설명을 붙이기위해 meta 태그를 사용하는것이다.
meta 태그 예제
🧨 3. 인코딩 셋
또 많이 쓰이는 메타정보중 하나가 charset 이다.
보통 <meta charset = "UTF-8"> 을 쓰는데
UTF-8 이란
전세계의 모든 언어를 하나의 코드로 만들어 놓은 언어코드이며, 기본적으로 UTF - 8을 많이 쓰곤한다.
해당 언어 코드가 없었다면 다른 나라의 언어들은 전부 깨져서 보였을 것이다.
✏️ <body>
웹 브라우저에 내용을 표시하는 태그이다.
지금까지는 눈에 보이지않는 웹 브라우저의 정보를 입력했다면
body 태그 안에는 웹 브라우저에 표시될 내용을 입력한다.