import {
 A, Bold, Details, Dl, H, Message, NoteBottom, NoteTop, P,
 Quote, Score, Youtube, Ul, Ol, Em, Gray, Code, Kbd, Image,
 Q, Strong, Spoiler, Strike, Line, Mark, HtmlGuideMessage, Name,
 Dt, Dd, HTMLTextPosts
} from '@/components/Post';

<HtmlGuideMessage />

<HTMLTextPosts />

# 개요
이번 글은 웹 개발을 위한 HTML 가이드 15편입니다. 저번 글에서는 **하이퍼 링크**를 만들어주는 링크 태그인 `a`태그에 대해서 알아봤습니다. 이번 글부터는 **텍스트**에 관련된 태그들을 알아볼 알아보려고 합니다. 태그의 개수가 많아서 여러 파트로 나눠서 진행할 생각입니다. 이 글은 그 첫번째입니다. 이번 글에서 알아볼 태그는 총 네가지로, 굵기 태그 두개와 기울기 태그 두개입니다.

텍스트 관련 태그들은 보통 `p`태그와 함께 이용하는 편입니다. `p`태그가 문단을 나타내는 가장 텍스트스러운 태그이기 때문입니다.

네가지의 태그지만 어렵지는 않기 때문에 간단하게 이해할 수 있을 것이라고 생각됩니다. 자, 그럼 함께 알아보도록 합시다.

# 텍스트의 굵기와 기울기
**텍스트를 강조**하는 다양한 방법 중에서 가장 기본적인 두가지의 방법은 **텍스트를 굵게 만들거나 기울이는 것**입니다. 각각 두가지의 방법이 있는데 어떻게 다르고 어떻게 사용하면 좋은지 간단하게 살피고 다음 파트로 넘어가도록 합시다.

## 굵기 태그
**굵기 태그**에는 두가지가 있다고 했습니다. `b`태그와 `strong`태그입니다. `b`태그의 **b**는 **bold**의 약자입니다. **strong**태그는 말 그대로 강렬한, 강한. 뭐 이런 의미죠. 아래와 같이 사용하면 됩니다.

```html
아이유 좋아
아이유 좋아
```

![굵기 태그는 이렇게 보인다.](https://drive.google.com/uc?export=view&id=1-BHeRgS5fglHDlctL4gJQEYmtRS3CpsA)

위의 코드는 위의 이미지처럼 나타나게 됩니다. 그냥 이렇게만 보면 이 두가지는 별 차이가 없습니다. 둘 다 굵게 만들어주는 태그이기 때문이죠.

그럼 이 두가지의 태그는 어떻게 다를까요? 중요한 것이 다릅니다. 전자는 그냥 **굵게 만들어주는** 태그일 뿐이고 후자는 **검색 엔진에게 이 텍스트가 중요한 텍스트다 라는 정보를 알려주는 시맨틱한** 태그라는 것이 다른 점입니다. 그렇기 때문에 중요한 정보일 때에는 `strong`태그를 쓰는 것이 웹 페이지의 검색 노출에 도움이 됩니다.

그저 굵은 텍스트를 만들고 싶은 경우에는 `span`태그를 이용해서 스타일을 조정하는 방법이 있고 이를 권장하고 있습니다. `b`태그는 사실상 더 이상은 잘 쓰이지 않는 태그입니다. 하지만 우리는 아직 **CSS**를 모르니까 이런 게 있다라는 것만 알아두시면 됩니다.

## 기울기 태그
이번에는 기울기 태그를 알아봅시다. **기울기 태그**에도 두가지가 있습니다. `i`태그와 `em`태그입니다. `i`태그는 **이탤릭체**의 약자라고 보면 됩니다. `em`태그는 **emphasize**의 약자입니다. 중요하다 라는 의미를 지닌 영단어입니다.

여기서도 감이 오죠. 이 두 태그는 마찬가지로 **시맨틱한 태그냐 아니냐**로 나뉩니다.

```html
아이유 좋아
아이유 좋아
```

![기울기 태그는 이렇게 보인다.](https://drive.google.com/uc?export=view&id=1kwKqLCNGX5KnCorW9-gxU1bUWL7iatvS)

`b`태그와 마찬가지로 `i`태그도 잘 쓰이지 않습니다. `em`태그를 더 많이 사용합니다. 그냥 기울기를 표현하고 싶다면 `span`태그를 이용해 **CSS**를 조정하는 방법을 사용합니다. 이 역시도 이렇게 하는것을 추천하고 있습니다.

## 둘 다 사용하기
굵기 태그와 기울기 태그는 **둘 다 사용할 수** 있습니다. 순서와 상관 없이 둘 다 적용하면 아래와 같은 모양이 됩니다. 정말로 중요하다고 강조를 하는거죠.

```html
아이유는 2021년 10월 19일 자정에 Strawberry Moon을 공개했다.
```

![굵기와 기울기를 둘 다 사용할 수 있다.](https://drive.google.com/uc?export=view&id=12iwyDXQx2YSgkGQCmFRpqYlQoKOAnNp8)

# 실전 연습
그럼 이제 우리의 프로젝트에 한 번 적용해보도록 합시다. 우리가 만들었던 <Name>index.html</Name>파일을 기억하실겁니다. **vscode**를 켜고 이 파일을 열어봅시다.

```html file=index.html
<body>
 <h1>웹 개발의 3요소</h1>
 <h2><a href="https://bit.ly/3lXTSYW" target="_blank" rel="noopener noreferrer">HTML</a></h2>
 HTML은 웹의 뼈대를 만들어주는 기능을 하는 마크업 언어입니다.
 <h2><a href="https://bit.ly/3u9M22j" target="_blank" rel="noopener noreferrer">CSS</a></h2>
 CSS는 HTML로 만든 뼈대에 피부를 만들어주고 화장을 시켜주는 스타일 시트 언어입니다.
 <h2><a href="https://bit.ly/39BnSnM" target="_blank" rel="noopener noreferrer">JavsScript</a></h2>
 자바스크립트는 HTML과 CSS를 동적으로 제어할 수 있는 웹의 뇌와 같은 언어입니다.
</body>
```

위와 같은 상태로 저장되어 있을겁니다. 이제 여기에 `strong`태그와 `em`태그를 적용해보려고 합니다. HTML, CSS 자바스크립트라는 텍스트에 적용해보도록 합시다.

![지금까지의 우리 프로젝트 모습이다.](https://drive.google.com/uc?export=view&id=1mRWGfvGJTB_zw2L2V2tEXjYj0RNcNcY6)

수정하기 전은 이런 모습이죠. 그럼 이제 수정해봅시다.

```html file=index.html

HTML은 웹의 뼈대를 만들어주는 기능을 하는 마크업 언어입니다.


CSS는 HTML로 만든 뼈대에 피부를 만들어주고 화장을 시켜주는 스타일 시트 언어입니다.


자바스크립트는 HTML과 CSS를 동적으로 제어할 수 있는 웹의 뇌와 같은 언어입니다.
```

주석처리된 부분이 이전 코드이고 주석이 아닌 부분이 새로운 코드입니다. `strong`태그의 안에 `em`태그를 넣고 그 안에 내용물을 넣었습니다. 이렇게 하고 저장하고 라이브 서버를 켜보면 아래와 같은 모습이 됩니다.

![프로젝트 네번째 과정.](https://drive.google.com/uc?export=view&id=1nvhhET-ieZFNGu0CiDHj6sJz6lKjaHMV)

오늘의 코드는 깃허브 <A href='https://github.com/nihil-programming-guide/web-tuto/tree/master/HTML' type='normal'>web-tuto</A>에 기록되어 있습니다. 4번을 보시면 됩니다.

<Line />

이렇게 우리는 오늘 굵기와 기울기를 적용해봤습니다. 아주 간단하죠? **시맨틱한 태그를 더 많이 사용한다는 것**을 잊지 마시고 공부해봅시다. 앞으로 우리가 알아볼 텍스트 관련 태그가 많습니다. 오늘 함께 배운 내용은 여러번 연습해서 여러분의 것으로 만들어보세요. 이번 글은 여기까지입니다. 다음 글에서는 **개행 태그와 가로줄 태그**를 알아봅시다.

개행 태그는 이미 다룬 적이 있지만 그래도 다시 다뤄보도록 하겠습니다. 그럼 더 잘 기억이 되겠죠. 그럼 다음 글에서 봅시다.

이번 글은 웹 개발을 위한 HTML 가이드 15편입니다. 저번 글에서는 하이퍼 링크를 만들어주는 링크 태그인 a태그에 대해서 알아봤습니다. 이번 글부터는 텍스트에 관련된 태그들을 알아볼 알아보려고 합니다. 태그의 개수가 많아서 여러 파트로 나눠서 진행할 생각입니다. 이 글은 그 첫번째입니다. 이번 글에서 알아볼 태그는 총 네가지로, 굵기 태그 두개와 기울기 태그 두개입니다. 네가지의 태그지만 어렵지는 않기 때문에 간단하게 이해할 수 있을 것이라고 생각됩니다. 자, 그럼 함께 알아보도록 합시다. 텍스트를 강조하는 다양한 방법 중에서 가장 기본적인 두가지의 방법은 텍스트를 굵게 만들거나 기울이는 것입니다. 각각 두가지의 방법이 있는데 어떻게 다르고 어떻게 사용하면 좋은지 간단하게 살피고 다음 파트로 넘어가도록 합시다.

“ 기울기 태그 ” 태그 관련 포스트 1건

웹 개발을 위한 HTML 가이드 15편 - 굵기와 기울기 태그