HTML이란?
HyperText Markup language.
"Hypertext(하이퍼텍스트)"란 웹 페이지를 다른 페이지로 연결하는 링크를 말합니다. 링크는 웹의 근본적인 속성입니다. 인터넷에 자료를 올리고 다른 사람이 만든 페이지로 링크함으로써, 여러분은 월드 와이드 웹 세계의 능동적인 일원이 될 수 있습니다. - mdn
HTML은 우리의 웹사이트 컨텐츠가 어떤 구조로 이루어질지 브라우저에게 설명하는 유일한 언어이다.
mark는 tag와 같은 뜻이다. 그리고 Markup은 mark 즉 태그들로 감싸진 언어를 말한다.
참고 : markdown(.md)은 markup의 한 종류로, 용량이 가볍고 순수한 텍스트를 읽고 쓰기 쉽도록 만들어진 언어이다. 지금 내가 쓰고 있는 벨로그의 글도 md의 사용법을 가져왔다고 한다.
한 줄로 요약하자면, HTML은 우리의 웹사이트 문서를 이루는 태그들의 집합이다. 자바스크립트가 뇌, CSS가 피부라면 HTML은 뼈대와 같다.
HTML의 구조
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>🔍 위의 html 코드들을 하나하나 뜯어보자.
DOCTYPE
DOCTYPE은 document type의 약자이다.
DOCTYPE은 언제나 DTD(Document Type Definition)에 관련되어 있다.
Document Type Definition은 특정 타입의 document가 어떤 구조를 가져야 하는지 정의하고, 유효한 요소와 속성은 무엇인지 규정한다.
<!DOCTYPE html>위의 코드 html 코드 한 줄은 브라우저에게 내가 HTML document를 쓸 거라고 소개하는 것과 동시에, HTML document가 어떤 구조를 가져야 하는지 정의한다. 비유하자면 html문서가 따라야 하는 법과 같다.
HTML tag
<html> 태그는 다른 모든 HTML 요소들을 감싸는 컨테이너이다. (<!DOCTYPE> 태그 제외)
html태그는 head와 body라는 두 가지 파트로 구성되며, head와 body는 각각 하나씩만 들어갈 수 있다.
Note: 웹사이트의 언어를 정하기 위해, 언제나 html태그 안에 lang 속성을 넣어줘야 한다.
head tag
head 태그는 웹사이트 document를 규정하는 보이지 않는 설정이다. 화면에는 별다르게 표시되는 내용이 없지만, 검색 엔진이나 브라우저에서 읽힌다.
style, script, title, link, meta 태그 등이 들어간다.
meta 태그에 대해서 조금 더 살펴보면, meta 테그는 head 부분에서 다른 태그들(script, style, link, title 등)로 나타낼 수 없는 메타데이터를 나타내는 태그를 의미한다. <meta name="keywords" content="ABC"> 와 같이 검색 엔진을 위한 키워드나 <meta name="description" content="OWEN">과 같이 문서에 대한 설명 등에 사용된다.
body tag
body 태그는 HTML document의 body를 정의한다. HTML document상에서 보여지는 모든 내용을 담는 컨테이너.
meta tag
meta 태그는 웹 document의 메타데이터를 브라우저에게 전달하는 태그이다. 메타데이터란 데이터를 설명하는 데이터. character set, 검색 엔진을 위한 page description, keywords, author of the document, and viewport settings등을 설명한다.
<meta charset="UTF-8">: 브라우저에게 웹페이지의 문자가 어떻게 해석되고 렌더링되어야 할지 알려준다. 보통의 경우 UTF-8이라는 방식을 쓴다.
html요소의 종류
body태그 안에 들어가는 모든 요소들을 크게 블록 요소와 인라인 요소로 나누려고 한다. 다른 모든 style들 중에서 display의 block과 inline에 대해서만 설명한다.
블록 요소
- 줄 바꿈이 일어남.
- 블록 요소 안에는 텍스트와 인라인 요소, 또 다른 블록 요소를 포함할 수 있음
블록요소의 종류
address,article,aside,audio,blockquote,canvas,dd,div,dl,
fieldset,figcaption,footer,form,h1,h2,h3,h4,h5,h6,
header,hgroup,hr,noscript,ol,output,p,section,table,ul,video
자주 쓰이는 요소들
div, h1 ~ h6, ul, ol, li, form
인라인 요소
- 줄 바꿈이 일어나지 않음.
- 인라인 요소 안에는 텍스트와 인라인 요소를 포함할 수 있음.
- 인라인 요소 안에는 블록 요소를 포함할 수 없음.
인라인 요소의 종류
a,br,button,em,i,img,input,label,map
q,samp,select,span,strong,textarea
자주 쓰이는 요소들
a, button, img, input, span, textarea
HTML 공통 속성
속성(attributes)은 태그들의 추가적인 정보이다. 요소들은 어떤 속성을 갖느냐에 따라서 달라진다. HTML의 속성들은 요소들 모두가 공통으로 가질 수 있는 속성들과 특정한 요소들만 가질 수 있는 속성들로 나뉜다. 여기서는 공통적인 속성만 다뤄본다.
id
고유 식별자. id는 각각의 요소를 식별하는데 쓰인다. 특히 자바스크립트와 CSS로 하여금 특정한 요소를 포인팅할 수 있도록 한다. 하나의 document안에서는 하나의 id만 있어야 한다.
<div id="myelement"> </div>#myelement {
color : blue;
}document.querySelector("#myelement")class
id와 같이 식별자의 기능을 하지만, 하나의 document안에서 1개든 100개든 만들어도 상관이 없다. CSS에서 어떤 스타일을 여러가지 요소에 적용하고 싶을 때 사용된다.
title
브라우저의 타이틀 바에 나타날 타이틀을 설정한다. 타이틀의 내용을 검색 엔진 최적화에 매우 중요하다.
style
요소들의 스타일을 지정한다. 보통은 따로 CSS파일을 만드는 걸 권장.
