HTML 텍스트 스타일링 태그

HTML에서는 텍스트의 스타일과 의미를 명확하게 전달하기 위해 다양한 태그를 제공합니다.

웹 페이지를 구성할 때 텍스트의 가독성과 표현력을 높이는 텍스트 스타일링을 할 때 주로 사용하는 HTML 태그들을 알아보겠습니다.

 

1. strong 태그: 강한 강조

strong 태그는 텍스트를 강하게 강조할 때 사용됩니다. 이 태그로 감싸진 텍스트는 대부분의 브라우저에서 굵게 표시되지만, 시맨틱적으로 중요한 내용을 강조한다는 의미를 가집니다. 예를 들어, 경고 메시지나 중요한 사실을 표현할 때 사용합니다.

<p>이 제품은 <strong>절대 먹어서는 안 됩니다.</strong></p>

이 태그는 아래와 같이 표현됩니다. 더 굵게 보이는 텍스트를 보세요

이 제품은 절대 먹어서는 안 됩니다.

 

이 예제에서 strong 태그는 "절대 먹어서는 안 됩니다."라는 텍스트를 강조하여 사용자에게 중요한 경고임을 알립니다.

 

2. b 태그: 굵은 글씨체

b 태그는 텍스트를 굵게 표시하는 데 사용됩니다. strong 태그와 달리 b 태그는 시맨틱한 의미 없이 단순히 시각적인 효과만을 제공합니다. 중요한 정보를 강조하기보다는, 단지 텍스트의 스타일을 바꾸는 용도로 사용됩니다.

<p>오늘의 특별 메뉴: <b>스테이크</b>와 <b>와인</b></p>

이 태그는 아래와 같이 표현됩니다. 더 굵게 보이는 텍스트를 보세요

오늘의 특별 메뉴: 스테이크와 와인

위 예제에서 b 태그는 "스테이크"와 "와인"을 굵게 표시하여 메뉴의 주요 항목임을 강조합니다.

 

3. i 태그: 이탤릭체

i 태그는 텍스트를 이탤릭체(기울임꼴)로 표시합니다. 이탤릭체는 주로 외래어, 작품명, 생각이나 대화를 표현할 때 사용됩니다. 이탈리아어에서 유래한 단어 "이탤릭"처럼, 외국어를 명확하게 구분하거나 강조할 때 사용합니다.

<p>로마의 휴일은 <i>로마의 휴일</i>이라는 제목으로 유명합니다.</p>

이 태그는 아래와 같이 표현됩니다. 기울어져 보이는 텍스트를 보세요

로마의 휴일은 로마의 휴일이라는 제목으로 유명합니다.

 

4. u 태그: 밑줄

u 태그는 텍스트에 밑줄을 그을 때 사용됩니다. 과거에는 텍스트를 강조하기 위해 자주 사용되었으나, 현재는 링크와 혼동을 피하기 위해 신중하게 사용해야 합니다. 주로 링크가 아닌 텍스트에 밑줄이 필요할 때 사용합니다.

<p>중요한 사항은 <u>미리 확인</u>하십시오.</p>

이 태그는 아래와 같이 표현됩니다. 밑줄이 그어진 텍스트를 보세요

중요한 사항은 미리 확인하십시오.

 

5. small 태그: 작은 텍스트

small 태그는 텍스트를 일반 텍스트보다 작게 표시합니다. 이 태그는 주로 법적 고지사항, 저작권 정보, 부가적인 설명 등을 작게 표현할 때 사용됩니다.

<p>© 2024 fathory. <small>all rights reserved.</small></p>

© 2024 fathory. all rights reserved.

 

6. sup 태그: 위 첨자

sup 태그는 위 첨자(superscript)를 나타내며, 텍스트를 다른 텍스트보다 위에 작은 크기로 표시합니다. 주로 수학 공식, 화학 기호, 또는 각주 번호 등을 표현할 때 사용됩니다.

<p>E = mc<sup>2</sup></p>

E = mc²

예시 처럼에서 sup 태그는 공식을 표현할 때 유용합니다.

7. sub 태그: 아래 첨자

sub 태그는 아래 첨자(subscript)를 나타내며, 텍스트를 다른 텍스트보다 아래에 작은 크기로 표시합니다. 화학식, 수학 지수, 또는 발음 기호 등을 표현할 때 자주 사용됩니다.

<p>H<sub>2</sub>O</p>

H₂O

예시 처럼에서 sub 태그는 화학식같은 작게 표시해야하는 숫자를 보여줄 수 있습니다.

8. mark 태그: 강조된 텍스트

mark 태그는 텍스트를 하이라이트하는 데 사용됩니다. 주로 검색 결과에서 키워드를 강조하거나, 중요한 정보나 최신 변경사항을 강조할 때 유용합니다. 브라우저는 이 태그로 감싸진 텍스트를 기본적으로 노란색 배경으로 표시합니다.

<p>이번 달 할인 제품은 <mark>50% 할인</mark>입니다!</p>

이번 달 할인 제품은 50% 할인입니다!

이 예제에서 mark 태그는 "50% 할인"이라는 텍스트를 강조하여 사용자에게 눈에 띄도록 합니다.

9. del 태그: 삭제된 텍스트

del 태그는 삭제된 텍스트를 표시하며, 취소선(strikethrough)으로 나타납니다. 이 태그는 텍스트 수정 내역을 표시하거나, 사용하지 않기로 한 내용을 시각적으로 보여줄 때 사용됩니다.

<p>원래 가격은 <del>100,000원</del>이었습니다.</p>

취소선이 그어진 텍스트를 확인해보세요

원래 가격은 100,000원이었습니다.

10. ins 태그: 삽입된 텍스트

ins 태그는 문서에 새로 삽입된 텍스트를 나타내며, 밑줄로 표시됩니다. 주로 문서의 변경사항을 명확히 하기 위해 사용됩니다.

<p>현재 가격은 <ins>80,000원</ins>입니다.</p>

현재 가격은 80,000원입니다.

위 예제에서 ins 태그는 새로 삽입된 가격을 밑줄로 강조하여 변경된 내용을 강조합니다.
u 태그와 달리 ins 태그는 삽입된 텍스트라는 시맨틱한 의미를 가집니다. 이 태그는 텍스트가 이전 버전의 문서에 없었고, 새롭게 추가되었음을 나타냅니다

결론

오늘 소개한 HTML 태그들은 텍스트의 의미와 스타일을 명확히 표현하는 데 도움을 주는 태그들입니다. 각 태그는 고유한 목적과 기능을 가지고 있습니다.

 

wysiwyg에디터를 사용했을 때 텍스트 스타일링은 이와 같은 태그로 변환되어 저장됩니다.
"이렇게 나오는구나" 대신에, 이 태그는 이렇게 변환되겠구나! 하고 생각하며 쓰시면 더 좋겠습니다.

오늘 소개하지는 않았지만 여러가지 태그를 조합해서 쓸 수도 있습니다. 예를들면 b, strong, i 태그를 조합하여 강조된 이탤릭체를 만들 수도 있습니다. 이와같이 여러가지 태그를 조합해서 적절한 강조 텍스트를 만들어보세요