728x90
반응형
의미에 맞는 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- 왜 기능을 두가지로 만들었을까 -->
<!-- 검색엔진에서의 해석방향 -->
<p style="font-weight: bold">볼드체</p>
<p><b>볼드체</b>입니다.</p>
<p><strong>강조하는볼드체</strong>입니다.</p>
<!-- em은 강조하는 이탤릭체라고 해석됨 -->
<p style="font-style: italic">이탤릭체</p>
<p><i>이탤릭체</i>입니다.</p>
<p><em>이탤릭입니다.</em></p>
<p>텍스트가<small>작게</small>보입니다.</p>
<p>집에 오는길에<mark>우유</mark>사오렴</p>
<p>제품 할인 중<del>3만원</del>2만 8천원</p>
<p style="text-decoration: line-through">3만원</p>
<p><ins>냐옹</ins></p>
<p style="text-decoration: underline">냐옹</p>
<p>X<sub>2</sub></p>
<p>X<sup>2</sup></p>
<blockquote cite="https://google.com">
긴문장을 인용하고 싶습니다.
</blockquote>
<q>짧은 인용</q>
<abbr title="World Health Organization">WHO</abbr>
<address>대한민국 제주특별자치도 제주시 무슨동 몇번지</address>
<p><cite>절규</cite>는 뭉크가 그린 그림.</p>
<p><cite>별이</cite>는 컴퓨타 블로그를 운영 한다는 저작권 적인 내용 전달</p>
<!-- 의미없는 태그 div, span-->
<!-- 다른 태그를 담는 컨테이너의 역할 -->
<!-- 화면에 콘텐츠(태그)를 배치하기 위한 레이아웃 용도 -->
<!-- block 요소는 콘텐츠의 크기에 상관없이 한줄 전체를 차지한다. : div, h1 ~ h6, p -->
<!-- inline 요소는 콘텐츠의 크기만큼 차지한다. : span -->
<div style="background-color: blue">
div태그 입니다. 끝까지 공간을 차지하죠
</div>
<span style="background-color: green"
>span태그 입니다. 크기에 따른 공간을 차지하죠</span
>
</body>
</html>
728x90
반응형
'HTML & CSS' 카테고리의 다른 글
input요소의 주요 속성 (2) | 2023.10.12 |
---|---|
form 요소 (2) | 2023.10.12 |
목록 태그, 표 태그 (0) | 2023.10.03 |
HTML의 기본 구조, 요소, 속성 (2) | 2023.10.02 |
웹의 이해와 웹개발 라이프 사이클 (2) | 2023.10.02 |