HTML 텍스트 태그 정리

Flex·2022년 2월 13일
0

HTML 모음

목록 보기
3/13
post-thumbnail

HTML에서 텍스트 요소로 쓰이는 태그들을 정리해보았다.


<h> Tag

<h1> ~ <h6> : 6단계의 구획 제목을 나타낸다.

h1

h2

h3

h4

h5
h6
  • 사용자 에이전트(브라우저)가 제목의 정보를 사용해 자동으로 문서 콘텐츠의 표(목차)를 만드는 등의 작업을 수행할 수 있다.

  • 글씨 크기를 위해 제목 태그를 사용하지 말아라!!
    --> CSSfont-size 속성을 사용한다.

  • 제목 단계를 건너뛰지 말아라.
    --> 언제나 <h1>으로 시작하여 <h2>순차적으로 기입한다.

  • 페이지 당 하나의 <h1> 만 사용하자.
    --> 가장 중요한 제목이므로 전체 페이지의 목적을 설명해야 한다.

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/Heading_Elements


<p> Tag

<p> : 하나의 문단을 나타낸다.

Hello World!

  • 문단은 이미지나 입력 폼 등 서로 관련있는 콘텐츠 무엇이든 될 수 있다.
    --> 문단 == 블록 레벨 요소 (Block level element)

  • 기본 스타일 : 문단끼리 한 줄의 간격으로 분리한다.

  • <p> 요소를 사용해 여백을 추가하지 말아라!!
    --> 사용자의 혼란을 가중시킨다. [ 여백은 CSSmargin 속성 등을 사용할 것. ]

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/p


<br> Tag

<br> : 텍스트 안에 줄바꿈(캐리지 리턴)을 생성한다.
줄바꿈
바꿨다!
--> 줄바꿈<br>바꿨다!

  • <br><br/>동일하게 인식된다.

  • html 문서에서 space를 아무리 많이 추가해도 띄어쓰기는 하나로 처리된다.

  • 문단 사이에 여백을 두기 위한 용도로 <br>을 사용하지 말아라!!
    --> <p> 요소로 감싼 후 CSSmargin 속성으로 여백의 크기를 조절한다.

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/br


<blockquote> Tag

<blockquote> : 안쪽의 텍스트가 긴 인용문임을 나타낸다.

  • <p> 태그 내부에 사용할 수 없다.

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/blockquote


<q> Tag

<q> : 둘러싼 텍스트가 짧은 인용문임을 나타낸다.

  • 줄 바꿈이 없는 짧은 경우에 적합하다.

  • <p> 태그 내부에 위치한다.

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/q

[ <blockquote> & <q>동일 속성 ]

  • cite 속성 : 인용문의 출처 문서나 메시지를 가리키는 URL이다.
    --> 인용문의 맥락 혹은 출처 정보를 가리킨다.

<pre> Tag

<pre> : 미리 서식을 지정한 텍스트를 나타내며, HTML에 작성한 내용 그대로 표현한다.

            \  ^__^
            \  (oo)\_______
               (__)\       )\/\
                   ||----w |
                   ||     ||
<pre>
            \  ^__^
            \  (oo)\_______
               (__)\       )\/\
                   ||----w |
                   ||     ||
</pre>
  • 텍스트는 보통 고정폭 글꼴을 사용해 렌더링한다.

  • 요소 내 공백문자를 그대로 유지한다.

  • 본문에 소스 코드를 삽입할때 유용하게 쓰일 수 있다.

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/pre


<figure> Tag

<figure> : 독립적인 콘텐츠를 표현한다.

  • <figcaption> 요소를 사용해 설명을 붙일 수 있다.
    --> 피규어, 설명, 콘텐츠는 하나의 단위로 참조된다.

Example

<figure>
  <p style="white-space:pre">
Bid me discourse, I will enchant thine ear,
  Or like a fairy trip upon the green,
Or, like a nymph, with long dishevell'd hair,
  Dance on the sands, and yet no footing seen:
Love is a spirit all compact of fire,
  Not gross to sink, but light, and will aspire.</p>
  <figcaption><cite>Venus and Adonis</cite>,
    by William Shakespeare</figcaption>
</figure>

--> <figure> 태그로 감싸진 부분이 하나의 단위이다.

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/figure


<hr> Tag

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


단순하게 **수평선**이다.
  • 단독으로 사용된다.

  • 속성으로 꾸미지 않고 CSS style 을 적용한다.

  • <hr> & <hr/> : 동일한 의미다.

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/hr


<b> Tag

<b> : "굵은 글씨 요소" 로 불리며, 텍스트를 굵은 글씨체(bold)로 강조한다.

  • 요약 키워드, 리뷰의 제품명 등 특별한 중요성은 없지만 굵게 표시할 부분에 사용한다.

  • 특정 일부분을 강조하기 위한 태그이다.
    --> ⭐️ 문단 전체를 <b> 태그로 감싸는 일은 없도록 하자!!

  • 문단 전체를 굵게 표시하고 싶다면 CSS style 을 사용한다.

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/b


<strong> Tag

<strong> : 중대하거나 긴급한 콘텐츠를 나타낸다.
--> <b> 태그와 마찬가지로 굵은 글씨체로 표시한다.

  • 스크린 리더가 화면을 읽을 때 <strong>태그로 감싸진 부분을 강조하여 읽어준다.

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/strong


<i> Tag

<i> : 텍스트에서 주위와 구분해야 하는 부분이다. (기술 용어, 외국어 구절, 등장인물 등)

  • 기울임꼴로 표시한다.
  • "강조" 보다 "구분" 에 초점을 맞춘다.

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/i


<em> Tag

<em> : 텍스트의 강세를 나타낸다. 중첩시 더 큰 강세를 뜻하게 된다.

  • <strong> 태그와 마찬가지로 스크린 리더가 강조된 부분으로 인식하여 읽어준다.

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/em


<mark> Tag

<mark> : 현재 맥락에 관련이 깊거나 중요해 표시 또는 하이라이트한 부분을 나타낸다.

  • 형관펜을 사용해 책에서 중요해 보이는 내용을 강조 표시하는 것과 같다.

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/mark


<small> Tag

<small> : 덧붙이는 글이나, 저작권과 법률 표기 등의 작은 텍스트를 나타낸다. from MDN

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/small


<sup> Tag

<sup> : 활자 배치를 위 첨자로 해야 하는 인라인 텍스트를 지정한다.

  • 보통 더 작은 글씨 크기를 가진다.

  • 기준선을 위로 올려 렌더링한다.

  • ex) 지수 표기, 서수 표기 등

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/sup


<sub> Tag

<sub> : 활자 배치를 아래 첨자로 해야 하는 인라인 텍스트를 지정한다.

  • 보통 더 작은 글씨 크기를 가진다.

  • 기준선을 아래로 내려 렌더링한다.

  • ex) 변수 표기, 화학식 등

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/sub


<del> Tag

<del> : 문서에서 제거된 텍스트의 범위를 나타낸다.

  • 문서나 소스 코드의 변경점 추적 등에 사용할 수 있다.

  • 속성
    1. cite : 회의록, 이슈 추적 시스템의 티켓 번호 등 변경점을 설명하는 리소스의 URI이다.
    2. datetime : 변경이 발생한 일시다.

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/del


<ins> Tag

<del> : 문서에 추가된 텍스트의 범위를 나타낸다.

  • 문서나 소스 코드의 변경점 추적 등에 사용할 수 있다.

  • 속성
    1. cite : 회의록, 이슈 추적 시스템의 티켓 번호 등 변경점을 설명하는 리소스의 URI이다.
    2. datetime : 변경이 발생한 일시다.

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/ins


<code> Tag

<code> : 짧은 코드 조각을 나타내는 스타일을 사용해 자신의 콘텐츠를 표시한다.

  • 인라인(Inline) 요소이다.

  • 여러 줄의 코드를 나타내려면 <pre> 태그를 함께 사용한다.

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/code


<kbd> Tag

<kbd> : 키보드 입력, 음성 입력 등 임의의 장치를 사용한 사용자의 입력을 나타낸다.
"키 보 드" k b d

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/kbd


<a> Tag

<a> : 앵커(anchor) 요소는 href 특성을 통해 다른 URL로 연결할 수 있는 하이퍼링크(Hyperlink)를 만든다.

MDN 설명 페이지

Example

<a href="https://developer.mozilla.org/ko/docs/Web/HTML/Element/a">MDN 설명 페이지</a>
  • URL 주소 뿐만 아니라 같은 페이지의 위치, 파일, 이메일 주소 등으로 연결이 가능하다.

  • <a> 태그 안의 콘텐츠는 링크 목적지의 설명을 나타내야 한다.

  • 속성
    1. href : 하이퍼링크가 가리키는 URL이다.
    - 웹사이트 절대 주소 또는 파일의 상대 경로로 파악한다.
    - 메일이나 전화번호의 경우 기기의 기본 프로그램 또는 기능으로 연결된다.
    2. target : 링크한 URL을 표시할 위치이다.
    --> 새 탭에서 열지, 현재 페이지에서 열지, ...

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/a
--> 중요한 태그인 만큼 설명 양이 많다.


Entity references

HTML에 특수문자 포함

  • HTML에서 문자 <, >, ", & 등은 특수 문자이다.

  • 본문 입력시 원하는대로 기호가 출력되지 않을 경우
    --> Entity 요소가 아닌지 찾아볼 필요가 있다.

List

< = &lt;
> = &gt;
" = &quot;
' = &apos;
& = &amp;
spacing(공백) = &nbsp;
...

🌱 W3Schools Link : https://www.w3schools.com/html/html_entities.asp

profile
💵 오늘을 살자

0개의 댓글