IT/HTML

HTML 논리적 스타일 지정 태그

-_-* 2021. 1. 1. 22:02
반응형

안녕하세요. 이미보라입니다 :) 

저희는 지난 포스트에서 물리적 스타일 지정 태그들을 알아봤습니다. 

 

 

오늘은 논리적 스타일 지정 태그들을 알아보도록 하겠습니다. 

논리적 스타일 지정이란 태그명이 어떠한 용도와 관련된 텍스트로 태그명을 봤을 때는 어떤 효과가 적용하는지 알 수 없습니다. 다시 말해, 사용 용도별 스타일 지정이라고 생각하시면 편할 것 같아요. 

 

<EM> ... </EM>

텍스트를 강조하는 (emphasized text) 경우 사용 가능한 태그입니다. 
적용된 효과는 이탤릭체로 보입니다.  

 

<STRONG> ... </STRONG>

텍스트를 강조하는 경우 사용 가능한 태그입니다. 
적용된 효과는 볼드체(진하게)로 보입니다.  

EM태그와 STRONG태그의 차이는, EM태그의 경우 구어체에서 어떤 단어의 의미 변화에 사용되지만, 

STRONG의 경우 문장 중에서 강조하고 싶은 일부분을 표현할 때 사용합니다. 

 

<DFN> ... </DFN>

어떠한 용어가 처음 사용될 때, 이 용어를 정의하기 위해서 사용 가능합니다. 
적용된 효과는 이탤릭체로 보입니다. 
속성으로 title을 사용하면 마우스를 해당 용어에 올려뒀을 때 마우스 아래 title에서 작성한 값을 확인할 수 있습니다. 

 

 

<CITE> ... </CITE>

제목 또는 책이나 영화 음악과 같은 레퍼런스들의 자료를 인용할 때 (citation) 사용됩니다. 
HTML5에서는 창작물이나 저작물 등의 제목을 명시할 때 사용됩니다.
적용된 효과는 이탤릭체로 보입니다.  

 

 

<SAMP> ... </SAMP>

컴퓨터 프로그램의 상태 메시지(output)또는 프로그램의 샘플을 표현할 때 사용됩니다. 
적용된 효과는 브라우저의 기본 고정폭 글꼴을 사용하여 표현됩니다. 

 

 

<CODE> ... </CODE>

컴퓨터 프로그램의 코드(CODE) 일부를 표현할 때 사용합니다. 
프로그램의 코드 일부는 XML요소의 이름, 파일 이름, 컴퓨터 프로그램의 코드, 컴퓨터가 인식할 수 있는 문자열이 해당됩니다. 적용된 효과는 브라우저의 기본 고정폭 글꼴을 사용하여 표현됩니다. 

 

 

<KBD> ... </KBD>

사용자의 키보드 입력 문구를 나타낼 때 사용할 수 있습니다.  
적용된 효과는 브라우저의 기본 고정폭 글꼴을 사용하여 표현됩니다. 

 

<VAR> ... </VAR>

변수(Variable)을 정의할 때 사용됩니다. 
적용된 효과는 이탤릭체로 보입니다. 

 

논리적 스타일 지정 태그 예제

<HTML>
<HEAD>
<TITLE>논리적 스타일 지정 태그 실습</TITLE>
</HEAD>
<BODY>
기본 글자체 입니다. <BR><BR>
  
강조 : I <EM>love </EM> you VS I love <EM> you </EM> <BR><BR>
  
강조 : <STRONG> Stop </STRONG> , This is my wallet. <BR><BR>
  
정의 : <DEF title = ' hypertext mark up language '> HTML </DFN> 이란 
hypertext mark up language 의 약자이다. <BR><BR>
  
인용 : 이 음악은 <CITE> 로이킴의 love love love </CITE>입니다. <BR><BR>
  
예제 : 프로그램을 실행시켰을 때 다음과 같은 에러 코드가 나타났다. <BR>
<SAMP> not found 'a' </SAMP> <BR><BR>
  
키보드입력 : 새로고침은 <KBD> F5 </KBD>를 누르세요. <BR><BR>
  
변수 : 피타고라스의 정의는 
<VAR>A</VAR> <SUP>2</SUP> + <VAR>B</VAR><SUP>2</SUP> 
= <VAR>C</VAR><SUP>2</SUP입니다. <BR><BR>
  
  
</BODY>
</HTML>

논리적 스타일 지정 태그 예제

 

위의 결과창에서 확인할 수 있듯이 EM태그는 이탤릭체로 표현되고, STRONG 태그는 볼드체로 표현되는 것을 확인할 수 있습니다. DFN 태그의 경우 title 속성을 통해 이미지와 같이 마우스를 올려놓으면 설명문을 제시할 수 있습니다. 

<CITE> 태그는 이탤릭체로 표현되며, SAMP태그와 KBD태그의 경우 브라우저의 글꼴 설정을 무시하고, 브라우저의 기본 고정폭 글꼴로 결과가 나타남을 알 수 있습니다. 마지막으로 VAR 태그의 경우 이탤릭체로 표현됩니다. 

 

오늘은 글자태그 중 논리적 스타일 지정 태그들을 알아보았습니다. 다음 포스트에서는 이미지 태그에 대해 알아보도록 하겠습니다. 

 

반응형