[특징 정리]
- HyperText Markup Language의 약자이다.
- HTML은 웹의 최소 단위인 웹페이지를 만드는 언어이기 때문에 웹의 밑바탕이 된다.
- 웹 페이지의 구조를 만들기 위해 사용한다.
- HTML 개발을 위해서는 웹브라우저와 텍스트 에디터가 반드시 필요하다.
- 서버 필요없이 실행할 수 있으며, index.html이 웹 사이트의 루트 파일이다.
- .html 확장자를 붙이면 HTML 파일이 되어 브라우저로 실행이 가능하다.
(저장할 때 파일명.html으로 저장하면 HTML 파일이 생성된다)
[태그]
- HTML의 태그들은 각각의 용도가 있다.
- 태그는 다음과 같은 형태로 사용된다. <tagname>content</tagname>
- 태그는 종류가 매우 많으므로, 외우기보다는 이해한 후, 필요에 따라 갖다쓰는 것이 좋다.
- 보통은 한 쌍으로 이루어져있다.(시작 태그와 끝 태그)
<h1>Title<h1>
<p>Content<p>
- 몇몇은 태그 하나로 나눠쓴다.
<br/>
HTML5에서는 <br>로도 가능하다.
html 기본 구조는 다음과 같다.
<!DOCTYPE html>는 HTML5를 사용하겠다는 일종의 선언이다.
그리고 HTML 파일 내 설정 세팅이나 내용은 반드시 <html>과 </html> 태그 안에 들어가야 한다.
이 태그가 가장 기본이 되는 태그이다.
<head> </head> 사이에는 제목을 위한 <title>태그와 <meta> <script>나 <link>등이 들어갈 수 있다.
유저가 실제 눈으로 보는, HTML 파일에 대한 Contents 정보들은 <body>태그안에 입력된다.
페이지 구조를 브라우저에게 알리는 정보들은 <head>태그안에 작성된다.
<!DOCTYPE html> // HTML5임을 나타내는 선언
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
<meta> 란?
- 브라우저에게 해당 HTML 파일에 대한 정보를 알리는 태그일 뿐, 사용자를 위한 정보는 아니므로 보이지 않는다.
- charset 속성의 경우, Character encoding을 뜻한다. 즉, 문자의 인코딩 종류를 결정한다.
아래 태그들은 모두 <body>태그에서 사용하는 것이다.
제목을 위한 h1, h2, h3, h4, h5 태그
<h1>111</h1>
<h2>222</h2>
<h3>333</h3>
<h4>444</h4>
<h5>555</h5>
이렇게 하고 실행을 해보자.
h1이 가장 큰 제목(중요한 제목일때 사용한다)이며 h5로 갈수록 작아진다(중요도가 떨어진다)
크롬에서 개발자 도구(단축키 F12)를 사용하면 구조를 좀 더 쉽게 확인할 수 있다.
태그에는 2가지로 구분할 수 있는데, 다음과 같다.
1. 인라인 태그
- 새로운 라인에서 시작하지 않는다. 즉, 내용 중간에 사용할 수 있다는 의미이다.
- <strong>, <em> <a>, <span>, <img> ...
<a>태그는 <a href="http://www.naver.com">네이버</a> 으로 사용한다. 링크를 거는 것이다.
태그 속성으로 target이 있는데, 현재 창에서 링크 이동할 것인지, 아니면 새 창을 띄우고 그 창에서
이동할 것인지를 지정하는 것이다. _blank의 경우 새 창을 띄우고 이동한다.
이것을 작성하지 않으면? 기본적으로 현재 페이지에서 링크 사이트로 이동하게 된다.
<a href="http://www.naver.com" target="_blank">네이버</a>
2. 블록 태그
- 새로운 라인에서 시작한다.
- <div>, <h1~h6>,<p>,<form> ...
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
태그 속성(Attribute)
- 시작 태그에 입력한다.
- 태그명과 ">" 사이에 입력한다.
<tagname attributeName="attributeValue">content</tagname>
