5. 텍스트 태그

이번 포스팅에서는 텍스트 태그들에 대하여 알아보겠습니다.

태그들을 보시면서 이전 포스팅의 내용인 블록 레벨과 인라인 레벨을 함께 확인하시면 좋을 것 같습니다.

 

1. 제목 태그

제목 태그로는 <h1>, <h2>, <h3>, <h4>, <h5>, <h6>가 있으며, h(heading의 줄임말) 뒤에 오는 숫자가 작을수록 크기가 큽니다.

따라서, <h1> 태그가 가장 큰 텍스트의 제목, <h6> 태그가 가장 작은 텍스트의 제목이 됩니다.

보통 <h1> 태그는 문서를 대표하는 제목으로 사용하고, 이후에 나오는 소제목에 따라 순서대로 사용하게 됩니다.

제목 태그는 기본적으로 일반 텍스트보다 굵고 진하게 스타일이 되어있습니다.

 

See the Pen Untitled by nitnal (@nitnal) on CodePen.

2. 단락 태그

단락 태그는 <p> 태그가 있는데요.

paragraph의 줄일말로 텍스트 단락을 만드는 기능을 하고 있습니다.

<p> 태그는 블록 레벨이기 때문에 위/아래로 <p> 태그들이 쌓이게 됩니다.

그리고 <p> 태그 안에 있는 텍스트는 기본적으로 줄바꿈줄 바꿈 없이 한 줄로 표시하지만, 텍스트 줄이 브라우저 너비보다 길어지면 자동으로 줄 바꿈이 되어 표시됩니다.

 

See the Pen Untitled by nitnal (@nitnal) on CodePen.

 

※ 제목 태그와 단락 태그는 블록 레벨 요소입니다.

3. 줄바꿈 태그

줄 바꿈 태그는 <br> 태그가 있는데요.

HTML은 두 칸 이상의 공백과 개행을 무시하기 때문에 실제 코드에서 줄 바꿈을 하더라도 개행되어 화면에 표시되지 않습니다.

따라서, 원하는대로 개행을 진행하고 싶을 때 <br> 태그를 사용하면 됩니다.

<br> 태그는 닫는 태그가 없는 빈태그이므로 개행하고자 하는 곳에 <br> 태그를 선언하면 됩니다.

 

See the Pen Untitled by nitnal (@nitnal) on CodePen.

 

4. 텍스트 스타일 태그

텍스트 스타일 태그로는 별도의 의미를 갖지 않는 <s>, <b>, <u>가 있으며, 의미를 갖고 있는 <em>, <strong>, <i>가 있습니다.

[의미를 갖지 않는 태그]

1. <s> : 텍스트에 중간선을 만들어 줍니다. ex) 안녕하세요.
2. <u> : 텍스트에 밑줄을 만들어 줍니다. ex) 안녕하세요.
3. <b> : 텍스트를 굵게 표현해 줍니다. ex) 안녕하세요.

[의미를 갖고 있는 태그]

1. <em> : emphasis의 줄임말로 문장에서 특정 부분을 강조하는 의미로 사용하며, 텍스트를 italic(기울인) 스타일로 만들어 줍니다. ex) 안녕하세요.
2. <strong> : 경고나 주의사항처럼 중요한 내용을 강조하는 의미를 가지고 <em> 태그보다 강한 강조의 의미로 사용하며, 텍스트를 굵게 표현해 줍니다. ex) 안녕하세요.

 

사실 <i> 태그도 별도의 의미를 갖지 않고 텍스트를 italic(기울인) 스타일로 만들어주는 태그인데요.

실제 작업을 할 때 아이콘(icon)을 넣고 싶을 때 자주 사용합니다.

icon과 앞자리가 비슷하기 때문에 의미를 파악하기 쉽고, 한 글자로 사용하기도 편리하기 때문입니다.

그래서 <i> 태그를 의미를 갖고 있는 태그로 분류한 점 유의 부탁드립니다.

 

※ 줄바꿈 태그와 텍스트 스타일 태그는 인라인 레벨 요소입니다.

 

본격적으로 태그에 대하여 포스팅을 해보았는데요.

VS Code로 직접 코드를 작성하고 확인하면서 진행하면 더 좋을 것 같습니다.

오늘도 읽어주셔서 감사합니다.

좋은 하루 보내세요! :)