HTML 주요 태그 (1)

<hx> 태그

<hx>

이 태그를 사용하면 텍스트가 일반적인 텍스트보다 두껍게 표시됨
h의 뒤에는 1부터 6까지의 숫자 중 하나를 입력해야 합니다. 여기에서 숫자는 제목 텍스트의 상대적인 크기를 나타내는 것으로, 텍스트는 숫자가 1일 때 가장 크고 6일 때 가장 작음

[예시]

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>제목</title>
  </head>
  <body>
    <h1>귤 농장</h1>
    <h2>귤 농장</h2>
    <h3>귤 농장</h3>
    <h4>귤 농장</h4>
    <h5>귤 농장</h5>
    <h6>귤 농장</h6>
  </body>
</html>

태그

<p>

하나의 태그는 하나의 문단을 표시하고, 문단 요소는 다른 요소와의 간격을 위해 일정한 여백을 가지게
글의 본문을 표시할 때 주로 사용하므로 텍스트 태그 중 가장 많이 사용되는 태그

[예시]

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>제목</title>
  </head>
  <body>
    <p>귤 농장입니다!</p>
  </body>
</html>

<blockquote> 태그

 <blockquote>

태그 안쪽의 텍스트가 인용구임을 나타냄
<blockquote> 태그로 표시한 텍스트는 일반적인 텍스트보다 안쪽으로 들여 써짐
<blockquote> 태그에는 선택적으로 cite라는 속성을 추가할 수 있음
- cite 속성은 해당 인용구의 출처를 입력하는 속성으로, 여기에는 주로 문구를 인용해 온 웹페이지의 주소를 입력

[예시]

<body>
  <p>p 태그는 문단을 나타낼 때 사용하는 태그입니다.</p>
  <blockquote cite="https://gyul-nongjang.tistory.com/">귤 농장 블로그입니다.</blockquote>
</body>

<hr> 태그

<hr>

화면에 수평선을 표시할 때 사용하는 태그
닫는 태그가 필요하지 않은 단일 태그
수평선은 주로 텍스트 사이사이에 삽입되어 텍스트의 내용을 구분 짓는 역할을 함
수평선은 기본적으로 얇고 긴 검정색 선의 형태를 띄고 있지만, color 속성이나 size 속성을 이용해 색상이나 두께를 조절할 수도 있음

[예시]

<body>
  <p>환영합니다.</p>
	<hr color="purple" size="10">
  <p>여기는 개발자 귤의 블로그입니다.</p>
</body>

태그

<strong>

태그는 사용자의 눈에 띄어야 하는 중요한 내용을 강조해서 표시하기 위해 사용하는 태그
이 태그 안에 포함된 텍스트는 화면 상에서 두껍게 표시됨

[예시]

<body>
  <p>환영합니다.</p>
  <p>여기는 개발자 귤의 블로그입니다.</p>
  <strong>많이 놀러와주세요!</strong>
</body>

태그

<em>

중요한 내용을 강조하기 위해 사용하는 태그
이 태그에 포함된 텍스트는 '이탤릭체'로 표시

[예시]

<body>
  <p>환영합니다.</p>
  <p>여기는 개발자 귤의 블로그입니다.</p>
  <em>많이 놀러와주세요!</em>
</body>

태그

<mark>

텍스트에 배경색을 추가해 표시하는 태그

[예시]

<body>
  <p>환영합니다.</p>
  <p>여기는 개발자 귤의 블로그입니다.</p>
  <mark>많이 놀러와주세요!</mark>
</body>

'프론트 공부' 카테고리의 다른 글

HTML의 구조 (0)	2024.07.20

🍊귤 농장🍊

HTML 주요 태그 (1)

<hx> 태그

<p> 태그

<blockquote> 태그

<hr> 태그

<strong> 태그

<em> 태그

<mark> 태그

'프론트 공부' 카테고리의 다른 글

티스토리툴바

HTML 주요 태그 (1)

<hx> 태그

<p> 태그

<blockquote> 태그

<hr> 태그

<strong> 태그

<em> 태그

<mark> 태그

'프론트 공부' 카테고리의 다른 글

관련글

티스토리툴바