반응형
<!DOCTYPE html>
<html>
<head>
<title>Sample Website</title>
</head>
<body>
<h2>HTML 연습!</h2>
<p>이것은 첫 번째 문단입니다.</p>
<p>이것은 두 번째 문단입니다!</p>
<ul>
<li>커피</li>
<li>녹차</li>
<li>우유</li>
</ul>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/45/A_small_cup_of_coffee.JPG/550px-A_small_cup_of_coffee.JPG">
</body>
</html>
이 페이지를 통해 기본적인 HTML 태그 몇 개만 살펴보겠습니다!
DOCTYPE 선언
HTML 파일을 쓸 때는 가장 먼저 <!DOCTYPE> 선언을 써야 합니다. 이전의 html 버전을 사용하려면 조금 복잡하게 써야 하지만, 가장 최신 버전인 HTML 5를 사용하기 위해서는 이렇게만 쓰면 됩니다:
<!DOCTYPE html>
title 태그
페이지의 제목은 <title> 태그에 써주면 됩니다. 브라우저의 탭이나 방문 기록에 나와 있는 바로 그 제목이 이 곳에 들어갑니다.
<title>Sample Website</title>
h1~h6 태그
한 페이지에 여러 개의 머리말이 있을 수 있는데요. 그 중 가장 중요한 머리말은 <h1>(heading 1), 그 다음으로 중요한 머리말은 <h2>(heading 2). 이런 식으로 <h6>(heading 6)까지 작성할 수 있습니다.
<h1>머리말 1</h1>
<h2>머리말 2</h2>
<h3>머리말 3</h3>
<h4>머리말 4</h4>
<h5>머리말 5</h5>
<h6>머리말 6</h6>
각 머리말의 크기는 나중에 마음대로 설정할 수 있지만, 따로 설정해주지 않으면 <h1>부터 순서대로 작아집니다.
p 태그
보통 문단은 <p>(paragraph) 태그 안에 넣습니다. 물론 직접 설정할 수도 있지만 <p> 태그 위, 아래에는 기본적으로 여백이 조금씩 있습니다.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
HTML 태그 정리 사이트
w3schools https://ww.w3schools.com/tags/ref_byfunc.asp
반응형
'IT > HTML' 카테고리의 다른 글
| 크롬 개발자 도구로 CSS 선택자 알아내기 (0) | 2022.11.10 |
|---|---|
| CSS 선택자 정리 (0) | 2022.11.10 |
| CSS로 HTML 꾸미기(기초) (0) | 2022.11.09 |
| HTML 태그의 구성 및 구조 (0) | 2022.11.08 |