1. 페이지에 타이틀 달기
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>
첫 타이틀
</title>
</head>
<body>
페이지에 타이틀을 다는 예제입니다.
타이틀은 브라우저의 타이틀바에 보여집니다.
</body>
</html>2. 문단 제목 달기
<!doctype html>
<html>
<head>
<title>
문단 제목 달기
</title>
</head>
<body>
<h1>
1장 홈페이지 만들기
</h1>
<h2>
1절 HTML 언어
</h2>
<h3>
1. 웹
</h3>
<h4>
1.1 인터넷
</h4>
<h5>
1.1.1 네트워크
</h5>
<h6>
1.1.1.1. 통신
</h6>
</body>
</html>3. 툴팁 달기
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>
툴팁 달기
</title>
</head>
<body>
<h1 title="h1태그로 작성되었습니다">
1장 홈페이지
</h1>
<h2 title="h2태그로 작성되었습니다">
1절 HTML 언어
</h2>
</body>
</html>4. 단락 나누기
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>
단락 나누기
</title>
</head>
<body>
<h3>
2개의 단락 나누기
</h3>
<p>
HTML 문서도 본문을 여러 단락으로 나눌 수 있다. CSS 스타일을 사용하면 단락 단위로 내여쓰기와 들여쓰기가 가능하다</p>
<p>
여러개의 빈칸은 하나로 취급되며, 엔터키 역시 하나의 빈 칸으로 처리된다.</p>
</body>
</html>5. 수평선 긋기 - hr태그
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>
수평선 긋기
</title>
</head>
<body>
<h1>수평선 긋기
</h1>
<hr>
<p>
hr 태그는 horizontal에서 딴 글자입니다.
</p>
<hr>
<p>
종료 태그는 </hr>를 사용하지 않습니다.
</p>
</body>
</html>6. 새로운 줄 넘어가기 - br태그
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>
새로운 줄 넘어가기
</title>
</head>
<body>
<h1>
새로운 줄 넘어가기
</h1>
<br>태그로 다음 줄로 넘어갑니다<br>
2개의 <br>태그로 두 번 넘어 갑니다.<br><br>
보이시나요?
</body>
</html>7. 개발자 포맷 그대로 출력하기 - pre태그
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>
개발자의 포맷 그대로 출력
</title>
</head>
<body>
<h1>
개발자의 포맷 그대로 출력하기
</h1>
<hr>
<p>
<p>태그를 사용하면 여러 개의 빈 카은 하나로, 여러 줄은 한 줄에 붙여 출력됩니다.</p>
<hr>
<pre>
<pre>태그를 사용하면
사용자가 입력한 그대로 출력됩니다.
</pre>
</body>
</html>8. div태그와 span태그 활용
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>
<div>블록과 <span>블록
</title>
</head>
<body>
<h1>
사랑
</h1>
<hr>
<div style="background-color:skyblue;padding:20px">
내가 사람의 방언과 천사의 말을 할지라도 <span style="color: red">사랑</span>이 없으면 소리 나는 구리와 울리는 꽹과리가 되고, <span style="color:red">사랑</span>이 없으면 아무 것도 아니라.
</div>
</body>
</html>9. 태그 활용
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
산길
</title>
</head>
<body>
<h1>산길</h1>
<hr>
<p>오늘 아침 일찍 산에 올랐다. 아침 온도는 15°이었다. 가지고 간 물의 ½ ½을 마셨다. 한참 올라가는 도중에 약수터를 가리키는 ↰ ↰사인이 보였다. 불현듯 양두종 님의 산길이란 시에 곡을 붙인 박태준의 가곡♪이 생각이 났다</p>
<pre>
산길을 간다. 말없이
호올로 산길을 간다
해는 져서 새소리 그치고
짐승의 발자취 그윽히 들리는
산길을 간다 말없이
밤에 홀로 산길을 간다.</pre>
<br>
<p>©Copyright(c) 황기태 All rights reserved ☎ 010―0000―9999
</body>
</html>'CS Study > HTML' 카테고리의 다른 글
| 6. 동적 변화 만들기 (0) | 2022.04.08 |
|---|---|
| 4. 웹 폼 (0) | 2022.04.07 |
| 3. 시맨틱 태그 (0) | 2022.04.07 |