# HTML (HyperText Markup Language)
웹페이지를 만들기 위한 언어로 웹브라우저 위에서 동작하는 언어다.
- 최상위 태그로 <html>을 사용한다.
그 하위에 <head> 태그와 <body> 태그를 가지고 있다.
- <head> 태그는 문서를 설명하는 태그로 제목이나 키워드와 같은 정보를 담는다.
- <body> 태그에는 문서의 내용이 위치한다.
ex) Hello.html
<!DOCTYPE html> // 어떤 버전의 HTML인지 선언하는 것 - HTML5 <html> <head> <title> Hello HTML </title> </head> <body> 안녕하세요. </body> </html>
- 대문자도 가능하나, 소문자를 사용하는 것이 좋다.
- 태그는 대개 쌍을 이룬다. (열린 태그 < >, 닫힌 태그 </>)
- HTML 문서는 파일의 확장자가 html 혹은 htm으로 끝난다.
(저장 시 모든 파일 - 이름.html 혹은 htm으로 적어준다.)
- 빨간색 □ : title명
- 파란색 □ : 본문 내용
- 해당 사이트를 즐겨찾기 하게 되면 title명이 기본이름으로 들어가게 된다.
# 제목 글자 태그 : <h1> ~ <h6>
<!DOCTYPE html> <html> <head> <title> Hello HTML </title> </head> <body> <h1> 제목 h1 </h1> // h1이 가장 크기가 크다 <h2> 제목 h2 </h2> <h3> 제목 h3 </h3> <h4> 제목 h4 </h4> <h5> 제목 h5 </h5> <h6> 제목 h6 </h6> </body> </html>
- <h1> ~ <h6>까지만 있으며
각각의 숫자는 크기 및 우선 순위를 나타낸다.
h1이 크기가 가장 크고
h6이 크기가 가장 작은 순서로 이루어져 있다.
// Tip : h는 header를 의미한다.
# 테이블 <table> </table>
<!DOCTYPE html> <html> <head> <title> Hello HTML </title> </head> <body> <table border = "1"> // 해당 표의 칸을 만들어주는 기능 <tr> // 줄 <td>1</td> <td>2</td> // 칸 </tr> <tr> <td>3</td> <td>4</td> </tr> </table> </body> </html>
- <tr> : 줄(행)
- <td> : 칸(열)
# 이미지 삽입하기
<!DOCTYPE html> <html> <head> <title> Hello HTML </title> </head> <body> <img src = "puppy.png" /> // 동일 폴더 내 있는 경우 이렇게 적어주는 것, 끝에 /를 표시하기도 함 </body> </html>
- <img src = "이미지파일">
뒤의 /는 붙여도 되고, 붙이지 않아도 된다.
# 링크
<!DOCTYPE html> <html> <head> <title> Hello HTML </title> </head> <body> <img src = "puppy.png" /><br> // br은 다음 줄 <a href="http://www.naver.com">네이버</a> </body> </html>
- <a href="주소"></a> : 해당 주소로 이동하는 링크 생성
# 이미지 클릭 시 링크 이동
<!DOCTYPE html> <html> <head> <title> Hello HTML </title> </head> <body> <a href="http://www.naver.com"> <img src = "puppy.png"> </a> </body> </html>
- <a> </a> 사이에 <img src = "이미지파일">을 넣어준다.