HTML TAG
<html> ... </html> : html 문서의 시작과 끝을 나타내는 부모 태그
HEAD TAG
<head> ... </head> : 문서의 정보를정의
META TAG
<meta 속성...> ... </meta>
- 문서의 메타 데이터를 정의
- 브라우저 본문 상에는 실제적으로 나타나지 않는 문서에 대한 정보들을 담고 있음
- <head> ... </head>에 작성하는 특수 태그
<meta http-equiv = "Content-Type" content = "text/html"> : HTML 문서 페이지가 어떤 언어로 제작된 것인지를 알려주는 속성. HTML5 문서에서는 생략 가능.
<meta charset = "utf-8"> : html의 인코딩을 알려주는 태그. 인코딩이란 컴퓨터가 문자를 처리할 수 있도록바이트(또는 비트) 형식으로 변환하는 것. 위 태그가 없으면 한글, 특수문자가 깨질 수 있음. HTML 문서에 한글이 포함되어 있으면 'EUC-KR'을, 한글 폰트 없이도 한글을 볼 수 있게 하려면 'UTF-8'을 사용.
<meta name = "viewport" content = "width = device-width, initial-scale = 1"> : 웹사이트 사용자에게 보이는 화면의 영역에 대한 정의.
TAG
<title> ... </title> : 웹 페이지의 제목을 나타냄. 웹 페이지 본문에는 보이지 않으며, 브라우저의 탭 등에서 확인 가능. <head> ... </head>에 작성.
<body> ... </body> : 사용자가 볼 수 있는 내용
<strong> ... </strong> : 글씨 진하게 강조
<u> ... </u> : 밑줄
<br> : 줄 바꿈 (</br 사용 x)
<p> ... </p> : 줄 바꿈
<a> ... </a> : 사이트 링크 태그
<a href="https://www.w3.org/TR/2011/WD-html5-20110405/" target="-blank" title="html5 specification">
</a>
target="blank" : 새 창으로 열기
title="html5 specification" : 링크에 마우스 커서를 올려두면 html5 specification이라는 문구가 뜸
<li> ... </li> : 순서 나타냄. 반드시 부모 태그와 함께 사용해야 함.
<ul> ... </ul> : <li> 태그 간의 띄어쓰기 제공. 반드시 자식 태그와 함께 사용해야 함. (Unordered List)
<ol> ... </ol> : 자동으로 순서를 매겨주는 태그. 자식 태그와 함께 사용. (Ordered List)
<ul>
<li>1.HTML</li>
</ul>
<html> ... </html> : html 코드로 작성된 문서임을 알리는 태그.
<html lang="ko"> : lang 속성은 웹 페이지의 언어를 선언. 항상 태그 안에 포함. 전역 속성으로 어느 태그에서든 사용할 수 있지만 대부분 <html>에 사용.
<input type="checkbox"> : 체크박스 만드는 태그
<html data-dark="false"> : 다크 모드 CSS 적용/미적용. "true"는 적용 "false"는 미적용.
<font color="red"> ... </font> : 폰트 색상 빨간색으로 변경
<style>
a {
}
</style> : css와 함께 사용하는 태그
<link rel="stylesheet" href="style.css"> : style.css에 있는 css 내용을 불러오는 태그. <style> ... </style> 와 똑같이 작동함.
<div> ... </div> : 문단을 나누는 태그
<label for="...">...</label>
<input type="text" id="...">... : for 속성값과 id 속성값이 같아야 함. 문자열을 입력받을 때 사용.
HEADING TAG
<h1> ... </h1>
<h2> ... </h2>
<h3> ... </h3>
<h4> ... </h4>
<h5> ... </h5>
<h6> ... </h6>
숫자가 작을수록 글씨 크기 커짐
...에 표현하고 싶은 내용 작성하기
CSS + TAG
<p style="margin-top:40px;"> ... </p>
여백을 40px만큼 주어 줄바꿈을 한다.
TAG와 관련된 사이트
'Frontend' 카테고리의 다른 글
| [CSS] selector (0) | 2022.07.22 |
|---|---|
| [HTML] 속성 (0) | 2022.07.22 |
| [CSS] 문법 (0) | 2022.07.21 |
| [HTML] <!doctype html> (0) | 2022.06.25 |
| [HTML] img (1) | 2022.06.12 |
