HTML 과 친해지기 (3)

유수종·2025년 1월 23일

프론트엔드 스터디

목록 보기

3/12

이번시간에는 HTML 태그에 어떤 종류가 있는지 또 어떤 기능을 가진 태그들이 있는지 자세히 알아보려고 합니다.

글꼴 태그

<h1>~<h6> Heading : 제목 또는 부제목
(숫자가 작을수록 크기가 커짐)
<p> Paragraph : 하나의 문단을 표시
<hr> Horizontal Rule : 가로선 긋기 (종료태그 X)
<br> Break : 줄바꿈 (종료태그 X)
<i> Italic : 이텔릭체 로 표시
<em> Emphasis : 이텔릭체 로 강조
<b> Bold : 볼드체로 진하게 표시
<strong> : 볼드체로 진하게 강조

여기서 <i>,<b> 태그와 em,strong 태그의 차이점을 짚고 넘어가자면 표시와 강조의 차이라고 할 수 있는데요,
이는 브라우저에서 스크린리더(Screen Reader) 기능을 사용할 경우 음성 합성 기술이 해당 부분을 강조하여 읽을때 차이가 발생한다고 합니다.

Live Server

간단한 실습을 하기 전에 VS Code에 Live Server라는 어플리케이션을 설치해서 적용해보려고 합니다.

Live Server를 설치한 후 우측하단에 Go live를 클릭하면 "Server is Started at port : 5500"이라는 알림과 함께 웹페이지가 열리게 됩니다.

이렇게하면 수정된 HTML 코드를 Ctrl+s로 저장하면 실시간으로 반영해서 보여주게 됩니다. 참 편리하죠👍?

Prettier

이번에는 Prettier 라는 코드 포맷터를 설치해볼건데요 간단히 설명하자면 코드를 좀 더 이쁘게 짜는걸 도와주는 기능을 제공합니다.

Format on Save

설치가 끝나면 먼저 crtl+,로 설정창을 열어서 Format On Save에 체크해줍니다. 이제 Save와 동시에 포맷이 적용됩니다!

Tab Width

이제 Prettier로 검색해서 최하단에 보시면 Tab Width를 조절할 수 있는데요 보통 현업에서 두칸으로 권장한다고 합니다.

Prettier Quote

이제 Prettier Quote를 검색해서 1)Single Quote에 체크 2)JavaScript의 Quote Style : single 로 설정해줍니다. 이렇게하면 자바스크립트의 Quote를 Single Quote로 일관성있게 통일시켜줍니다.

Default Formatter 설정

Default Formatter를 Prettier로 설정해줍니다.

이제 마지막으로 우클릭->Format Document with...
->Configure Default Formatter... -> Prettier 으로 HTML도 Prettier가 디폴트로 적용되게 해줍니다.

실습

이제 세팅이 완료되었으니 위에 배운 태그들을 사용해서 간단한 실습을 해보도록 하겠습니다.

사전에 설치한 Prettier와 Live Server 엄청 편리하네요👍 html 문서 수정하면서 일일히 새로고침하고 줄맞추고 했던거 생각하면..🥲 지금이라도 알아서 다행입니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</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>
      김치볶음밥은 한국의 대중적인 요리의 하나이자 볶음밥의 일종으로서 김치와
      밥을 주재료로 프라이팬 등에서 볶은 요리다.[1] 조리하기 편하고 간단하여,
      한국의 음식점인 분식점에서 대부분 팔고 있는 음식이다.[1]
    </p>
    <hr />
    <h1>애국가</h1>
    <h3>1</h3>
    <i>동해</i> 물과 <em>백두산</em>이 마르고 닳도록<br />
    하느님이 보우하사 우리나라 만세.<br />
    무궁화 삼천리 화려 강산<br />
    대한 사람, 대한으로 길이 보전하세.<br />
    <h3>2</h3>
    <b>남산</b> 위에 저 <strong>소나무</strong>, 철갑을 두른 듯<br />
    바람 서리 불변함은 우리 기상일세.<br />
    무궁화 삼천리 화려 강산<br />
    대한 사람, 대한으로 길이 보전하세.<br />
    <h3>3</h3>
    가을 하늘 공활한데 높고 구름 없이<br />
    밝은 달은 우리 가슴 일편단심일세.<br />
    무궁화 삼천리 화려 강산<br />
    대한 사람, 대한으로 길이 보전하세.<br />
    <h3>4</h3>
    이 기상과 이 맘으로 충성을 다하여<br />
    괴로우나 즐거우나 나라 사랑하세.<br />
    무궁화 삼천리 화려 강산<br />
    대한 사람, 대한으로 길이 보전하세.<br />
  </body>
</html>