[HTML/CSS] 텍스트 관련 태그들 모음집.zip

안녕하세요. 임성장의 성장일기입니다.

 

오늘은 통계적으로 자주 사용되는 HTML 태그 중에서 텍스트와 관련 태그들을 설명하려고 합니다.

기본적으로 알아두시면 좋은 것들이며, 그 외 태그들은 상황에 맞게 검색을 통해 알아가시는 것을 추천드립니다.

 

---

<h1~6>

이 태그는 "제목"을 나타내며 페이지의 기본 제목을 정의하는 데 사용됩니다.

일반적으로 페이지당 한 번 사용되며 페이지의 주요 주제를 설명해야 합니다.

h 뒤의 숫자가 작아질 수록 글자 크기가 작아집니다.

웬만해서는 h 태그를 순서대로 사용해야 합니다.

 

<h1>Heading Example</h1>

 

Heading Example

 

 

<p>

이 태그는 "단락"을 나타내며 텍스트 단락을 정의하는 데 사용됩니다.

이는 블록 수준 요소이므로 상위 요소의 전체 너비를 차지합니다.

 

<p>This is a paragraph of text.</p>
<p>Another paragraph of text.</p>

 

This is a paragraph of text.

Another paragraph of text.

 

 

<br>

이 태그는 "줄 바꿈"을 나타내며 줄 바꿈을 삽입하는 데 사용됩니다.

<p>와 달리 인라인 수준 요소이라서 상위 요소의 전체 너비를 차지하지 않습니다.

 

This is a line of text with a <br> line break in the middle.

 

This is a line of text with a
line break in the middle.

 

 

<i>

이 태그는 "기울임꼴" 및 이탤릭체 스타일로 표시되어야 하는 텍스트를 정의하는 데 사용됩니다.

시맨틱 태그로, 단순히 스타일을 지정하는 것이 아니라 포함된 콘텐츠에 대한 의미를 전달합니다.

 

<i>This text is italicized.</i>

 

This text is italicized.

 

 

<span>

이 태그는 시맨틱 태그이기도 하며 인라인을 그룹화하는 데 사용됩니다.

스타일링 목적을 위해 함께 레벨 요소.

고유한 의미가 없으며 텍스트의 특정 부분에 스타일을 적용하기 위해 CSS와 함께 자주 사용됩니다.

 

<span>This text is within a span tag.</span>

 

This text is within a span tag.

 

 

<ul>

이 태그는 "정렬되지 않은 목록"을 나타내며 다음과 같은 용도로 사용됩니다.

순서가 중요하지 않은 항목 목록을 정의합니다.

일반적으로 <li>와 함께 사용되어 목록의 개별 항목을 정의합니다.

 

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

 

• Item 1
• Item 2
• Item 3

 

 

<li>

이 태그는 "목록 항목"을 나타내며 주문된 항목 내에서 개별 항목을 정의하는 데 사용됩니다. 또는 정렬되지 않은 목록(<ol>)

블록 수준 요소이며 태그 안에 중첩되어야 합니다.

 

 

<strong>

이 태그는 시맨틱 태그이며 다음과 같은 텍스트를 정의하는 데 사용됩니다.

굵은 글꼴 스타일로 표시됩니다.

<b>와 비슷하지만 <strong>은 의미까지 강조되는 굵은 글씨입니다.

 

<strong>This text is bold.</strong>

 

This text is bold.

 

*블록 요소와 인라인 요소

 쉽게 말하자면 블록 요소는 작성된 그 줄 전체를 사용하는 것이고,

인라인 요소는 작성된 그 줄에서 태그에 할당된 만큼을 사용하는 것이다.