#8 - HTML 태그 - 텍스트

 

 

글씨 관련 태그 

아래 태그는 body내 위치합니다

 

태그 예시

<!--ul 사용 방법-->
  <ul>
      <li>순서 없는 리스트1</li>
      <li>순서 없는 리스트2</li>
      <li>순서 없는 리스트3</li>
  </ul>
<!--ol 사용 방법-->
  <ol type="a">
      <li value="2">순서 있는 리스트2</li>
      <li value="1">순서 있는 리스트1</li>
      <li value="3">순서 있는 리스트3</li>
  </ol>
<!--dl dd dt 사용 방법-->
  <dl>
      <dt>용어 정의</dt>
      <dd>용어 의미</dd>
  </dl>

 

<!--텍스트 태그-->
<p>
    엔터가
    반영되지 않아<br/>
    br태그를 사용
</p>
<hr/>
<pre>
    엔터가
    그대로 반영 됨
</pre>
<blockquote> 인용문 </blockquote>
<a download href="./image/download">내부 또는 외부 연결</a>
<abbr title="약어 설명">약어</abbr>
<b>텍스트 강조 - 두께</b>
<mark>텍스트 강조 - 하이라이팅</mark>
<em>텍스트 강조 - 이탤릭</em>
<strong>텍스트 의미 강조 - 두께</strong>
<i>텍스트 구분 - 이탤릭</i>
<dfn>용어 정의</dfn>
<cite>저작물의 출처 - 이탤릭</cite>
<q>짧은 인용문</q>
<u>밑줄</u>
<code>컴퓨터 코드</code>
<kbd>키보드 입력</kbd>
<sup>윗 첨자</sup>
<sub>아래 첨자</sub>
<time>10:00</time>
<datetime>21-05-11</datetime>
<span>텍스트 영역 설정</span>

 

<!--삭제 전 / 수정 전-->
<del datetime="21-05-11" cite="./textDelInfo">텍스트 삭제 전, 수정 전</del>

<!--추가 후 / 수정 수-->
<ins datetime="21-05-11" cite="./textAddInfo">텍스트 추가 후, 수정 후</ins>

 

 

태그 설명

구분	태그	속성	의미	값
리스트	ul	순서가 없는 리스트
	ol	순서가 있는 리스트
		start	항목 번호 시작 값	숫자
		type	항목 번호 유형	a, A, i, I, 1
		reversed	순서를 반대로 바꿔줌
	li	ul 또는 ol 하위 리스트. 단독 사용 불가
		value	항목 순서 설정	숫자
용어 정의	dl	Description List의 약자. 용어(dt)와 정의(dd)를 묶어줌. 스타일링이 힘들어서 잘 사용되지 않음
	dd	Descriptoin Detail의 약자. 용어의 의미를 정의
	dt	Description Term의 약자. 용어를 정의
텍스트	p	Paragraph의 약자. 문단 설정
	br/	줄바꿈
	hr/	Horizontal Rule의 약자. 단락과 단락 사이의 주제 구분을 분리
	pre	pre 태그 안의 텍스트는 기록 된대로 정확하게 표현 됨. 띄어쓰기, 엔터 등이 그대로 반영 됨. monospace 글꼴 적용
	blockquote	block Quotation의 약자. 인용문 설정
	a	Anchor의 약자. 내부 또는 외부의 URL을 연결 가능
		download	a 태그가 다운로드 용임을 의미	boolean
		href	경로 입력	URL
		rel	현재 문서와 연결한 아이템의 관계가 어떻게 되는지 설명	Link type
		target	새창에서 열릴지 여부를 정의	_self, _blank
		type	mime type	mime type 종류
	abbr	Abbreviation의 약자. 약어를 abbr 태그로 감싼 뒤, title 속성에 원문을 넣으면 툴팁으로 노출
		title	abbr 태그로 감싸진 약어의 원문을 툴팁으로 표시	텍스트
	b	Bring Attention의 약자. 독자의 주의를 끌기 위한 용도로 사용합니다. 그 외의 텍스트를 굵은 글씨체로 강조하는 것 말고는 별다른 역할이 없음
	mark	하이라이팅 할 때 사용. 배경색이 노란색으로 표시 됨
	em	Emphasis의 약자. 단순한 의미 강조. 이탤릭체로 표시
	strong	중요 컨텐츠 표시. 굵게 표시 됨.
	i	주위와 구분해야 하는 부분. 이탤릭체로 표시
	dfn	Definition의 약자. 용어를 정의할 때 사용
	cite	저작물의 출처를 표기할 때 사용. 이탤릭체로 표시
	q	Inline Quotation의 약자. 짦은 인용문 표시
	u	Underline의 약자. 밑줄 효과
	Code	컴퓨터 코드 표시
	kbd	Keyboard Input의 약자. 키보드 입력, 음성 입력 등 임의의 장치를 사용한 사용자의 입력 표시
	sup	Superscripted의 약자. text윗 첨자 표시
	sub	Subscript text의 약자. 아래 첨자 표시
	time	날짜.시간 표시
		datetime	요소의 시간 또는 날짜 값	date
	span	텍스트 영역 설정. 의미는 없으며, 효과를 달리 줄 때 영역 설정
변경 표시	del	삭제/수정 전 텍스트 표시. 취소선 표시
		cite	변경점을 설명하는 리소스의 URI	URI
		datetime	변경된 날짜	Date
	ins	추가/수정 후 텍스트 표시.
		cite	변경점을 설명하는 리소스의 URI	URI
		datetime	변경된 날짜	Date

 

#HTML 태그 참고서

developer.mozilla.org/ko/

MDN Web Docs