- HTML이 markup language라는 것을 이해할 수 있다.
- "구조를 표현하는 언어" 라는 의미를 자신의 언어로 표현할 수 있다.
- HTML의 기본 Tag와 속성에 대해서 이해하고 적용할 수 있다.
- opening tag, closing tag, self-closing tag에 대해서 이해하고 있다.
HTML(HyperText Markup Language)
HTML은 웹페이지의 내용(content)과 구조(structure)를 담당하며 태그(tag)를 이용해서 문서와 데이터의 구조를 명기하는 언어를 말한다. HyperText에서 Hyper는 텍스트와 같은 정보가 동일 선상에 있는 것이 아니라 다중으로 연결되어있는 상태를 말하는 것으로 HyperText는 문자 그대로 텍스트를 초월한다는 뜻이다. 즉 한 텍스트에서 다른 텍스트로 건너뛰어 읽을 수 있는 기능을 말하고 링크(link)를 생각하면 쉽다. Markup Language는 태그(tag)를 이용해서 문서와 데이터의 구조를 명기하는 언어의 한 종류이며 이 방법을 사용하면 정보를 구조적으로 표현하는 것이 가능해진다.
Tag <>
HTML 요소(Element)는 시작 태그(start tag or opening tag)와 종료 태그(end tag or closing tag)그리고 태그 사이에 위치한 content로 구성된다. '어디서부터 어디까지 이 태그에 들어간다'를 표현하기 위해서 보통은 쌍으로 존재한다. 소문자를 주로 사용한다. 요소는 중첩될 수 있으며 중첩시 부자관계가 형성된다.
<h1>You can do it</h1>
<!-- <h1>은 시작태그
'You can do it'은 콘텐츠(contents)
</h1>은 종료태그
통째로 Element -->content를 가질 수 없는 요소를 빈 요소(Empty element or Self-Closing element)라고 한다. 빈 요소는 content가 없기 때문에 태그 자체만으로는 아무 일도 일어나지 않으므로 즉, 충분하지 않기 때문에 추가적으로 '어트리뷰트(Attribute 속성)'을 입력하게 된다. 어트리뷰트란 요소의 성질, 특징을 정의하는 것으로 요소에 추가적 정보(이미지 파일의 경로나 크기 등)을 제공한다. 시작 태그에 위치해야하고 이름과 값이 쌍을 이룬다. 어트리뷰트끼리의 자리는 바뀌어도 상관이 없다.
<img src= "iloveseoul.png" width="100" height="200"></img>
<!-- img는 빈요소로 </img>를 써서 Self-closing
src는 source의 약자, 어트리뷰트명(속성)
"iloveseoul.png"는 어트리뷰트 값(Attribute Value)
width는 이미지의 너비, height는 이미지의 높이 --> - 대표적인 빈 요소: br, hr, img, input, link, meta
- 대표적인 어트리뷰트: id, class, lang, style, title
모든 태그를 다 익힐 수는 없다. 빈도수를 확인하고 자주 사용하는 태그들 위주로만 우선 기억을 해두고 필요한 경우 검색해서 활용할 수 있도록 하는게 좋다.(MDN html tag 참고)
HTML의 구조
HTML은 트리구조(Tree structure)이다. 트리구조는 생각보다 많이 쓰인다.
<!DOCTYPE html> 이 문서가 html임을 명시
<html> 문서 전체의 틀 구성, 루트(root)요소 정의, 부모태그
<head> 문서의 메타데이터(데이터의 데이터) 선언
<meta charset="utf-8"> 문자 인코딩 방식을 명시
<title>Page title</title> title, style, link, script등의 내용 담김
</head> <head>내의 내용은 브라우저에 출력되지 않는다.
<body> 브라우저에 출력하고 싶은 내용, 즉 본문
사용자에게 보여주고 싶은 내용들
</body>
</html>
<!-- 컴퓨터는 모든 정보를 0과 1로만 저장하는데 utf8이라는 방식으로 저장된 상태이다.
파일을 웹브라우저가 열때도 utf8이라는 방식으로 열어야 문제가 없을 것이다.
그 역할을 <meta charset="uft-8">이 한다. -->
<!-- <title> 웹 브라우저의 툴바(Toolbar)에 표시,
즐겨찾기에 추가할 때 즐겨찾기의 제목이 된다,
검색 엔진의 결과 페이지의 제목으로 표시된다 -->정리하기
HTML은 브라우저에서 실행 가능한 가장 기본적인 파일
HTML은 마크업언어로 구조적으로 태그들을 이용해서 보여주며, 상위 태그 안에는 head과 body 파트가 있다. Head에는 상세 설명이 들어가고 body는 사용자들에게 보여주는 태그로 이루어져 있다.
추가적으로 필요한 정보는 이쪽으로 들어가서 확인해보자!
👉 MDN HTML
