본문 바로가기

WEB/HTML

글자 스타일 지정

글자 스타일 지정 관련 태그

 

1. 물리적 스타일 관련 태그 

 • 단순히 웹브라우저에 표시되는 출력 모양만을 지정하는 태그 

    --> <b>, <i>, <s>, <u>, <sup>, <sub>, <small>

 

 

<body>
&lt;b&gt; : <b>진하게 표시</b><br/>
&lt;i&gt; : <i>기울어진 형태(이탤릭체)로 표시</i><br/>
&lt;s&gt; : <s>글자 가운데를 통과하는 줄(취소선)을 표시</s><br/>
&lt;u&gt; : <u>밑줄을 표시</u><br/>
&lt;sup&gt; :글자를<sup>위 첨자</sup>로 표시<br/>
&lt;sub&gt; :글자를<sub>아래첨자</sub>로 표시<br/>
&lt;small&gt; : 기본 글자의 크기보다
			   <small>작은 크기의 글자</small>로 표시
               
</body>

 

 

태그 설명

 

<b> : 진하게 표시 - 강조의 의미(X), 주목해야 할 단어를 표시

<i> :  기울어진 형태(이탤릭체)로 표시 -  다른 분위기나 어조, 보통의 서술과 구분되어야 하는 텍스트를 표시

<s> : 글자 가운데를 통과하는 줄(취소선)을 표시 - 더이상 정확하지 않거나 관련이 없는 내용을 표시

<u> : 밑줄을 표시 - 불충분한 내용을 표시

<small> : 기본글자의 크기보다 작은크기의 글자로 표시 - 부수적인 해설이나 이용조건, 법적 공지 등의 작은 인쇄를 표시 

<sup> : 글자를 위첨자로 표시 

<sub> : 글자를 아래첨자로 표시


2. 논리적 스타일 관련 태그

 • 출력 형태보다는 태그 자체에 의미가 부여되어 있는 태그

   --> <cite>, <code>, <samp>, <var>, <dfn>, <em>, <strong>, <abbr>, <address>, <kbd>, "<q>

 

&lt;cite&gt; : <cite>책, 시, 그림, 영화 등의 작품 제목을 표시</cite><br/>
&lt;code&gt; : <code>컴퓨터 코드를 표시</code><br/>
&lt;samp&gt; : <samp>프로그램의 샘플 출력을 표시</samp><br/>
&lt;var&gt; : <var>변수를 표시</var><br/>
&lt;dfn&gt; : <dfn>용어에 대한 정의를 표시</dfn><br/>
&lt;em&gt; : <em>강조하는 내용을 표시</em><br/>
&lt;strong&gt; : <strong>중요한 내용을 표시</strong><br/>
&lt;abbr&gt; : <abbr>축약형을 표시</abbr><br/>
&lt;address&gt; : <address>실제 우편물 주소를 표시</address><br/>
&lt;kdb&gt; : <kdb>키보드로 입력한 내용임을 표시</kdb><br/>
&lt;q&gt; : <q>짧은 인용구를 표시</q><br/>

태그 설명

 <cite>: 책, 시, 그림, 영화 등의 작품 제목을 표시 
<code>: 컴퓨터 코드를 표시
<samp>: 프로그램의 샘플 출력을 표시
<var>: 변수를 표시
<dfn>: 용어에 대한 정의를 표시
<em>: 강조하는 내용을 표시
 <strong>: 중요한 내용을 표시
<abbr>: 축약형을 표시
<address>: 실제 우편물 주소를 표시
<kdb>: 키보드로 입력한 내용임을 표시
<q>: 짧은 인용구를 표시

 

'WEB > HTML' 카테고리의 다른 글

콘텐츠 그룹핑  (0) 2021.04.13
목록 지정  (0) 2021.04.13
텍스트 표현  (0) 2021.04.13
HTML 문서 - 구성 요소  (0) 2021.04.13
태그  (0) 2021.04.12