Large Rainbow Pointer
[HTML] HTML 사용하는 법 / 기초 태그 # 1
짱잼
[HTML] HTML 사용하는 법 / 기초 태그 # 1💜 프론트엔드/HTML2023. 12. 2. 17:22@짱잼
Table of Contents

시작하며...

나는 React도 할 수 있고, 프로젝트 경험도 있지만

매번 사용하는 HTML 태그만 사용하고, 비슷한 태그의 차이점과 내가 자주 사용하지 않는 것들에 대해

까먹고 있거나 모르는 것이 많다고 생각해서 다시 HTML 기초부터 공부해보기로 하였다.

HTML 실습 준비

비주얼 스튜디오

먼저 가장 기본적인 비주얼 스튜디오를 설치한다.

 

그리고 내가 만든 html 파일을 웹상에서 새로고침 없이 볼 수 있도록,

Live Server 라는 플러그인을 설치한다.

 

파일 생성

폴더를 생성하고 index.html 파일을 생성한다.

그리고 ! 를 입력하면 자동으로 HTML 기본틀이 생성된다.

 

웹 상에 나타나는 내용은 <body> 태그 라는 곳에 넣으면 된다.

그리고 언어를 기존 영어인 en 에서 한국어인 ko 로 수정해준다.

그래야 추후에 웹 브라우저에서 검색을 하였을 때, 해당 언어로 작성된 웹 페이지를 보여주기 때문에 검색최적화를 위해 알맞은 언어로 설정해야 한다.

<html lang="ko">

 

<body> 태그에 원하는 내용을 넣었다면,

파일을 오른쪽 클릭하여 Open with Live Server 를 선택한다.

 

그러면 내가 작성한 내용이 웹 상에서 나타나는 것을 볼 수 있다.

 

결과

 

HTML 태그

h1 ~ h6 제목 태그

<h1> 부터 <h6> 는 제목을 표현하는 태그이다.

<body> 태그 안에 아래 내용을 넣고

  <body>
    <h1>h1 태그</h1>
    <h2>h2 태그</h2>
    <h3>h3 태그</h3>
    <h4>h4 태그</h4>
    <h5>h5 태그</h5>
    <h6>h6 태그</h6>
  </body>

 

실행을 하면 제목 태그가 생성된 것을 볼 수 있다.

 

결과

 

해당 태그에 대한 자세한 내용은 아래 사이트에서 확인할 수 있고

그 외에도 다른 HTML 태그에 대한 자세한 설명도 볼 수 있다.

 

<h1>–<h6>: HTML 구획 제목 요소 - HTML: Hypertext Markup Language | MDN

HTML <h1>–<h6> 요소는 6단계의 구획 제목을 나타냅니다. 구획 단계는 <h1>이 가장 높고 <h6>은 가장 낮습니다.

developer.mozilla.org

나는 지금까지 제목 태그를 잘 사용하지 않았다. 왜냐하면 그냥 css로 글씨를 굵게 하거나 크게 하면 되었기 때문이다.

그러나 이러한 제목 태그는 구글 검색 엔진에 큰 영향을 주기 때문에 

앞으로 제목을 나타내는 부분이 있을 경우에 제목 태그를 유용하게 사용해봐야겠다.

 

제목 태그 사용 팁
- 글씨 크기를 위해 제목 태그를 사용X, 대신 CSS의 font 속성 사용
- 제목 단계를 건너뛰기 X, <h1>로 시작해서 <h2> 순차적으로 기입
- 페이지 당 하나의 <h1>만 사용

 

p 문단 태그

<p> 태그는 문단을 구분해주는 태그이다.

<p> 태그를 사용함으로써 문단의 가독성을 높여주고 구조를 구분해주어 검색엔진이 콘텐츠를 쉽게 이해할 수 있다고 한다.

  <body>
    <h1>HTML 태그</h1>
    <h2>p 태그</h2>
    <p>p 태그는 문단을 구분해준다.</p>
    <p>p 태그를 사용하면 가독성과 높여준다.</p>
    p 태그는 문단을 구분해준다. 
    p 태그를 사용하면 가독성을 높여준다.
  </body>

 

위에 코드를 <body> 태그에 넣고 실행하면

<p> 태그에 넣은 것은 자동으로 문단을 구분해주고

그렇지 않은 것은 문단과 줄바꿈 구분없이 한 줄로 생성되는 것을 볼 수 있다.

 

결과

<p> 태그에 대한 자세한 내용도 아래 웹페이지에서 확인할 수 있다.

 

<p> - HTML: Hypertext Markup Language | MDN

HTML <p> 요소는 하나의 문단을 나타냅니다. 시각적인 매체에서, 문단은 보통 인접 블록과의 여백과 첫 줄의 들여쓰기로 구분하지만, HTML에서 문단은 이미지나 입력 폼 등 서로 관련있는 콘텐츠 무

developer.mozilla.org

 

br 줄바꿈 태그

<br> 태그는 줄바꿈을 해주는 태그이다.

이렇게 한 문단에 두개에 문장을 넣고 줄바꿈을 하고 싶어 아래처럼 코드를 작성해도

    <p>
      p 태그는 문단을 구분해준다. 
      p 태그를 사용하면 가독성을 높여준다.
    </p>

 

이렇게 한줄로 나오게 된다.

 

결과

그래서 이럴때 사용하는 것이 <br> 태그이다.

  <body>
    <h1>HTML 태그</h1>
    <h2>p 태그</h2>
    <p>p 태그는 문단을 구분해준다.</p>
    <p>p 태그를 사용하면 가독성을 높여준다.</p>
    <h2>br 태그</h2>
    <p>
      br 태그는 줄바꿈을 해준다. <br />
      그러나 br 태그를 너무 남용하면 좋지 않다.
    </p>
  </body>

 

위에 처럼 코드를 작성하면 한 문단안에서 문장이 줄바꿈 되는 것을 볼 수 있다.

결과

 

<br>: 줄바꿈 요소 - HTML: Hypertext Markup Language | MDN

HTML <br> 요소는 텍스트 안에 줄바꿈(캐리지 리턴)을 생성합니다. 주소나 시조 등 줄의 구분이 중요한 내용을 작성할 때 유용합니다.

developer.mozilla.org

 

hr 가로줄 태그

<hr> 태그는 가로줄을 그어준다.

    <h2>hr 태그</h2>
    <hr />

 

결과

 

<hr> - HTML: Hypertext Markup Language | MDN

HTML <hr> 요소는 이야기 장면 전환, 구획 내 주제 변경 등, 문단 레벨 요소에서 주제의 분리를 나타냅니다.

developer.mozilla.org

 

스타일 및 부가 정보 표현 HTML 태그

sup, sub 첨자 태그

<sup>는 위 첨자를 표시할 때 사용하고,

<sub>는 아래 첨자를 표시할 때 사용하는 태그이다.

    <h2>sup, sub 태그</h2>
    <p>x<sup>2</sup></p>
    <p>CO<sub>2</sub></p>

결과

해당 태그는 단순히 글자를 작게 만들어 위 또는 아래로 배치하는 것이 아니라

지수 표현 이나 화학식 등에 사용해야 한다.

 

<sup>: The Superscript element - HTML: HyperText Markup Language | MDN

The <sup> HTML element specifies inline text which is to be displayed as superscript for solely typographical reasons. Superscripts are usually rendered with a raised baseline using smaller text.

developer.mozilla.org

 

<sub>: 아래 첨자 요소 - HTML: Hypertext Markup Language | MDN

HTML <sub> 요소는 활자 배치를 아래 첨자로 해야 하는 인라인 텍스트를 지정합니다. 아래 첨자는 보통 더 작은 글씨 크기를 가지고, 기준선을 아래로 내려 렌더링 합니다.

developer.mozilla.org

 

u, s 밑줄, 취소선 태그

<u> 태그는 밑줄을 그을 때 사용되고,

<s> 태그는 취소선을 그을 때 사용한다.

    <h2>u, s 태그</h2>
    <p>
      <u>u 태그는 밑줄</u>을 그어주고 <br />
      <s>s 태그는 취소선</s>을 그어준다. <br />
      u 태그는 현재 철자 오류를 강조하는 용도로 사용되고, <br />
      s 태그는 이제 관계 없는 내용을 지우는 용도로 사용된다.
    </p>

결과

 

<u> - HTML: Hypertext Markup Language | MDN

HTML <u> 요소는 글자로 표현하지 않는 주석을 가진 것으로 렌더링 해야 하는 텍스트를 나타냅니다. 기본값에서는 단순한 밑줄로 표시하지만 CSS를 사용해 바꿀 수 있습니다.

developer.mozilla.org

 

<s> - HTML: Hypertext Markup Language | MDN

HTML <s> 요소는 글자에 취소선, 즉 글자를 가로지르는 선을 그립니다. <s> 요소를 사용해 이제 관계 없거나 더 이상 정확하지 않은 부분을 나타내세요. 그러나, <s>는 문서의 편집 기록을 나타내는

developer.mozilla.org

 

HTML 강조 태그

b, strong 굵기 태그

<b> 태그는 글자를 굵게 만들어 주고,

<strong> 태그는 굵게 만들어 줄 뿐만 아니라 중요한 내용임을 표현해준다.

    <h2>b, strong 태그</h2>
    <p>
      <b>b 태그</b>와 <strong>strong 태그</strong>는 똑같아 보이지만 다른 태그이다.<br />
      b 태그는 단순히 굵게 보여주고, <br />
      strong 태그는 중요한 글자를 표현해주어 검색엔진 최적화를 도와준다.
    </p>

결과

그런데 <b> 태그도 그저 굵게 보이는 브라우저 설정이므로, 사용을 권장하지 않아

css의 font-weight 를 사용하여 설정하는 것이 좋다.

 

<b> - HTML: Hypertext Markup Language | MDN

HTML <b> 요소는 독자의 주의를 요소의 콘텐츠로 끌기 위한 용도로 사용합니다. 그 외의 다른 특별한 중요도는 주어지지 않습니다. 원래는 "굵은 글씨 요소"로 불렸으며, 대부분의 브라우저도 여전

developer.mozilla.org

 

<strong>: The Strong Importance element - HTML: HyperText Markup Language | MDN

The <strong> HTML element indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type.

developer.mozilla.org

둘 다 무슨 태그인지 알고 있었지만, 자세하게는 몰랐고 까먹고 있어서 이를 통해 알게 되어 좋았다.

이 점을 유의하여 중요한 단어 키워드는 strong 태그를 사용해야 겠다.

 

i, em 기울임 태그

<i> 태그는 글자를 기울림체로 만들어 주고,

<em> 태그는 기울림체로 만들어 줄 뿐만 아니라 중요한 내용임을 표현해준다.

    <h2>i, em 태그</h2>
    <p>
      <i>i 태그</i>와 <em>em 태그</em>는 똑같아 보이지만 다른 태그이다.<br />
      i 태그는 단순히 기울림체로 보여주고, <br />
      em 태그는 중요한 글자를 표현해주어 검색엔진 최적화를 도와준다.
    </p>

결과

그래서 외국어나 등장인물의 생각 같은 것은 <i> 태그를 사용하여 기울임체로 표현하고,

중요한 단어를 기울림체로 표현하고 싶은 경우는 <em> 태그를 사용한다.

 

<i> - HTML: Hypertext Markup Language | MDN

HTML <i> 요소는 텍스트에서 어떤 이유로 주위와 구분해야 하는 부분을 나타냅니다. 기술 용어, 외국어 구절, 등장인물의 생각 등을 예시로 들 수 있습니다. 보통 기울임꼴로 표시합니다.

developer.mozilla.org

 

 

<em>: 강세 요소 - HTML: Hypertext Markup Language | MDN

HTML <em> 요소는 텍스트의 강세를 나타냅니다. <em> 요소를 중첩하면 더 큰 강세를 뜻하게 됩니다.

developer.mozilla.org

이것도 둘 다 무슨 태그인지 알고 있었지만, 차이는 잘 모르고 있었다.

 

HTML 요소

공백 표현

HTML로 공백을 표현하고 싶을 때, 스페이스바를 여러번 눌러도 한 번밖에 적용이 되지 않는다.

그래서 공백을 넣고 싶으면 &nbsp; 를 사용한다.

    <h2>공백 표현</h2>
    <p>안&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;녕</p>

결과

Entity Name

&nbsp; 와 같은 것을 문자 entity name 이라고 한다.

공백 이외에도 그냥 사용하였을 때 적용되지 않은 문자나 특수 문자 등을

html에서 사용하고 싶다면 아래 페이지에서 원하는 문자의 엔티티 코드를 사용하면 된다.

 

HTML Standard

HTMLLiving Standard — Last Updated 30 November 2023 ← 13.2 Parsing HTML documents — Table of Contents — 14 The XML syntax → 13.5 Named character references 13.5 Named character references This table lists the character reference names that are su

html.spec.whatwg.org

 

주석 처리

코드를 작성하다가 개발자들끼리 공유해야 될 내용이나 메모 등을 할 때

화면에는 나타나지 않도록 주석 처리 하는 것이 있다.

    <h2>주석 처리</h2>
    <!-- 주석처리는 코드에서는 보이지만, 웹에서는 보이지 않는다. -->

 

위에 처럼 작성하고 실제 코드를 보면

아무것도 없지만 소스 보기를 클릭하면 코드 상에 있는 것을 볼 수 있다.

결과

주석 단축키
윈도우: Ctrl + /
맥: Command + /

 

 

마무리 하며...

해당 게시물에서 html 태그 중 일부분을 알아보았다.

태그 대부분은 다 알고있었지만 그 쓰임세와 검색 엔진 최적화에 관한 부분은 크게 고려하고 있지 않았다.

그래서 앞으로 코드를 작성할 때 이러한 부분을 신경쓰어 최적화 되고 용도에 알맞은 태그를 사용해야 겠다.

 

(해당 게시물은 아래 영상을 참고하여 작성한 글입니다.)

저작자표시

'💜 프론트엔드 > HTML' 카테고리의 다른 글

[HTML] HTML 입력(input) 태그 #6  (1) 2023.12.07
[HTML] HTML 링크 태그 #5  (1) 2023.12.06
[HTML] HTML 이미지 / 표 태그 #4  (1) 2023.12.05
[HTML] HTML 나열 태그 #3  (0) 2023.12.03
[HTML] HTML 인용 태그 #2  (0) 2023.12.03
짱잼
@짱잼 :: 짱잼이의 FE 개발 공부 저장소

FE 개발자가 되고 싶은 짱잼이

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

💜 프론트엔드/HTML 추천 글
more
image
loading

티스토리툴바