[css-study27.html~32.html] 6장. w3c의 문구 엘리먼트

프로그래밍/HTML CSS 2011. 5. 12. 00:40
,
학습목표) w3c의 HTML 4.01 명세서에서 제시하는 문구 엘리먼트에 대해서 알아보자


 <cite>  인용문이나 참조한 문서의 출처
 <dfn>  용어 묶음에 대한 정의 
 <code>  컴퓨터 프로그래밍 코드 
 <samp>   프로그램이나 스크립트의 결과 샘플 
 <kbd>   사용자가 입력한 텍스트 
 <var>   프로그램의 변수(variable)나 인수(argument)
 <abbr>  약자 (예, WWW, HTTP, URL, Mass 등) 
 <acronym>  두문자어 (예, WAC, radar 등) 
 

============================================================================================================

CITE
1) 저자나 출판사 등의 출처 인용을 표시하기 위한 태그 
2) 책이나 출판물을 참조할 때 '강조'의 의미는 없으므로 <em>의 이탤릭체와는 구분한다.
   - 단지 일반 텍스트와 구분되는 모양을 지정
3) i는 완전히 모양만을 위해 사용되므로 이를 대처하기 위한 <cite>태그를 사용
4) W3C : "인용문이나 참조한 문서 출처를 포함한다" 
5) cite로 책 제목을 마크업하고 CSS로 스타일을 입히면 언제든지 사이트 전체의 참조문구를 수정할 수 있다.
6) cite태그를 읽어들여 '책제목, 저자'등을 데이터베이스에 저장할 수 있다. 

---------------------------------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>문구 엘리먼트</title>
<style type="text/css">
cite {
/*cite태그를 지원하지 않는 브라우저를 위해 css추가*/
font-style: italic;
font-weight: bold;
color: red;
background-color: #ddd;
}
</style>
</head>
<body>
소설 <cite>주홍 글씨</cite>는 보스턴을 배경으로 하고 있으며, 나다니엘 호손은 이 소설을 메사추세츠주 살렘에서 썼다. 
</body>
</html>
 
============================================================================================================

ABBR, ACRONYM
abbr : XHTML을 한 단어처럼 읽으려고 하지 않고 "엑스-에이치-티-엠-엘" 이라고 철자를 하나씩 읽어나간다.
acronym : 철자를 하나씩 읽지않고 한 단어로 읽는다.

1) 정의는 한번만
: 여러 번 반복되는 약어나 두문자어는 한번만 정의할 것을 권고
  같은 용어를 여러 번 정의하게 되면 용량을 낭비하게 되므로 해당 페이지에서 첫 번째 사용되는 경우에만 title속성을 사용
2) css 사용하여 모양을 꾸밀 수 있다.
3) IE의 경우 과저 <abbr>태그에 대한 스타일이나 툴팁을 지원하지 않았다. 사용시 확인 필요

---------------------------------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
abbr {
speak:spell-out;
}
acronym {
speak:normal;
}
abbr, acronym {
/* 마우스 커서를 도움말 모양으로 바꿔서 클릭이 가능한 링크가 아니라는 것을 알려주고 툴팁으로 확장되는 것임을 나타냄*/
border-bottom: 1px dotted;
cursor: help;
}
</style>
</head>
<body>
<abbr title="eXtensible HyperText Markup Language">XHTML</abbr>
<acronym title="North Atlantic Treaty Organization">NATO</acronym>
</body>
</html>

============================================================================================================

CODE
1) XHTML 페이지 내에서 코드 예제를 표시하기 위한 태그.
 
 ---------------------------------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
code {
font-family: Courier, serif;
color: red;
}
</style>
</head>
<body>
<code>
#content {
width: 80%;
padding: 20px;
background: blue;
}
</code>
</body>
</html>

============================================================================================================

SAMP 
1) 프로그램이나 스크립트의 실행 결과 샘플을 표시하기 위한 태그
2) 스크립트의 결과에 대해서 설명하고자 할 때 아래과 같이 사용한다. 

---------------------------------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body>
<p>스크립트를 실행한 후에 명령 창에서 다음과 같은 메시지가 표시됩니다. <samp>스크립트가 성공적으로 실행되었습니다!</samp></p>
</body>
</html>

============================================================================================================

VAR
1) <samp>태그와 관련되어 프로그램의 인수나 변수를 위해 사용되는 태그이다.
2) 보통의 웹브라우저는 <var>태그의 텍스트를 이탤릭체로 표시하지만, css로 원하는 스타일을 지정 가능하다.
 
----------------------------------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
var {
font-style: normal;
font-family: Courier, serif;
color: purple;
}
</style>
</head>
<body>
<p>이번에는 main.xsl 파일에 <var>lastUpdated</var></p>라는 인수를 넘기겠습니다.
</body>
</html>

============================================================================================================

KBD 
1) 사용자가 입력할 텍스트를 알려주기 위한 태그이다. 
2) 검색 박스에 포커스를 이동하기 위한 액세스키 사용법을 설명하기 위하여 아래와 같이 쓸 수 있다.
3) 다른 태그와 마찬가지로 스타일 지정이 가능하다.

---------------------------------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
kbd {
font-style: normal;
font-family: Courier, serif;
color: purple;
}
</style>
</head>
<body>
<p>맥 사용자들은 검색 입력박스로 포커스를 빠르게 이동할 때 <kbd>Command+9</kbd>를 단축키로 사용합니다.</p>
</body>
</html>
 
저작자표시
posted by lazymong

티스토리툴바