HTML 기초강좌, 기초용어정리 2탄 [제목태그,굵기태그,윗첨자태그,가로줄태그]

HTML 기초강좌, 기초용어정리 2탄 [제목태그,굵기태그,윗첨자태그,가로줄태그]

HTML 기초용어정리 2탄이 돌아왔습니다!

이번 포스팅에서는 제목태그, 굵기태그, 윗첨자와 아랫첨자태그, 가로줄태그, 줄바꿈태그, 단락태그 등

컨텐츠를 입력할 때 쓰이는 태그들에 대해서 알아보고 적용시킨 예시들을 살펴보도록 하겠습니다.

둥둥이는 태그와 컨텐츠를 구분하기 쉽게 드림위버 프로그램을 사용하고 있구요.

포스팅을 보면서 따라하시는 분들은 그냥 메모장에다가 하셔도 무방합니다.

자! 그럼 시작해볼까요?

자 오늘 소개해드릴 태그들을 적용해서 HTML 파일을 만들어보았습니다.

이렇게 소스파일로 보니까 뭐가뭔지 잘 구분이 안가죠?

이 파일을 저장해서 인터넷화면에서 불러와 보겠습니다.

자, 인터넷화면에서 소스파일을 가져오면 이렇게 표기됩니다.

제가 몇가지의 태그들을 적용시켜놨는데요. 하나하나 뜯어보면서 자세히 설명해드릴께요.

총 8가지의 태그를 포함시켜서 파일을 만들어봤는데요.

순서대로 1에서 8까지 숫자를 매겨놨습니다.

제가 빨간 박스를 쳐 놓은 부분들은 특별히 태그를 적용시켜놓은 부분이라고 보시면 됩니다.

이렇게 뭉텅이로 해놓으면 보기가 어려우니까! 하나씩 뜯어서 살펴볼께요.

1. 제목태그 <h1,h2,h3>

2. 단락태그 <p>

3. 굵기태그 <b>

4. 기울임태그 <i>

5. 윗첨자태그 <sup>

6. 아랫첨자태그 <sub>

7. 줄바꿈태그 <br />

8. 가로줄태그 <hr />

제일 첫번째로 살펴볼 태그는 제목태그 <h1, h2, h3....> 입니다.

제목태그는 알파벳 h 뒤에 숫자를 붙여서 사용하는데요.

가장 큰 제목이 h1, 그 다음 부제목이 h2, 부제목에 따른 소제목을 나눌 때 h3 이런식으로

제목아래 다른 섹션이 있을 때 점점 낮은 숫자를 붙여서 글자의 크기를 조절 할 수 있습니다.

브라우저와 해상도에 따라서 표시되는 크기는 조금씩 다를 수 있지만 

<h1> 태그의 글자가 가장 크며 <h6>의 글자가 가장 작게 표시됩니다. 

저는 h1~h3 까지의 태그를 이용해서 예시를 만들어 봤습니다. 

두번째 태그는 단락태그 <p> 입니다.

단락태그는 페이지를 만듦에 있어서 굉장히 많이 사용되는 태그이기도 합니다.

각 문단의 앞을 <p>로 시작하고 마무리를 </p>로 끝내주면 문단과 문단 사이에 한줄의 공백을 넣어주게 됩니다.

위의 HTML 소스파일과 함께 예시를 보시면 좀 더 이해가 쉽겠죠?

이와 유사하게 쓰이는 태그가 바로 <br /> 태그인데, 아래에서 자세히 알려드릴께요.

세번째 태그는 굵기태그 <b>, 기울임태그 <i> 입니다.

컨텐츠를 작성할 때 글자에 굵기를 주고싶다거나 기울여서 글자를 쓰고 싶다면!

<b> 태그와 <i> 태그를 활용하시면 됩니다. 너무 간단한 태그죠? 깊은 설명도 사실 필요가 없습니다.

네번째 태그는 윗첨자태그 <sup>, 아랫첨자태그 <sub> 입니다.

일상생활에서 이러한 첨자태그를 사용하는 경우가 많지는 않지만 수식이나 특별한 경우에 활용하시면 됩니다.

윗첨자와 아랫첨자 태그를 구분하는 가장 쉬운 방법은! p와 b 입니다. o가 작대기 위에 붙었는지 아래에 붙었는지를

비교해서 위에붙은 p가 들어간 sup는 윗첨자, 아래에붙은 b가 들어간 sub는 아랫첨자 이런식으로 기억해두면 되겠죠?

마지막은 위에서 살펴본 단락태그<p>와 비슷한 줄바꿈태그<br />과 가로줄태그<hr />에 대해서 알아봅시다.

먼저 살펴볼 줄바꿈태그<br />은 줄을 바꿔주지만 <p> 태그처럼 줄과 줄 사이에 공백을 넣지 않습니다.

우리가 흔히 키보드에서 쓰는 Enter키와 같은 기능을 한다고 보시면 됩니다.

말 그대로 줄만 바꾸는 태그라는 것이죠. 보통 <p> 태그 안에 <br /> 태그를 사용하곤 합니다.

제가 예시로 만들어 놓은 소스를 보시면 <p>태그로 단락을 지정하고 그 안에서 <br />태그로 줄을 바꾸고 있죠?

그리고! 가로줄태그<hr />은 예시를 보시는 것과 같이 진회색의 가로줄무늬를 쭈욱 그어줍니다.

제가 블로그 포스팅 할 때 본문내용과 부가설명을 나누고자 할 때 가로줄을 많이 쓰곤 해요.

유용하게 쓰일 수 있는 태그이니 기억해두시면 좋습니다.

---

여기까지! HTML 기초용어정리 2탄을 살펴봤습니다.

지난번 body, head, title 태그 보다는 뭔가 여기저기 쓸 일이 많은 태그들이죠.

사실 지난번 포스팅에서 살펴본 태그들은 한번 써놓으면 두번 다시 쓸 일이 없는 태그들이니

그냥 알고만 있어도 되지만 이번에 소개해드린 태그들은 진짜 유용하게 쓰이는 것들이니 꼭 기억해두시기 바랍니다!

다음 포스팅에서는 공백태그, 강조태그, 인용태그, 콘텐츠 변경 태그 등

역시 컨텐츠를 작성할 때 유용하게 쓰일 수 있는 태그들에 대해서 살펴보도록 하겠습니다.

다음 포스팅도 더 좋은 글로 찾아오겠습니다! 

---