html 기본 문서 만들기 9 - 텍스트 꾸미기

네 안녕하세요, 이번 포스팅에서는 텍스트를 꾸미는 방법에 대하여 알아보도록 하겠습니다.

우리가 글을 쓰다 보면 글자를 여러 방법으로 강조를 하게 됩니다.

그리고 그 글자는 문단이나 본문 전체에서 중요한 역할을 하게 됩니다.

그래서 이번 포스팅에서는 그러한 방법이 어떤 것들이 있는지 알아보도록 하겠습니다.

1. 텍스트 꾸미기

우리가 글을 작성할 때, 혹은 글을 읽다가 중요한 부분을 보게 되면 밑줄을 긋거나 그 외 여러 가지 강조표현을 합니다.

html 태그 역시 여러가지 강조 표현이 가능합니다.

그렇게 하면 글이 좀 더 간결히 요약이 될 수 있어서 가독성이 매우 높아집니다.

아래의 표는 그러한 방법들에 대한 태그를 표로 나타낸 것입니다.

태그	뜻
<b></b>	글자를 진하게 표현
<strong></strong>	글자에 중요 표시
<em></em>	글자 강조
<i></i>	글자를 이텔릭체로 출력
<small></small>	글자를 한 단계 작게 출력
<del></del>	글자 삭제
<ins></ins>	글자 추가
<sup></sup>	윗 첨자
<sub></sub>	아래 첨자
<mark></mark>	하이라이팅

그럼 이제 이들을 이용하여 예제 코드를 작성해 보도록 하겠습니다.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>텍스트 꾸미기</title>
</head>
<body>
<h3>텍스트 꾸미기</h3>
<hr>
<p>
<b>진하게</b><br>
<strong>중요한</strong><br>
<em>강조</em><br>
<i>이텔릭으로 강조</i><br>
<b><i>진하게 이텔릭으로 강조</i></b><br>
보통문자 <small>한 단계 작은 문자</small><br>
<del>삭제</del><br>
<ins>추가</ins><br>
보통문자의 <sup>윗첨자</sup><br>
보통문자의 <sub>아래첨자</sub><br>
<mark>하이라이팅</mark><br>
</p>
</body>
</html>

각각의 코드에 표현에 대한 설명을 적었습니다.

이렇게 하고서 css 코드를 이용을 하면 글자의 색깔이나 크기도 제어가 가능합니다.

자세한 것들은 css에 대하여 설명을 할 때 다루도록 하겠습니다.

그럼 결과 화면을 보도록 하겠습니다.

이런 식으로 여러 가지 주석 글과 같은 표현도 할 수 있고요, 형광펜으로 마킹을 한 것과 같은 표현도 가능합니다.

정말 기능이 다양하죠?
이렇게 하면 필자가 하고자 하는 핵심 내용들을 더 효과적으로 전달할 수 있게 됩니다,

여기까지 텍스트를 꾸미는 방법에 대하여 알아보았습니다.

다음 포스팅에서는 블록 태그와 인라인 태그를 이용하는 방법에 대하여 알아보도록 하겠습니다.

긴 글 읽어주신 독자분들께 진심으로 감사합니다~

저작자표시 비영리 변경금지

'html, css, 자바스크립트 > html' 카테고리의 다른 글

html 고급 문서 만들기 1 - img 태그로 이미지 삽입하기 (0)	2023.03.01
html 기본 문서 만들기 10 - 블록 태그와 인라인 태그 이용하기 (0)	2023.03.01
html 기본 문서 만들기 8 - pre 태그를 이용하여 개발자의 포맷 그대로 출력하기 (0)	2023.03.01
html 기본 문서 만들기 7 - 특수한 문자, 기호, 심벌 입력하기 (0)	2023.03.01
html 기본 문서 만들기 6 - br 태그 이용하여 새로운 줄로 넘어가기(개행하기) (0)	2023.03.01

개발러 L의 뻔fun한 코딩

html 기본 문서 만들기 9 - 텍스트 꾸미기