[HTML] 인라인 태그 8가지

목차
1. <b> / <strong> 태그
 ① <b> 태그
  ② <strong> 태그
2. <i> / <em> 태그
 ① <i> 태그
  ② <em> 태그
3. <mark> 태그
4. <u> 태그
5. <del> / <ins> 태그
 ① <del> 태그
 ② <ins> 태그
6. 마치며

---

1. <b> / <strong> 태그

① <b> 태그

 - b => bold, 굵은 활자체, 볼드체

 - 해당 태그로 감싼 텍스트를 굵은 글씨체 (텍스트)로 표시하는 역할을 하는 태그

 - 문장에서 특정 텍스트의 주의를 끌기 위한 용도로만 사용되는 태그로

   텍스트 자체의 중요성을 강조하려는 목적이면 <strong>, <em> 등의 태그를 사용한다.

<!-- b 태그 에제 -->
<!-- <b>텍스트(콘텐츠)</b> => -->
<p>b 태그는 특정 텍스트 자체에 주의를 끌기 위해서 사용합니다.</p>
<p><b>이 문장은 b 태그를 통해 단순히 굵은 글씨로 표현된 텍스트입니다.</b></p>

b 태그는 특정 텍스트 자체에 주의를 끌기 위해서 사용합니다.

이 문장은 b 태그를 통해 단순히 굵은 글씨로 표현된 텍스트입니다.

---

② <strong> 태그

 - 해당 태그로 감싼 텍스트를 굵은 글씨체 (텍스트)로 표시하는  태그 

 - 문장 내에서 특정 텍스트의 중요성을 강조하려고 할 때 사용된다.

 - 웹 브라우저가 HTML 코드를 읽을 때, <b> 요소는 단순히 굵은 글씨로 표시하는 텍스트로 이해하지만

   <strong> 요소는 해당 텍스트가 중요한 텍스트라고 이해를 한다는 차이점이 존재한다.

<!-- strong 태그 예제 -->
<!-- <strong>텍스트(콘텐츠)</strong> -->
<h4>b 태그와 strong 태그의 차이</h4>

<p>
b 태그와 strong 태그는 <b>똑같이 텍스트를 굵게 표시하는 태그</b>이지만
<br/>
b 태그는 단순히 텍스트를 굵게 표시해서 주의를 끌기 위한 용도로만 사용하지만
<br/>
strong 태그는 텍스트의 <strong>중요성을 강조하기 위해서</strong> 사용됩니다.
</p>

b 태그와 strong 태그의 차이

b 태그와 strong 태그는 똑같이 텍스트를 굵게 표시하는 태그이지만
b 태그는 단순히 텍스트를 굵게 표시해서 주의를 끌기 위한 용도로만 사용하지만
strong 태그는 텍스트의 중요성을 강조하기 위해서 사용됩니다.

---

2. <i> / <em> 태그

① <i> 태그

 - i => italic, 해당 태그로 감싼 텍스트를 이탤릭체, 기울임체 (텍스트)로 표시하는 태그

 - 문장 내에서 전문 용어, 외국어 고유명사(선박 이름 등)처럼 다른 텍스트와 구별 지어야 할 때 사용된다.

<!-- i 태그 예시 -->
<!-- <i>텍스트</i> -->
<p>
<i>p-n junction, p-n 접합</i>이란
<br/>
정공이 전자보다 많은 불순물 반도체인 p형 반도체와
전자가 정공보다 많은 n형 반도체를 접합시킨 것을 말하며
<br/>
여기에 금속 단자를 추가한 것이 <i>다이오드(Diode)</i>이다.
</p>

p-n junction, p-n 접합이란
정공이 전자보다 많은 불순물 반도체인 p형 반도체와 전자가 정공보다 많은 n형 반도체를 접합시킨 것을 말하며
여기에 금속 단자를 추가한 것이 다이오드(Diode)이다.

---

② <em> 태그

 - em => emphasized, 강조하다.

 - <i> 요소처럼 텍스트를 이탤릭체, 기울임체 (텍스트)로 표시하는 태그

 - 문장 내에서 특정 텍스트를 강조해야 할 때 사용되는 태그

 - <strong> 요소처럼 웹 브라우저가 코드를 읽을 때, <em> 태그로 감싸진 텍스트는

   강조해야할 부분이라고 이해하게 된다. (<i> 요소는 단순히 기울임체로 표시했다고 판단한다.)

<!-- em 태그 예제 -->
<!-- <em>텍스트(콘텐츠)</em> -->

<h5>i 태그와 em 태그의 차이</h5>
<p>
	i, em 태그 둘 다 텍스트를 이탤릭체로 표시한다.<br/>
    웹 브라우저에서 <em>i 태그는 텍스트를 단순히 기울임체로만 표시한다고 이해하지만
    em 태그는 특정 텍스트를 강조한다고 이해한다.</em>
</p>

i 태그와 em 태그의 차이

i, em 태그 둘 다 텍스트를 이탤릭체로 표시한다.
웹 브라우저에서 i 태그는 텍스트를 단순히 기울임체로만 표시한다고 이해하지만
em 태그는 특정 텍스트를 강조한다고 이해한다.

---

3. <mark> 태그

 - 해당 태그로 감싼 텍스트에 형광색 표시를 더해주는 태그

 - 문장 내에서 특정 텍스트의 중요성을 강조하기 위해서 사용되는 태그

<!-- mark 태그 -->
<!-- <mark>텍스트(콘텐츠)</mark>
   해당 태그로 감싸진 텍스트에 형광색 표시를 한다. -->
   
<p>mark 태그는 텍스트에 <mark>형광색</mark> 표시를 하는 태그입니다.</p>

mark 태그는 텍스트에 형광색 표시를 하는 태그입니다.

---

4. <u> 태그

 - u => Underline, 밑줄

 - 문장 내 특정 텍스트에 밑줄 (텍스트)을 그어주는 태그

 - 문장 내에서 철자 오류나 중국어의 고유 명사들을 표시할 때 주로 사용되는 태그

 - HTML 5에서는 <u> 요소를 텍스트가 문자가 아닌, 주석을 가지고 있다고 인식하기 때문에

   단순히 문장에 밑줄을 추가하기 위해서 사용하는 것은 지양해야 한다.

   (단순 밑줄 추가는 css를 통해서도 가능하다.)

<!-- u 태그 
  <u>텍스트(콘텐츠)</u> -->
  
<p>u 태그의 u는 <u>umderline</u>의 약어입니다.</p>

u 태그의 u는 umderline의 약어입니다.

---

5. <del> / <ins> 태그

① <del> 태그

 - del => Delete, 삭제하다.

 - 해당 태그로 감싼 텍스트에 취소선(텍스트)을 표시하는 태그

 - HTML 문서에서 삭제된 텍스트를 표시하는 태그로

   문서에서 추가된 텍스트를 표시하는 <ins> 요소와 같이 사용되기도 한다.

 - datetime, cite 두 가지 속성을 사용할 수 있다.

 

② <ins> 태그

 - ins => Insert, (글 속에) 삽입하다.

 - 해당 태그로 감싼 텍스트에 밑줄(텍스트)을 표시하는 태그

   <u> 요소처럼 텍스트에 밑줄을 표시한다.

 - HTML 문서에서 추가되거나 혹은 수정한 텍스트를 표시하는 태그로

   문서 내에서 삭제된 텍스트를 표시하는 <del> 요소와 같이 사용되기도 한다.

 - datetime, cite 두 가지 속성을 사용할 수 있다.

<h5>del, ins 태그 예제</h5>
<!-- 
	사용 예시 
	* <del>텍스트</del> => 텍스트에 취소선을 표시하며, 삭제된 텍스트라는 것을 표시함
    * <ins>텍스트</ins> => 텍스트에 밑줄을 표시하며, 추가 혹은 수정된 텍스트라는 것을 표시한다.
-->

<p>HTML은 웹 페이지를 만드는 <del>프로그래밍 언어</del><ins>마크업 언어</ins>입니다.</p>

del, ins 태그 예제

HTML은 웹 페이지를 만드는 프로그래밍 언어마크업 언어입니다.

---

[번외] datetime, cite 속성

(1). datetime 속성

 - 문서 내에서 텍스트를 삭제하거나 추가 및 수정한 날짜를 명시하는 속성

	의미	예시
YYYY	Year, 년도, 年	2023
MM	Month, 월, 月	03
DD	Day, 일, 日	13
T	날짜와 시간을 구분하기 위해 사용하며, 공백 문자로 대체 가능
hh	Hour, 시, 時	16
mm	Minute, 분, 分	15
ss	Seconds, 초, 秒	44
TZD	Time Zone Designator, 표준 시간대 지정자

 

(2). cite 속성

 - 문서 내의 텍스트를 삭제 및 추가, 수정한 사유를 확인할 수 있는 문서의 URL을 명시하는 속성

<h3>datetime, cite 속성</h3>
  <hr/>
  <p>datetime은 문서 내 텍스트를 삭제 및 수정한 날짜와 시간을 명시하는 속성이다.</p>
  <p>cite 속성은 문서 내 텍스트를 삭제 및 수정한 사유를 확인할 수 있는
  <br/>다른 HTML 문서의 URL을 명시하는 속성이다.</p>
  <hr/>
  <h4>예시</h4>
  <h5>datetime 속성 사용</h5>
  <!-- 
    * <del datetime="YYYY-MM-DD hh:mm:ss">text</del> 
    * <ins datetime="YYYY-MM-DDThh:mm:ssTZD">text</ins>
  -->
  <p>
    HTML은 웹 페이지를 만드는 
    <del datetime="2023-03-13 16:30:12">프로그래밍 언어</del>
    <ins datetime="2023-03-13 16:30:12">마크업 언어</ins>
    입니다.
  </p>
  
  <h5>cite 속성 사용</h5>
  <!--
    * <del cite="URL">delete text</del>
    * <ins cite="URL">insert text</ins>
  -->
    <p>
    HTML은 웹 페이지를 만드는 
    <del cite="https://rclogstorage.tistory.com/55">프로그래밍 언어</del>
    <ins cite="https://rclogstorage.tistory.com/55">마크업 언어</ins>
    입니다.
    </p>
  <!-- url은 필자 블로그의 HTML 개요 게시글 url을 첨부했다. -->

datetime, cite 속성

---

datetime은 문서 내 텍스트를 삭제 및 수정한 날짜와 시간을 명시하는 속성이다.

cite 속성은 문서 내 텍스트를 삭제 및 수정한 사유를 확인할 수 있는
다른 HTML 문서의 URL을 명시하는 속성이다.

---

예시

datetime 속성 사용

HTML은 웹 페이지를 만드는 프로그래밍 언어 마크업 언어 입니다.

cite 속성 사용

HTML은 웹 페이지를 만드는 프로그래밍 언어 마크업 언어 입니다.

---

6. 마치며

* 2022-03-13 본문 작성 완료

* 2022-03-14 10:24 목차 - 본문 간 바로가기 기능 추가

 

이번 장에서 다룬 인라인 태그 8가지에 관한 내용을 정리하면서 느낀 것은

평소 블로그에 글을 쓸 때 자주 사용한 기능인 굵은 글씨나 밑줄, 취소선 등의 기능을

HTML 문서에서 어떻게 구현되는 지에 대해 알게된 것에 대한 감회가 새롭고

같은 출력을 해도 다른 용도를 가진 태그가 생각보다 많았다는 점이다.

물론 단순히 문서를 꾸미기만 할거면 CSS를 통해서 편집하는 것이 권장된다는 점도 덤이다.

 

7월부터 학원에서 웹 포트폴리오 수업에 들어가게 되는데

내 목표는 수업에 들어가기 전에 최대한 웹 페이지 모작까지 해보는 것이기에

예전처럼 순차적으로 공부하기는 시간이 부족하다.

 

Javascript 문법을 공부할려면 빠른 시일 내에 HTML과 CSS 기초가 잡혀야

조금 더 수월해질 터이니 말이다.

업데이트 내역
* 2023-03-13 본문 작성 완료
* 2023-03-14 목차 및 본문 바로가기 기능 추가, 글 완성