<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_다양한 태그들</title>
</head>
<body>
<mark>제목을 표기하는 태그 h1~h6</mark>
<!-- h$*6 주석 처리는 ctrl + /-->
<h1>대제목</h1>
<h2>부제목</h2>
<h3>소제목</h3>
<h4>세제목</h4>
<h5>상세제목</h5>
<h6>세세제목</h6>
<mark>단락을 표기하는 p태그:paragraph</mark>
<p>Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Qui facere, asperiores voluptate consectetur quos neque voluptas laborum, deleniti explicabo temporibus sequi adipisci molestias facilis delectus. Inventore maxime nam non aut odio vitae. Iste itaque, earum ea quaerat adipisci nesciunt laboriosam corporis quidem laborum nam et modi in, error, id reprehenderit.</p>
<mark>의미를 강조하는 태그들</mark>
<p>스타일로만 <b>의미 bold</b>를 <i>강조 italic</i> 하는 태그들 </p>
<p>브라우저가 인식할 수 있도록 <strong>의미론적</strong> sementic 으로도 <em>강조 emphasize</em>하는 태그들은 스크린 리더기도 강조해서 읽어주기 때문에 웹 접근성에 부합한다.</p>
<mark>윗첨자, 아래첨자를 표기하는 태그들</mark><br>
2<sup>3</sup>글자 <br>
경복궁<sub>종로에 위치</sub><br>
<mark>이미지를 보여주는 태그</mark><br>
<img src="https://ssl.pstatic.net/melona/libs/1437/1437105/2d13a730c4478c8581fd_20230320111016277.png" alt="댕댕이 슬개골 관리" width="" title="나의 댕댕이를 위한다면" height="100">
<img src="https://ssl.pstatic.net/melona/libs/1437/1437105/2d13a730c4478c8581fd_20230320111016277.pn" alt="댕댕이 슬개골 관리" width="300">
<p>alt:alternate:또다른, 대체하는</p>
<img src="https://ssl.pstatic.net/melona/libs/1437/1437105/2d13a730c4478c8581fd_20230320111016277.png" alt="댕댕이 슬개골 관리" width="100%" title="나의 댕댕이를 위한다면" height="">
<mark>자동으로 줄바꿈되는 태그는 블럭요소 bolck, 자동으로 줄바꿈되지 않는 태그는 인라인 블럭요소 inline</mark>
<h2>블럭요소인 태그들</h2>
<p>h1~h6</p>
<p>p태그</p>
<h2>인라인 블럭요소인 태그들</h2>
<p>img 태그</p>
<p>sup태그, sub태그, strong태그, em태그, b태그, i태그</p>
<p>mark태그</p>
<br>
<br>
</body>
</html>
'HTML > code' 카테고리의 다른 글
| 링크를 걸어 컨텐츠로 이동하기 (0) | 2023.03.24 |
|---|---|
| 배운 태그를 이용한 각오 (0) | 2023.03.24 |
| 목록을 표시하는 li태그 (0) | 2023.03.24 |
| 태그 복습 (0) | 2023.03.24 |
| html (0) | 2023.03.22 |