HTML 문자열 서식(Text Formatting) 지정 방식

문자열 서식(Text Formatting)
HTML은 텍스트(text)에 다양한 효과를 주기 위해 여러 태그(tag)를 제공하고 있으며, 이러한 것을 서식이라 한다.

기본 예제

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>HTML Text Formatting</title>
</head>

<body>

<p><b>강조 효과 텍스트</b></p>
<p><i>이탤릭체 텍스트</i></p>
<p>이런 모양<sub> 을 재미있게</sub> 해볼 수 있는것도 <sup>좋을것이다.</sup></p>

</body>
</html>

HTML 서식 요소

html은 다양한 서식을 사용하여 텍스트에 특별한 요소를 정의할 수 있다. 예를 들어 html에 <b>, <i> 과 같이 출력 서식을 굵게 하거나 기울림 꼴 텍스트를 문자열에 부여할 수 있다.

서식 요소는 특수한 유형을 표시하도록 설계된 것이다. 아래 내용을 참고바란다.

  • <b> – 굵은 텍스트 효과
  • <strong> – 굵은 중요 텍스트 효과
  • <i> – 기울임 꼴 텍스트 효과
  • <em> – 강조된 기울림 꼴 텍스트 효과
  • <mark> – 하이라이팅 텍스트 효과
  • <small> – 작은 텍스트 효과
  • <del> – 삭제 된 텍스트 효과
  • <ins> – 삽입 된 텍스트 효과
  • <sub> – 아래첨자 텍스트 효과
  • <sup> – 위첨자 텍스트 효과

HTML <b>, <strong> 태그

html <b>, <strong> 요소는 강조하고 싶거나 중요하다고 판단되는 문자 및 문자열을 굵게 표현하고 싶을때 사용되는 태그이다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>b, strong 태그</title>
</head>

<body>

<h>b 태그와 strong 태그의 차이점</h>
<p><b>b태그를 사용하여 강조</b></p>
<p><strong>strong 태그를 사용하여 강조</strong></p>

</body>
</html>

<b> 태그는 단순히 화면의 텍스트를 굵게 표현해주는 역할을 하지만, <strong> 태그의 경우 텍스트를 굵게 표현해줄 뿐만 아니라 그 내용이 중요하다는 의미를 함께 포함하고 있다.

HTML <i>, <em> 태그

html 문서에서 이탤릭체를 표현하고 싶다면 <i> 태그(italic text)나 <em> 태그(emphasized text)를 사용해야 된다. <i> 태그는 기울림 꼴 텍스트를 정의한다. <em> 태그는 기울림 강조된 꼴 텍스트를 정의한다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>i, em 태그</title>
</head>

<body>

<h>i 태그와 em 태그의 차이점</h>
<p><i>i 태그 사용 예제</i></p>
<p><em>em 태그 사용하여 강조 예제</em></p>

</body>
</html>

<i> 태그는 단순히 화면의 텍스트를 이탤릭체로 표현해 준다. 하지만 <em> 태그는 텍스트를 이탤릭체로 변환해줄 뿐만 아니라 그 내용이 중요하다는 의미도 함께 표함되어 있다.

※검색엔진 포털사이트는<strong>, <em> 태그를 사용하여 강조된 텍스트를 더 중요하게 인식한다.

HTML <small> 태그

html <small> 태그는 더 작은 텍스트를 표현하기 위해서 정의된다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>Small 태그</title>
</head>

<body>

<h2>HTML <small>Small</small> 서식</h2>

</body>
</html>

HTML <mark> 태그

html <mark> 태그는 텍스트에 하이라이팅(highlighting) 효과를 적용하기 위해서 사용된다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>mark 태그</title>
</head>

<body>

<h2>HTML <mark>Marked</mark> 서식</h2>

</body>
</html>

HTML <del> 태그

<del> 태그(delete)는 텍스트 중앙에 가로줄을 만들어 마치 텍스트를 지운 것과 같은 효과를 보여준다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>del 태그</title>
</head>

<body>

<p>내가 좋아하는 색은 <del>파란색</del>, 빨강색 이다.</p>

</body>
</html>

HTML <ins> 태그

<ins> 태그(insert)는 텍스트 밑에 가로줄을 만들어 마치 빈칸에 텍스트를 삽입한 것과 같은 효과를 보여준다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>ins 태그</title>
</head>

<body>

<p>내가 좋아하는 색은 <ins>빨간색</ins> 이다.</p>

</body>
</html>

HTML <sub> 태그

HTML <sub> 태그(subscript)는 아래 첨자 텍스트를 정의할때 사용된다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>sub 태그</title>
</head>

<body>

<p>물을 나타내는 화학식은? H<sub>2</sub>O</p>

</body>
</html>

HTML <sup> 태그

HTML sup> 태그(superscript)는 위 첨자 텍스트를 정의할때 사용된다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>sup 태그</title>
</head>

<body>

<p>X<sup>5</sup> + Y<sup>1</sup> = H</p>

</body>
</html>

HTML 텍스트 서식 태그 리스트

태그내용
<b>굵은 텍스트 효과
<em>강조된 기울림 꼴 텍스트 효과
<i>기울임 꼴 텍스트 효과
<small> 작은 텍스트 효과
<strong> 굵은 중요 텍스트 효과
<sub>아래첨자 텍스트 효과
<sup>위첨자 텍스트 효과
<ins>삽입 된 텍스트 효과
<del>삭제 된 텍스트 효과
<mark>하이라이팅 텍스트 효과

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다