body에 글 작성하기 heading h1~h6, p, em, strong

Front-end/HTML
2022. 7. 9. 07:00

지난 시간까지 HTML의 기본구조와 Semantic Tag에 대해 공부했습니다. 이번에는 body 안에 글을 쓰기 위해 사용되는 태그에 대해 공부해보고 합니다.

우리가 한글이나 엑셀 등의 프로그램을 활용하여 글을 쓸 때를 생각해볼꼐요. 제목, 내용, 소제목, 내용을 반복하게 됩니다. 이중 중요하다고 생각되는 부분에는 굵게 표기하기도 하고 기울임을 사용하기도 합니다. 프로그램을 활용하면 버튼과 단축키로 해결되지만 HTML에서는 태그를 사용하여 작성되어야 합니다.

HTML 글쓰기

위의 글을 위키백과의 HTML 관련 일부분을 발췌한 글입니다. 위의 글을 보고 heading Tag과 p 태그 등을 공부해 보도록 하겠습니다.

1. heading

heading Tag는 <h1>~ <h6>까지 이루어져 있습니다. 위은 <h1>~ <h3>까지를 사용되었는데 어느 부분 <h1>이고 <h2>인지 확인이 되시나요? heading Tag는 제목을 구성하는 데 사용됩니다.

<h1> : 페이지당 하나만 사용
<h2> : 주요 섹션에 사용
<h3> : 부제목으로 사용
<h4> : 하위 제목
<h5> : <h4>의 하위 제목
<h6> : <h5>의 하위 제목

번호가 커질수록 중요도는 낮아지며 글자 크기 또한 작아집니다. 또한 <h1> Tag의 경우 페이지당 하나만 존재해야 합니다. <h1>의 사용을 남발하면 SEO에 안좋은 영향을 미칠 수 있습니다.

2. b, strong

<b> 태그와 <strong>태그를 사용하면 글씨 굵기가 굵게 바뀝니다. 위 사진의 보시면 HTML구조, 태그 등이 굵게 바뀐것을 확인할 수 있습니다. 외관으로 보았을 때는 두 태그 모두 동일하게 보이지만 실제로는 사용 시기가 조금 다릅니다.

<b> : 시각적으로 굵은 글씨로 만듬, 시각적인 효과
<strong> : 시각적인 효과와 강조의 역할

<strong>는 시각적인 효과와 함께 강조하는 역할을 합니다. 강조하고자 하는 문구가 있다면 <b>보다는 <strong>를 사용하시는 것을 추천드립니다.

3. em, i

<em>과 <i>는 기울일꼴의 시각적 효과를 나타냅니다. <i>의 경우 책의 제목이나 인용구로 많이 쓰입니다. <em>도 <strong>과 마찬가지로 강조의 효과를 지니고 있습니다.

<i> : 시각적인 변화만 주는 태그(책 제목, 인용구)
<em> : 시각적인 변화와 함께 강조됨

4.br

<br>은 줄바꿈줄 바꿈 태그입니다. 시작 태그만 사용하며 닫힘 태그가 따로 존재하지 않습니다. HTML code 내에서 작성한 줄 바꿈은 enter key사용으로 줄 바뀜이 되지 않습니다. 그렇기 때문에 <br> 태그를 사용하여 줄을 바꿔줘야 합니다.

HTML의 경우 JavaScript와 다른 언어와 다르게 오류가 발생하더라도 웹페이지는 실행됩니다. 내가 사용한 HTML 코드가 잘 사용된것인지 확인하기 위해서는 W3C에서 만들고 유지 관리되는 Markup Validantion Service를 통해 확인할 수 있습니다.

마크업 유효성 검사 : https://validator.w3.org/