HTML에서 텍스트 요소로 쓰이는 태그들을 정리해보았다.
<h> Tag
<h1>~<h6>: 6단계의 구획 제목을 나타낸다.h1
h2
h3
h4
h5
h6
-
사용자 에이전트(브라우저)가 제목의 정보를 사용해 자동으로 문서 콘텐츠의 표(목차)를 만드는 등의 작업을 수행할 수 있다.
-
글씨 크기를 위해 제목 태그를 사용하지 말아라!!
--> CSS의 font-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>요소를 사용해 여백을 추가하지 말아라!!
--> 사용자의 혼란을 가중시킨다. [ 여백은 CSS의 margin 속성 등을 사용할 것. ]
🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/p
<br> Tag
<br>: 텍스트 안에 줄바꿈(캐리지 리턴)을 생성한다.
줄바꿈
바꿨다!
-->줄바꿈<br>바꿨다!
-
<br>과<br/>은 동일하게 인식된다. -
html 문서에서 space를 아무리 많이 추가해도 띄어쓰기는 하나로 처리된다.
-
문단 사이에 여백을 두기 위한 용도로
<br>을 사용하지 말아라!!
--><p>요소로 감싼 후 CSS의 margin 속성으로 여백의 크기를 조절한다.
🦊 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
< = <
> = >
" = "
' = '
& = &
spacing(공백) =
...
🌱 W3Schools Link : https://www.w3schools.com/html/html_entities.asp
