프론트엔드/HTML

Font태그

alswlfl 2022. 11. 18. 10:10

Font(글꼴) 태그

  • <h1>~<h6> Heading
    • 웹 페이지의 제목 또는 부제목을 표시
    • 숫자가 작을 수록 큰 제목을 표시
  • <p> Paragraph
    • 하나의 문단 표시
  • <hr> Horizontal Rule
    • 가로로 선을 긋는 태그 (종료 태그 없음)
  • <br> Break
    • 줄바꿈 태그로 HTML에서 개행 역할 (종료 태그 없음)
  • <i> Italic
    • 텍스트를 Italic체로 표시할 때 사용
  • <em> Emphasis
    • 텍스트를 Italic체로 강조할 때 사용
  • <b> Bold
    • 텍스트를 진하게 표시할 때 사용
  • <strong> Strong
    • 텍스트를 진하게 강조할 때 사용
❗<i>와 <em>의 차이점과 <b>와 <strong>의 차이점
<i>와 <b>는 단순히 텍스트를 이텔릭체, 진하게 표시하는 역할<em>와 <strong>는 실제로 페이지 내의 중요한 부분으로 강조하고 싶을 때 사용
✨ strong과 em태그는 브라우저에서 스크린리더를 사용하는 경우, 음성합성 도구가 페이지를 해석하고 읽을 때 거센 억양으로 발음하여 강조하듯이 재구성 가능
스크린 리더(Screen Reader) :
 시각장애인이 컴퓨터를 사용할 때 화면에 나타나는 정보들을 음성으로 출력해주는 화면낭독 프로그램

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Font Tag</title>
  </head>
  <body>
    <h1>제목1</h1>
    <h2>제목2</h2>
    <h3>제목3</h3>
    <h4>제목4</h4>
    <h5>제목5</h5>
    <h6>제목6</h6>
    <hr />
    <h1>김치볶음밥</h1>
    <p>
      김치를 주 재료로 사용한 볶음밥. <br />
      영어로는 Kimchi Fried rice.
    </p>
    <hr />
    <h1>애국가</h1>
    <h4>1</h4>
    <i>동해</i> <em>물과 백두산</em>이 마르고 닳도록<br />
    하느님이 보우하사 우리나라 만세.<br />
    무궁화 삼천리 화려 강산<br />
    대한 사람, 대한으로 길이 보전하세.

    <h4>2</h4>
    <b>남산</b> 위에 저 <strong>소나무</strong>, 철갑을 두른 듯<br />
    바람 서리 불변함은 우리 기상일세.<br />
    무궁화 삼천리 화려 강산<br />
    대한 사람, 대한으로 길이 보전하세.

    <h4>3</h4>
    가을 하늘 공활한데 높고 구름 없이<br />
    밝은 달은 우리 가슴 일편단심일세.<br />
    무궁화 삼천리 화려 강산<br />
    대한 사람, 대한으로 길이 보전하세.

    <h4>4</h4>
    이 기상과 이 맘으로 충성을 다하여<br />
    괴로우나 즐거우나 나라 사랑하세.<br />
    무궁화 삼천리 화려 강산<br />
    대한 사람, 대한으로 길이 보전하세.
  </body>
</html>