[HTML 기초] 글자 태그들

삐개·2022년 1월 3일
0

글자 태그란?

말 그대로 글자를 입력하는데 쓰이거나, 보조하는 태그들입니다.
글자 태그엔 다양한 종류가 있지만, 자주 쓰이는 것들 위주로 설명하겠습니다.


제목 태그 (h태그)

제목을 나타내는데 사용하는 태그로, h태그라고도 합니다.
웹 페이지를 책이라 가정했을 때, title은 책의 타이틀을 나타내는 것이고, 제목 태그는 각 챕터별 제목을 나타냅니다.

예시

<h1>안녕하세요? 1</h1>
<h2>안녕하세요? 2</h2>
<h3>안녕하세요? 3</h3>
<h4>안녕하세요? 4</h4>
<h5>안녕하세요? 5</h5>
<h6>안녕하세요? 6</h6>

결과

안녕하세요?1

안녕하세요?2

안녕하세요?3

안녕하세요?4

안녕하세요?5
안녕하세요?6

위의 태그 출력 결과를 보면 h태그의 순서에 따른 스타일의 차이를 볼 수 있습니다.
여기서 알 수 있는 것을 정리하면,

  • h1부터 h6까지 존재한다.

  • h태그는 기본적으로 두께와 크기가 다르게 설정되어 있다. h 뒤에 붙는 숫자에 따라 그 정도가 달라진다. (이를 기본 스타일이라고 합니다)
    그런데 여기엔 주의해야할 점이 하나 있습니다. h태그를 글자를 단순히 두껍게 만들기 위해 쓰면 안된다는 것입니다.
    왜냐하면 각 h태그엔 모두 의미가 있기 때문입니다. 우선 순위에 따라 숫자가 작아집니다.
    따라서 그냥 쓰면 안되고 반드시 의미에 맞게, 순서에 맞게 사용해야 합니다.

  • h1: 웹 사이트에서 단 하나만 존재할 수 있다. 일반적으로 로고 등에 사용

  • h2: 웹 페이지에서 그 다음으로 큰 카테고리들, 제목들.

  • h3~h6: 순서대로 h2보다 하위 제목, 하위 카테고리에 해당. 보통 h4까지 사용된다.

위처럼 정리할 수 있습니다. 보통 h4까지 사용되는 이유는 h5부터는 글자의 기본 크기보다 작아지기 때문입니다. 하지만 쓸 수 없다는 것은 아닙니다.
제목태그기 때문에, 구획 요소(article, section 등)들과 함께 쓰이는 경우가 많습니다.


문단 태그 (p태그)

예시

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ligula ligula, accumsan eu dolor eu, aliquet viverra sem. Nulla facilisi. Proin dapibus massa eget tempus volutpat. Pellentesque scelerisque, est nec rhoncus tincidunt, enim arcu aliquam ipsum, at interdum lectus ipsum in dui. Etiam efficitur facilisis neque, a venenatis sem pellentesque sit amet. Aenean eget ornare quam. Aenean mattis dolor id ornare molestie. In hac habitasse platea dictumst.
</p>

출력결과

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ligula ligula, accumsan eu dolor eu, aliquet viverra sem. Nulla facilisi. Proin dapibus massa eget tempus volutpat. Pellentesque scelerisque, est nec rhoncus tincidunt, enim arcu aliquam ipsum, at interdum lectus ipsum in dui. Etiam efficitur facilisis neque, a venenatis sem pellentesque sit amet. Aenean eget ornare quam. Aenean mattis dolor id ornare molestie. In hac habitasse platea dictumst.

문단태그, 또는 p태그는 이런 식으로 긴 글 또는 설명글 등의 문단에 사용되는 태그다.
p태그가 여러개 나열되어 있으면, 자동으로 세로 배치(줄바꿈)이 된다.

예시

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ligula ligula, accumsan eu dolor eu, aliquet viverra sem. Nulla facilisi. Proin dapibus massa eget tempus volutpat. 
</p>
<p>
In posuere lacus a justo efficitur, non dignissim quam ultricies. In non semper lacus. Donec ornare nulla enim, eu sodales quam ultricies quis. Aliquam mattis tellus eu laoreet semper. 
</p>
<p>
Sed ut neque tincidunt, auctor arcu non, vestibulum elit. Donec condimentum turpis magna, eget fringilla urna interdum non. Phasellus id scelerisque nibh. Integer efficitur tellus in risus dictum gravida. 
</p>

결과

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ligula ligula, accumsan eu dolor eu, aliquet viverra sem. Nulla facilisi. Proin dapibus massa eget tempus volutpat.

In posuere lacus a justo efficitur, non dignissim quam ultricies. In non semper lacus. Donec ornare nulla enim, eu sodales quam ultricies quis. Aliquam mattis tellus eu laoreet semper.

Sed ut neque tincidunt, auctor arcu non, vestibulum elit. Donec condimentum turpis magna, eget fringilla urna interdum non. Phasellus id scelerisque nibh. Integer efficitur tellus in risus dictum gravida.

줄바꿈 태그 (br태그)

그런데 p태그 안에 여러 줄의 글을 넣고 엔터키나 스페이스바를 아무리 눌러도 줄바꿈이 되지 않습니다. 넘쳐서 자동으로 내려가는 경우가 아니라면, 내가 원하는 곳에서 줄바꿈을 할 수 없습니다.
줄바꿈하고 싶다면 <br> 태그를 사용하면 됩니다.

예시

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
Praesent ligula ligula, accumsan eu dolor eu, aliquet viverra sem.<br>
Nulla facilisi. Proin dapibus massa eget tempus volutpat. 
</p>

결과

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent ligula ligula, accumsan eu dolor eu, aliquet viverra sem.
Nulla facilisi. Proin dapibus massa eget tempus volutpat.

br태그는 오로지 줄바꿈을 위해 존재하는 태그이다. 그리고 빈 태그이기 때문에 <br> 또는 <br/>이라고만 입력해도 됩니다. 어떤 스타일을 채택해도 HTML5에서는 문제가 없지만, 한 가지 스타일로 통일해서 쓰는 것을 추천합니다.

b태그, strong태그, em태그 (강조 태그)

글자의 일부분을 강조, 또는 돋보이게 하는데 사용됩니다.

예시

<p>
<b>Lorem ipsum</b> dolor sit amet, consectetur adipiscing elit. <br>
<strong>Praesent</strong> ligula ligula, accumsan eu dolor eu, aliquet viverra sem.<br>
Nulla facilisi. <em>Proin dapibus massa eget tempus volutpat. </em>
</p>

결과

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent ligula ligula, accumsan eu dolor eu, aliquet viverra sem.
Nulla facilisi. Proin dapibus massa eget tempus volutpat.

현재 블로그 글에서는 b태그가 제대로 표시되지 않는 것 같습니다.
어쨋든 b와 strong은 둘 다 글씨를 두껍게 표시하는 역할을 하는데, 둘의 사용 용도는 다릅니다.
b태그는 단순히 글씨를 두껍게 표시하는, 아무 의미없는 태그입니다.
그러나 strong태그는 의미적으로 강조하고 싶은 부분에 넣는 태그입니다. 따라서, 강조되어야 할 부분에는 strong 태그를 사용하는 것이 더 맞습니다. b태그처럼 단순한 두께 조절이 필요하다면 b태그 사용 대신 css에서 스타일을 부여해주는 것을 권장합니다.

em태그는 strong처럼 강조하는 것은 비슷하나, 문맥 상의 의미를 바꾸는 역할입니다. 외국 서적을 번역한 책에서 기울임체를 쓰는 경우를 생각해보면 됩니다. 그래서 의미상으로는 strong이 조금 더 강조의 의미를 가지고 있다고 볼 수 있습니다.

i태그

i는 italic의 약자로, 기울임체를 주고 싶을 때 사용합니다.
의미없는 스타일 부여용 태그이기에 사용을 권장하지 않습니다. 실제로 자주 쓰이지도 않구요.
대신 css를 이용해 기울임체를 주는 것을 권장합니다.

그리고, icon의 머릿글자 i가 italic의 i와 같기에, 일부 프리소스에서 i태그를 icon용 svg 이미지를 넣는 용도로 활용하는 경우도 있습니다.

예시

<p>
<i>Lorem ipsum dolor</i> sit amet, consectetur adipiscing elit. <br>
Praesent ligula ligula, accumsan eu dolor eu, aliquet viverra sem.<br>
Nulla facilisi. Proin dapibus massa eget tempus volutpat. 
</p>

결과

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent ligula ligula, accumsan eu dolor eu, aliquet viverra sem.
Nulla facilisi. Proin dapibus massa eget tempus volutpat.

span태그

특별한 의미 없이 아무 부분에나 사용해도 되는 태그입니다.
b태그나 i태그처럼 특정 부분에 다른 스타일을 주고싶을 때 주로 사용됩니다.

<p>
<span style="color: red;">Lorem ipsum dolor</span> sit amet, consectetur adipiscing elit. <br>
Praesent ligula ligula, accumsan eu dolor eu, aliquet viverra sem.<br>
Nulla facilisi. Proin dapibus massa eget tempus volutpat. 
</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent ligula ligula, accumsan eu dolor eu, aliquet viverra sem.
Nulla facilisi. Proin dapibus massa eget tempus volutpat.

hr태그

내용을 나눠주는 줄을 그어줍니다.
의미적으로 분리되는 부분에 사용합니다.

예시

Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
<hr>
Praesent ligula ligula, accumsan eu dolor eu, aliquet viverra sem.
Nulla facilisi. Proin dapibus massa eget tempus volutpat. 

결과

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Praesent ligula ligula, accumsan eu dolor eu, aliquet viverra sem. Nulla facilisi. Proin dapibus massa eget tempus volutpat.
profile
병아리 개발자

0개의 댓글