1. 기본 구성 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>최초의 내 사이트</title>
</head>
<body>
최초의 내 사이트에 오신 걸 환영합니다!!!!
</body>
</body></html>
2. 문단 태그
<!--
작성일: 2024-04-03
작성자: 곽정우
내용: 문단 태그
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문단태그</title>
</head>
<body>
<p>문단을 만드는 태그</p> 일반글자
또 일반 글자 또 일반 글자
<p>문단을 만드는 태그</p>
<p><br>
개행<br>개행<br>개행<br>
</body>
</html>
3. 제목 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제목 태그</title>
</head>
<body>
<h1>안녕하세요. 제목태그 h1</h1>
<h2>안녕하세요. 제목태그 h2</h2>
<h3>안녕하세요. 제목태그 h3</h3>
<h4>안녕하세요. 제목태그 h4</h4>
<h5>안녕하세요. 제목태그 h5</h5>
<h6>안녕하세요. 제목태그 h6</h6>
일반 문자
</body>
</html>
4. 서식 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>서식태그</title>
</head>
<body>
<h2서식 태그 h1</h2>
<h2>안녕하세요. 제목태그 h2</h2>
<p>b 태그는 글자를 <b>굵게</b> 표현</p>
<P>strong 태그도 글자를 <strong>굵게</strong> 표현</P>
<p>i 태그는 글자를 <i>이탤릭체로</i> 표현</p>
<p>em 태그는 글자를 <em>이탤릭체로</em> 표현</p>
<p>ins 태그는 <ins>중요한 글자를</ins>표현</p>
<p>del 태그는 <del>글자를 지운 것처럼</del>표현</p>
<p>sup 태그는 수식을 표현: x<sup>2</sup> + y <sub>3</sub> = z</p>
<p>sub 태그는 화학식을 표현: H<sub>2</sub>0</p>
</body>
</html>
<b> 태그는 텍스트를 단순히 굵게 표시할 뿐이며, 시각적인 강조를 위한 용도로 사용됩니다. 그러나 이 태그는 스크린 리더 등에서는 강조의 의미를 전달하지 않습니다.
<strong> 태그는 굵은 텍스트를 사용하여 강조하는 데 사용되며, 시각적인 강조뿐만 아니라 의미적으로 중요한 텍스트임을 나타냅니다. 이는 스크린 리더 등에서도 의미적 중요성을 전달합니다. 예를 들어 검색 엔진은 <strong> 태그 내의 텍스트를 더 중요하게 간주할 수 있습니다.
5. 목록 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>목록태그</title>
</head>
<body>
<h2>목록 태그 </h2>
<!-- ul>li*3 -->
<ul>
<li>김사과</li>
<li>오렌지</li>
<li>반하나</li>
</ul>
<hr>
<ol>
<li>김사과</li>
<li>오렌지</li>
<li>반하나</li>
</ol>
<hr>
<!-- dl>dt+dd*3 -->
<dl>
<dt>곽정우</dt>
<dd>김사과</dd>
<dd>오렌지</dd>
<dd>반하나</dd>
</dl>
</body>
</html>
6. 이미지 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지태그</title>
</head>
<body>
<h2>이미지 태그</h2>
<img src="https://tcpschool.com/img/logo.png" alt="TCP스쿨 로고">
<img src="C:\KJW\KDT3\Web\HTML\Day1\pic1.png" alt="이미지1"> <!-- 사용하지 않음-->
<hr>
<img src="./pic2.png" alt="이미지2">
<img src="./img/pic3.png" alt="이미지3">
<img src="./../pic4.png" alt="이미지4">
<img src="./../images/pic5.png" alt="이미지5">
</body>
</html>
