HTML - 텍스트 마크업 (Text markup)

HTML 태그 정리

 Text Markup (텍스트 마크업)

태그	정의	사용	Display
<strong>	해당 내용의 중요함을 나타냄	- strong을 중첩하면 중첩할 수록 중요하다고 할 수 있음 - 브라우저에서 자동 font-weight가 bold처리 됨	Inline-Block
<b>	텍스트를 굵게 장식하는 스타일 요소	- 키워드를 부각하기 위해 사용 - 의미가 크게 없으므로 강조를 하기위한 목적으면 em, 중요성을 목적으로 하면 strong, 텍스트를 부각하려면 mark를 사용	Inline-Block
<mark>	하나의 문서 내에 다른 문맥과의 관련성을 나타내기위해 마킹되거나 하이라이트 텍스트 표현	- 검색어와 매칭되는 부분을 하이라이팅 하기 위해 사용 - 특정 부분의 주의를 끌기 위해 사용 - 브라우저에서 자동 Background 효과가 처리 됨	Inline-Block
<em>	해당 내용을 강조함	- em을 중첩하면 중첩할 수록 중요하다고 할 수 있음 - 브라우저에서 자동 italic체로 표시 됨	Inline-Block
<i>	텍스트를 이탤릭체로 장식하는 스타일 요소 요새는 아이콘의 i와 같아서 아이콘을 넣을때에도 사용	- 의미가 크게 없으므로 강조를 하기위한 목적이면 em, 정의를 목적으로 하고 있다면 dfn을 사용	Inline-Block
dfn	텍스트를 전문용어나 관용구등을 정의어로 지정	- 브라우저에서 자동 Italic체로 표시	Inline-Block
<blockquote>	텍스트를 인용문으로 정의하며 인용된 곳의 원천 소스를 표시	- 텍스트를 블록레벨의 인용문으로 지정 - 브라우저에서 자동 들여쓰기로 표현	Block
q	다른 소스로부터 인용된 구문컨텐츠를 나타내며 인용해온 원본 주소를 나타냄	- 텍스트를 인라인레벨의 인용문으로 지정 - 브라우저에서 자동 ' ', " "을 표현(따로 따옴표를 적을 필요 X)	Inline-Block
<abbr>	텍스트를 생략어로 지정	- 마우스를 올리면 title 속성의 내용이 나옴 <abbr title="Hyper Text Mark Language">HTML</abbr> - 스펠링을 한자씩 발음해줌(에이치. 티. 엠. 엘)	Block
<acronym>	텍스트를 두문자어로 지정	- 마우스를 올리면 title 속성의 내용이 나옴 <acronym title="Random Access Memory">RAM</acronym> - 스펠링을 한 단어로 발음해줌(램)	Block
<address>	연락처 정보를 나타냄	- <footer>안에 연락처 정보를 제공할 때 사용	Block
<pre>	형식화된 텍스트의 블럭을 나타냄	- 연속하는 압축 문자의 압축을 금지 - 요소 안에 텍스트는 파일에 그려진 그대로 보여짐(빈 칸도 타이핑한대로 입력)	Block
<dfn>	텍스트를 전문용어나 관용구등의 정의어로 지정	- <dt>,<dd>와 자주 사용됨 - <abbr>태그와도 사용 가능하지만 <abbr>태그에 title 속성을 넣어줘야함	Block
<code>	컴퓨터 코드를 나타냄	- XML요소 이름, 파일 이름, 컴퓨터 프로그램 등 컴퓨터가 인식할 수 있는 일련의 컴퓨터 코드를 나타냄	Inline-Block
<cite>	작품의 제목을 나타냄	- 사람이름이 작품과 관련있다고 해도 <cite>로 마크업 X - <cite>는 작품의 제목 이상의 것을 포함하면 안됌 (제목을 마크업 하는 용도로 사용)	Inline-Block
<del>	문서로부터 삭제되었음을 나타냄	- 속성에는 cite(변화에 대한 설명), datetime(삭제한 시간)이 있음 - 브라우저에서 자동으로 취소선을 그려줌	Block, Inline-Block
<ins>	문서에 추가된것을 나타냄	- 브라우저에서 자동으로 언더바를 그려줌	Block, Inline-Block
<sub>	텍스트를 아래첨자로 정의	- 단순히 타이포그래피로 사용되지 않고 만약 이 요소를 가용하지 않을때 의미가 변하는 경우 사용 - 브라우저에서 자동으로 절반 문자 법선 아래에 표시하고 글자를 작게 해줌	Inline-Block
<sup>	텍스트를 위첨자로 정의	- 단순히 타이포그래피로 사용되지 않고 만약 이 요소를 가용하지 않을때 의미가 변하는 경우 사용 - 브라우저에서 자동으로 절반 문자 법선 위에 표시하고 글자를 작게 해줌	Inline-Block
<bdo>	텍스트의 방향을 명시적으로 지정	- dir 속성을 반드시 사용해야하며 ltr(왼쪽 -> 오른쪽), rtl(오른쪽 -> 왼쪽)으로 방향 지정 가능	Inline-Block
<bdi>	텍스트의 출력 방향을 브라우저가 판단해 표현	- 사용자의 나라를 판단하여 나라에 맞게 텍스트가 표현( 아랍어 같은 경우 오른쪽에서 글씨를 읽기 때문에 오른쪽으로 정렬)	Inline-Block

 참고 :

• https://www.w3schools.com
• https://developer.mozilla.org
• https://opentutorials.org