HTML이란
-
Hyer Text Markup Language
-
웹사이트에 들어갈 내용 담당!
HTML Tag
- <!DOCTYPE> 선언
<!doctype html>
HTML 파일을 쓸 때는 가장 먼저 <!DOCTYPE> 선언을 써야 합니다. 이전의 html 버전을 사용하려면 <!DOCTYPE>을 복잡하게 써야 하지만, 그냥 최신 버전인 HTML 5를 사용하기 위해서는 이렇게만 쓰면 됩니다
- 제목
<h1> </h1> ~ <h6> </h6>
한 페이지에 여러 개의 머리말이 있을 수 있는데요. 그 중 가장 중요한 머리말은 <h1>(heading 1), 그 다음으로 중요한 머리말은 <h2>(heading 2). 이런 식으로 <h6>(heading 6)까지 작성할 수 있습니다.
- 웹페이지 제목 :
<title> </title>
페이지의 제목은 <title> 태그에 써주면 됩니다. 브라우저의 탭이나 방문 기록에 나와 있는 바로 그 제목이 이 곳에 들어갑니다.
- 굵은글씨 :
<b> </b>
텍스트를 굵게 쓰고 싶으면 ‘bold’의 약자인 <b> 태그를 사용하면 됩니다.
- 굵은글씨 :
<strong> </strong>
<b> 태그는 텍스트를 굵게 만드는 것이 목적이지만, <strong> 태그는 감싸고 있는 텍스트가 중요하다고 표시하는 것이 목적입니다. 지금 겉보기에는 두 태그가 똑같지만, 글을 읽어줄 때 <strong>은 강조해서 읽을 수 있습니다.
- 밑줄 :
<u> </u>
태그 안에 있는 내용에 밑줄을 넣습니다.
- 줄바꿈 :
<br>
(여는 태그만 있음)
- 단락 :
<p> </p>
보통 문단은 <p>(paragraph) 태그 안에 넣습니다. 물론 직접 설정할 수도 있지만 <p> 태그 위, 아래에는 기본적으로 여백이 조금씩 있습니다.
- 이미지 삽입 :
<img src="이미지 주소" width="크기,숫자">
이미지를 넣습니다. 이미지 주소 또는 이미지의 이름을 넣습니다.
- 동영상 삽입 :
<iframe> </iframe>
동영상을 넣습니다. 보통 유튜브에서 영상을 가져와 이용하는 경우가 많습니다.
- 한글이 꺠질떄 :
<meta charset="utf-8">
한글이 깨질때 이용합니다.
- 본문 :
<body> </body>
본문
- 본문 설명 :
<head> </head>
본문의 설명부분 웹페이지의 정보!
- body, head를 감싸기 :
<html> </html>
위의 둘 tag를 감싸는 웹페이지의 시작과 끝을 나타냄
- 링크 :
<a href=“링크”> </a>
링크를 바로갈수 있게 설정합니다.
- 링크 새탭으로 열기 :
<a href="example.com" target="_blank">Text Here</a>
target은 링크를 여는 위치를 지정합니다. 보통 _blank로 설정하면 새탭이 열리도록 지정합니다.
- 링크 내용 툴팁으로 보여주기 :
<a href="example.com" title="텍스트 링크에 툴팁이 뜹니다.">
title 안의 텍스트 링크에 툴팁이 뜹니다. 는 툴팁안에 들어갈 글씨입니다.