👓 TIL) HTML이란?

Solmii·2020년 4월 13일

HTML

목록 보기

2/4

🔍 HTML이란?

표준화된 markup 언어를 사용하여 웹브라우저 상에서 보여지도록 디자인된 문서
💁🏻‍♀️ markup language ⇒ 일반적인 텍스트와 문법적으로 구분하기 위해서 문서에 annotating된 것 (Tag를 이용하여 구조적으로 입력된 것)
WEB을 이루는 가장 기본적인 블럭! (제일 아래에 있는 레고 블럭)

<!DOCTYPE html> => 관습적으로 사용
<html>
<head> => 태그는 <○○>로 시작하여...
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head> => </○○>로 끝!
<body>
  <h1>제목1</h1>
  <h2>제목2</h2>
  <button>버튼</button>
	<abcabc>에러?</abcabc> => 유효하지 않은 태그를 사용하게 되면?
</body>
</html> => HTML언어는 head와 body로 나뉘어져 있음

HTML 의 구조

`<!DOCTYPE>`

HTML 파일이라면 제일 첫 줄에 위치해야 하는 선언문

모습은 태그와 비슷하지만 HTML 태그는 아니다!
(이 html파일이 무슨 버전의 html을 사용했는지 브라우저에 알려주는 역할)

<!DOCTYPE html> 선언문은 HTML5 버전을 사용한다는 의미이다.
(HTML5가 가장 최신이자 가장 많이 쓰이는 버전!)

🍚 html

<!DOCTYPE>을 제외한 모든 HTML elements(요소)들은

<html></html>

으로 감싸져 있다.

브라우저가 html태그를 만나면, html이 시작됐는지 인지하고 요소를 그릴 준비를 한다.

👩🏻 head

사용자에게 보여지는 UI적인 요소가 전혀 없음
구글에 검색하면 나오는 제목, 부가 설명, 기술적 내용, 북마크에 추가할때 나오는 제목, 아이콘 등을 나타낸다.
CSS 파일,웹폰트 등을 연결해줌

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>wecode</title>
</head>

html 태그 다음에는 항상 head 태그가 온다.

👉 <meta charset="utf-8"> : 한글, 일본어, 중국어가 포함된 페이지라면 utf-8 이라는 값으로 문자 인코딩을 추가해줘야 한다.

💁🏻‍♀️ UTF-8 ?
유니코드(국제 표준 문자표)를 컴퓨터가 이해할 수 있는 형태로 바꿔주기 위한 가변 길이 문자 인코딩 방식 중 하나로, 전세계에서 사용하는 약속이다.

👉 <meta name="viewport" content="width=device-width"> : 디바이스의 가로 크기가 곧 웹 페이지의 가로와 같다는 의미
즉, 모바일에서 웹사이트가 예쁘게 잘 보이도록 도와준다.
(해당 정보를 추가하지 않으면 데스크탑 버전의 웹페이지가 축소되어 보이는 현상이 나타난다.)

👉 <title>wecode</title> : 브라우저 탭에 보이는 페이지 이름

🧥 body

사용자에게 보여지는 가장 중요한 content 부분

🎈유효하지 않은 Tag 사용시
그래도 content는 정상적으로 잘 나온다!

🤷🏻‍♀️ 왜?
브라우저는 어느 정도의 에러는 스스로 회복해서 사용자가 HTML 문서를 보는데 문제가 없도록 도와주기 때문!
~~어? 뭐야 쟤 잘못썼나봐~ 그래도 안에 content는 잘 있으니까 보여주자!~~

🤷🏻‍♀️ 내가 맞는 Tag를 사용했는지 확인하려면?
W3C Markup Validation Service 에서 확인 가능!

🧪 World Wide Web Consortium (W3C)

서버 기술의 표준화를 추진하고 있는 교육 · 연구 기관 및 관련 회사들의 단체 ~~(마이크로소프트도 있음)~~
W3C가 "HTML5에는 이런 태그들이 있어~" 하고 정의하면 다른 다양한 브라우저(crome, safari, firefox, edge 등)는 정의된 태그를 사용하여 웹표준에 맞게 브라우저를 구현해야 함