[컴퓨터언어] 텍스트를 하나로 묶어서 처리하는 태그 (HTML공부하기!) - 4

텍스트를 하나로 묶어서 처리하는 태그가 무엇인지 아시나요?

이번 시간에는 이 글을 통해 텍스트를 하나로 묶어서 처리하는 태그에 대해 알아보려고 합니다.

총 6가지의 태그에 대해 알아볼 테니 집중해서 끝까지 가보자고요.

 

---

◆ 텍스트를 하나로 묶어서 처리하는 태그란?

 

우선, 텍스트를 하나로 묶는다는 것이 무슨 의미인지 아셔야 합니다.

만약 티스토리에 글을 써 본 적이 있으신 분이라면 에디터를 이용해서 글을 작성해보신 적이 있으실 겁니다.

그때, 한 줄을 작성하고 글자크기를 바꾸고 싶어서 저 빨간색 부분을 건드려보신 적이 있을 겁니다.

그때마다 이상한 점을 발견하시지 않으셨나요?

 

바로 문장에서 일부 단어만 크기가 변하지 않고 한 문장 전체의 크기가 변하는 현상입니다.

우리는 이런 것을 '텍스트를 하나로 묶은 것이다.'라고 합니다.

텍스트의 글자, 단어 하나에만 적용하는 것이 아니라, 블록 전체에 적용하는 것을 말하지요.

 

---

◆ 텍스트를 하나로 묶어서 처리하는 태그 6가지

 

1. <h1> 태그 - 제목 표시하기 (기본형 : <h1> 제목 </h1>)

 

첫 번째로는 제목을 표시할 때 사용하는 <h1>, <h2>, <h3>... <h6> 태그가 있습니다.

heading의 줄임말 'h'를 사용하였습니다.

이 태그를 사용할 시 제목으로 인식하기 때문에 웹 브라우 저상에서 굵고 진하게 작성됩니다.

<h1>에서 <h6>으로 갈 때마다 크기가 점점 작아지는 특징이 있습니다.

 

▶ 왼쪽 : 티스토리 에디터 화면 / 오른쪽 : HTML편집기에서 편집된 내용 <h1>,<h2>,<h3>태그가 보인다.

 

2. <p> 태그 - 단락 만들기 (기본형 : <p> 텍스트 </p>)

 

두 번째로는 텍스트를 표시할 때 가장 많이 사용하는 태그이자 단락을 만들 때 사용하는 <p> 태그가 있습니다.

paragraph의 줄임말 'p'를 사용하였습니다.

단락은 앞뒤에 줄 바꿈이 있는 텍스트 덩어리를 의미합니다.

닫는 태그인 </p>가 나올 때까지 줄바꿈 없이 텍스트를 한 줄로 표시하는 특징이 있습니다.

그냥 우리가 블로그에 글을 쓰는 순간, <p> ~ </p> 태그는 항상 붙는다고 보시면 됩니다.

 

 

3. <br> 태그 - 줄 바꾸기 (기본형 : 텍스트 <br>)

 

세 번째로는 텍스트를 표시할 때 줄 바꿈을 해주는 <br> 태그입니다.

break의 줄임말 'b'를 사용하였습니다.

<p> 태그를 이용하여 텍스트를 표시할 때, 웹 편집기에서 엔터를 눌러 줄 바꿈을 하더라도 웹 브라우저에 그 줄 바꿈이 반영되지 않습니다.

이때, 웹 편집기에서 <br>을 사용하면 웹 브라우저에 줄바꿈이 반영됩니다.

앞서 태그의 특징에서 예외사항에 해당하는 '닫는 태그가 없는 태그'입니다.

 

3-1. <br> 태그를 사용하지 않았을 때

▶ 웹 편집기에서의 줄바꿈이 웹 브라우저에는 적용되지 않은 모습이다.

3-2. <br>태그를 사용했을 때

▶ <br>을 사용하니 웹 편집기에서의 줄바꿈이 웹 브라우저에는 적용되었다.

 

 

4. <hr> 태그 - 수평 줄 넣기 (기본형 : <hr>)

 

네 번째로는 글을 작성할 때, 적절한 상황에서 구분선을 넣어주는 <hr> 태그입니다.

horizontal의 줄임말 'hr'을 사용하였습니다.

티스토리 에디터에도 있는 기능이며, 주로 분위기를 전환할 때 자주 사용합니다.

<br> 태그와 마찬가지로 예외사항에 해당하는 '닫는 태그가 없는 태그'입니다.

▶ 위 : 티스토리 에디터에서 적용할 수 있는 구분선들 / 아래 : 작게나마 보이는 <hr>태그

 

 

5. <blockquote> 태그 - 인용문 넣기 (기본형 : <blockquote> 인용 내용 </blockquote>)

 

다섯 번째로는 다른 블로그의 내용이나 명언을 인용할 때 사용할 수 있는 <blockquote> 태그입니다.

줄임말이 없는 풀네임으로 사용합니다.

인용문이지만, 개인적으로 디자인이 나쁘지 않아 가독성을 높여주고 싶을 때 사용하는 태그입니다.

▶ 티스토리 인용

 

 

6. <pre> 태그 - 입력한 그대로 표시하기 (기본형 : <pre> 텍스트 </pre>)

 

마지막으로는 웹 편집기에 입력한 소스 보이는 그대로 표시하는 <pre> 태그입니다.

preformat의 줄임말 'pre'를 사용하였습니다.

HTML에서는 여러 공백을 넣어도 하나의 공백으로 받아들이기 때문에 들여 쓰기를 해서 작성해도 된다고 했습니다.

이때, 여러 공백을 그대로 웹 브라우저에 표시하고 싶을 때 <pre> 태그를 사용할 수 있습니다.

대신, 시각장애인을 위한 기계(문서 읽어주기, 점자표시)의 경우 <pre>태그를 그냥 건너뛰어버리는 특징이 있기 때문에 <pre>태그를 이용하실 때 대체 텍스트를 넣어주는 것이 좋습니다.

 

 

---

◆ 마무리

 

◆ 체크 포인트

1. 배운 6가지 태그가 잘 사용되었는지 확인!

2. 닫는 태그가 없는 예외 태그는 정말 닫는 태그가 없는지 확인!

3. <h1>, <h2>, <h3>의 글자크기 확인!

4. 웹 편집기에 <br>이 없지만, 줄 바꿈이 된 웹 브라우저와 여러 개의 공백을 표시하게 하는 <pre> 태그를 확인!