HTML 03 - 기본 텍스트 태그(Basic Text Tag)

 안녕하세요. 찰리입니다. 

 다시 HTML 연습시간입니다. 이번 시간에도 3개의 간단한 태그를 알아볼게요. 이 정도 간격이면 이전에 공부한 것은 다 잊어버릴 것 같네요. 머 태그는 솔직히 잊어버려도 상관없습니다. 어차피 사용하면서 하나씩 찾아보면서 해도 상관없습니다. 오늘은 텍스트와 관련된 태그 3종 입니다.

 p - 문단을 정의하는 태그. <p></p>

 h1-h6 - 문서 제목을 정의하는 태그 <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>

 br - 한 줄 줄바꿈 태그 <br>
 
 p 태그는 태그 내의 내용을 문단으로 분류? 정의해주는 태그입니다. 문단이 되는 만큼 약간의 간격을 두고 나눠집니다.

 h1-h6 태그는 제목을 정의하는 태그입니다. 책이나 문서를 만들 때면 대제목, 부제목, 소제목 등으로 제목으로 분류하게 되는 경우가 있죠? 그럴 때 사용하는 제목 태그입니다. h1부터 h6까지 여섯 개의 크기로 나눠지며 숫자가 작을수록 글씨의 크기는 크고 두꺼워집니다.

 br 태그는 줄바꿈 태그입니다. 말 그대로 문서내에서 줄바꿈이 필요한 곳에 사용하면 줄바꿈이 되는 태그입니다. 

 그럼 이 세 태그들 사용하러 가볼게요.

<준비물>
 에디터는 메모장 / 브라우저는 웨일을 사용하겠습니다.

 #태그(p / h1-h6 / br)

  Step 1 - 오늘도 index.html 파일과 브라우저를 열어두고요.

 적당히 p태그를 사용할 수 있게 글을 작성하고 p태그로 감싸보겠습니다.

 그리고 브라우저에서 열어보면 이렇게 글이 조금 넓은 간격으로 띄워진 것을 볼 수 있습니다.

  Step 2 - 다음 h1-h6태그를 위해 제목에 h1태그를 먼저 작성할게요

 그리고 우선 확인해보면 이렇게 크고 두껍게 변한 것을 보실 수 있습니다.

 태그는 h6까지 있으니까 적절하게 제목명을 정해서 태그들을 적용해봅시다.

 그렇게 적용한 후 브라우저에서 보면 크기 별로 제목들이 나열되어 있는 것을 볼 수 있겠습니다.

  Step 3 - 마지막 br태그도 사용해볼게요. 조금 긴 글이 있는게 더 좋을 것 같으니까 쓸데없는 글로 늘려주고 br태그를 사용할게요.

 브라우저에서 확인해보면 정말 간단하게 줄바꿈만 된 것을 알 수 있습니다.

 줄바꿈이니까 좀 전의 P태그와 어떻게 차이가 나는지 p태그를 다시 작성해서

 브라우저에서 보면 확실히 br태그 보다 간격이 넓은 것을 알 수 있습니다.

 #영상으로 보겠습니다. 

 태그들을 살펴볼 때 가이드가 되어있는 각각의 기능을 위주로 살펴보고 있습니다. 하지만 정해진 기능이란 것은 없겠죠. 말이 이상한데 기능보다는 정해진 사용처가 없다고 하는게 맞을 것 같습니다. 상황과 필요에 따라 얼마든지 다르게 사용할 수 있는 것이죠. 이런 이야기는 좀 더 태그들을 다루게 되면 다시 해야겠습니다. 지금은 다음 태그들을 골라서 하나씩 어떻게 사용되는지 알아보고 공부하는 곳이 좋을 것 같네요. 다음 시간에도 또 다른 태그들을 알아보겠습니다. 감사합니다.

네이버TV에서 영상보기