•
HyperText Markup Language
◦
HyperText → 한 웹사이트 안에서 또는 서로다른 웹 사이트의 웹 페이지를 연결하는 링크를 뜻함
◦
“Link는 웹의 기본 구성 요소다.
•
태그를 통해 문서의 일반 문자와 구분된다. (<, >)
•
태그는 대소문자를 구분하지 않지만 컨벤션, 권장 사항으로는 소문자이다. → 일관성, 가독성을 위해
◦
<title>, <tITLE>, <TITLE>, <title> 전부 같은 <title> 태그
기본구조
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>My test page</title>
</head>
<body>
<p>This is my page</p>
</body>
</html>
HTML
복사
<!DOCTYPE html>
웹 브라우저에게 이 문서는 HTML 형식의 문서이다!임을 알려주는 역할
•
이전에는 HTML의 버전에 따라 복잡하고 긴 형태로 존재했다. 버전에 따라 다른 DTD(Document Type Definition)을 사용해야 웹 브라우저가 문서를 올바르게 해석할 수 있었다. HTML 버전이 업데이트 될 때 마다 DTD를 번거롭게 변경해야했다.
•
HTML 5로 넘어오면서 위와 같은 형태로 간단하게 변경됐다. HTML5는 다른 HTML 기준과 함께 하위 호환되며, 해당 선언문 하나로 “이 문서는 HTML5 문서다”임을 웹 브라우저에게 알릴 수 있다.
•
웹 표준 중 하나이므로 필수로 HTML 문서에 필수로 들어가야하는 요소 중 하나이며 chrome 브라우저 lighthouse에서 해당 선언문이 없을 경우 점수가 깎인다.
◦
이는 SEO상에서도 안좋은 점수를 받는다. → 표준에 맞지 않는 HTML 문서 취급을 받는다.
<html>
•
문서의 내용을 감싸는 최상단에 존재하는 부모 태그.
<haed>
•
키워드, css style, 문자셋과 같은 문서의 내용이 아닌 문서의 정보를 담는 컨테이너 태그.
<meta charset="utf-8">
•
해당 HTML 문서의 문자열 셋을 정하는 태그.
•
utf-8은 인간 언어의 대부분을 대응한다.
<title>
•
페이지의 타이틀을 나타내는 태그.
•
타이틀은 웹 브라우저의 탭에 나타난다.
tag의 구성요소
void elements
<img
src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"
alt="Firefox icon" />
TypeScript
복사
•
모든 elements가 위의 구성요소들을 전부 가지고 있진 않다, 이를 void elements라고 부른다.
•
맨마지막에 /를 넣어주는게 필수는 아니다.
attributes
•
element는 opening tag에 attribute를 가질 수 있다.
•
attribute는 element의 추가적인 정보를 전달하는 구성요소중 하나다.
◦
class는 element의 style 적용에 필요한 추가적인 정보중 하나.
•
attribute와 attribute 사이, 그리고 tag와 attribute 사이에는 항상 띄어쓰기가 존재해야 한다.
•
quotes가 없어도 정상작동하는 attributes 값이 존재하지만 attribute의 값에 띄어쓰기가 존재할 경우 boolean attribute으로 해석되므로 항상 quotes를 넣어주는 습관을 들인다.
boolean attributes
<input type="text" disabled="disabled" />
<!-- using the disabled attribute prevents the end user from entering text into the input box -->
<input type="text" disabled />
<!-- text input is allowed, as it doesn't contain the disabled attribute -->
<input type="text" />
HTML
복사
•
boolean값을 가진 attributes는 값 없이 작성이 가능하다