[HTML] HTML 요소 (제목, 단락, 서식)

제목(Heading)

<h1>부터 <h6>까지의 크기 변화

제목 태그 <h>

• 제목 표현 기능 외, 검색엔진이 웹 사이트의 내용을 <h>태그를 이용하여 키워드를 수집
• 따라서, html문서에서 제목을 반드시 <h>태그로 작성해야 검색엔진의 검색 확률이 높아짐
• <big>, <bold>태그를 사용 금지
• 반드시 종료 태그를 사용해야 함 (종료 태그 없이도 제대로 표현이 가능한 경우가 있지만 권장하지 않음)

---

단락(Paragraph)

단락 태그 <p> (Paragraph)

• 내용상 끊어서 구분할 수 있는 하나하나의 부분
• <p>태그를 이용하여 단락을 표현
• <p>태그 위아래로 약간의 여백(margin)이 자동 적용

<h1>제목1의 크기입니다!</h1>

<h2>제목2의 크기입니다!</h2>

<h3>제목3의 크기입니다!</h3>

<p>여기서부터 단락입니다.</p>

 

• 단락이나 제목 태그의 내용을 작성할 때, 띄어쓰기나 줄 나누기는 화면 표기상 영향이 없음
• <br>태그 (break line) : 줄 나누기가 가능 (종료 태그가 없는 빈 태그)
• <hr>태그 (horizontal rule) : 수평 가로 구분선 표현 (내용을 구분할 때 주로 사용)

# 잘못된 예시 
<p>
줄을 나누고 싶어서

이렇게 줄을 나눠봤습니다.

<hr>


과연     그대로     출력이     될까요?
</p>


# 올바른 예시
<p>
줄을 나누고 싶어서<br>
이렇게 줄을 나눠봤습니다.<br><br>
<hr>
과연 그대로 출력이 될까요?
</p>

 

단락 태그 <pre> (Preformatted Text)

• 텍스트 서식을 그대로 표현할 수 있는 단락 태그
• 태그 내에 작성된 택스트의 모든 띄어쓰기, 줄 나누기가 웹 브라우저에 그대로 표현

<pre>

줄을 나누고 싶어서

이렇게 줄을 나눠봤습니다.

 

과연     그대로     출력이     될까요?

네! 그대로 출력이 되버립니다요

</pre>

•  

 

---

서식(Formatting)

강조 효과 

• 텍스트에 굵음과 기울임 표현을 통해 내용 강조
  • <b> : 텍스트를 단순히 굵게 표현
  • <strong> : 텍스트의 굵기 표현 + 해당 내용의 중요하다는 의미를 포함
  • <i> : 텍스트를 단순히 이탤릭체로 표현
  • <em> : 이탤릭체 텍스트 표현 + 해당 내용의 중요하다는 의미를 포함
• 검색엔진은 <strong>, <em>태그를 사용하여 강조된 텍스트를 더 중요하게 인식

<p><b>"이 부분"</b>은 단순히 글씨가 굵은 부분이에요!</p>

<p><strong>"이 부분"</strong>은 중요한 부분이라서 굵게 표현됐어요!</p>

<p><i>"이 부분"</i>은 단순히 글씨가 이탤릭체인 부분이에요!</p>

<p><em>"이 부분"</em>은 중요한 부분이라서 이탤릭체로 표현됐어요!</p>

 

하이라이팅 효과

• <mark> : 텍스트에 하이라이팅 효과를 적용

<p><mark>"이 부분"</mark>만 하이라이팅하고 싶어요.</p>

 

삭제 효과

• <delete> : 텍스트 중앙에 가로줄을 만들어 마치 텍스트를 지운 것과 같은 효과 적용

<p><del>"이 부분"</del>을 지운 것처럼 하고 싶어요.</p>

 

삽입 효과

• <ins> : 텍스트 밑에 가로줄을 만들어 마치 빈칸에 텍스트를 삽입한 효과 적용

<p><ins>"밑줄 친 부분"</ins>에 들어갈 알맞은 말을 고르세요.</p>

 

위첨자, 아래첨자 효과

• <sup> (Superscript), <sub> (Subscript) : 위첨자,아래첨자 효과 적용

<p>X<sup>2</sup> + Y<sup>3</sup> = Z</p>

<p>물을 나타내는 화학식은 H<sub>2</sub>O 입니다.</p>