[컴퓨터언어] 텍스트의 일부를 처리하는 태그 16가지 배우기 (HTML공부하기!) - 5

HTML을 배우시고 싶으신가요? 그렇다면, 태그에 대한 공부는 필수입니다. 그중에서도 텍스트 일부를 처리하는 태그 16가지에 대해서 알아가시는 게 어떨까요? 이 글을 통해 텍스트의 일부를 처리하는 태그에 대해서 정확히 알 수 있으실거라 생각합니다. 꽤 많은 태그들이지만 하나하나 천천히 학습하시면 좋겠습니다.

 

[목차]
1. 주요내용
2. 텍스트의 일부를 처리하는 태그란?
3. 텍스트의 일부를 처리하는 태그 16가지
4. 마무리

 

---

◆ 주요 내용

순서	태그	설명
1	<strong>	글자를 굵게 표시한다.
2	<b>
3	<em>	글자를 기울여 표시한다.
4	<i>
5	<q>	인용문구를 넣는다.
6	<mark>	형관펜 표시를 한다.(배경색을 넣는다.)
7	<span>	줄바꿈 없이 영역을 묶는다.
8	<s>	취소선을 긋는다.
9	<u>	밑줄을 긋는다.
10	<sub>	아래 첨자를 표시한다.
11	<sup>	위첨자를 표시한다.
12	<small>	부가정보를 표시한다.
13	<ruby>	동아시아글자의 주석을 표시한다.
14	<abbr>	어떤 풀네임의 약자를 표시한다.
15	<cite>	웹문서, 포스팅의 참고내용을 표시한다.
16	<kbd>	사용자 입력내용을 표시한다.

---

◆ 텍스트의 일부를 처리하는 태그란?

 

우선, 텍스트의 일부를 처리하는 태그에 대해 아셔야 하는데요, 앞서 포스팅한 텍스트를 하나로 묶어서 처리하는 태그를 보셨다면 쉽게 유추할 수 있습니다.

단어 그대로 줄 전체에 반영하는 태그가 아니라 줄의 일부를 처리한다는 의미입니다.

 

블로그에 포스팅을 할 때 글자의 일부를 굵게 만든다던지, 색을 바꾼다던지, 밑줄을 친다던지 하는 작업이 모두 텍스트의 일부를 처리하는 태그입니다.

줄 전체에 적용되지 않고 줄의 일부에 적용되기 때문에, 글자, 단어 하나에만 적용하며, 우리는 태그라고 인식하지는 않았을 테지만 가장 보편화된 익숙한 태그라고 보시면 됩니다.

 

 

---

◆ 텍스트의 일부를 처리하는 태그 16가지

 

1. <strong> 태그

글을 굵게 표시할 때 사용하는 태그입니다.

여기서 좀 더 알아야 하는 점으로는, HTML에서는 글을 굵게 표시하고 싶을 때 사용하는 태그가 1개만 있다는 것은 아니라는 점입니다. <strong> 태그도 있지만, <b> 태그도 있습니다. 둘 다 글을 굵게 표시하는 태그입니다.

하지만, 지금은 <strong> 태그만 중점적으로 설명하고, 뒤에 <b> 태그를 설명하면서 둘의 차이점에 대해 설명드리겠습니다.

 

<strong> 태그는 중요 내용을 강조할 때 사용하는 태그입니다. 주로 경고나 주의사항이 있을 때 태그를 사용해서 텍스트를 표시하며, 화면 낭독기를 위한 태그이기도 합니다. 화면 낭독기가 화면을 읽을 때, <strong> 태그의 텍스트는 '중요'라고 말을 한 후 뒤의 굵게 표시된  텍스트를 읽습니다.

 

2. <b> 태그

글을 굵게 표시할 때 사용하는 태그입니다.

<strong>과는 결과는 똑같지만, 사용하는 목적이 다릅니다. 위에서 설명드렸듯이 <strong>은 경고나 주의사항이 있을 때 화면낭독기에 알려주는 태그였습니다. 하지만, <b> 태그는 단순히 키워드를 표시하고 싶을 때 사용하는 태그입니다. <strong> 태그보다는 조금 더 가벼운 목적으로 사용하는 태그입니다.

우리가 글을 쓰면서 단순하게 이건 다른 단어보다 중요하다고 생각하거나 눈에 띄게 강조하고 싶을 때 글자 속성을 '굵게'로 바꾸는데 이때 <b> 태그가 사용됩니다.

 

3. <em> 태그

글을 기울여서 표시할 때 사용하는 태그입니다.

<strong>과 <b> 태그처럼 HTML에는 글을 기울여서 표시하고 싶을 때 사용하는 태그는 하나가 아닙니다. <em> 태그도 있지만, <i> 태그도 있습니다. 마찬가지로 지금은 <em> 태그에 대해 중점적으로 설명드리겠습니다.

 

글을 쓰다가 텍스트를 기울이는 이유로는 '1. 특정 부분을 강조하고 싶을 때'와 '2. 생각이나, 기술적 용어, 부가설명을 하고 싶을 때' 이렇게 2가지로 나타낼 수 있습니다. 전자는 중요 내용을 강조할 때, 후자는 단순히 구분을 할 때 사용합니다.

<em>은 이 전자에 해당합니다.

 

4. <i> 태그

글을 기울여서 표시할 때 사용하는 태그입니다.

앞서 설명드린 '글을 쓰다가 텍스트를 기울이는 이유'의 두 번째에 해당합니다. 단순히 필자의 생각이나, 기술적 용어, 다른 언어의 관용구들을 넣을 때 사용합니다.

 

5. <q> 태그

글에서 인용을 표시할 때 사용하는 태그입니다.

텍스트를 하나로 묶어서 처리하는 태그의 'blockquote'와 사용목적이 같습니다.

하지만 늘 그렇듯이 똑같은 목적의 똑같은 결과를 내는 태그는 존재하지 않습니다. 당연히 두 태그 사이에는 차이점이 있습니다. 이는 <q> 태그는 줄의 일부를 처리하는 태그이기 때문에줄 바꿈을 해주지 않고, 줄 사이에 텍스트로서 삽입할 수 있다는 점이지만, <blockquote> 태그는 줄의 전체를 처리하는 때 그이기 때문에 줄 바꿈이 무조건 생기고, 심지어 들여 쓰기까지 적용된다는 점입니다.

<q> 태그는 자동으로 인용구에 " "(따옴표)가 붙어 인용구인지를 구분해주는 반면, <blockquote> 태그는 자동으로 들여 쓰기가 되어 인용구인지 구분해주는 차이점도 있습니다.

 

6. <mark> 태그

형광펜으로 표시할 때 사용하는 태그입니다.

티스토리 에디터에서는 '배경색'이라고 보시면 됩니다. 이렇게 내용을 강조할 때 사용합니다. 아직 포스팅을 하지는 않았지만, HTML의 영원한 짝꿍 CSS를 통해 배경색을 바꿀 수 있습니다. 물론, 티스토리에는 여러 가지 색을 제공해주기 때문에 우리가 직접 HTML을 수정하는 일은 많지 않을 것입니다.

<q> 태그부터 소개해드리는 태그들은 쌍이 없는 태그이기 때문에 <strong>과 <b>, <em>과 <i> 태그와 같이 비슷한 기능의 태그는 없을 것입니다.

 

7. <span> 태그

줄 바꿈 없이 영역을 묶어줄 때 사용하는 태그입니다.

정말 묶는데만 진심인 태그라서 HTML 소스코드를 작성할 때 특정 단어를 <span>으로 묶어도 아무런 의미가 없습니다. 그냥 코드를 실행하는데 걸리는 시간만 늘릴 뿐이죠.

<span>으로 텍스트를 묶고 그 안에 텍스트 스타일을 지정하는 작업을 할 때 주로 사용합니다.

 

7번까지는 그래도 설명이 어느 정도 필요하여 태그들에 대해서 길게 설명을 드렸지만, 8번부터는 그렇게 큰 설명을 하지 않아도 7번까지의 설명을 읽으면서 얻으신 기초지식으로 이해 할수 있을 겁니다.

 

8. <s> 태그

글꼴에 취소선을 그어줄 때 사용하는 태그입니다.

리딩 컴퍼니 좋아요와 같이 사용합니다.

 

9. <u> 태그

밑줄을 그어줄 때 사용하는 태그입니다.

리딩 컴퍼니 좋아요와 같이 사용합니다.

 

10. <sub> 태그

아래 첨자를 표시하고 싶을 때 사용하는 태그입니다.

CO₂에서 '2'에 해당하는 부분입니다.

 

11. <sup> 태그

<sub> 태그와 반대로 위 첨자를 표시하고 싶을 때 사용하는 태그입니다.

E=mc² 에서 '2'에 해당하는 부분입니다.

 

12. <small> 태그

부가정보를 덧붙여줄 때 사용하는 태그입니다.

 

'휴대폰 75000원 판매!'

(할인률 20% 적용)

 

에서 (할인율 20% 적용)에 해당하는 부분입니다.

글자 크기를 줄여서 부가정보처럼 보이게 할 수도 있지만, HTML로 표현할 경우 컴퓨터가 이해하기 쉽기 때문에 검색 로직이 조금 더 쉽게 이해할 수 있습니다. (물론, 굉장히 스마트한 검색 로직일 경우 글자 크기만 줄여도 부가정보로 인식할 수도 있습니다.)

 

13. <ruby> 태그

동아시아 글자를 표시할 때 주석을 함께 사용하는 태그입니다.

일본어의 경우에는 글자 기호와 발음기호가 다른 것으로 알고 있습니다. 이때 글자 기호를 <ruby> 태그에 감싸고 발음기호를 <rt> 태그에 감싸면 글자 기호에 주석으로 발음기호가 작성됩니다. 자세한 건 [마무리] 단계를 가보시면 됩니다.

 

14. <abbr> 태그

약자를 표시할 때 사용합니다.

HTML은 Hypertext Markup Language의 약자입니다. <abbr>을 이용하여 HTML을 표현하면 아래와 같습니다.

 

HTML

 

15. <cite> 태그

웹 문서와 포스팅의 참고 내용을 표시할 때 사용합니다.

코드를 적용하면 아래와 같습니다. 이때 정주영 부분이 <cite> 태그를 씌운 부분입니다. 솔직히 많이 쓰는 것 같지는 않습니다.

 

"해보긴 해봤어?" -정주영

 

16. <kbd> 태그

사용자 입력 내용을 표시할 때 사용합니다.

사용자 입력이란 키보드 입력이나 음성 명령 같은 것을 말합니다. 사이트에 들어가서 F5키를 누르면 사이트가 재실행되는 상황을 설명할 때 이용할 수 있습니다. 이것도 굳이 써야 하나 싶기는 합니다.

 

사이트에 들어가서 F5를 누르면 결과를 보실 수 있습니다. 

 

---

◆ 마무리

 

태그가 그리 어려운 것은 아니고 실제로 플랫폼에 기생해서 글을 쓰는 우리 같은 일반인은 미리 잘 짜인 에디터를 이용하여 글 쓰는 환경이 더 많습니다. 그렇기에 일부 기능을 제외하고는 크게 중요하지 않습니다. 특히, 티스토리를 블로그를 운영하실 계획이 있으신 분이라면 티스토리 에디터에 없는 태그만 숙지해두시면 될 것 같습니다.

 

마무리로는 16개의 태그를 한 번 쫙 써보려고 합니다. 쓴 이후에는 사진으로 결과를 올려드릴 테니, 코드와 사진을 비교하시면서 기억을 더듬어보시면 복습의 효과를 가져오실 수 있을 겁니다.

다시 한번 말하지만, 모든 것을 외울 필요는 없습니다. 필요할 때 검색해서 다시 찾아볼 수도 있고 웬만한 건 에디터에 있으므로 에디터에 없는 기능 중 주로 사용할 것 같은 태그만 기억해놓으시면 됩니다. 그 이외에는 그냥 이런 게 있구나 하고 넘어가시면 될 것 같습니다.

 

길게 쓸 생각은 없었는데 모든 태그를 넣으려다 보니 길어졌습니다.

이점 감안하고 봐주시면 감사하겠습니다. ^^

 

◆ 예시 소스코드

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>리딩컴퍼니 HTML공부하기! - 5</title>
</head>
<body>
    <p><strong>마무리</strong>로는 <b>16개의 코드</b>를 한 번 쫙 <em>써보려고</em> 합니다.<br>
    
    쓴 이후에는 <i>사진</i>으로 결과를 올려드릴텐, 코드와 사진을 비교하시면서<br>
    
    <q>기억을 더듬어보시면 복습의 효과를 가져오실 수 있을겁니다.</q><br>
    
    <mark>다시한번 말하지만</mark>, <span style="color:red;">모든것을 외울 필요는 <s>없습니다.</s></span><br>
    
    <u>필요할 때</u> 검색해서 다시 찾아볼 수도 있고 웬만한건 에디터에 있기 때문입니다.<small>(진짜 있습니다!)</small><br>
    
    에디터<abbr title = "Editor">Editor</abbr>에 없는 기능 중 주로 사용할 것 같은 태그만 기억해두시기 바랍니다.<br>
    
    그 외에에는 <cite>그냥 이런게 있구나</cite> 하고 넘어가시면 될 것 같습니다. </p>
    
    <p>이산화탄소(CO<sub>2</sub>)</p>
    
    <p>에너지방정식(E=mc<sup>2</sup></p>
    
    <P>한국어를 한 번 써보도록 하겠습니다. <ruby>안녕하세요<rt>안녕하십니까</rt></ruby></P>
    
    <p>다시 보고 싶으시면 <kbd>F5</kbd>를 누르세요.</p>
</body>
</html>

 

 

▶ 웹 브라우저에서 표시하면 다음과 같았다.