안녕하세요. 이미보라입니다 :)
저희는 지난 포스트에서 물리적 스타일 지정 태그들을 알아봤습니다.
오늘은 논리적 스타일 지정 태그들을 알아보도록 하겠습니다.
논리적 스타일 지정이란 태그명이 어떠한 용도와 관련된 텍스트로 태그명을 봤을 때는 어떤 효과가 적용하는지 알 수 없습니다. 다시 말해, 사용 용도별 스타일 지정이라고 생각하시면 편할 것 같아요.
<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 태그의 경우 이탤릭체로 표현됩니다.
오늘은 글자태그 중 논리적 스타일 지정 태그들을 알아보았습니다. 다음 포스트에서는 이미지 태그에 대해 알아보도록 하겠습니다.
'IT > HTML' 카테고리의 다른 글
| HTML TABLE 태그 (0) | 2021.01.03 |
|---|---|
| HTML IMG 태그 (0) | 2021.01.02 |
| HTML 문자 스타일 지정 태그 (물리적 스타일 지정 방법) (0) | 2020.12.30 |
| HTML 글자태그: H태그와 FONT태그 (0) | 2020.12.29 |
| HTML 문단태그 / HTML 문서와 태그 특징 (0) | 2020.12.29 |
댓글