웹 문서에 다양한 내용 입력하기 1 - 텍스트 입력하기

이제 둘째마당의 첫번째 장이 끝나고 두번째 장으로 들어갔다. 앞장에서는 HTML의 기본 구조가 어떻게 첫 페이지를 구성하는지에 대한 기초 학습을 진행했다면, 이번 장에서부터는 본격적으로 웹 페이지를 만들게 된다.

웹 문서를 작성할 때 가장 많이 사용하는 형식은 텍스트, 이미지, 표이다. 먼저 텍스트를 입력할 때 기본이 되는 제목과 본문, 단락, 줄바꿈 등의 태그를 학습해볼 것이다.

 

---

 

텍스트 입력하기

 

 

 

제목을 나타내는 hn 태그

웹 문서에서 제목은 다른 텍스트보다 크고 진하게 표시한다. 이렇게 자주 사용하는 제목 스타일을 미리 태그 형식으로 만든 것이 제목 태그이다.

<hn>제목</hn>

 

n의 자리에는 1~6의 숫자가 들어가며 제목 텍스트를 크기별로 표시할 수 있다.

 

 

 

텍스트 단락을 만드는 p 태그, 줄을 바꾸는 br 태그

p 태그

<p>내용</p>

 

내용 텍스트를 입력하면 텍스트 앞뒤로 빈줄이 생기면서 단락이 만들어진다. 이때 기억할 점은 편집기에서 줄을 바꾸더라도 웹 브라우저에서는 한 줄로 표시된다는 것이다.

 

 

예시를 보면 줄을 바꾸었으나 웹 페이지에서는 한 줄로 표기됨을 알 수 있다. 하지만 텍스트 단락의 내용이 길어서 웹 브라우저에 한줄로 표시할 수 없을 경우 자동으로 줄이 바뀐다.

 

 

br 태그

원하는 위치에서 줄을 바꿀 때 사용하는 태그가 br 태그이다.

 

br 태그와 p 태그의 차이점

br 태그를 두 번 사용하면 빈줄이 생기면서 텍스트 단락이 나뉜 것처럼 화면에 표시할 수 있다. 하지만 실제로는 단락이 만들어진 게 아니므로 CSS를 사용하여 단락 스타일을 적용할때 문제가 생긴다. 따라서 텍스트 단락을 만들 때는 p 태그를 사용해야 한다.

 

인용할 때 쓰는 blockquoate 태그

우리는 다른 사람의 말이나 책의 내용을 인용할 때 큰 따옴표를 사용한다. 하지만 웹 브라우저에서는 이렇게 표시한 인용문을 인식할 방법이 없다. 따라서 다음과 같이 써야 한다.

<blockquote>인용문<blockquote>

 

그러면 웹 브라우저는 태그 안의 내용을 인용문으로 알고 다른 텍스트보다 약간 들여 쓴다. 화면 낭독기로 읽어내려갈 때도 다른 텍스트와 구별한다.

 

 

 

텍스트를 굵게 표시하려면 strong, b 태그

<strong>굵게 강조할 텍스트</strong>
<b>굵게 표시할 텍스트</b>

 

두 태그는 눈으로 볼때 별 차이가 느껴지지 않지만 그래도 구분하는 이유는 화면 낭독기의 기능 때문이다. 화면 낭독기는 strong 태그를 사용한 부분을 강조하여 읽어준다.

 

기울인 텍스트를 입력해주는 em, i 태그

<em>이탤릭체로 강조할 텍스트</em>
<i>이탤릭체로 표시할 텍스트</i>

 

em 태그는 문장에서 흐름상 특정 부분을 강조하고 싶을 때 사용하고, i 태그는 마음속의 생각이나 용어, 관영구 등에 사용한다. 즉 em 태그는 문장 중에서 특별히 강조하고 싶은 부분에, i 태그는 단순히 다른 텍스트와 구별하기 위해 사용한다.

 

다양한 텍스트 관련 태그

---

 

실습 - 텍스트 태그 여러 개 삽입하기

지금까지 배운 텍스트 관련 태그로 제주도의 축제 홍보 페이지의 내용을 작성하는 실습을 진행해본다.

소스 파일 안에는 작성되지 않은 본문이 있는데 div 태그 밑에 쓰면 되었다. 괜히 폴더를 하나 만든 것 같다.

이어 다음에 br 태그를 써서 이렇게 보이는 것이다.

 

---

 

첫번째 단원 학습을 마치고

책의 내용을 요약하고 실습도 함께 진행하느라 학습 속도는 조금 느렸다. 오늘 새벽 공부 시간에 6개의 소장으로 구성된 첫번째 장을 모두 마치는 게 목표였는데 다 할 수 없을 것 같다.
하는데까지 해봐야야지. 책을 통해서 수업에서는 배울 수 없었던 여러가지 텍스트 태그도 알게 되었다. 특히 인용하는 태그, 아래 첨자나 위 첨자를 표시하는 sup, sub 등의 태그도 새롭게 알게되어 기뻤다.

del 태그를 사용하면 중간에 밑줄이 그어지기도 한다. 이제 다음 포스트에서는 목록을 만드는 태그에 대해서 학습해볼 것이다.