개발 공부/HTML
HTML의 기본 구조 및 태그
짹뚜
2021. 12. 28. 19:46
HTML은 HpyerText Markup Langauge의 줄임말로 웹 페이지의 구조를 만드는 언어이다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p> Hello World! </p>
</body>
</html>
HTML 파일은 위와 같은 형식의 구조로 되어있다. 자세히 보면 단어들이 <...> 사이에 들어가 있는데 이것들을 Tag라고 부른다. 그리고 같은 이름으로 된 Tag들이 한 쌍으로 있는데 이것들을 합쳐서 element (요소)라고 부른다.
Tag 중에 /가 없으면 Opening Tag, 있으면 Closing Tag라고 부른다. 해당 element의 내용은 Opening과 Closing Tag사이에 들어간다. 이러한 element들이 모여서 하나의 html 파일을 만든다.
- <! DOCTYPE html>: 현재 html 파일이 HTML5를 사용한다는 것을 브라우저에게 알려주는 것이다.
- <html>: 전체 html 파일을 감싸는 태그로 파일에서 하나만 존재한다. (root라고도 한다.)
- <head>: html 파일에 대한 정보 또는 metadata들을 나타내는 태그이다.
- <body>: 실질적으로 html 파일을 브라우저에서 열었을 때 보이는 내용들을 포함한다.
태그
자주 사용되는 태그들은 다음과 같다.
<head> 에 사용되는 태그
- <title>: <head>에 사용되는 태그로 웹페이지의 제목을 나타낸다.
<body> 에 사용되는 태그
- <h1> - <h6>: 제목을 표현할 때 사용하는 태그들로 h1이 가장 중요한 제목, h6이 가장 중요하지 않은 제목을 표현한다.
- <div>: 보이지는 않지만 구역을 나타낼 때 사용한다.
- <p>: 문단을 표시할 때 사용한다.
- <img>: 이미지를 웹페이지에서 출력할 때 사용한다.
- <ul>: unordered list의 줄임말로 리스트가 숫자 없이 목록으로 출력된다.
- <ol>: ordered list의 줄임말로 <ul> 태그와는 다르게 숫자와 같이 출력된다.
- <li>: <ul>과 <ol>에 사용되며 리스트의 한 아이템을 나타낸다.
- <input>: 사용자의 입력을 받아올 때 사용한다.
태그는 Opening Tag와 Closing Tag가 한 쌍으로 있어야 하지만 특정 태그들은 Closing Tag 없이 사용이 가능하다. 이것을 Self-Closing Tag라고 부른다. 대표적으로 <img> 태그가 Self-Closing Tag이다. Opening Tag를 닫을 때 />을 사용한다.
<img src="img.png" />