# 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 = "이미지파일">을 넣어준다.
'Web > HTML' 카테고리의 다른 글
| [필기정리]Day35 - HTML 실습문제 및 해답 (0) | 2020.07.29 |
|---|---|
| [필기정리]Day34 - HTML 태그 (2) | 2020.07.28 |