'03.HTML 4.X, HTML5, XML.../HTML/Css/Script'에 해당되는 글 196건

2009.01.19 미디어 플레이어 제어
2009.01.19 자바스크립트 팝업창 관련
2008.12.24 스크롤바 색상
2008.11.28 웹에서 프린터 하기 scriptX
2008.11.28 동적 테이블 1
2008.11.28 html 에서 excel 바로 다운받기
2008.11.19 FusionCharts.js 자바스크립 파일과 그래프용 swf파일
2008.11.10 HTML 태그 제거 정규식
2008.11.10 작지만 강력한 HTML 파서, HtmlCleaner
2008.11.10 파싱된 소스코드 확인하기: 주소창에 다음 코드를 입력 후 Enter
2008.11.10 아래 코드는 현재 블로그에서 적용되고있는 스크립트입니다.
2008.11.04 input 입력모드시 한글,영문
2008.10.30 트리메뉴 음~ 괜찮다..(windows 탐색기 같은거)
2008.10.30 prototype.js 를 위한 개발자 노트
2008.10.30 테이블 안에 내용 넘는거 자동으로 줄바꿈
2008.10.30 ui 목록 샘플
2008.10.30 div 레이아웃과 table 레이아웃
2008.10.30 css 로 텝메뉴를 만들어 주는 프로그램
2008.10.30 CSS 개발툴
2008.10.28 모든 셀에 한꺼번에 바탕색 지정
2008.10.27 css로 만든 메뉴모음 사이트
2008.10.24 XML & JAVASCRIPT로 트리 메뉴(tree menu) 만들기
2008.10.22 웹 문서에 단축키를 달자! 1
2008.10.22 글자의 스타일을 좌우하는 두 속성
2008.10.22 마우스 커서 변경
2008.10.22 [HTML]테이블 너비 고정시키기
2008.10.22 이미지맵의 이해
2008.10.22 스타일시트 예제 71가지
2008.10.19 CSS 규격
2008.10.19 CSS1 카스케이딩 스타일쉬트 규격

03.HTML 4.X, HTML5, XML.../HTML/Css/Script2009. 1. 19. 13:45

미디어 플레이어 제어

</head>

<SCRIPT FOR="Player" EVENT="buffering(Start)">
var idTimer;
if(Start == true)
{
idTimer = setInterval("setStatus()", 1000);
}
else
{
clearInterval(idTimer);
}
</SCRIPT>
<SCRIPT FOR="Player" EVENT="StatusChange()">
window.status = Player.status;

</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
function setStatus()
{
var bf = parseInt(Player.network.bufferingProgress);
if(bf < 100)
{
window.status = "버퍼링 중 : " + bf + " %";
}
else
{
window.status = "버퍼링 완료";
}
}

//-->
</SCRIPT>
</body>
</html>

<html>
<head>
<title> 미디어 플레이어 제어 </title>
</head>

<body>
<OBJECT ID="Player"
  CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
  <PARAM name="autoStart" value="True">
  <PARAM name="URL" value="mms://mmc.daumcast.net/mmc/1/500/0902600000101h.wmv">
</OBJECT>
uiMode<select onchange="setUI(this.options[this.selectedIndex].value)">
<option value="invisible">invisible
<option value="none">none

<option value="mini">mini
<option value="full">full
</select>
<input type="button" value="volume +10" onclick="setVol('+')">
<input type="button" value="volume -10" onclick="setVol('-')">
mute <input type="checkbox" onclick="mute(this.checked)">
<input type="button" onclick="setPos(-10)" value="10초 전">
<input type="button" onclick="setPos(10)" value="10초 뒤">
<input type="button" onclick="Player.controls.play();" value="재생">
<input type="button" onclick="Player.controls.stop();" value="정지">
<input type="button" onclick="Player.controls.pause();" value="일시정지">

<SCRIPT LANGUAGE="JavaScript">
<!--
function setUI(str)
{
 Player.uiMode = str;
}
function setPos(v)
{
 Player.controls.currentPosition += v;
}
function setVol(flag)
{
 if(flag == '+')
  Player.settings.volume += 10;
 else
  Player.settings.volume -= 10;
}

function mute(stat)
{
 if(stat)
  Player.settings.mute = true;
 else
  Player.settings.mute = false;
}
//-->
</SCRIPT>
</body>
</html>

<script language=javascript>
<!--
document.write("<iframe src='http://lcs.naver.com/u{"+document.URL+"}' width=0 height=0 frameborder=0></iframe>");
//-->
</script>

Posted by 1010

03.HTML 4.X, HTML5, XML.../HTML/Css/Script2009. 1. 19. 13:44

자바스크립트 팝업창 관련

1. 옵션을 HEAD안에...
<script language="JavaScript">
function openNewWindow(window) {
open (window,"NewWindow","left=0, top=0, toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, width=200, height=200");
}
</script>
<a href=javascript:openNewWindow("주소입력")>새창열기</a>

2. 링크에 옵션을 지정...
<a href="javascript:;" onclick="window.open('주소입력','name','resizable=no width=200 height=200');return false">새창열기</a>

* 옵션 *
새창 뛰울때 용도에 맞게 옵션 설정을 해줍니다. "YES" 또는 "NO" 로 지정 해주면 됩니다.
menubar - 파일, 편집, 보기....부분
toolbar - 뒤로, 앞으로, 새로고침 아이콘등이 있는 부분
directories - 연결 디렉토리가 표시되는 부분
location - 주소 입력창
status - 아래 브라우저 상태 바
scrollbars - 스크롤
resizable - 리사이즈 옵션

1.자동 띄우기

팝업창에 삽입
<html>
<head>
<title></title>
<script language="javascript">

</script>
</head>
<body onload="javascript:pop()">
이벤트 팝업창을 띄우기
</body>
</html>

2.프레임이 있는 팝업창 닫기

팝업창에 삽입
<html>
<head>
<title></title>
<script language="Javascript">

</script>
</head>
<body>
<a href="javascript:frameclose()">프레임셋 한방에 닫기</a>
</body>
</html>

3.팝업창 닫고 프레임이 없는 부모창에서 원하는 페이지로 이동하기

팝업창에 삽입
<html>
<head>
<title></title>
<script language="javascript">

</script>
</head>
<body>
<a href="javascript:MovePage();">자세한내용보기</a>
</body>
</html>

4.팝업창 닫고 프레임이 있는 부모창에서 원하는 페이지로 이동하기

팝업창에 삽입하고 팝업창의 설정은 프레임셋 페이지에 해야함
오픈창이 아닐경우에는 window.top.프레임이름.location.href="연결할파일" 적용한다
<html>
<head>
<title></title>
<script language="javascript">

</script>
</head>
<body>
<a href="javascript:MovePage();">자세한내용보기</a>
</body>
</html>

5.팝업창 자동으로 닫기

팝업창에 삽입
<html>
<head>
<title>Close Window Timer</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script language="JavaScript">

</script>
</head>
<body onLoad="closeWin('5000')">
이창은 5초후 자동으로 창이 닫힘니다.<br>
</body>
</html>

6.프레임 나눈 팝업창 한번에 닫기

7.하루동안 팝업창 띄우지 않기 소스 예제1

부모창인 index.htm에 삽입
<html>
<head>
<title>..</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script language="javascript">

</script>
</head>
<body>
</body>
</html>

팝업창인 pop.htm에 삽입
<html>
<head>
<title></title>
<head>
<script language="JavaScript">
<!--
function setCookie( name, value, expiredays )
{
var todayDate = new Date();
todayDate.setDate( todayDate.getDate() + expiredays );
document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
}
function closeWin()
{
if ( document.myform.event.checked )
setCookie("memo", "no" , 1); // 1일 간 쿠키적용

}
//-->
</script>
</head>
<body onunload="closeWin()">
<form name="myform">
<input type="checkbox" name="event">다음부터 이 창을 열지않음
<input type=button value="닫기" onclick="self.close()">
</form>
</body>
</html>

8.하루동안 팝업창 띄우지 않기 소스 예제2

부모창인 index.htm에 삽입
<html>
<head>
<title>..</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<head>
<SCRIPT LANGUAGE="JavaScript">

</script>
</head>
<body>
</body>
</html>

팝업창인 pop.htm에 삽입
<html>
<head>
<title></title>
<head>
<SCRIPT language="JavaScript">
<!--
function setCookie( name, value, expiredays )
{
var todayDate = new Date();
todayDate.setDate( todayDate.getDate() + expiredays );
document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
}

function closeWin()
{
if ( document.forms[0].Notice.checked )
setCookie( "Notice", "done" , 1);
self.close();
}
//-->
</script>
</head>
<body onunload="closeWin()">
<form>
<input type=CHECKBOX name="Notice" value="">다시 팝업 안뜸
<a href="javascript:window.close()">닫기</a>
</form>
</body>
</html>

9.같은 브라우져에서 팝업 띄우기 않기

10.팝업창 가운데에 자동띄우기

팝업창에 삽입
<html>
<head>
<title>..</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script language="JavaScript">

</script>
</head>
<body onLoad="winCentre()">
</body>
</html>

11.부모창에서 클릭하면 팝업창 가운데에 띄우기

부모창에 삽입
<html>
<head>
<title></title>
<head>
<script language="JavaScript">

</script>
<body>
<a href="팝업창파일" onclick="NewWindow(this,'name','100','100','yes');return false">
링크</a>
</body>
</html>

12.같은 브라우져에서만 팝업 띄우기 않기

부모창인 index.htm에 삽입 _새로 브라우져를 열면 팝업창이 뜸
<html>
<head>
<title>..</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script language="javascript">

</script>
</head>
<body>
</body>
</html>

팝업창인 pop.htm에 삽입
<html>
<head>
<title></title>
<head>
<script language="JavaScript">

</script>
</head>
<body onunload="closeWin()">
<form name="myform">
<input type="checkbox" name="event">다음부터 이 창을 열지않음
<input type=button value="닫기" onclick="self.close()">
</form>
</body>
</html>

13.링크걸어서 지정된 사이즈로 열기

14.자동으로 지정된 크기로 브라우저 열기

15.해상도에 맞추어 전체장으로 늘어남

<html>
<head>
<title>..</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script language="JavaScript">
function winMaximizer() {
if (document.layers) {
larg = screen.availWidth - 10;
altez = screen.availHeight - 20;
} else {
var larg = screen.availWidth;
var altez = screen.availHeight;
}
self.resizeTo(larg, altez);
self.moveTo(0, 0);
}
</script>
</head>
<body onload="winMaximizer()">
해상도에 맞추어 전체장으로 늘어남
</body>
</html>

16.이미지 클릭시 html문서없이 큰이미지로 새창띄우기

<html>
<head>
<title>..</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script language="JavaScript">
var win1Open = null
function displayImage(picName, windowName,
windowWidth, windowHeight){
return window.open(picName,windowName,"toolbar=no,

scrollbars=no,resizable=no,width=" + (parseInt(windowWidth)+20) + ",height=" + (parseInt(windowHeight)+15))
} function winClose(){
if(win1Open != null) win1Open.close()
} function doNothing(){}
</script> <script language="JavaScript1.1">
function displayImage(picName, windowName,

windowWidth, windowHeight){
var winHandle = window.open("" ,windowName,"toolbar=no,scrollbars=no,

resizable=no,width=" + windowWidth + ",height=" + windowHeight)
if(winHandle != null){
var htmlString = "<html><head><title>Picture</title></head>"
htmlString += "<body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>"
htmlString += "<a href=javascript:window.close()><img src=" + picName + " border=0
alt=닫기></a>"
htmlString += "</body></html>"
winHandle.document.open()
winHandle.document.write(htmlString)
winHandle.document.close()
}
if(winHandle != null) winHandle.focus()
return winHandle
}
</script>
</head>
<body>
<a href="javascript:doNothing()"
onClick="win1Open=displayImage('큰 이미지파일', 'popWin1', '300', '400')" onMouseOver="window.status='Click to display picture'; return true;" onMouseOut="window.status=''">
<img src=이미지파일" border="0"></a>
</body>
</html>

17.몇초후 웹페이지이동하기 소스예제1

<html>
<head>
<title>..</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script language="JavaScript">
function nextWin()
{location = "이동할 URL"}
</script>
</head>
<body onLoad="setTimeout('nextWin()', 1000)"> 
바로 이동한 원하는 사이트로 이동함
</body>
</html>

18.몇초후 웹페이지이동하기 소스예제2

<html>
<head>
<title>..</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script language="JavaScript">
self.location.replace('이동할 URL');
</script>
</head>
<body>
바로 이동한 원하는 사이트로 이동함
</body>
</html>

19.자동새로고침하기

<html>
<head>
<title>..</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script language="JavaScript">

</script>
</head>
<body>
자동새로고침하기
</body>
</html>

20.해상도에 따라 다른 웹페이지 열기

<html>
<head>
<title>..</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script language="JavaScript">
<!--
function redirectPage() {
var url800x600 = "main1.html"; //800*600 에서 열릴문서
var url1024x768 = "main2.html"; //1024*768 에서 열릴문서
var url1152x864 = "main3.html"; //1152*864 에서 열릴문서

if ((screen.width == 800) && (screen.height == 600))
window.location.href= url800x600;
else if ((screen.width == 1024) && (screen.height == 768))
window.location.href= url1024x768;
else if ((screen.width == 1152) && (screen.height == 864))
window.location.href= url1152x864;
else window.location.href= url800x600;
}
//-->
</script>
</head>
<body Onload="redirectPage()">
</body>
</html>

30.HTML파일 없이 이미지 사이즈에 맞게 팝업창 띄우기.
<script Language="Javascript">

var cnj_img_view = null;
function cnj_win_view(img){
img_conf1= new Image();
img_conf1.src=(img);
cnj_view_conf(img);
}

function cnj_view_conf(img){
if((img_conf1.width!=0)&&(img_conf1.height!=0)){
cnj_view_img(img);
} else {
funzione="cnj_view_conf('"+img+"')";
intervallo=setTimeout(funzione,20);
}
}

32.이미지사이즈에 맞게 새창이 열리며 휠마우스 효과를 내줌
그리고 메인(imgmove-main.html)에서 새창 띄워주는 부분

이 부분은 이미지를 보여줄 새창(img-move.html)입니다.
<style>
body {cursor:move;}
</style>
<body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0 onLoad="fitWindowSize();">

<SCRIPT LANGUAGE="JavaScript">
// 이미지는 별도로 제공하지 않습니다.


var ie = 1;
var windowX, windowY;
var bLargeImage = 0;
var x,y;

var InitX = 500;

// 이미지가 새창에 맞게 조절되는 부분

// 휠마우스 효과

function move() {
if(bLargeImage){ window.scroll(window.event.clientX - 50,window.event.clientY -50);
}
}

// 오른쪽 왼쪽 마우스 클릭시 창닫는 부분

function click() {
if ((event.button==1) || (event.button==2) || (event.button==3)) {
top.self.close();
}
}
document.onmousedown=click

</script>
<img src="http://www.cginjs.com/cgi/js/test.jpg" border="0" ONMOUSEMOVE="move();">

Posted by 1010

03.HTML 4.X, HTML5, XML.../HTML/Css/Script2008. 12. 24. 15:43

스크롤바 색상

http://ha2juk.com/288

Posted by 1010

03.HTML 4.X, HTML5, XML.../HTML/Css/Script2008. 11. 28. 17:14

웹에서 프린터 하기 scriptX

ScriptX-lovzip.zip

패치후 scriptX 에러 수정하기

' http://www.meadroid.com의 ScriptX 공개 프린트 컴포넌트로 상당히 많은 기능이 있으나
무료로 사용할수 있은 기능은 아래와 같고. 그 외의 기능은 라이센스가 필요하다.

function printWindow() {
   factory.printing.header = "머릿글" //머릿말 설정
   factory.printing.footer = "바닥글" //꼬릿말 설정
   factory.printing.portrait = true    //출력방향 설정: true-가로, false-세로
   factory.printing.leftMargin = 1.0 //왼쪽 여백 설정
   factory.printing.topMargin = 1.0 //왼쪽 여백 설정
   factory.printing.rightMargin = 1.0 //왼쪽 여백 설정
   factory.printing.bottomMargin = 1.0    //왼쪽 여백 설정
factory.printing.Print(false, window)
}
</script>

- 프린터 팁 : 웹페이지를 다음 페이지에 인쇄

<p style="page-break-before:always">
이 태그를 만나면 다음페이지에 인쇄함.

Posted by 1010

03.HTML 4.X, HTML5, XML.../HTML/Css/Script2008. 11. 28. 16:57

동적 테이블

<html>
<title>동적 테이블</title>
<head>
<style>
table {
border: solid 1px;
}
th {
background: orange;
border: solid 1px;
}
td {
border: solid 1px;
}
table#t {
width: 500px;
height: 300px;
}
</style>
<script>
function TableController(){}
TableController.prototype = {
setId : function(aId) {
this.id = aId;
this.element = document.getElementById(aId);
this.tbody = this.element.getElementsByTagName("TBODY")[0];
},
getRows : function() {
return this.tbody.getElementsByTagName("TR");
},
getHeaders : function() {
return this.getRows()[0].getElementsByTagName("TH");
},
getCols : function(index) {
return this.getRows()[index].getElementsByTagName("TD");
},
makeCol : function() {
var aCol = document.createElement("TD");
var bindACol = aCol;
var bindThis = this;
aCol.onmouseover = function() {
   bindACol.style.background = "red";
};
aCol.onmouseout = function() {
   bindACol.style.background = "white";
};
aCol.onclick = function() {
   bindThis.merge(bindACol);
};
return aCol;
},
merge : function(target) {
var parent = target.parentNode;
var adjacent = target.nextSibling || target.previousSibling;
parent.removeChild(target);
adjacent.colSpan = 2;
},
addRow : function() {
var aRow = document.createElement("TR");
var colLength = this.getHeaders(1).length;
var aCol;
for(var i=0; i<colLength; ++i) {
   aCol = this.makeCol();
   aCol.appendChild(document.createTextNode("Column "+(i+1)));
   aRow.appendChild(aCol);
}
this.tbody.appendChild(aRow);
},
removeRow : function() {
var rows = this.getRows();
var rowLength = rows.length;
if(rowLength == 1) {
   alert("헤더는 삭제할 수 없습니다.");
   return;
}
this.tbody.removeChild(rows[rowLength-1]);

},
addCol : function() {
var colLength = this.getHeaders(1).length;
var rows = this.getRows();
var rowLength = rows.length;
var headers = this.getHeaders();
var headerLength = headers.length;
var aHead = document.createElement("TH");
aHead.appendChild(document.createTextNode("헤더 "+ ++headerLength));
rows[0].appendChild(aHead);
var aCol;
for(var i=1;i<rowLength; ++i) {
   aCol = this.makeCol();
   aCol.appendChild(document.createTextNode("Column "+(colLength+1)));
   rows[i].appendChild(aCol);
}
},
removeCol : function() {
var colLength = this.getHeaders(1).length;
if(colLength == 1) {
   alert("헤더는 삭제할 수 없습니다.");
   return;
}
var rows = this.getRows();
var rowLength = rows.length;
var aCol = rows[0].getElementsByTagName("TH")[colLength-1];
rows[0].removeChild(aCol);
for(var i=1; i<rowLength; ++i) {
   aCol = rows[i].getElementsByTagName("TD")[colLength-1];
   rows[i].removeChild(aCol);
}
}
}

var tController;
window.onload = function() {
tController = new TableController();
tController.setId("t");
}
</script>
</head>
<body><center>

출처 : http://okjsp.pe.kr/seq/115690

Posted by 1010

03.HTML 4.X, HTML5, XML.../HTML/Css/Script2008. 11. 28. 16:39

html 에서 excel 바로 다운받기

해야 할 것은 날짜 별로 검색한 결과를 바로 엑셀로 다운 받는 것..

땅파기...........No 1.

원래 보여지는 화면과 다르게 엑셀로 받기를 누르면 정보를 DB 에서 가져와서 그 정보를 내려받아야 하기 때문에 처음에는 서블릿 단에서 해야 하겠구나..하고 첫번째 땅파기 시작...

찾아보니 jxl 이라는 Java Excel API 가 있어서 사용해보았다.

소스보기

import jxl.Workbook;
import jxl.format.Alignment;
import jxl.format.Border;
import jxl.format.BorderLineStyle;
import jxl.format.Colour;
import jxl.format.VerticalAlignment;
import jxl.write.Label;
import jxl.write.WritableCellFormat;
import jxl.write.WritableSheet;
import jxl.write.WritableWorkbook;
import jxl.write.WriteException;

WritableWorkbook saveExcelWork = Workbook.createWorkbook(new File("./"+fromdate+ "_" + todate + ".xls"));
WritableSheet saveSheet = saveExcelWork .createSheet("GoodKeyword", 0);
WritableCellFormat numberFormat = new WritableCellFormat();
WritableCellFormat nameFormat = new WritableCellFormat();
WritableCellFormat dataFormat= new WritableCellFormat();

numberFormat.setAlignment(Alignment.CENTRE); // 셀 가운데 정렬
numberFormat.setVerticalAlignment(VerticalAlignment.CENTRE); // 셀 수직
numberFormat.setBorder(Border.ALL, BorderLineStyle.THICK); // 보더와 보더라인스타일 설정
numberFormat.setBackground(Colour.GRAY_25); // 바탕색깔 회색으로 지정

nameFormat.setAlignment(Alignment.CENTRE);
nameFormat.setVerticalAlignment(VerticalAlignment.CENTRE);
nameFormat.setBorder(Border.BOTTOM, BorderLineStyle.HAIR);
nameFormat.setBackground(Colour.GRAY_25);

// 데이터 셀 포멧 구성
dataFormat.setAlignment(Alignment.CENTRE);
dataFormat.setVerticalAlignment(VerticalAlignment.CENTRE);

saveSheet .setColumnView(0, 8); // 쉬트의 번호 컬럼(0번째)의 넓이 설정.setCloumnView(몇번째 컬럼, 넓이)
saveSheet .setColumnView(1, 15); // 쉬트의 이름 컬럼(1번째)의 넓이 설정
saveSheet .setColumnView(2, 20); // 쉬트의 비고 컬럼(2번째)의 넓이 설정

// 라벨을 이용하여 해당 셀에 정보 넣기 시작
Label numberLabel = new Label(0, 0, "키워드", numberFormat); // 라벨(열,행,"문장",포멧)
saveSheet .addCell(numberLabel); // 쉬트의 addCell 메소드를 사용하여 삽입

Label nameLabel = new Label(1, 0, "개수", nameFormat);
saveSheet.addCell(nameLabel); // 쉬트의 addCell 메소드를 사용하여 삽입

Blank blank = new Blank(2, 0, numberFormat); // 빈 셀(열,행,포멧)

sheet.addCell(blank);
int no=1;
for(KeywordInfoSimple keywordinfo:goodKeywordList){
Label keywordLabels=new Label(0,no,keywordinfo.getKeyword(),dataFormat);
saveSheet.addCell(keywordLabels);
Label countLabels=new Label(1,no,""+keywordinfo.getCount()+"",dataFormat);
saveSheet.addCell(countLabels);
no++;
}

// 라벨을 이용하여 해당 셀에 정보 넣기 끝
saveExcelWork .write(); // 준비된 정보를 엑셀 포멧에 맞게 작성
saveExcelWork .close(); // 처리 후 메모리에서 해제 처리

엑셀로 저장이 된다.. 하지만 문제는? 저장하기 창이 나오지 않고 정한 위치에 그대로 그냥 저장이 되어버린다는 거... 저장하는 위치를 어떻게 정하지라는 생각을 하게 만들었고 그럼 받는 창 또한 만들어야 하나?;; 하다보니 또 다른 문제점 발생..

서버에 올리면.......서버에 파일이 존재한다는 거...나 지금 뭐한거지 라는 생각에 빠져버림...
서버에 올려진 파일을 받을라면 클라이언트? 소켓 별별 생각이 꼬리를 물고 늘어졌다...이건 아닌거 같은데 하고 과감하게 접기..

땅파기...........No 2.

자바 스크립트에서 하는 방식이 있을 텐데 하는 생각에 검색해보니 역시나 존재...자..이제 두번째 삽질의 시작...

첫번 째보다는 간단해진 방식이지만 미리 버튼을 눌렀을 때 그 데이터가 html 상에 뿌려져있어야 한다. 따라서 파일을 뿌려주는

부분 을 새창으로 띄어서 거기서 데이터가 보인 후 내려받기 버튼을 통해 받을 수 있도록 생각해보았다.

소스보기

실행해보니 잘되었다. 이제 끝났나 했지만..문제는 약간 있었음..IE 에서만 돌아간다는...그렇지만 일단 되니까 라고 생각해지만..
IE 7.0 에서도 안되었다. .execCommand('SaveAs' ~~ ) 이부분이 7.0에서는 다운로드 창을 못 띄우는 것...처음에 테스트 해본 노트북은 비스타였으니....이렇게 브라우져에 영향 받으면 안되는데..하면서 다른 방법 을 모색 함...

땅파기...........No 3.

제일 간단하고 쉬운 방법...
response 에 excel 로 받겠다고 정보를 끼워넣으면 html 에서 열었을 때 자동으로 내려받기로 뜨게 된다.
왜 처음부터 이렇게 생각 안했을까! 이런 방식이 있다고 알고 있긴 했지만 처음 생각은 html 에서 뿌려주지 않고 서블릿 단에서 바로 받기를 원했기 때문이었다.... 정말 길게 돌아와버렸다...

response.setHeader("Content-Disposition", "attachment; filename="+fileName);
response.setHeader("Content-Description", "JSP Generated Data");

* IE 5.5 에서는..아래와 같이 써야 한다고 한다.
response.setHeader("Content-Disposition", "inline; filename=myfile.xls");
response.setHeader("Content-Description", "JSP Generated Data");

생각 좀 하고 짜보자..서버로 받으면 어쩌겠다는 건지..그리고 먼저 사용가능한 환경부터 생각해보고 구현해보자..
삽질 좀 그만 해보자..

Posted by 1010

03.HTML 4.X, HTML5, XML.../HTML/Css/Script2008. 11. 19. 14:32

FusionCharts.js 자바스크립 파일과 그래프용 swf파일

참고 : http://www.fusioncharts.com/

웹으로 통계를 이쁘게 그래프로 보여주고 싶은분들께 추천합니다.
물론 유료이긴 합니다만, 일부 그래프들은 이용 가능합니다.

필요한것은..
FusionCharts.js 자바스크립 파일과 그래프용 swf파일입니다.
(위 FusionChart 사이트에서 다운로드 가능합니다.)

아래와 같이 간단히 자바스크립트 코딩을 하면 이쁜 그래프가 나옵니다. ;-)
즉, FusionChart swf 파일에 맞는 xml 문서만 인자로 넘겨주면 됩니다.

<div id="chart1div"></div>
<script language="JavaScript" src="FusionCharts.js"></script>
<script type="text/javascript">

</script>

Posted by 1010

03.HTML 4.X, HTML5, XML.../HTML/Css/Script2008. 11. 10. 17:32

HTML 태그 제거 정규식

HTML 태그 제거 정규식

HTML 태그 제거 정규식^#

태그제거^[1]^↓ ^#

// 정규표현식으로 제거
String.replaceAll("<(/)?([a-zA-Z]*)(\\s[a-zA-Z]*=[^>]*)?(\\s)*(/)?>","");

한 줄로 표현하기^[1]^↓ ^#

String.replaceAll("("\r|\n","");

주석 제거^#

Pattern.compile("", Pattern.DOTALL)
.matcher(text)
.replaceAll("");

HTML 태그 제거 소스 ^[2]^↓ ^#

public class HTMLCleaner
{
public static void main(String[] args)
{
HTMLCleaner cleaner = new HTMLCleaner();
//System.out.println(cleaner.clean("<html><head><script>aaaa</script></head><body><div>aaa</div> <div> <script></script></div><img src=\"http://tong.nate.com\" values=\">\"> 이건 어떻게 될까요 </body></html> "));
}
private static interface Patterns
{
// javascript tags and everything in between
public static final Pattern SCRIPTS = Pattern.compile("<(no)?script[^>]*>.*?</(no)?script>", Pattern.DOTALL);
public static final Pattern STYLE = Pattern.compile("<style[^>]*>.*</style>", Pattern.DOTALL);
// HTML/XML tags
public static final Pattern TAGS = Pattern.compile("<(\"[^\"]*\"|\'[^\']*\'|[^\'\">])*>");
public static final Pattern nTAGS = Pattern.compile("<\\w+\\s+[^<]*\\s*>");
// entity references
public static final Pattern ENTITY_REFS = Pattern.compile("&[^;]+;");
// repeated whitespace
public static final Pattern WHITESPACE = Pattern.compile("\\s\\s+");
}
/**
* Clean the HTML input.
*/
public String clean(String s)
{
if (s == null)
{
return null;
}
Matcher m;
m = Patterns.SCRIPTS.matcher(s);
s = m.replaceAll("");
m = Patterns.STYLE.matcher(s);
s = m.replaceAll("");
m = Patterns.TAGS.matcher(s);
s = m.replaceAll("");
m = Patterns.ENTITY_REFS.matcher(s);
s = m.replaceAll("");
m = Patterns.WHITESPACE.matcher(s);
s = m.replaceAll(" ");
return s;
}
}

* 완전하지는 않다.

참고자료^#

(1) ^a^b http://fairworld.tistory.com/138

(2) ^a http://okjsp.pe.kr/seq/111879

Posted by 1010

03.HTML 4.X, HTML5, XML.../HTML/Css/Script2008. 11. 10. 16:54

작지만 강력한 HTML 파서, HtmlCleaner

HTML을 파싱해보면 알겠지만, HTML 파싱만큼 비정형적인 것에 대한 분노를 끓어오르게 하는 것은 좀처럼 없는 것 같다. 다소 오바긴 하지만, 지난 며칠간의 상황이 그렇다.

HTML은 알다시피 상당히 융통성 있는 구조를 띄고 있는데, 이 융통성이란 것이 코드를 작성하는 데 있어 가장 골치아프고 황당한 경우를 많이 겪게 만드는 걸림돌로 작용할 때가 많다. 그중 몇 가지를 들자면, 여는 태그와 닫는 태그가 굳이 쌍을 이루지 않아도 브라우저에서 그럭저럭 보여진다는 것, 한 페이지안에 각종 HTML, BODY, 등의 태그가 중복되어 나타나는 것, 설상가상으로 한 페이지에 여러개의 문자 인코딩이 섞여 그것들끼리 꼬이고 충돌하는 등의 문제를 겪게 된다. 특히나 요즘같이 웹 표준에 대한 관심이 고조되고 있는 상황에서조차도 그러한 비정형의 극치를 달리는 HTML 페이지들이 만들어져 버젓이 브라우저의 인내심을 테스트하고 있다.

아무튼, 오늘 소개하는 HTML 파서는 누차 강조하지만 비정형의 극치, HTML을 well-formedness를 요구하는 XML 포맷으로 변환시켜 파싱할 수 있도록 해주는 툴이다. 이름하야 HtmlCleaner!

공식 웹 사이트 : http://htmlcleaner.sourceforge.net/

요즘 자주 쓰고 있는 HTML 파서는 널리 알려져 있는 Java 기반의 HtmlParser인데, 이 HtmlParser는 우연찮게도 Refactoring to Patterns(패턴을 활용한 리팩터링)에 리팩터링 예제로 단골손님처럼 나오는 프로그램이다. 아무튼 문제는 이 HtmlParser가 상당히 섬세하고 다양한 기능을 제공하기는 하지만 치명적인 약점으로 주석처리에 상당히 약하다는 것과 문법에 맞지 않는 HTML 태그가 포함된 HTML 문서의 파싱을 가끔씩 거부한다는 것이다. 예를 들면, 중간에 주석이 포함되어 있고, 그 안쪽으로 태그가 있을 경우 그 안쪽에 있는 태그 처리를 무시하고 넘어가 버린다는 것이다. 정작 필요한 내용이 주석이 시작된 다음에 나올 경우가 있는데, 이럴땐 정말 난감하다. -_-;

오늘도 마침 이러한 문제가 생겨서 고민고민 해가면서 주석을 없애보기도 하고 해보았지만, 워낙 문법을 지키지 않은 페이지라서 주석 제거하는 것조차도 힘에 버거웠다. 그러던 찰나 지난달 쯤인가 HTML 파서중에 HTML 페이지를 XML 파일로(Well-formedness!!!) 둔갑시켜 줘서 파싱을 수행한다는 파서를 소개했던 글이 갑자기 생각나 급하게 인터넷을 찾아보니, 나온게 바로 HtmlCleaner. ^^;

HtmlCleaner는 말 그대로 손쉽게 비정형 HTML 페이지를 파싱해서 중간에 필요없다 싶은 주석이나 몇가지 파싱에 불필요한 요소들을 사전에 미리 제거하고 파싱을 수행하는데, 파싱이 완료되면 알아서 XML 포맷으로 변환된다. 변환된 다음에는 출력을 XML 포맷의 문자열이나 파일과 같은 OutputStream으로도 내보낼 수 있다. 이렇게 나오는 결과물에 대한 파싱은 상당히 쉬워짐은 말할 것도 없다.

위 그림은 HtmlCleaner 클래스의 핵심! setOmitXXX() 메소드들이다. HTML 문서를 파싱할 때 몇 가지 태그나 주석들을 미리 제거할 수 있도록 설정하는 메소드이다. 실제 사용예를 보자면, 가장 간단한 사용법은 이렇다.

import java.io.IOException;

import org.htmlcleaner.HtmlCleaner;

public class HtmlCleanerTest {

public static void main(String[] args) {

HtmlCleaner cleaner = new HtmlCleaner("test.html");

try {

cleaner.setOmitComments(true);

cleaner.setOmitDeprecatedTags(true);

cleaner.setOmitUnknownTags(true);

cleaner.clean();

cleaner.writeXmlToFile("output.xml");

} catch (IOException e) {

e.printStackTrace();

}

}

}

상당히 간단하다. HtmlCleaner 객체를 만든 다음 몇가지 설정을 해주고 clean() 메소드만 호출하게 되면 파싱 대상 문서가 XML 포맷으로 변환된다. 물론 Well-formed 된 채로.

그렇지만 HtmlCleaner는 HtmlParser 만큼의 파싱 고유의 기능을 풍부하게 제공하지는 않는다. 따라서 HTML을 파싱할 것이라면, 특히나 비구조적인 내용이 충만한 ^^ 골치덩어리 HTML 문서를 파싱할 것이라면 HtmlCleaner와 HtmlParser를 함께 사용하는 것이 좋을 것이다. :)

출처 : http://decoder.tistory.com/41

Posted by 1010

03.HTML 4.X, HTML5, XML.../HTML/Css/Script2008. 11. 10. 16:52

파싱된 소스코드 확인하기: 주소창에 다음 코드를 입력 후 Enter

파싱이란 프로그램 또는 인간이 웹 페이지의 소스를 읽고 이를 해석하는 작업을 의미합니다.

웹 브라우저는 HTML 페이지의 원본 소스를 파싱하여 파싱된 소스코드를 생성하는데
이 파싱된 소스코드가 비주얼하게 표현되므로 시각적인 웹 문서가 보이는 것입니다.

브라우저에 의해 파싱된 이 소스는 원본 HTML 소스와 다를 수 있고
브라우저에 맞게끔 변경이 될 수도 있습니다.

DHTML의 DOM 등으로 페이지의 값을 수정하게 되면
원본 HTML 소스(소스 보기 기능을 이용한 소스)가 아닌
파싱된 소스코드가 변경되는걸 확인할 수 있습니다.

파싱된 소스코드 확인하기: 주소창에 다음 코드를 입력 후 Enter
javascript:void(clipboardData.setData('Text', document.documentElement.outerHTML));

실행 후 메모장에서 Ctrl+V 눌러줌

원본 소스코드 확인하기 : IE 메뉴 '보기-소스'

Posted by 1010

03.HTML 4.X, HTML5, XML.../HTML/Css/Script2008. 11. 10. 14:25

아래 코드는 현재 블로그에서 적용되고있는 스크립트입니다.

아래 코드는 현재 블로그에서 적용되고있는 스크립트입니다.
왜 이스크립트를 사용했냐면.. 귀차니즘때문에..ㅋㅋ^^
문제가 뭐였냐면 글을 작성하다보면 링크항목이 몇개씩 있습니다.
기본으로 "_self" 형태로 링크가되어있어 사용자는 링크확인후 뒤로가기로 페이지를 돌아와야 했습니다.
그렇다고 매번 링크에 target을 "_blank"로 변경해주는것도 한두번이지 많은 링크가 있을땐 어이쿠....

그리하여 document.links로 링크객체들의 타겟속성을 "_blank"로 변경해주었더니
링크가 되는 부분은 전부 새창으로 뜨면서(관리자모드까지..) 더불편해지더라구요
그리하여 내린 대책이 특정영역의 특정태그에 대해서 속성을 변경하면 좋겠다고 생각을 했습니다.

분문에 해당하는 div태그에 id를 "mcontents"로 설정해주고 해당영역에 존재하는 <a>태그들에게 타겟을 새창뜨기로 변경하였더니 본문에 해당하는 링크항목(<a>)만 새창으로 활성화가 되더라구요^^
저와 같은 고민을 하고 계시는 분은 한번적용시켜보세요^^

function setTarget()
{
// id가 'mcontents'인 영역안의 'a'태그의 항목을 가져와서 속성을 변경
for(var i=0; i<document.getElementById("mcontents").getElementsByTagName("A").length; i++)
{
document.getElementById("mcontents").getElementsByTagName("A")[i].target = "_blank";
}
}

이번 설정으로 링크 목록의 정보를 가져오는 예제도 한번 만들어 보았습니다.
소스코드는 http://www.koxo.com 사이트에서 참조하였구요(레이아웃 잡는게 귀찮아서;;)
예제는 문서의 모든영역의 링크속성정보 혹은 특정 영역의 특정태그에 대한 속성정보를 보여주는 예제입니다.
특정영역의 특정태그는 위에서 사용했던 "sample" 영역의 <A> 태그만 적용하겠습니다.
(약간만 수정하면 여러형태고 사용이 가능합니다. ^^)
소스코드 아래 샘플도 있으니 확인해보시면 더욱 좋습니다.

// 전체 항목에 있는 링크목록 보여주는 함수

function showAll()

{

ShowInfo(document.links);

}

// 특정영역에 있는 특정태그 목록을 보여주는 함수(여기서는 A 태그만 사용)

function targetAll()

{

ShowInfo(document.getElementById("sample").getElementsByTagName("A"));

}

// 특정 오브젝트를 받아서 해당 오브젝트의 정보를 보여주는 함수

function ShowInfo(obj)

{

// 창단기 문자열을 변수로 만든다.

closeStr='<SPAN style="border:solid 1 gray;padding:3;background:ffa;float:right;cursor:hand" ';

closeStr+='onClick=self.close()>창닫기</SPAN>';

// 테이블을 시작한다.

str=closeStr+'<TABLE border=1 cellpadding=1 cellspacing=0 width=100% align=center>';

// 테이블 제목을 넣는다.

str+='<TR bgcolor=eeeeee><TH>#</TH><TH>protocol</TH><TH>href</TH>';

str+='<TH>hash</TH><TH>target</TH><TH>host</TH></TR>';

// 출력할 윈도우를 열고 이름(newWin)을 부여한다.

newWin=window.open('','newWin','width=900,height=500,top=100,left=50,toolbars=no,scrollbars=yes');

// 연결 배열변수 길이만큼 반복하는 루프를 시작한다.

for (numb=0;numb<obj.length;numb++){

// 번호를 넣는다.

str+='<TR><TD>links['+numb+']</TD>';

// 프로토콜을 넣는다.

str+='<TD>'+(obj[numb].protocol?obj[numb].protocol:' ')+'</TD>';

// 각각 삼항식으로 빈칸이면 공백문자( )를 넣는다.

// 연결주소를 넣는다.

str+='<TD>'+(obj[numb].href?obj[numb].href:' ')+'</TD>';

// 부위지정자를 넣는다.

str+='<TD>'+(obj[numb].hash?obj[numb].hash:' ')+'</TD>';

// 중복성이므로 생략한다.

// str+='<TD>'+(obj[numb].search?obj[numb].search:' ')+'</TD>';

// 목표 프레임을 넣는다.

str+='<TD>'+(obj[numb].target?obj[numb].target:' ')+'</TD>';

// 호스트를 넣는다.

str+='<TD>'+(obj[numb].host?obj[numb].host:' ')+'</TD>';

// 중복성이므로 생략한다.

// str+='<TD>'+(obj[numb].pathname?obj[numb].pathname:' ')+'</TD>';

str+='</TR>'; // 테이블 한줄을 닫는다.

} // 루프를 종료한다.

str+='</TABLE>'+closeStr; // 테이블을 닫는다.

newWin.document.write(str); // 결과를 보조창에 출력한다.

}

</script>

</div>

</div>

<div>

</div>

네이버

━━━━━━━━━━━━━━━
by 한상국(han3925)
MAIL han3925@gmail.com
han3925@hotmail.com
BLOG pointnet.tistory.com
━━━━━━━━━━━━━━━

Posted by 1010

03.HTML 4.X, HTML5, XML.../HTML/Css/Script2008. 11. 4. 13:47

input 입력모드시 한글,영문

한글입력 : <input type=text style='IME-MODE: active'><br>
<br>

자동 (위의 속성을 이어받습니다) : <input type=text style='IME-MODE: auto'><br>
<br>

영문입력 : <input type=text style='IME-MODE: inactive'><br>
<br>

입력모드 해제 : <input type=text style='IME-MODE: deactivated'><br>
<br>

Posted by 1010

03.HTML 4.X, HTML5, XML.../HTML/Css/Script2008. 10. 30. 13:33

트리메뉴 음~ 괜찮다..(windows 탐색기 같은거)

treemenu.zip

미리보기 : http://harogi.net/jsext/page.html

Posted by 1010

03.HTML 4.X, HTML5, XML.../HTML/Css/Script2008. 10. 30. 13:26

prototype.js 를 위한 개발자 노트

1.4.0 버전을 다룸

Sergio Pereira Sergio Pereira에 의해 작성됨

최근 업데이트: 2006년 4월 13일

Prototype은 무엇인가.?

prototype.js는 Sam Stephenson에 의해 작성된 자바스크립트 라이브러리이다. 이 놀랍도록 멋진 생각과 표준에 의해 잘 작성된 코드의 일부는 웹2.0의 특성을 나타내는 풍부하고 상호작용하는 웹페이지와 많은 연관을 가진다.

만약 당신이 최근 이 라이브러리를 사용하기 시작했다면, 당신은 아마도 이 문서가 가장 좋은 지시사항중에 하나는 아니라는것을 알아차렸을것이다. 나 이전에 다른 많은 개발자들처럼, 나는 소스코드와 이것을 사용한 경험에서 prototype.js에 대한 지식을 가지게 되었다. 나는 모든 이가 배우고 공유하는 동안 좀더 많은 정보를 얻게 되는게 가장 좋은 것이라고 생각한다.

나는 objects, classes, functions, 그리고 이 라이브러리에 의해 제공되는 확장을 위한 비공식적인 참조문서 또한 제공한다.

당신이 예제와 참조문서를 읽었을때, Ruby프로그래밍 언어에 친숙한 개발자는 Ruby의 내장 클래스와 이 라이브러리에 의해 구현된 많은 확장 사이의 의도적인 유사성을 알아차리게 될것이다.

toc

고급 자바스크립트 가이드문서.

toc

유틸리티 함수들(utility functions)

라이브러리는 미리 정의된 많은 수의 객체와 유틸리티 함수를 가진다. 이 알기쉬운 함수들의 목적은 반복적인 타이핑과 어구를 많이 줄이는데 있다.

toc

$() 함수 사용하기

$()함수는 가장 많이 사용되는 DOM의 document.getElementById()함수에 대한 편리한 단축키이다. DOM함수처럼, 이것은 인자로 던져진 id를 가진 요소를 하나 반환한다.

하지만 DOM함수와는 달리, 이것은 여러개의 id를 사용할수 있고 $()는 요청된 요소를 가진 Array객체를 반환할것이다. 예제는 아래와 같다.

<HTML>
<HEAD>
<TITLE> Test Page </TITLE>
<script src="prototype-1.4.0.js"></script>

<script>
	function test1()
	{
		var d = $('myDiv');
		alert(d.innerHTML);
	}

	function test2()
	{
		var divs = $('myDiv','myOtherDiv');
		for(i=0; i<divs.length; i++)
		{
			alert(divs[i].innerHTML);
		}
	}
</script>
</HEAD>

<BODY>
	<div id="myDiv">
		<p>This is a paragraph</p>
	</div>
	<div id="myOtherDiv">
		<p>This is another paragraph</p>
	</div>

	<input type="button" value=Test1 onclick="test1();"><br> 
	<input type="button" value=Test2 onclick="test2();"><br> 

</BODY>
</HTML>

이 함수의 다른 좋은 점은 이것은 인자형태를 가질수 있는 다른 함수를 생성할때 매우 유용하도록 만들어주는 id문자열이나 요소객체 자체를 던질수 있다는 것이다.

toc

$F() 함수 사용하기

$F() 함수는 다른 단축키이다. 이것은 text박스나 드랍다운 list와 같은 어떤 필드의 입력 컨트롤의 값을 반환한다. 이 함수는 요소 id나 요소객체 자체를 인자로 가질수 있다.

<script>
	function test3()
	{
		alert(  $F('userName')  );
	}
</script>

<input type="text" id="userName" value="Joe Doe"><br> 
<input type="button" value=Test3 onclick="test3();"><br>

toc

$A() 함수 사용하기

$A() 함수는 이것을 받아들이는 하나의 인자를 Array객체로 변환한다.

Array 클래스를 위한 확장과 조합된 이 함수는 이것을 더욱 쉽게 만든다. 예를 들면, 작성한 함수는 인자의 수를 유연하게 받아들인다.

<script>

	function showOptions(){
		var someNodeList = $('lstEmployees').getElementsByTagName('option');
		var nodes = $A(someNodeList);

		nodes.each(function(node){
				alert(node.nodeName + ': ' + node.innerHTML);
			});
	}
</script>

<select id="lstEmployees" size="10" >
	<option value="5">Buchanan, Steven</option>
	<option value="8">Callahan, Laura</option>
	<option value="1">Davolio, Nancy</option>
</select>

<input type="button" value="Show the options" onclick="showOptions();" >

toc

$H() 함수 사용하기

$H() 함수는 결합된 배열을 열거할수 있는 Hash객체로 변환한다.

<script>
	function testHash()
	{
		//let's create the object
		var a = {
			first: 10,
			second: 20,
			third: 30
			};

		//now transform it into a hash
		var h = $H(a);
		alert(h.toQueryString()); //displays: first=10&second=20&third=30
	}

</script>

toc

$R() 함수 사용하기

$R() 함수는 new ObjectRange(lowerBound, upperBound, excludeBounds)를 작성하기 위한 짧은 형태이다.

이 클래스의 완전한 설명을 보기 위해 ObjectRange 클래스 문서를 보라. each 메소드를 통해 반복(iterators)의 사용법을 보여주는 간단한 예제를 보자. 더 많은 메소드는 Enumerable 클래스 문서에서 볼수 있을것이다.

<script>
	function demoDollar_R(){
		var range = $R(10, 20, false);
		range.each(function(value, index){
			alert(value);
		});
	}

</script>

<input type="button" value="Sample Count" onclick="demoDollar_R();" >

toc

Try.these() 함수 사용하기

이것은 인자처럼 많은 수의 함수를 가지고 그것들을 순서대로 차례차례 호출하도록 해준다. 이것은 함수중에 하나씩 수행하고 성공적인 함수호출의 결과를 반환할때까지 순차적으로 수행된다.

예제는 아래와 같다. xmlNode.text는 몇몇 브라우저에서 작동하고 xmlNode.textContent는 다른 브라우저에서 작동한다. Try.these()함수를 사용하면 당신은 작동하는 것중 하나를 반환할수 있다.

<script>
function getXmlNodeValue(xmlNode){
	return Try.these(
		function() {return xmlNode.text;},
		function() {return xmlNode.textContent;}
		);
}
</script>

toc

Ajax 객체

위에서 언급된 유틸리티 함수들은 좋다. 하지만 다시 보자. 그것들은 대부분 고급(advanced) 형태는 아니다. 당신은 스스로 이것들을 만들수 있고 당신 자신만의 스크립트에 유사한 함수를 이미 가지고 있을수도 있다. 하지만 이러한 함수들은 단지 일부분에 해당되는 팁일뿐이다.

나는 prototype.js에 대한 당신의 관심이 대부분의 AJAX기능을 다룰수 있다는 것이라고 확신한다. 그래서 당신이 AJAX로직을 수행할 필요가 있을때 좀더 쉽게 사용하도록 도와주는 라이브러리를 사용하는 방법을 살펴보자.

AJAX객체는 AJAX함수를 작성할 때 포함되는 트릭성격의 코드를 포장하고 단순화하기 위한 라이브러리에 의해 생성된 미리-정의된 객체이다. 이 객체는 캡슐화된 AJAX로직을 제공하는 많은 수의 클래스를 포함한다. 그 클래스중에 몇개를 살펴보자.

toc

Ajax.Request 클래스 사용하기

만약 당신이 어떠한 헬퍼(helper) 라이브러리도 사용하지 않는다면, 당신은 XMLHttpRequest객체를 생성하기 위한 많은 코드를 작성할 것이고 단계를 비동기적으로 수행할것이다. 그리고나서 응답을 뽑아내고 이것을 처리한다. 그리고나서는 한가지 이상의 브라우저를 지원하지 않는다면 스스로 행운이라고 생각할 것이다.

AJAX기능을 지원하기 위해, 라이브러리는 Ajax.Request클래스를 정의한다.

당신이 다음처럼 XML응답을 반환하는 http://yoursever/app/get_sales?empID=1234&year=1998 url을 통해 서버와 통신할수 있는 애플리케이션을 가지고 있다고 해보자.

<?xml version="1.0" encoding="utf-8" ?> 
<ajax-response>
	<response type="object" id="productDetails">
		<monthly-sales>
			<employee-sales>
				<employee-id>1234</employee-id> 
				<year-month>1998-01</year-month> 
				<sales>$8,115.36</sales> 
			</employee-sales>
			<employee-sales>
				<employee-id>1234</employee-id> 
				<year-month>1998-02</year-month> 
				<sales>$11,147.51</sales> 
			</employee-sales>
		</monthly-sales>
	</response>
</ajax-response>

XML을 가져오기 위해 서버와 통신하는 것은 Ajax.Request객체를 사용하면 매우 간단하다. 아래의 샘플은 이것을 수행하는 방법을 보여준다.

<script>
	function searchSales()
	{
		var empID = $F('lstEmployees');
		var y = $F('lstYears');
		var url = 'http://yourserver/app/get_sales';
		var pars = 'empID=' + empID + '&year=' + y;
		
		var myAjax = new Ajax.Request(
			url, 
			{
				method: 'get', 
				parameters: pars, 
				onComplete: showResponse
			});
		
	}

	function showResponse(originalRequest)
	{
		//put returned XML in the textarea
		$('result').value = originalRequest.responseText;
	}
</script>

<select id="lstEmployees" size="10" onchange="searchSales()">
	<option value="5">Buchanan, Steven</option>
	<option value="8">Callahan, Laura</option>
	<option value="1">Davolio, Nancy</option>
</select>
<select id="lstYears" size="3" onchange="searchSales()">
	<option selected="selected" value="1996">1996</option>
	<option value="1997">1997</option>
	<option value="1998">1998</option>
</select>
<br><textarea id=result cols=60 rows=10 ></textarea>

Ajax.Request객체의 생성자의 두번째 파라미터를 알아보겠는가.? {method: 'get', parameters: pars, onComplete: showResponse} 파라미터는 문자적 표기법으로 익명 객체를 나타낸다. 이것이 의미하는 것은 'get' 문자열을 포함하는 명명된 메소드(method)의 프라퍼티, HTTP요청 문자열을 포함하는 명명된 파라미터(parameter)의 프라퍼티, 그리고 함수 showResponse를 포함하는 onComplete 프라퍼티/메소드를 가지는 객체를 전달한다는 것이다.

당신이 AJAX를 비동기적으로(asynchronous) 서버에 호출할지를 결정하고 true나 false값으로 셋팅할수 있는 asynchronous(디폴트 값은 true이다.)와 같은 이 객체내 정의하고 활성화시킬수 있는 다른 프라퍼티가 몇개 있다.

이 파라미터는 AJAX호출을 위한 옵션을 정의한다. 샘플에서, 우리는 HTTP GET명령을 통해 첫번째 인자에서 url을 호출한다. 변수 pars내 포함된 조회문자열(querystring)을 전달하고 Ajax.Request객체는 응답을 받아들이는 작업을 마칠때 showResponse함수를 호출할 것이다.

당신이 아는것처럼, XMLHttpRequest는 HTTP호출을 하는 동안 진행과정을 보고한다. 이 진행과정은 4가지의 단계(Loading, Loaded, Interactive, 또는 Complete)를 알릴수 있다. 당신은 이러한 단계중에서 Ajax.Request객체 호출을 사용자정의 함수로 만들수 있다. Complete는 가장 공통적인 단계이다. 함수를 객체에게 알리기 위해, 우리 예제의 onComplete처럼 요청옵션내 onXXXXX로 명명된 프라퍼티/메소드를 간단히 제공하라. 당신이 전달하는 이 함수는 XMLHttpRequest객체 자체가 될 하나의 인자를 가진 객체에 의해 호출될것이다. 당신은 반환 데이터를 얻기 위해 이 객체를 사용할수 있고 아마도 호출의 HTTP결과 코드를 포함할 상태(status) 프라퍼티를 체크할것이다.

두개의 다른 흥미로운 옵션은 결과를 처리하기 위해 사용될수 있다. 우리는 AJAX호출이 에러없이 수행될때 호출될 함수처럼 onSuccess옵션을 명시할수 있다. onFailure옵션은 서버에러가 발생할때 호출될 함수가 될수 있다. onXXXXX의 선택적인 함수처럼, 이 두가지는 AJAX호출이 옮기는 XMLHttpRequest객체를 전달하도록 호출될수 있을것이다.

1.4.0 버전에서, 이벤트 콜랙 핸들링의 새로운 형태가 소개되었다. 만약 당신이 AJAX호출이 발생하는데도 불구하고 특정 이벤트를 위해 수행되어야 하는 코드를 가지고 있다면, 당신은 새로운 Ajax.Responders 객체를 사용할수 있다.

당신이 AJAX호출이 진행중이라는 시각적 표시를 보여주길 원한다고 해보자. 당신은 두개의 전역 이벤트 핸들러를 사용할수 있다. 하나는 첫번째 호출이 시작되었을때 아이콘을 보여주는것이고 다른 하나는 적어도 하나가 끝났을때 아이콘을 숨기는 것이다. 아래의 예제를 보자.

<script>
	var myGlobalHandlers = {
		onCreate: function(){
			Element.show('systemWorking');
		},

		onComplete: function() {
			if(Ajax.activeRequestCount == 0){
				Element.hide('systemWorking');
			}
		}
	};

	Ajax.Responders.register(myGlobalHandlers);
</script>

<div id='systemWorking'><img src='spinner.gif'>Loading...</div>

우리의 샘플은 흥미로운 방법으로 XML응답을 처리하지는 않았다. 우리는 textarea내 XML을 집어넣었다. 응답의 전형적인 사용법은 XML내부에서 바라는 정보를 찾고자 할것이고 몇몇 페이지 요소나 페이지내 HTML을 만드는 몇가지의 XSLT변형을 업데이트할것이다.

좀더 완전한 설명을 보기 위해서, Ajax.Request 참조 와 options 참조를 보라..

toc

Ajax.Updater 클래스 사용하기

만약 당신이 HTML로 이미 포맷팅된 정보를 반환할수 있는 서버 종료점(endpoint)을 가진다면, 라이브러리는 당신이 Ajax.Updater클래스를 사용하는것을 좀더 쉽게 만들어준다. 이것으로 당신은 어느 요소가 AJAX호출로부터 반환된 HTML을 채우는지 알리게 된다. 예제는 내가 글로 표현하는 것보다 당신을 좀더 쉽게 이해하도록 도와줄것이다.

<script>
	function getHTML()
	{
		var url = 'http://yourserver/app/getSomeHTML';
		var pars = 'someParameter=ABC';
		
		var myAjax = new Ajax.Updater(
			'placeholder', 
			url, 
			{
				method: 'get', 
				parameters: pars
			});
		
	}
</script>

<input type=button value=GetHtml onclick="getHTML()">
<div id="placeholder"></div>

당신이 보는것처럼, 코드는 onComplete함수와 생성자에 전달된 요소 id를 제외하고 이전예제에 비해서 매우 간단하다. 클라이언트에서 서버 에러들을 다루는 것이 어떻게 가능한지 보기 위해 코드를 조금 변경해 보자.

우리는 호출을 위해 더 많은 옵션을 추가하고 에러 상황을 뽑아내기 위해 함수를 명시한다. 이것은 onFailure옵션을 사용하여 수행한다. 우리는 성공적인 작동의 경우에만 활성화될 묶음자(placeholder)를 명시할것이다. 이것을 달성하기 위해, 우리는 간단한 요소 id에서 두개의 프라퍼티(success-모든것이 정상적일때 사용되는, failure-어떤것이 실패일때 사용되는)를 가지는 객체로 첫번째 파라미터를 변경할 것이다. 우리는 예제에서 failure 프라퍼티를 사용하지 않을것이고, onFailure옵션에서 reportError함수를 사용할것이다.

<script>
	function getHTML()
	{
		var url = 'http://yourserver/app/getSomeHTML';
		var pars = 'someParameter=ABC';
		
		var myAjax = new Ajax.Updater(
					{success: 'placeholder'}, 
					url, 
					{
						method: 'get', 
						parameters: pars, 
						onFailure: reportError
					});
		
	}

	function reportError(request)
	{
		alert('Sorry. There was an error.');
	}
</script>

<input type=button value=GetHtml onclick="getHTML()">
<div id="placeholder"></div>

만약 당신의 서버 로직이 HTML마크업 대신에 자바스크립트 코드를 반환한다면, Ajax.Updater객체는 자바스크립트 코드가 될수 있다. 자바스크립트로 응답을 처리하기 위한 객체를 얻기 위해, 당신은 객체 생성자의 마지막 인자로 프라퍼티들의 목록에 evalScripts: true;를 간단히 추가한다. 하지만 여기엔 문제가 있다. 이러한 스크립트 블럭은 페이지의 스크립트에 추가되지 않을것이다. 옵션이름인 evalScripts이 제시하는것처럼, 스크립트는 평가될것이다. 차이점이 무엇일까.? 요청된 URL이 반환하는 것이 무엇인지 추측해보자.

<script language="javascript" type="text/javascript">
	function sayHi(){
		alert('Hi');
	}
</script>

<input type=button value="Click Me" onclick="sayHi()">

이 경우 당신이 이전에 이것을 시도했다면 이것이 작동하지 않는것을 알고 있을것이다. 이유는 스크립트 블럭은 평가될것이고 평가된 스크립트는 sayHi 라는 이름의 함수를 생성하지 않을것이다. 이것은 아무것도 하지 않을것이다. 이 함수를 생성하기 위해, 우리는 함수를 생성하기 위해 변경할 필요가 있다. 아래를 보라.

<script language="javascript" type="text/javascript">
	sayHi = function(){
		alert('Hi');
	};
</script>

<input type=button value="Click Me" onclick="sayHi()">

이전 예제에서, 우리는 변수를 선언하기 위해 var 키워드를 사용하지 않았다. 그렇게 하는 것은 스크립트 블럭에 지역화될 함수 객체를 생성할것이다. var 키워드 없이 함수 객체는 window범위에서 작동한다.

좀더 상세한 complete설명을 위해서는, Ajax.Request 참조문서와 Ajax.options 참조문서를 보라.

toc

열거(Enumerating)...

우리는 루프(loop)에 친숙하다. 당신이 알다시피, 배열 자체를 생성하고 같은 종류의 요소로 채운다. 루프 제어구조(이를 테면, foreach, while, repeat 등등)을 생성하고 숫자로 된 인덱스를 통해 순차적으로 각각의 요소에 접근하고 그 요소로 작업을 수행한다.

당신이 이것에 대해 생각할때, 언제나 당신은 코드에 배열을 가지고 루프내 배열을 사용할것이라는것을 의미한다. 이러한 반복을 다루기 위해 좀더 많은 기능을 가진 배열 객체가 있다면 좋지 않겠는가.? 그렇다. 많은 프로그래밍 언어는 배열이나 유사한 구조(collection과 list와 같은)에서 이러한 기능을 제공한다.

prototype.js는 우리에게 반복가능한 데이터를 다룰때 사용하도록 구현된 Enumerable 객체를 제공한다. prototype.js 라이브러리는 더 나아가 Enumerable의 모든 메소드로 Array 클래스를 확장한다

toc

루프, 루비-스타일

표준 자바스크립트에서, 당신이 배열의 요소를 순차적으로 표시하길 원한다면, 당신은 다음처럼 작성할수 있다.

<script>
	function showList(){
		var simpsons = ['Homer', 'Marge', 'Lisa', 'Bart', 'Meg'];
		for(i=0;i<simpsons.length;i++){
			alert(simpsons[i]);
		}
	}

</script>

<input type="button" value="Show List" onclick="showList();" >

prototype.js를 사용하면, 다음과 같이 다시 작성할수 있다.

	function showList(){
		var simpsons = ['Homer', 'Marge', 'Lisa', 'Bart', 'Meg'];
		simpsons.each( function(familyMember){
			alert(familyMember);
		});
	}

당신은 특이한 문법으로 별로 좋지않다고 생각할지도 모른다. 위 예제에서, 엉망으로 만드는 것은 아무것도 없다.

each 메소드에 대한 인자처럼 전달되는 이 함수는 보았는가.? iterator 함수처럼 이것을 참조해보자.

toc

스테로이드(steroids)에서 당신의 배열

위에서 언급된것처럼, 이것은 같은 프라퍼티와 메소드를 가지는 배열내 모든 요소를 위해 공통이다. 우리의 새로운 배열을 가지고 iterator함수의 장점을 가질수 있는 방법을 보자.

문법에 따르는 요소를 찾아라.

<script>
	function findEmployeeById(emp_id){
		var listBox = $('lstEmployees')
		var options = listBox.getElementsByTagName('option');
		options = $A(options);
		var opt = options.find( function(employee){
			return (employee.value == emp_id);
		});
		alert(opt.innerHTML); //displays the employee name
	}
</script>

<select id="lstEmployees" size="10" >
	<option value="5">Buchanan, Steven</option>
	<option value="8">Callahan, Laura</option>
	<option value="1">Davolio, Nancy</option>
</select>

<input type="button" value="Find Laura" onclick="findEmployeeById(8);" >

배열에서 항목을 걸러내는 방법을 보자. 그리고나서 각각의 요소로부터 맴버를 가져온다.

<script>
	function showLocalLinks(paragraph){
		paragraph = $(paragraph);
		var links = $A(paragraph.getElementsByTagName('a'));
		//find links that do not start with 'http'
		var localLinks = links.findAll( function(link){
			var start = link.href.substring(0,4);
			return start !='http';
		});
		//now the link texts
		var texts = localLinks.pluck('innerHTML');
		//get them in a single string
		var result = texts.inspect();
		alert(result);
	}

</script>
<p id="someText">
	This <a href="http://othersite.com/page.html">text</a> has 
	a <a href="#localAnchor">lot</a> of 
	<a href="#otherAnchor">links</a>. Some are 
	<a href="http://wherever.com/page.html">external</a>
	and some are <a href="#someAnchor">local</a>
</p>
<input type=button value="Find Local Links" onclick="showLocalLinks('someText')">

이것은 이 문법에 완전히 빠지도록 하기 위한 몇가지 예제를 가진다. 사용가능한 모든 함수를 위해 Enumerable and Array 참조문서를 보라.

toc

내가 강력하게 추천하는 책들.

다음의 책들은 AJAX애플리케이션을 만들기 위해 요구되는 새로운 스킬을 배우는데 많은 도움을 주었고 이미 알고 있던 스킬을 좀더 탄탄하게 만들어주었다. 나는 좋은 책이 충분히 금적적인 가치를 하고 오랜시간동안 가치를 이어간다고 생각한다.

toc

prototype.js 참조

JavaScript 클래스에 대한 확장

prototype.js라이브러리에 기능을 추가하기 위한 방법중 하나는 현재 존재하는 JavaScript클래스를 확장하는 것이다.

toc

Object 클래스를 위한 확장

메소드	종류	인자	상세설명
extend(destination, source)	static	destination: 객체, source: 객체	source에서 destination으로 모든 프라퍼티와 메소드를 복사하여 상속을 구현하기 위한 방법을 제공
inspect(targetObj)	static	targetObj: 객체	targetObj의 사람이 읽을수 있는 문자열 표현으로 반환. 주어진 객체가 inspect 인스턴스 메소드를 정의하지 않는다면, toString 의 값을 반환

toc

Number 클래스를 위한 확장

메소드	종류	인자	상세설명
toColorPart()	instance	(none)	숫자의 16진법 표현을 반환. 색상의 RGB컴포넌트를 HTML표현으로 변환할때 유용
succ()	instance	(none)	다음 숫자를 반환. 이 함수는 반복을 포함하는 시나리오에서 사용된다.
times(iterator)	instance	iterator: Function(value, index)를 충족하는 함수 객체	인자 value와 index를 반복적으로 전달하는 iterator 함수를 호출하는 것은 iteration과 현재 index내 현재 값을 각각 포함한다.

다음의 예제는 0에서 9까지의 메시지 박스를 표시할것이다.

<script>
	function demoTimes(){
		var n = 10;
		n.times(function(index){
			alert(index);
		});
		/***************************
		 * you could have also used: 
		 *           (10).times( .... ); 
		 ***************************/
	}

</script>

<input type=button value="Test Number.times()" onclick="demoTimes()">

toc

Function 클래스를 위한 확장

메소드	종류	인자	상세설명
bind(object)	instance	object: 메소드를 소유하는 객체	함수(=메소드) 소유자 객체로 미리 묶는 함수의 인스턴스를 반환. 반환된 함수는 원래의 것과 같은 인자를 가질것이다.
bindAsEventListener(object)	instance	object: 메소드를 소유하는 객체	유하는 객체 함수(=메소드) 소유자 객체로 미리 묶는 함수의 인스턴스를 반환. 반환된 함수는 이것의 인자로 현재 이벤트 객체를 가질것이다.

실제로 이 확장중 하나를 보자.

<input type=checkbox id=myChk value=1> Test?
<script>
	//declaring the class
	var CheckboxWatcher = Class.create();

	//defining the rest of the class implementation
	CheckboxWatcher.prototype = {

	   initialize: function(chkBox, message) {
			this.chkBox = $(chkBox);
			this.message = message;
			//assigning our method to the event
			
			this.chkBox.onclick = 
			   this.showMessage.bindAsEventListener(this);
			
	   },

	   showMessage: function(evt) {
		  alert(this.message + ' (' + evt.type + ')');
	   }
	};


	var watcher = new CheckboxWatcher('myChk', 'Changed');
</script>

toc

String 클래스를 위한 확장

메소드	종류	인자	상세설명
stripTags()	instance	(none)	HTML이나 XML태그가 삭제된 문자열을 반환
stripScripts()	instance	(none)	삭제된 <script /> 블럭을 가진 문자열을 반환
escapeHTML()	instance	(none)	HTML마크업 문자들이 escaped된 문자열 반환
unescapeHTML()	instance	(none)	escapeHTML()의 반대
extractScripts()	instance	(none)	문자열내에서 발견되는 모든 <script />블럭을 포함하는 Array객체 반환
evalScripts()	instance	(none)	문자열내에서 발견되는 각각의 <script />블럭을 평가하기
toQueryParams()	instance	(none)	쿼리문자열(querystring)을 파라미터 이름에 의해 인덱스화되는 결합된 Array로 쪼개기
parseQuery()	instance	(none)	toQueryParams()와 같음.
toArray()	instance	(none)	문자열을 이것의 문자들의 Array로 쪼개기
camelize()	instance	(none)	-(하이픈)으로 분리된 문자열을 camelCaseString으로 변환하기. 이 함수는 예를 들면, 프라퍼티 스타일을 다루는 코드를 작성할때 유용하다.

toc

Array 클래스를 위한 확장

시작하기 위해, Array는 Enumerable를 확장한다. 그래서 Enumerable객체내에 정의되는 모든 편리한 메소드는 사용가능하다. 이것외에도, 아래의 메소드들이 구현되었다.

메소드	종류	인자	상세설명
clear()	instance	(none)	배열을 비우고 자체를 반환한다.
compact()	instance	(none)	null 이거나 undefined인 요소를 제외하고 배열을 반환한다. 이 메소드는 배열자체를 변경하지 않는다.
first()	instance	(none)	배열의 첫번째 요소를 반환한다.
flatten()	instance	(none)	기복이 없고, 1차원의 배열을 반환한다. 이 함수는 배열이고 반환된 배열내 요소를 포함하는 배열의 각 요소를 찾음으로써 수행된다.
indexOf(value)	instance	value: 당신이 찾는 것	배열에서 찾아진다면 주어진 value의 0부터 시작하는 인덱스의 위치를 반환. value이 없다면 -1을 반환
inspect()	instance	(none)	요소를 가진 배열의 잘 포맷팅된 문자열 표시를 반환하기 위해 변경
last()	instance	(none)	배열의 마지막 요소를 반환한다.
reverse([applyToSelf])	instance	applyToSelf: 배열 자체가 반전되는지 표시	역순서로 배열을 반환. 인자가 주어지지 않거나 인자가 true라면, 배열자체는 반전될것이다. 그렇지 않으면 변경되지 않고 남는다.
shift()	instance	(none)	첫번째 요소를 반환하고 배열로부터 이것을 제거한다. 배열의 길이는 1 감소한다.
without(value1 [, value2 [, .. valueN]])	instance	value1 ... valueN: 배열내 존재한다면 제외될 값	인자로 주어진 요소를 제외한 배열을 반환

toc

document DOM 객체를 위한 확장

메소드	종류	인자	상세설명
getElementsByClassName(className [, parentElement])	instance	className: 요소와 연관된 CSS클래스 이름, parentElement: 객체 또는 가져올 요소를 포함하는 요소의 id.	주어진 CSS클래스명과 연관된 모든 요소를 반환. parentElement id가 주어졌다면, 전체 문서가 검색될것이다.

toc

Event 객체를 위한 확장

프라퍼티	타입	상세설명
KEY_BACKSPACE	Number	8: 되돌리기(<-) 키를 위한 상수 코드.
KEY_TAB	Number	9: 탭키를 위한 상수코드
KEY_RETURN	Number	13: 리턴키를 위한 상수코드
KEY_ESC	Number	27: Esc키를 위한 상수코드
KEY_LEFT	Number	37: 왼쪽 화살표 키를 위한 상수코드
KEY_UP	Number	38: 위쪽 화살표 키를 위한 상수코드
KEY_RIGHT	Number	39: 오른쪽 화살표 키를 위한 상수코드
KEY_DOWN	Number	40: 아래쪽 화살표 키를 위한 상수코드
KEY_DELETE	Number	46: Delete키를 위한 상수코드
observers:	Array	캐시된 관찰자(observers)의 목록. 상세한 객체의 내부구현의 일부

메소드	종류	인자	상세설명
element(event)	static	event: 이벤트 객체	이벤트를 일으키는 요소를 반환
isLeftClick(event)	static	event: 이벤트 객체	마우스 왼쪽 버튼을 클릭시 true값 반환
pointerX(event)	static	event: 이벤트 객체	페이지에서 마우스 포인터의 x측 좌표값 반환
pointerY(event)	static	event: 이벤트 객체	페이지에서 마우스 포인터의 y측 좌표값 반환
stop(event)	static	event: 이벤트 객체	이벤트의 디폴트 행위를 취소하고 위임을 연기하기 위해 이 함수를 사용
findElement(event, tagName)	static	event: 이벤트 객체, tagName: 원하는 태그명	DOM트리 위쪽으로 가로지른다. 주어진 태그명을 가진 첫번째 요소를 검색한다. 이벤트를 발생시키는 요소로부터 시작한다.
observe(element, name, observer, useCapture)	static	element: 객체 또는 아이디, name: 이벤트 명 (like 'click', 'load', etc), observer: 이벤트를 다루는 함수, useCapture: true라면, capture내 이벤트를 다루고 false라면 bubbling 내 이벤트를 다룬다.	이벤트를 위한 이벤트 핸들러 함수를 추가
stopObserving(element, name, observer, useCapture)	static	element: 객체 또는 아이디, name: 이벤트 명 ('click' 처럼), observer: 이벤트를 다루는 함수, useCapture: true라면 capture내 이벤트를 다루고, false라면 bubbling내에서 다룬다.	이벤트로부터 이벤트 핸들러를 제거
_observeAndCache(element, name, observer, useCapture)	static		private메소드, 이것에 대해 걱정하지말라.
unloadCache()	static	(none)	private메소드, 이것에 대해 걱정하지말라. 메모리로부터 캐시된 모든 관찰자(observer)를 지운다.

window객체의 이벤트를 로그하기 위한 이벤트 핸들러를 추가하는 객체를 사용하는 방법을 보자.

<script>
	Event.observe(window, 'load', showMessage, false);

	function showMessage() {
	  alert('Page loaded.');
	}
</script>

toc

prototype.js에 새롭게 정의된 객체와 클래스

라이브러리가 당신을 돕는 다른 방법은 객체지향 디자인과 공통적인 기능을 위한 지원 모두를 구현하는 많은 객체를 제공하는 것이다.

toc

PeriodicalExecuter 객체

이 객체는 주어진 함수를 주어진 시간간격으로 반복적으로 호출하기 위한 로직을 제공한다.

메소드	종류	인자	상세설명
[ctor](callback, interval)	constructor	callback: 파라미터 성격이 아닌 함수, interval: 초단위 시간간격	함수를 반복적으로 호출할 이 객체의 하나의 인스턴스를 생성

프라퍼티	타입	상세설명
callback	Function()	호출되기 위한 함수. 이 함수로 전달될 파라미터는 없다.
frequency	Number	이것은 수초내 간격으로 실질적으로 작용
currentlyExecuting	Boolean	만약 함수 호출이 진행중이라면 표시

toc

Prototype 객체

Prototype 객체는 사용되는 라이브러리의 버전을 명시하는 것보다 중요한 역활을 가지지 않는다.

프라퍼티	타입	상세설명
Version	String	라이브러리의 버전
emptyFunction	Function()	비어있는(empty) 함수 객체
K	Function(obj)	주어진 파라미터를 되돌리는 함수 객체
ScriptFragment	String	스크립트를 확인하는 정규식 표현

toc

Enumerable 객체

Enumerable 객체는 list형태의 구조내에서 항목을 반복하기 위한 좀더 멋진 코드를 작성하는 것을 허용한다.

많은 객체들은 유용한 인터페이스에 영향을 끼치기 위해 Enumerable 을 확장한다.

프라퍼티	타입	상세설명
Version	String	라이브러리의 버전

메소드	종류	인자	상세설명
each(iterator)	instance	iterator: Function(value, index)를 충족하는 함수 객체	주어진 iterator함수를 호출하는 것은 첫번째 인자내 목록으로 각각의 요소와 두번째 인자내 요소의 인덱스 전달한다.
all([iterator])	instance	iterator: Function(value, index)를 충족하는 함수 객체	이 함수는 주어진 함수를 사용하여 값들의 전체 집합을 테스트하기 위한 방법이다. iterator 함수가 어떤 요소를 위해 false나 null을 반환한다면, all은 false를 반환할것이다. 그렇지 않다면 true를 반환할것이다. iterator가 주어지지 않는다면, 요소 자체가 false 나 null이 아닌지 테스트할것이다. 당신은 "모든 요소가 false가 아닌지 체크한다"와 같이 이것을 읽을수 있다.
any(iterator)	instance	iterator: Function(value, index)를 충족하는 함수 객체(선택사항)	이 함수는 주어진 함수를 사용하여 값들의 전체 집합을 테스트하기 위한 방법이다. iterator함수가 어떤 요소를 위해 false 나 null을 반환하지 않는다면 any는 true를 반환할것이다. 그렇지 않다면 false를 반환할것이다. iterator가 주어지지 않는다면, 요소 자체가 false 나 null이 아닌지 테스트할것이다. 당신은 "어느 요소가 false가 아닌지 체크한다"와 같이 이것을 읽을수 있다.
collect(iterator)	instance	iterator: Function(value, index)를 충족하는 함수 객체	집합내 각각의 요소를 위한 iterator함수를 호출하고 Array로 각각의 결과를 반환한다. 집합내 각각의 요소를 위한 하나의 결과 요소는 같은 순서이다.
detect(iterator)	instance	iterator: Function(value, index)를 충족하는 함수 객체	집합내 각각의 요소를 위한 iterator함수를 호출하고 true를 반환하는 iterator함수를 야기하는 첫번째 요소를 반환한다. true를 반환하는 요소가 없다면, detect는 null을 반환한다.
entries()	instance	(none)	toArray()와 같다.
find(iterator)	instance	iterator: Function(value, index)를 충족하는 함수 객체	detect()와 같다.
findAll(iterator)	instance	iterator: Function(value, index)를 충족하는 함수 객체	집합내 각각의 요소를 위한 iterator함수를 호출하고 true로 해석되는 값을 반환하는 iterator함수를 야기하는 모든 요소를 가진 Array을 반환한다. 이 함수는 reject()와는 반대의 함수이다.
grep(pattern [, iterator])	instance	pattern: 요소를 일치시키기 위해 사용되는 RegExp객체, iterator: Function(value, index)를 충족하는 함수 객체	집합내 각각의 요소의 문자열 값을 pattern 정규표현식에 대해 테스트한다. 함수는 정규표현식에 대응되는 모든 요소를 포함하는 Array 를 반환할것이다. iterator함수가 주어진다면, Array는 대응되는 각각의 요소를 가진 iterator를 호출한 결과를 포함할것이다.
include(obj)	instance	obj: 객체	집합내 주어진 객체를 찾도록 시도한다. 객체가 찾아진다면, true를 반환하고 찾지 못한다면 false를 반환한다.
inject(initialValue, iterator)	instance	initialValue: 초기화 값처럼 사용되는 객체, iterator: Function(accumulator, value, index)를 충족하는 함수 객체	iterator함수를 사용하여 집합의 모든 요소를 조합한다. 호출된 iterator는 accumulator인자에서 이전 반복의 결과를 전달한다. 첫번째 반복은 accumulator인자내 initialValue를 가진다. 마지막 결과는 마지막 반환값이다.
invoke(methodName [, arg1 [, arg2 [...]]])	instance	methodName: 각각의 요소내에서 호출될 메소드의 이름, arg1..argN: 메소드 호출로 전달될 인자.	집합의 각각의 요소내 methodName에 의해 명시되는 메소드를 호출하는 것은 주어진 인자(arg1에서 argN) 전달하고 Array객체로 결과를 반환한다.
map(iterator)	instance	iterator: Function(value, index)를 충족하는 함수 객체	collect()과 같다.
max([iterator])	instance	iterator: Function(value, index)를 충족하는 함수 객체	집합내 가장 큰 값이나 iterator가 주어진다면 집합내 각각의 요소를 위한 iterator호출의 가장 큰 결과를 반환한다.
include(obj)	instance	obj: 객체	include()과 같다.
min([iterator])	instance	iterator: Function(value, index)를 충족하는 함수 객체	집합내 가장 작은 값을 가진 요소나 iterator가 주어진다면 집합내 각각의 요소를 위한 iterator호출의 가장 작은 결과를 가진 요소를 반환한다.
partition([iterator])	instance	iterator: Function(value, index)를 충족하는 함수 객체	두개의 다른 배열을 포함하는 Array를 반환한다. 첫번째 배열은 true를 반환하는 iterator함수를 야기하는 모든 요소를 포함할것이고 두번째 배열은 남아있는 요소를 포함할것이다. 만약 iterator가 주어지지 않는다면, 첫번째 배열은 true로 해석하는 요소를 포함할것이고 다른 배열은 남아있는 요소를 포함할것이다.
pluck(propertyName)	instance	propertyName : 각각의 요소로부터 읽어들이는 프라퍼티의 이름. 이것은 요소의 인덱스를 포함할수 있다.	집합의 각각의 요소내 propertyName에 의해 명시된 프라퍼티에 값을 가져가고 Array객체로 결과를 반환한다.
reject(iterator)	instance	iterator: Function(value, index)를 충족하는 함수 객체	집합내 각각의 요소를 위한 iterator함수를 호출하고 false로 해석하는 값을 반환하는 iterator함수를 야기하는 모든 요소를 가진 Array를 반환한다. 이 함수는 findAll()과는 반대되는 함수이다..
select(iterator)	instance	iterator: Function(value, index)를 충족하는 함수 객체	findAll()과 같다.
sortBy(iterator)	instance	iterator: Function(value, index)를 충족하는 함수 객체	iterator함수 호출결과를 따르는 정렬된 모든 요소를 가진 Array을 반환.
toArray()	instance	(none)	집합의 모든 요소를 가지는 Array를 반환.
zip(collection1[, collection2 [, ... collectionN [,transform]]])	instance	collection1 .. collectionN: 병합될 목록, transform: Function(value, index)를 충족하는 함수 객체	현재의 집합으로 각각의 주어진 집합을 병합한다. 이 병합 작업은 같은 수의 요소를 가진 새로운 배열을 반환한다. 현재 집합과 각각의 요소가 각각의 병합된 집합으로부터 같은 인덱스를 가진 요소의 배열(이것을 하위 배열이라고 부르자.)이다. transform함수가 주어진다면, 각각의 하위 배열은 반환되기 전에 이 함수에 의해 변형딜것이다. 빠른 예제 : [1,2,3].zip([4,5,6], [7,8,9]).inspect() 는 "[[1,4,7],[2,5,8],[3,6,9] ]" 를 반환한다.

toc

Hash 객체

Hash 객체는 hash구조를 구현한다. 이를테면, Key:Value쌍의 집합.

Hash객체내 각각의 항목은 두개의 요소(첫번째는 key, 두번째는 value)를 가진 배열이다. 각각의 항목은 두개의 프라퍼티(key 와 value)를 가진다.

메소드	종류	인자	상세설명
keys()	instance	(none)	모든 항목의 key를 가진 Array을 반환
values()	instance	(none)	모든 항목의 value를 가진 Array을 반환
merge(otherHash)	instance	otherHash: Hash 객체	hash와 전달된 다른 hash를 조합하고 새로운 결과 hash를 반환
toQueryString()	instance	(none)	쿼리 문자열처럼 포맷팅된 문자열로 hash의 모든 항목을 반환. 이를테면 'key1=value1&key2=value2&key3=value3'
inspect()	instance	(none)	key:value쌍을 가진 hash의 포맷팅된 문자열 표현을 반환하기 위해 변경(오버라이드)

toc

ObjectRange 클래스

Enumerable으로부터 상속

상위 경계나 하위 경계로 값들의 범위를 표시

프라퍼티	타입	종류	상세설명
start	(any)	instance	범위의 시작값
end	(any)	instance	범위의 마지막값
exclusive	Boolean	instance	경계자체가 범위의 일부인지 판단

메소드	종류	인자	상세설명
[ctor](start, end, exclusive)	constructor	start: 시작값, end: 마지막값, exclusive: 경계가 범위내 포함되는가.?	하나의 range객체를 생성한다. start 에서 end로 범위를 지정한다. start 와 end가 같은 타입의 객체이고 succ()메소드를 가져야만 한다.
include(searchedValue)	instance	searchedValue: 검색할 값	주어진 값이 범위내 값인지 체크. true 나 false값을 반환한다.

toc

Class 객체

Class 객체는 라이브러리에서 다른 클래스를 선언할때 사용된다. 클래스를 선언할때 이 객체를 사용하는 것은 생성자로 제공되는 initialize()메소드를 지원하기 위한 새로운 클래스를 발생시킨다.

아래의 샘플을 보라.

//declaring the class
var MySampleClass = Class.create();

//defining the rest of the class implmentation
MySampleClass.prototype = {

   initialize: function(message) {
		this.message = message;
   },

   showMessage: function(ajaxResponse) {
      alert(this.message);
   }
};	

//now, let's instantiate and use one object
var myTalker = new MySampleClass('hi there.');
myTalker.showMessage(); //displays alert

메소드	종류	인자	상세설명
create(*)	instance	(any)	새로운 클래스를 위한 생성자를 정의

toc

Ajax 객체

이 객체는 AJAX기능을 제공하는 많은 다른 클래스를 위한 root와 명명공간(namespace)처럼 제공한다.

프라퍼티	타입	종류	상세설명
activeRequestCount	Number	instance	진행중인 AJAX요청의 수.

메소드	종류	인자	상세설명
getTransport()	instance	(none)	새로운 XMLHttpRequest 객체를 반환

toc

Ajax.Responders 객체

Enumerable로 부터 상속되었다

이 객체는 Ajax관련 이벤트가 발생할때 호출될 객체의 목록을 보존한다. 예를 들어, 당신이 AJAX작업을 위한 전역 예외 핸들러를 연결하길 원한다면 이 객체를 사용할수 있다.

프라퍼티	타입	종류	상세설명
responders	Array	instance	객체의 목록은 AJAX이벤트 알림(notifications)을 위해 등록되었다..

메소드	종류	인자	상세설명
register(responderToAdd)	instance	responderToAdd: 호출될 메소드를 가진 객체	responderToAdd인자를 전달하는 객체는 AJAX이벤트(이를테면, onCreate, onComplete, onException 등등)처럼 명명된 메소드를 포함해야만 한다. 유사한 이벤트가 발생하면, 적절한 이름을 가진 메소드를 포함하는 모든 등록된 객체가 호출되는 메소드를 가질것이다.
unregister(responderToRemove)	instance	responderToRemove: list로부터 제거될 객체	responderToRemove 인자로 전달되는 객체는 등록된 객체의 list로부터 제거될것이다.
dispatch(callback, request, transport, json)	instance	callback: 보고되는 AJAX이벤트 이름, request: 이벤트를 책임지는 the Ajax.Request 객체, transport: AJAX호출을 가지는 XMLHttpRequest 객체, json: 응답의 X-JSON 헤더(존재할때만)	등록된 객체의 목록을 통해 실행하는 것은 callback 인자내 결정된 메소드를 가지는 것을 찾는다. 호출되는 각각의 메소드는 다른 3개의 인자를 전달한다. AJAX응답이 몇몇 JSON컨텐츠를 가지는 X-JSON HTTP 헤더를 포함한다면, 이것은 평가되고 json인자로 전달될것이다. 만약 이벤트가 onException라면, transport인자는 대신에 예외를 가질것이고 json은 전달되지 않을것이다.

toc

Ajax.Base 클래스

이 클래스는 Ajax객체내 정의된 다른 대부분의 클래스를 위한 기본(base)클래스처럼 사용된다.

메소드	종류	인자	상세설명
setOptions(options)	instance	options: AJAX 옵션	AJAX작업을 위해 필요한 옵션 셋팅
responseIsSuccess()	instance	(none)	만약 AJAX작업이 성공한다면 true를 반환하고, 실패한다면 false를 반환
responseIsFailure()	instance	(none)	responseIsSuccess()와는 반대.

toc

Ajax.Request 클래스

Ajax.Base로 부터 상속

AJAX 작업을 캡슐화

프라퍼티	타입	종류	상세설명
Events	Array	static	AJAX작업중 보고되는 가능한 이벤트/상태의 목록. 목록은 'Uninitialized', 'Loading', 'Loaded', 'Interactive', 그리고 'Complete.'를 포함한다.
transport	XMLHttpRequest	instance	AJAX작업을 가지는 XMLHttpRequest 객체
url	String	instance	요청에 의해 대상이 되는 URL

메소드	종류	인자	상세설명
[ctor](url, options)	constructor	url: 꺼내기 위한 url, options: AJAX 옵션	주어진 옵션을 사용하여 주어진 url을 호출할 이 객체의 하나의 인스턴스를 생성. 중요사항: 선택된 url은 브라우저의 보안 셋팅을 위한 대상이 될 가치가 없다. 많은 경우 브라우저는 현재 페이지처럼 같은 호스트로부터가 아니라면 url을 가져오지 않을것이다. 당신은 설정을 피하거나 사용자의 브라우저를 제한하기 위한 로컬 url만을 사용할 것이다.
evalJSON()	instance	(none)	이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 AJAX응답내 존재하는 X-JSON HTTP헤더의 컨텐츠를 평가하기 위해 내부적으로 호출된다.
evalReponse()	instance	(none)	이 메소드는 대개 외부적으로 호출되지 않는다. AJAX응답이 text/javascript의 Content-type헤더를 가진다면, 응답 몸체는 평가되고 이 메소드는 사용될것이다.
header(name)	instance	name: HTTP 헤더명	이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 AJAX응답의 HTTP헤더의 컨텐츠를 가져오기 위해 내부적으로 호출된다.
onStateChange()	instance	(none)	이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 AJAX호출 상태 변경시 객체 자체에 의해 호출된다.
request(url)	instance	url: AJAX호출을 위한 url	이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 생성자를 호출하는 동안 벌써 호출되었다.
respondToReadyState(readyState)	instance	readyState: 상태 숫자값(1 에서 4)	이 메소드는 대개 외부에서 호출되지 않는다. 이것은 AJAX호출 상태가 변경될때 객체 자체에 의해 호출된다.
setRequestHeaders()	instance	(none)	이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 HTTP요청을 하는 동안 보내어질 HTTP헤더를 조합하기 위한 객체 스스로에 의해 호출된다.

toc

options 인자 객체

AJAX작업의 중요한 부분은 options 인자이다. 이것은 기대되는 프라퍼티를 가지는 동안 어떠한 객체도 전달될수 있다. 이것은 AJAX호출을 위해 익명 객체를 생성하는 것이 공통적이다.

프라퍼티	타입	디폴트	상세설명
method	String	'post'	HTTP요청의 메소드
parameters	String	''	요청에 전달한 값들의 url형태의 목록
asynchronous	Boolean	true	AJAX호출이 비동기적으로 만들어지는지 표시
postBody	String	undefined	HTTP POST의 경우 요청의 몸체내 전달되는 내용
requestHeaders	Array	undefined	요청과 함께 전달되기 위한 HTTP헤더의 목록. 이 목록은 많은 수의 항목을 가져야 한다. 나머지 항목은 사용자 정의 헤더의 이름이다. 그리고 다음의 항목은 헤더의 문자열 값이다. 예제 : ['my-header1', 'this is the value', 'my-other-header', 'another value']
onXXXXXXXX	Function(XMLHttpRequest)	undefined	각각의 이벤트/상태가 AJAX호출이 발생하는 동안 도착할때 호출될 사용자정의 함수. 예제 var myOpts = {onComplete: showResponse, onLoaded: registerLoaded};. 사용되는 함수는 AJAX작업을 가지는 XMLHttpRequest객체를 포함하는 하나의 인자를 받을것이다.
onSuccess	Function(XMLHttpRequest)	undefined	AJAX호출이 성공적으로 완성될때 호출될 사용자정의 함수. 사용되는 함수는 AJAX작업을 가지는 XMLHttpRequest객체를 포함하는 하나의 인자를 받을것이다.
onFailure	Function(XMLHttpRequest)	undefined	AJAX호출이 에러를 가진채 끝날때 호출될 사용자정의 함수. 사용되는 함수는 AJAX작업을 가지는 XMLHttpRequest객체를 포함하는 하나의 인자를 받을것이다.
insertion	Function(Object, String)	null	삽입하기 위해 호출되는 함수는 텍스트를 요소로 반환한다. 함수는 수정되기 위한 요소객체와 Ajax.Updater객체에만 적용되는 응답 텍스트의 두개의 인자를 가지고 호출된다.
evalScripts	Boolean	undefined, false	스크립트 블럭이 응답이 도착했을때 평가할지를 판단. Ajax.Updater객체에만 적용.
decay	Number	undefined, 1	Ajax.PeriodicalUpdater 객체는 받은 응답이 마지막 것과 같을때 비율을 새롭게 하여 연속적인 후퇴를 결정. 예를 들어, 당신이 2를 사용한다면, 새롭게 된것중에 하나가 이전것과 같은 결과를 만든후에, 객체는 다음 refresh를 위한 시간의 두배를 기다릴것이다. 이것은 다시 반복한다면, 객체는 4배를 기다릴것이다. 이것을 후퇴를 피하기 위해 정의되지 않거나 1을 사용하도록 남겨두라.
frequency	Number	undefined, 2	초단위의 갱신간격(횟수가 아닌), Ajax.PeriodicalUpdater객체에만 적용.

toc

Ajax.Updater 클래스

Ajax.Request로 부터 상속

요청된 url이 당신 페이지의 특정 요소내 직접적으로 삽입하길 원하는 HTML을 반환할때 사용된다. 당신은 url이 도착을 평가할 <script>블럭을 반환할때 이 객체를 사용할수 있다. 스크립트로 작업하기 위해 evalScripts 옵션을 사용하라.

프라퍼티	타입	종류	상세설명
containers	Object	instance	이 객체는 두개의 프라퍼티(containers.success 는 AJAX호출이 성공할때 사용될것이다. 그리고 AJAX호출이 실패한다면 containers.failure가 사용될것이다.)를 포함한다.

메소드	종류	인자	상세설명
[ctor](container, url, options)	constructor	container: 이것은 요소의 id, 요소객체 자체, 또는 두개의 프라퍼티(AJAX호출이 성공했을때 사용될 object.success 요소(또는 id), 그리고 AJAX호출이 실패했을때 사용될 object.failure요소(또는 id))를 가지는 객체가 될수 있다. url: 가져오기 위한 url, options: AJAX 옵션	주어진 옵션을 사용하여 주어진 url을 호출할 이 객체의 하나의 인스턴스를 생성.
updateContent()	instance	(none)	이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 응답을 받았을때 객체 자체에 의해 호출된다. 이것은 HTML로 적절한 요소를 수정하거나 insertion옵션내 전달되는 함수를 호출할것이다. 이 함수는 두개의 인자(수정되기 위한 요소와 응답 텍스트)를 가지고 호출될것이다.

toc

Ajax.PeriodicalUpdater 클래스

Ajax.Base로 부터 상속

이 클래스는 반복적으로 인스턴스화하고 페이지에서 요소를 새롭게 하거나 Ajax.Updater가 수행할수 있는 다른 작업중 어느것을 수행하기 위한 Ajax.Updater객체를 사용한다. 좀더 많은 정보를 위해 Ajax.Updater 참조를 체크하라.

프라퍼티	타입	종류	상세설명
container	Object	instance	이 값은 Ajax.Updater생성자에 일관적으로 전달될것이다.
url	String	instance	이 값은 Ajax.Updater의 생성자에 일관적으로 전달될것이다.
frequency	Number	instance	초단위의 refresh간격. 디폴트는 2초. 이 숫자는 Ajax.Updater 객체를 호출할때 현재 축소(decay)에 의해 곱해질것이다.
decay	Number	instance	작업을 재-수행할때 적용될 축소(decay)레벨을 유지
updater	Ajax.Updater	instance	가장 최신에 사용된 Ajax.Updater 객체
timer	Object	instance	다른 refresh를 위한 시각일때 객체를 알리기 위해 사용되는 자바스크립트 타이머

메소드	종류	인자	상세설명
[ctor](container, url, options)	constructor	or container:이것은 요소의 id, 요소객체 자체, 또는 두개의 프라퍼티(AJAX호출이 성공할때 사용될 object.success 요소(나 id), AJAX호출이 실패할때 사용할 object.failure 요소(나 id))를 가지는 객체가 될수 있다. url: 가져오기 위한 url, options: AJAX 옵션	주어진 옵션을 사용하여 주어진 url을 호출할 이 객체의 하나의 인스턴스를 생성
start()	instance	(none)	이 메소드는 대개 외부적으로 호출되지 않는다. 이것의 정기적인 작업 수행을 시작하기 위해 객체 자체에 의해 호출된다.
stop()	instance	(none)	이 메소드는 대개 외부적으로 호출되지 않는다. 이것의 정기적인 작업 수행을 시작하기 위해 객체 자체에 의해 호출된다.
updateComplete()	instance	(none)	이 메소드는 대개 외부적으로 호출되지 않는다. 요청을 완성한 후에 사용되는 Ajax.Updater에 의해 호출된다. 이것은 다음 refresh스케줄링 하기 위해 사용된다.
onTimerEvent()	instance	(none)	이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 다음 수정을 위한 시각일때 내부적으로 호출된다.

toc

Element 객체

이 객체는 DOM내 요소를 변경하기 위해 몇몇 유틸리티성 함수들을 제공한다.

메소드	종류	인자	상세설명
addClassName(element, className)	instance	element: element 객체 또는 아이디, className: CSS 클래스명	주어진 class명을 요소의 class명으로 추가
classNames(element)	instance	element: element 객체 또는 아이디	주어진 element와 관련된 CSS class명을 표시하는 Element.ClassNames 객체를 반환
cleanWhitespace(element)	instance	element: element 객체 또는 아이디	요소의 자식노드에서 공백을 제거
empty(element)	instance	element: element 객체 또는 아이디	element태그가 비어있는지(또는 공백만을 가지고 있는지) 표시하는 Boolean값을 반환
getDimensions(element)	instance	element: element 객체 또는 아이디	element의 면적(dimensions)을 반환. 반환된 값은 두개의 프라퍼티(height 와 width)를 가지는 객체이다.
getHeight(element)	instance	element: element 객체 또는 아이디	요소의 offsetHeight값을 반환
getStyle(element, cssProperty)	instance	element: element 객체 또는 아이디, cssProperty : CSS프라퍼티('prop-name' 또는 'propName' 가 작동하는 형태)의 이름	주어진 element내 CSS프라퍼티의 값을 반환하거나 존재하지 않는다면 null 을 반환
hasClassName(element, className)	instance	element: element 객체 또는 아이디, className: CSS class명	요소가 class명중에 하나로 주어진 class명을 가진다면 true를 반환
hide(elem1 [, elem2 [, elem3 [...]]])	instance	elemN: element 객체 또는 아이디	style.display를 'none'로 셋팅하여 각각의 요소를 숨긴다.
makeClipping(element)	instance	element: element 객체나 아이디
makePositioned(element)	instance	element: element 객체나 아이디	element의 style.position 을 'relative'로 변경
remove(element)	instance	element: element 객체 또는 아이디	문서로 부터 요소를 제거한다.
removeClassName(element, className)	instance	element: element 객체 또는 아이디, className: CSS 클래스명	요소의 class명으로 부터 주어진 class명을 제거
scrollTo(element)	instance	element: element 객체나 아이디	창을 element위치로 스크롤
setStyle(element, cssPropertyHash)	instance	element: element 객체나 아이디, cssPropertyHash : 적용되기 위한 스타일을 가지는 Hash객체	cssPropertyHash 인자내 값에 따라, 주어진 element내 CSS프라퍼티의 값을 셋팅.
show(elem1 [, elem2 [, elem3 [...]]])	instance	elemN: element 객체 또는 아이디	style.display를 ''로 다시 셋팅하여 각각의 요소를 보여준다.
toggle(elem1 [, elem2 [, elem3 [...]]])	instance	elemN: element 객체 또는 아이디	각각의 전달된 요소의 가시성(visibility)을 토글(toggle)한다.
undoClipping(element)	instance	element: element 객체 또는 아이디
undoPositioned(element)	instance	element: element 객체 또는 아이디	element의 style.position 을 ''으로 초기화
update(element, html)	instance	element: element 객체 또는 아이디, html: html 컨텐츠	주어진 html인자를 가지는 요소의 내부 html을 대체. 주어진 html이 <script>블럭을 포함한다면, 그것들은 포함되지는 않지만 평가될것이다.
visible(element)	instance	element: element 객체 또는 아이디	요소가 눈에 보이는지 표시하는 Boolean값을 반환

toc

Element.ClassNames class

Enumerable로부터 상속

element에 관련된 CSS class명의 collection을 표시

메소드	종류	인자	상세설명
[ctor](element)	constructor	element: DOM element 객체또는 아이디	주어진 element의 CSS class명을 표시하는 Element.ClassNames 객체를 생성
add(className)	instance	className: CSS class 명	element에 관련된 class명의 리스트에 주어진 CSS class명을 추가
remove(className)	instance	className: CSS class 명	element에 관련된 class명의 리스트로부터 주어진 CSS class명을 제거
set(className)	instance	className: CSS class 명	주어진 CSS class명을 가진 element을 결합, element로부터 다른 class명을 제거.

toc

The Abstract 객체

이 객체는 라이브러리내 다른 클래스를 위한 root처럼 제공한다. 이것은 어떤 프라퍼티나 메소드도 가지지 않는다. 이 객체에 정의된 클래스는 전통적인 추상 클래스처럼 처리된다.

toc

Abstract.Insertion 클래스

이 클래스는 동적으로 내용물을 추가할 다른 클래스를 위한 기본 클래스처럼 사용된다. 이 클래스는 추상 클래스처럼 사용된다.

메소드	종류	인자	상세설명
[ctor](element, content)	constructor	element: element 객체 또는 아이디, content: 삽입되는 HTML	동적 내용물 삽입을 도울 객체를 생성
contentFromAnonymousTable()	instance	(none)

프라퍼티	타입	종류	상세설명
adjacency	String	static, parameter	내용물이 주어진 요소에 대해 상대적으로 위치할 지점을 명시하는 파라미터. 가능한 값은 'beforeBegin', 'afterBegin', 'beforeEnd', 그리고 'afterEnd'.
element	Object	instance	삽입이 상대적으로 만들어질 요소객체
content	String	instance	삽입될 HTML.

toc

Insertion 객체

이 객체는 라이브러리내 다른 클래스를 위한 root처럼 제공한다. 이것은 어떠한 프라퍼티나 메소드를 가지지 않는다. 이 객체에 정의된 클래스는 전통적인 추상 클래스처럼 처리된다.

toc

Insertion.Before 클래스

Abstract.Insertion로 부터 상속

요소 앞에 HTML삽입

메소드	종류	인자	상세설명
[ctor](element, content)	constructor	element: element 객체 또는 아이디, content: 삽입되는 HTML	Abstract.Insertion으로 부터 상속. 동적으로 내용물을 삽입하는 것을 돕는 객체를 생성

다음의 코드는

<br>Hello, <span id="person" style="color:red;">Wiggum. How's it going?</span>

<script> new Insertion.Before('person', 'Chief '); </script>

다음처럼 HTML이 변경될것이다.

<br>Hello, Chief <span id="person" style="color:red;">Wiggum. How's it going?</span>

toc

Insertion.Top 클래스

Abstract.Insertion로 부터 상속

요소아래의 첫번째 자식으로 HTML을 삽입. 이 내용물은 요소의 열기 태그뒤에 위치할것이다.

메소드	종류	인자	상세설명
[ctor](element, content)	constructor	element: element 객체 또는 아이디, content: 삽입되는 HTML	Abstract.Insertion으로부터 상속. 동적으로 내용물을 삽입하는 것을 돕는 객체 생성

다음의 코드는

<br>Hello, <span id="person" style="color:red;">Wiggum. How's it going?</span>

<script> new Insertion.Top('person', 'Mr. '); </script>

다음처럼 HTML이 변경될것이다.

<br>Hello, <span id="person" style="color:red;">Mr. Wiggum. How's it going?</span>

toc

Insertion.Bottom 클래스

Abstract.Insertion로 부터 상속

요소아래의 마지막 자식으로 HTML삽입. 내용물은 요소의 닫기 태그앞에 위치할것이다.

메소드	종류	인자	상세설명
[ctor](element, content)	constructor	element: element 객체 또는 아이디, content: HTML to be inserted	Abstract.Insertion로 부터 상속. 동적으로 내용물을 삽입하는 것을 돕는 객체 생성

다음의 코드는

<br>Hello, <span id="person" style="color:red;">Wiggum. How's it going?</span>

<script> new Insertion.Bottom('person', " What's up?"); </script>

다음처럼 HTML이 변경될것이다.

<br>Hello, <span id="person" style="color:red;">Wiggum. How's it going? What's up?</span>

toc

Insertion.After 클래스

Abstract.Insertion로 부터 상속

요소의 닫기 태그뒤 HTML삽입

메소드	종류	인자	상세설명
[ctor](element, content)	constructor	element: element 객체 또는 아이디, content: HTML to be inserted	Abstract.Insertion으로부터 상속. 동적으로 내용물을 삽입하는 것을 돕는 객체 생성

다음의 코드는

<br>Hello, <span id="person" style="color:red;">Wiggum. How's it going?</span>

<script> new Insertion.After('person', ' Are you there?'); </script>

다음처럼 HTML이 변경될것이다.

<br>Hello, <span id="person" style="color:red;">Wiggum. How's it going?</span> Are you there?

toc

Field 객체

이 객체는 폼내 input필드와 작동하기 위한 몇가지 유틸리티성 함수를 제공한다.

메소드	종류	인자	상세설명
clear(field1 [, field2 [, field3 [...]]])	instance	fieldN: field element 객체 또는 아이디	field요소로부터 각각 전달된 값을 지움(clear)
present(field1 [, field2 [, field3 [...]]])	instance	fieldN: field element 객체 또는 아이디	모든 폼 field가 빈값이 아니라면 true를 반환
focus(field)	instance	field: field element 객체 또는 아이디	주어진 폼 field로 입력 포커스 이동
select(field)	instance	field: field element 객체 또는 아이디	텍스트 선택을 지원하는 field내 값을 선택
activate(field)	instance	field: field element 객체 또는 아이디	포커스를 이동하고 텍스트 선택을 지원하는 field내 값을 선택

toc

Form 객체

이 객체는 데이터 항목 폼과 그것들의 입력 field와 작동하기 위한 몇몇 유틸리티성 함수를 제공한다.

메소드	종류	인자	상세설명
serialize(form)	instance	form: form element 객체 또는 아이디	'field1=value1&field2=value2&field3=value3'처럼 field명과 값의 url형태의 목록을 반환
findFirstElement(form)	instance	form: form element 객체 또는 아이디	form에서 첫번째로 사용가능한 필드 element를 반환
getElements(form)	instance	form: form element 객체 또는 아이디	폼내 모든 입력 field를 포함하는 Array 반환
getInputs(form [, typeName [, name]])	instance	form: form element 객체 또는 아이디, typeName: input요소의 타입, name: input요소명.	폼내 모든 <input>요소를 포함하는 Array 반환. 선택적으로 목록은 요소의 타입이나 name속성에 의해 필터링 될수 있다.
disable(form)	instance	form: form element 객체 또는 아이디	폼내 모든 입력 field를 사용불가상태로 만들기
enable(form)	instance	form: form element 객체 또는 아이디	폼내 모든 입력 field를 사용가능하게 만들기
focusFirstElement(form)	instance	form: form element 객체 또는 아이디	첫번째 가시성을 활성화하고, 폼내 입력 field를 가능하게 하기
reset(form)	instance	form: form element 객체 또는 아이디	폼을 리셋하기. form객체의 reset()메소드와 같다.

toc

Form.Element 객체

이 객체는 폼요소와 작동하기 위한 몇몇 유틸리티성 함수를 제공한다.

메소드	종류	인자	상세설명
serialize(element)	instance	element: element 객체 또는 아이디	'elementName=elementValue'처럼 요소의 name=value 짝을 반환
getValue(element)	instance	element: element 객체 또는 아이디	요소의 값을 반환

toc

Form.Element.Serializers 객체

이 객체는 폼요소의 현재 값을 가져오기 위해 라이브러리 내부적으로 사용되는 몇몇 유틸리티성 함수를 제공한다.

메소드	종류	인자	상세설명
inputSelector(element)	instance	element: radio 버튼이나 checkbox처럼 checked프라퍼티를 가지는 form요소의 객체 또는 아이디	['elementName', 'elementValue']처럼 요소의 이름과 값을 가지는 Array을 반환
textarea(element)	instance	element: textbox, button 또는 password필드처럼 value프라퍼티를 가지는 form요소의 객체 또는 아이디.	['elementName', 'elementValue']처럼 요소의 이름과 값을 가지는 Array를 반환
select(element)	instance	element: <select> 요소의 객체 또는 아이디	['elementName', 'selOpt1 selOpt4 selOpt9']처럼 요소의 이름과 모든 선택된 옵션의 값이나 텍스트를 가지는 Array를 반환

toc

Abstract.TimedObserver 클래스

이 클래스는 값이 변경(또는 프라퍼티가 클래스정의를 얻어내는)될때까지 하나의 요소를 모니터링할 다른 클래스를 위한 기본클래스처럼 사용된다. 이 클래스는 추상클래스처럼 사용된다.

하위클래스는 요소의 입력값, style프라퍼티중 하나, 또는 테이블내 row의 수, 또는 당신이 추적하고자 하는 모든것을 모니터링하기 위해 생성될수 있다.

얻어낸 클래스는 요소내 모니터링되는 현재 값을 무엇인지 판단하기 위한 메소드를 구현하는 것이다.

메소드	종류	인자	상세설명
[ctor](element, frequency, callback)	constructor	element: element 객체 또는 아이디, frequency: 초단위 간격, callback: 요소가 변경될때 호출되는 함수	요소를 모니터링할 객체 생성
registerCallback()	instance	(none)	이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 요소 모니터링릉 시작하기 위한 객체 자체에 의해 호출된다.
onTimerEvent()	instance	(none)	이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 요소를 체크하기 위해 정기적으로 객체 자체에 의해 호출된다.

프라퍼티	타입	상세설명
element	Object	모니터링되는 요소객체
frequency	Number	이것은 체크사이에 초단위 간격으로 이루어진다.
callback	Function(Object, String)	요소가 변경될때마다 호출되기 위한 함수. 이것은 요소객체와 새로운 값을 받을것이다.
lastValue	String	요소내 확인되는 마지막 값

toc

Form.Element.Observer 클래스

Abstract.TimedObserver로 부터 상속

폼 입력 요소의 값을 모니터링하는 Abstract.TimedObserver의 구현물. 값 변경을 보고하는 이벤트를 드러내지 않는 요소를 모니터링하고자 할때 이 클래스를 사용하라. 이 경우 당신은 Form.Element.EventObserver 클래스를 대신 사용할수 있다.

메소드	종류	인자	상세설명
[ctor](element, frequency, callback)	constructor	element: element 객체 또는 아이디, frequency: interval in seconds, callback: function to be called when the element changes	Abstract.TimedObserver으로부터 상속. 요소의 value프라퍼티를 모니터링할 객체를 생성.
getValue()	instance	(none)	요소의 값을 반환

toc

Form.Observer 클래스

Abstract.TimedObserver로 부터 상속

폼내 데이터 항목 요소의 값이 변경하는지를 모니터링하는 Abstract.TimedObserver의 구현물. 당신이 값 변경을 보고하는 이벤트를 드러내지 않는 요소를 포함하는 폼을 모니터링하고자 할때 이 클래스를 사용하라. 이 경우 당신은 Form.EventObserver 클래스를 대신 사용할수 있다.

메소드	종류	인자	상세설명
[ctor](form, frequency, callback)	constructor	form: form 객체 또는 아이디, frequency: 초단위 간격, callback: form내 데이터 항목 요소가 변경될때 호출되는 함수	Abstract.TimedObserver로부터 상속. 변경하기 위한 폼을 모니터링할 객체 생성.
getValue()	instance	(none)	모든 폼의 데이터의 직렬화를 반환

toc

Abstract.EventObserver 클래스

이 클래스는 요소를 위해 값-변경 이벤트가 발생할때마다 콜백함수를 수행하는 다른 클래스를 위한 기본 클래스처럼 사용된다.

Abstract.EventObserver 타입의 다중 객체는 다른것을 지우지 않고 같은 요소로 묶일수 있다. 콜백은 요소에 할당되는 순서대로 수행될것이다.

트리거 형태의 이벤트는 radio버튼과 checkbox를 위해서는 onclick이고 대개의 textbox와 리스트박스/드랍다운을 위해서는 onchange이다.

얻어낸 클래스는 요소내 모니터링되는 현재 값을 무엇인지 판단하기 위한 메소드를 구현하는 것이다.

메소드	종류	인자	상세설명
[ctor](element, callback)	constructor	element: element 객체 또는 아이디, callback: 이벤트가 발생할때 호출되는 함수	요소를 모니터링할 객체 생성.
registerCallback()	instance	(none)	이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 요소의 이벤트를 자체적으로 묶는 객체에 의해 호출된다.
registerFormCallbacks()	instance	(none)	이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 폼내 각각의 데이터 항목 요소의 이벤트로 자체적으로 묶기 위한 객체에 의해 호출된다.
onElementEvent()	instance	(none)	이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 요소의 이벤트로 묶일것이다.

프라퍼티	타입	상세설명
element	Object	모니터링되는 요소객체
callback	Function(Object, String)	요소가 변경될때마다 호출되기 위한 함수. 이것은 요소객체와 새로운 값을 받을것이다.
lastValue	String	요소내 확인되는 마지막 값

toc

Form.Element.EventObserver 클래스

Abstract.EventObserver로 부터 상속

요소내 값 변경을 감지하기 위한 폼 데이터 항목 요소의 적절한 이벤트를 위한 콜백 함수를 수행하는 Abstract.EventObserver의 구현물. 만약 요소가 변경을 보고하는 이벤트를 드러내지 않는다면, 당신은 Form.Element.Observer 클래스를 대신 사용할수 있다.

메소드	종류	인자	상세설명
[ctor](element, callback)	constructor	element: element 객체 또는 아이디, callback: function to be called when the event happens	Abstract.EventObserver로 부터 상속. 요소의 value프라퍼티를 모니터링할 객체 생성.
getValue()	instance	(none)	요소의 값 반환.

toc

Form.EventObserver 클래스

Abstract.EventObserver로 부터 상속

값이 변결될때 감지하기 위한 요소의 이벤트를 사용하여 폼내 포함되는 어느 데이터 항목 요소에 변경을 모니터링하는 Abstract.EventObserver의 구현물. 만약 폼이 변경을 보고하는 이벤트를 드러내지 않는 요소를 포함한다면, 당신은 Form.Observer 클래스를 대신 사용할수 있다.

메소드	종류	인자	상세설명
[ctor](form, callback)	constructor	form: form 객체 또는 아이디, callback: form내 데이터 항목 요소가 변경될때 호출되는 함수	Abstract.EventObserver로부터 상속. 변경을 위해 폼을 모니터링할 객체 생성.
getValue()	instance	(none)	모든 폼의 데이터 직렬화를 반환

toc

Position 객체 (예비 문서)

이 객체는 요소 위치할당을 작업할때 돕는 수많은 함수를 제공한다.

메소드	종류	인자	상세설명
prepare()	instance	(none)	스크롤 위치내 변경을 수용하기 위한 deltaX 와 deltaY 프라퍼티 조정. 페이지 스크롤후 withinIncludingScrolloffset를 호출하기 전에 이 메소드를 호출하는 것을 기억하라.
realOffset(element)	instance	element: object	요소에 영향을 끼치는 어느 스크롤 offset를 포함하는 요소의 정확한 스크롤 offset를 가진 Array을 반환. 이 결과 배열은 [total_scroll_left, total_scroll_top]과 유사하다.
cumulativeOffset(element)	instance	element: object	위치가 할당된 부모 요소에 의해 부과된 어느 offset를 포함하는 요소의 정확한 위치가 할당된 offset를 가진 Array을 반환. 결과 배열은 [total_offset_left, total_offset_top]과 유사하다.
within(element, x, y)	instance	element: object, x 와 y: 위치 조정	만약 주어진 지점이 주어진 요소의 직사각형내 조정이 되는지 테스트.
withinIncludingScrolloffsets(element, x, y)	instance	element: object, x and y: coordinates of a point
overlap(mode, element)	instance	mode: 'vertical' 나 'horizontal', element: object	within()은 이 메소드가 호출되기 전에 호출될 필요가 있다. 이 메소드는 요소에서 겹치는 것을 조정하는 세분화정도를 표현하는 0.0과 1.0사이의 10진수를 반환할것이다. 예를 들면, 만약 요소가 100px를 가지는 정사각형 DIV이고 (300,300)에 위치한다면, within(divSquare, 330, 330); overlap('vertical', divSquare);은 DIV의 top border로부터 10%(30px)를 가리키는 것을 의미하는 0.10을 반환할것이다.
clone(source, target)	instance	source: element 객체 또는 아이디, target: element 객체 또는 아이디	source요소에 대해 똑같이 target요소의 크기를 다시 조정하고 다시 위치를 지정

1.4.0을 위한 이 문서는 여전히 작업중입니다. 이 문서의 업데이트를 계속 지켜봐주십시오.
만약 에러를 발견한다면, let me know 나에게 알려주십시오. 그러면 가능한한 빨리 그것을 수정할것입니다.
한글 번역에 관련된 부분은 한국어 번역자으로 알려주십시오.

Posted by 1010

03.HTML 4.X, HTML5, XML.../HTML/Css/Script2008. 10. 30. 13:24

테이블 안에 내용 넘는거 자동으로 줄바꿈

style="word-break:break-all;" wrap="hard"

<table border="1" width="500">
<tr>
<td style="word-break:break-all;"

wrap="hard">efssssssssssssssssseffffffffsefsafefsaefsaefaseaesssssssssdrgsssssssssssssssssssssssssssssssssssssssss</td>
</tr>
</table>

Posted by 1010

03.HTML 4.X, HTML5, XML.../HTML/Css/Script2008. 10. 30. 13:21

ui 목록 샘플

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
#con{
border:1px solid #c0c0c0;
}
ul#nav{
margin:0; padding:0; list-style:none;
}
#nav li{
margin:8px 0;
padding-top: 1px;
font: 11pt 굴림;
color: #777;
text-transform:uppercase;
letter-spacing: 1px;
background:url(bg_dotted.gif) repeat-x 0 77% !important;
background-position:0 61%;
}
#nav li a{
float: left;
padding:1px 3px;
background: #FFF;
color:#777;
text-decoration:none;
}
ul#nav li span{
float:right;
padding:1px 3px;
background: #FFF;

}
ul#nav li br{
clear:both;
}
#menu legend{
font-size:11pt;
font-weight:bold;
color:#777;
background-color:#EEEEEE;
padding:2px 2px 2px 2px;
border:1px solid #c0c0c0;
}

</style>
</HEAD>

<BODY>

<fieldset id="menu">
<legend>Menu List</legend>
<ul id="nav">
<li><span>1</span><a href="#">Mome</a><BR /></li>
<li><span>2</span><a href="#">My my my</a><BR /></li>
<li><span>3</span><a href="#">Gallery</a><BR /></li>
<li><span>4</span><a href="#">Programming</a><BR /></li>
<li><span>5</span><a href="#">FreeBoard</a><BR /></li>
<li><span>6</span><a href="#">Contact us</a><BR /></li>
</ul>
</fieldset>

</BODY>
</HTML>

Posted by 1010

03.HTML 4.X, HTML5, XML.../HTML/Css/Script2008. 10. 30. 13:20

div 레이아웃과 table 레이아웃

두 소스다 위 그럼처럼 같은 결과를 보여주긴 하지만..

1. 테이블인 경우

2. div 와 css 를 이용한

경우

div 인 경우 태그가 간결해지고 역활 분담이 확실해 져 있다.
그러나 습관은 무서운것..ㅡ,ㅡ;;;;
아직 테이블이..ㅋ.ㅋ

출처 : http://harogipro.tistory.com/110

Posted by 1010

03.HTML 4.X, HTML5, XML.../HTML/Css/Script2008. 10. 30. 13:13

css 로 텝메뉴를 만들어 주는 프로그램

css 로 텝메뉴를 만들어 주는 프로그램 입니다.
이건 뭐...ㅡ,ㅡ;;;

css_tab.zip

우선 위 파일을 다운받습니다. 혹은 아래 주소에서 다운받으시면 되고...
http://www.highdots.com/css-tab-designer/

압축을 풀고 프로그램을 실행해 보면 아래와 같은 화면이 나오네요. (크게보세요.)

마음에 드는 텝메뉴를 선택한 후에 아래 그림처럼 generate & HTML 을 누르면....

저장하라고 묻네요. 일단 저장을 하면...탭용 배경이미지와 html 파일이 하나 저장됩니다.

html 파일을 소스보기 해볼까요..
대략 이런 형태로 소스들이 만들어지네요.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Free CSS Navigation Menu Designs 1 at exploding-boy.com</title>
<style type="text/css">
<!--
body {
margin:0;
padding:0;
font: bold 11px/1.5em Verdana;
}

h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 0px;
padding: 0px 0px 0px 15px;
}

/*- Menu Tabs B--------------------------- */

#tabsB {
float:left;
width:100%;
background:#F4F4F4;
font-size:93%;
line-height:normal;
}
#tabsB ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsB li {
display:inline;
margin:0;
padding:0;
}
#tabsB a {
float:left;
background:url("tableftB.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsB a span {
float:left;
display:block;
background:url("tabrightB.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsB a span {float:none;}
/* End IE5-Mac hack */
#tabsB a:hover span {
color:#000;
}
#tabsB a:hover {
background-position:0% -42px;
}
#tabsB a:hover span {
background-position:100% -42px;
}

#tabsB #current a {
background-position:0% -42px;
}
#tabsB #current a span {
background-position:100% -42px;
}
-->
</style>
</head>

<body>
<h2>Tab Menu B</h2>
<div id="tabsB">
<ul>

<li><a href="Home.html"><span>Home</span></a></li>
<li><a href="Products.html"><span>Products</span></a></li>
<li><a href="Services.html"><span>Services</span></a></li>
<li><a href="Support.html"><span>Support</span></a></li>
<li id="current"><a href="Order.html"><span>Order</span></a></li>
<li><a href="News.html"><span>News</span></a></li>
<li><a href="About.html"><span>About</span></a></li>

</ul>
</div>
<br /><br />
</body>
</html>

간단히 텝디자인 만들때 쓸모있을 듯 합니다.

* 만드는 방법 *

파일 -> New Project 선택한후 마음에 드는 디자인 선택

+ 버튼을 눌러서 메뉴 추가

아래그림처럼 메뉴가 생겨납니다.

계속 메뉴를 만든후...

태그로 generate 하고 소스 직접 수정하면 됩니다. (주: 문자셋이 utf-8)

[공대여자는 이쁩니다. -_-b]
출처 : 공대여자님 홈페이지.
http://www.mins01.com/20070305/m_board/tech.php?b_id=tech&type=read&b_idx=306&page=10&period=730

출처 : http://www.highdots.com/css-tab-designer/

Posted by 1010

03.HTML 4.X, HTML5, XML.../HTML/Css/Script2008. 10. 30. 13:12

CSS 개발툴

css 개발을 할 수 있는 프로그램입니다. 속성을 한눈에 볼 수 있어 좋네요.

^_^
아직 이것저것 만져보진 못했습니다만...-_-;;;

다운로드주소 : http://www.newsgator.com/Individuals/TopStyle/Default.aspx

Posted by 1010

03.HTML 4.X, HTML5, XML.../HTML/Css/Script2008. 10. 28. 13:51

모든 셀에 한꺼번에 바탕색 지정

원래는 <td> 태그마다, 즉 각 칸(셀)마다 스타일을 지정해 주어야 하더군요. 그러나 이러면 너무 번거로웠습니다.

또는

td { background-color:#FFDDDD; padding:10px; border:1px solid #ACB4F2; }

이렇게 하면 한꺼번에 셀의 스타일을 지정할 수 있긴 하지만, 이러면 그 페이지에 있는 모든 테이블의 셀이 획일적으로 지정되어 버리기에 문제가 있습니다. 특히 페이지에 광고가 있다면, 그 광고의 테이블 셀도 여기서 지정한 대로 변하기 때문에, 광고의 레이아웃이 이상하게 됩니다.

id 를 이용하면, 그 id에 해당되는 범위 내에서만, 셀의 배경색을 일괄적으로 지정할 수 있습니다.

우선 테이블 태그에 <table id="foo"> 이렇게 적당한 아이디(id)를 부여합니다. 단 아이디가 숫자로 시작하면 안되고, 한글이나 특수 기호가 포함되면 안되고, 중복되어서도 안됩니다. 한 HTML 페이지에 그 아이디는 단 하나뿐이어야 합니다. 즉 id="foo" 라는 아이디 정의가 다른 태그에도 있으면 안 됩니다. 무슨 아이디든 아이디는 고유해야 합니다.

#foo td { background-color:#FFDDDD; padding:10px; border:1px solid #ACB4F2; }

이 스타일 정의는, foo 라는 아이디를 가진 태그의 범위 내에 있는 모든 td 태그에 색을 지정하는 것입니다.

테이블 태그의 테두리 빈틈 없애기

<table> 태그에 style="border-collapse:collapse" 를 지정해 주면, td(셀)들 사이의 빈틈이 말끔히 없어집니다.

예제 코드:

<html>
<head>
<style type="text/css">

#foo td { background-color:#FFDDDD; padding:10px; border:1px solid #ACB4F2; }

</style>
</head>

<body>

<table id="foo" style="border-collapse:collapse">
<tr><td>1번째 행의 1번째 칸</td> <td>1번째 행의 2번째 칸</td></tr>
<tr><td>2번째 행의 1번째 칸</td> <td>2번째 행의 2번째 칸</td></tr>
<tr><td>3번째 행의 1번째 칸</td> <td>3번째 행의 2번째 칸</td></tr>
</table>

</body>
</html>

위의 코드의 결과:

1번째 행의 1번째 칸	1번째 행의 2번째 칸
2번째 행의 1번째 칸	2번째 행의 2번째 칸
3번째 행의 1번째 칸	3번째 행의 2번째 칸

출처 : http://mwultong.blogspot.com/2006/06/html-css-td.html

Posted by 1010

03.HTML 4.X, HTML5, XML.../HTML/Css/Script2008. 10. 27. 15:25

css로 만든 메뉴모음 사이트

[사이트]css로 만든 메뉴모음 사이트

http://www.dynamicdrive.com/style/

Posted by 1010

03.HTML 4.X, HTML5, XML.../HTML/Css/Script2008. 10. 24. 16:56

XML & JAVASCRIPT로 트리 메뉴(tree menu) 만들기

2006/12/19 02:37

<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html>
<head>
<title> javascript와 xml을 이용한 트리만들기 </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script language="javascript">

</script>
<style type="text/css" media="all">
.folder_node_visible
{
margin-top:3px;
margin-left:20px;
display:block;
font-size:12px;
}
.doc_node_visible
{
margin-top:3px;
margin-left:20px;
padding:2px 2px 2px 20px;
/*background:url("/image/doc.gif") no-repeat;*/
cursor:pointer;
display:block;
font-size:12px;
}
.folder_node_hidden
{
margin-left:20px;
display:none;
font-size:12px;
}
.doc_node_hidden
{
margin-left:20px;
padding:2px 2px 2px 20px;
/*background:url("/image/doc.gif") no-repeat;*/
cursor:pointer;
display:none;
font-size:12px;
}
.folder_closed
{
padding:2px 2px 2px 20px;
/*background:url("/image/closed.gif") no-repeat;*/
cursor:pointer;
display:block;
font-size:12px;
}
.folder_open
{
padding:2px 2px 2px 20px;
/*background:url("/image/open.gif") no-repeat;*/
cursor:pointer;
display:block;
font-size:12px;
}
</style>
</HEAD>

<BODY>
<div id="treeView" name="treeView"></div>
<script language="javascript">
favoriteGen.Tree = document.getElementById("treeView");
favoriteGen.importXML();
</script>
</BODY>
</HTML>

tree.xml

<?xml version="1.0" encoding="utf-8" ?>
<tree>
   <folder title="포탈">
   <doc url="http://www.daum.net" title="다음"/>
   <doc url="http://www.naver.com" title="네이버"/>
   <doc url="http://yahoo.co.kr" title="야후"/>
   <doc url="http://empas.com" title="엠파스"/>
   <folder title="검색">
   <doc url="http://www.google.co.kr" title="구글"/>
   </folder>
   </folder>
   <doc url="http://mar.gar.in" title="마가린"/>
   <doc url="http://blog.mar.gar.in" title="마가린 블로그"/>
   <doc url="http://sodumarvin.tistory.com" title="소두마빈 블로그"/>
</tree>

출처 : http://sodumarvin.tistory.com/5

Posted by 1010

03.HTML 4.X, HTML5, XML.../HTML/Css/Script2008. 10. 22. 11:20

웹 문서에 단축키를 달자!

HTML 문서에도 사용자를 위한 단축키를 제공할 수 있는 방법이 있다는 것을 아는지? 물론 모든 브라우저가 그것을 지원하는 것은 아니지만 인터넷 익스플로러 4 이상을 사용하고 있다면 각종 링크나 폼 요소(가령, 텍스트 박스)에 사용자가 쉽게 접근할 수 있도록 단축키를 제공할 수 있다.

그것을 가능하게 하는 HTML 속성은 ACCESSKEY이다. 이 속성은 마우스 대신 키보드를 이용하여 링크나 폼 요소에 접근할 수 있도록 하기 위해 W3C에서 고안한 것이다.

모든 유저가 마우스를 이용하여 작업하는 그래픽 환경이 아닐 수도 있다는 W3C의 얘기는 어느 정도 공감이 가는 얘기이다. 사실 어떤 사용자들은(대개 도스 시절부터 키보드 활용에 능숙한 사람들이겠지만...) 마우스 사용보다 키보드의 단축키를 사용하는 것을 더 좋아하는 사람들이 있다. 이 글을 읽는 사람들 중에서도 웹 페이지의 많은 링크들을 옮겨 다니기 위해 마우스 대신 '탭(tab)'키를 이용하는 사람이 있을 것이다. 하여튼, 웹 페이지를 개발하는 사람들은 혹시라도 있을지 모를 사용자의 편의를 위해 단축키를 제공하는 방법들을 살펴 볼 필요가 있다.

물론 폼 요소들을 논리적으로 배치시켰다면 굳이 마우스를 이용하지 않고도 '탭(tab)' 키를 이용하여 각 폼 요소를 이동할 수 있을 것이다. 하지만 이번 시간에 배울 내용은 특정 폼 요소에 단번에 접근하는 "단축키"에 대한 것이다.

ACCESSKEY 사용 방법

우선 간단한 예제를 살펴보자. 아래 텍스트 필드에 바로 접근하기 위해 Alt + a를, 링크에 접근하기 위해 Alt + b를 눌러 보기 바란다(매킨토시에서는 Alt키 대신 Cmd키).

ALT + a를 누르세요 :
ALT + b를 누르세요 : 코리아인터넷닷컴

위의 폼 필드와 링크에 대한 소스 코드는 다음과 같다.

<input type="text" accesskey="a">
<a href="http://korea.internet.com" accesskey="b">코리아인터넷닷컴</a>

그렇다. 사용 방법은 의외로 간단하다. accesskey 속성을 지원하는 태그에서 "accesskey=" 다음에 원하는 단축키를 할당하면 된다. HTML 스펙상으론 accesskey 다음에 어떠한 유니코드를 할당하는 것도 가능하지만 관례상 a~z 까지의 문자를 사용한다. 대소문자는 동일한 키로 취급한다. accesskey 속성을 지원하는 태그는 다음과 같다.

이제 또 다른 실용 가능한 예를 살펴 보자. LABEL과 INPUT 컨트롤을 적절히 사용하는 방법이다. 이미 LABEL 태그를 이용하여 폼 컨트롤 다루기에 대해 살펴본 적이 있는데 이번엔 단축키를 이용하여 폼 컨트롤에 접근하는 방법을 알아 보자. 마우스로 User 부분을 클릭해도 텍스트 필드가 포커스 되겠지만, ALT+U를 눌러도 텍스트 필드가 포커스 되는 것을 확인할 수 있을 것이다.

User : (ALT + U)
Password : (ALT + P)

위 예제에 대한 소스 코드는 다음과 같다.

<LABEL for="fuser" accesskey="U">
<b><font color="navy"><u>U</u></font></b>ser :
</LABEL>
<INPUT type="text" name="user" id="fuser"> (ALT + U)<br>
<LABEL for="fpw" accesskey="P">
<b><font color="navy"><u>P</u></font></b>assword :
</LABEL>
<INPUT type="password" name="pw" id="fpw"> (ALT + P)

accesskey를 사용할 때 한 가지 알아야할 것이 있다. 웹 페이지 개발자는 해당 단축키를 알아도 사용자는 웹 페이지에 어떤 단축키가 정의되어 있는지 모르기 때문에 위의 예와 같이 User의 U 부분에 밑줄을 그어 암시적으로 단축키를 알려주거나, 해당 폼 요소 옆에 ALT+U와 같이 명시적으로 해당 단축키를 알려줄 필요가 있다.

마지막 예를 하나 더 들어 보도록 하자. 아래 링크에 해당하는 각각의 단축키를 눌러 보라. 특히, FILE 메뉴 링크에 접근하기 위해 ALT + F를 눌러 보라.

HOME | FILE | EDIT | HELP

여기서 주의해야할 것이 있다. ALT+F는 사실 인터넷 익스플로러의 "파일" 메뉴에 대한 단축키이다. 하지만 웹 문서에서 accesskey를 통해 단축키를 정의하면 브라우저의 내부 단축키는 동작하지 않게 된다. 그러므로 이 사실을 염두에 두고 단축키를 정의하기 바란다.

한 가지 더!

만일 자바스크립트를 이용하여 단축키를 구현하고자 할 때에는 (이 때에는 ALT 키를 누르지 않고도 단축키를 만들 수 있다) 다음 강좌를 읽으면 도움을 얻을 수 있다.

Posted by 1010

03.HTML 4.X, HTML5, XML.../HTML/Css/Script2008. 10. 22. 11:19

글자의 스타일을 좌우하는 두 속성

▣ 글자의 스타일을 좌우하는 두 속성

? FONT 속성 : 글꼴 모양을 결정

? TEXT 속성 : 텍스트(문장) 모양을 결정

1) 글꼴을 다양하게 하는 font 속성

속성	기능	형식
① font-family	글꼴을 설정	{font-family:굴림 \| 돋움체, …}
② font-size	글꼴 크기를 설정	{font-size:절대크기 \| 상대크기}
③ font-style	글꼴 기움임을 설정	{font-style: normal \| oblique \| italic}
④ font-weight	글꼴의 두께 설정	{font-weight:normal \| bold \| bolder \| lighter}
⑤ letter-spacing	글꼴 간격 설정	{font-spacing:절대크기 \| 상대크기}
⑥ line-height	줄의 높이 설정	{font-height:절대크기 \| 상태크기}

① font-family

② font-size

웹 페이지의 모든 글꼴을 정돈 시키기 위해서 font-size속성을 가장 많이 사용한다.

★ 절대(고정) 크기의 단위 ★

표기	단위	표기	단위
in	인치(1인치=2.54cm)	xx-large	medium보다 4.5배 확대
cm	센티미터	x-large	medium보다 3배 확대
mm	밀리미터	large	medium보다 1.5배 확대
pt	포인트(1포인트=1/72인치)	small	medium보다 1.5배 축소
pc	파이카(1파이카=12포인트)	x-small	medium보다 3배 축소
medium	12pt 크기	xx-small	medium보다 4.5배 축소

★ 상대(비례) 크기의 단위 ★

표기	단위
em	기준 글꼴 문자의 높이
ex	기준 글꼴 문자의 영문 소문자 높이
%	기준 글꼴 크기의 대한 백분율 크기
px	1픽셀을 1로 하는 단위
larger	글자 크기를 앞에 입력한 글자보다 크게
smaller	글자 크기를 앞에 입력한 글자보다 작게

③ font-style

font-style에 사용되는 키워드는 normal, oblique, italic 세 가지가 있다. oblique은 기울임 효과를 주고, italic은 이탤릭체 모양인데 둘 다 비슷한 효과를 낸다.

④ font-weight

font-weight는 글자 두께를 설정한다. 속성값은 normal, bolder, bold, lighter가 있다. bolder는 조금 더 굵게, bold는 html의 <b>태그 효과, lighter는 글자가 가늘게 출력된다.

여기에 100(가장 가늘게) ~ 900(가장 굵게)의 숫자를 이용할 수도 있다. normal은 400과 동일하며, 숫자값은 100단위로 설정한다.

⑤ letter-spacing

HTML에서 글자 간격을 설정하려면 특수문자 ‘ ’를 이용했다. 스타일시트는 글자끼리의 간격을 letter-spacing을 이용해서 설정한다. 그 값으로는 절대크기 | 상대크기를 이용한다.

⑥ line-height

HTML상에서는 줄 간격을 지정하려면 <BR> 태그를 이용해서 한 줄을 삽입하거나 <P>또는 <DIV>

출처 : http://cafe.naver.com/q69/63088 (669)

Posted by 1010

03.HTML 4.X, HTML5, XML.../HTML/Css/Script2008. 10. 22. 11:17

마우스 커서 변경

<IMG SRC="image1.gif" style="cursor:nw-resize">거서의 화살표 방향이 북서쪽

<IMG SRC="image1.gif" style="cursor:text">거서의 화살표 방향이 북서쪽
<IMG SRC="image1.gif" style="cursor:crosshair">거서의 화살표 방향이 북서쪽
<IMG SRC="image1.gif" style="cursor:wait">거서의 화살표 방향이 북서쪽

Posted by 1010

03.HTML 4.X, HTML5, XML.../HTML/Css/Script2008. 10. 22. 11:16

[HTML]테이블 너비 고정시키기

흔히들 한글에서는 개발할때 생각하지 않는 문제

<table width=100>
    <tr>
        <td>wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</td>
    </tr>
</table>

바로 이것이었습니다.

width 를 아무리 잡아도 이는 오른쪽 width=100 을 뛰어넘어 오른쪽으로 한없이 늘어져만 갈것입니다. < BR> 모든 테이블들이 엉망이 됨과 동시에 긴급 수정요청이 들어왔습니다.

쉽게 textarea 를 이용하여 출력하면 해결되지만 컨텐츠를 다루었고 html을 적용하여야 되기 때문에
textarea를 사용 할수가 없었습니다.

asp에서 chr(13)&chr(10) (종점과 엔터) 를 <br>로 replace 를 하여도 복사하여 붙힌것은
엔터와 종점을 인식하지 못하기에 복사해서 붙혀넣을경우 오른쪽으로 한도 끝도 없이 밀고 나가게 됩니다.
그렇다고 해서 모두 엔터를 일일이 칠수도 없는 노릇이지요.

이때 간단하게 사용하는 style 팁입니다.

<table width=100 style="TABLE-LAYOUT: fixed;>
    <tr>
        <td>wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</td>
    </tr>
</table>

띄어쓰기가 있으면 자동 줄바꿈이 되며, 띄어쓰기가 없이 예문처럼 될 경우에는 자동 잘림으로
테이블 너비를 고정해 줍니다. 물론 어떤 영문이더라도 띄어쓰기가 없을수는 없지요.

출처 : http://cafe.naver.com/q69/70811 (725)

Posted by 1010

03.HTML 4.X, HTML5, XML.../HTML/Css/Script2008. 10. 22. 11:14

이미지맵의 이해

이미지맵의 이해

WHAT is IMAGEMAP? 일단 이미지맵이 무엇인지 이해를 돕기위해서 아래 그림위에 마우스를 이리저리 옮겨 보십시오. 아래의 그림은 대표적인 포탈사이트를 표현한 한장의 그림입니다. 각각의 사이트 이름 위에 마우스를 얹어놓으면 링크가 되어 있음을 알 수 있고 누르미(마우스버턴)를 누르면 해당 사이트로 이동이 된다는 것도 알 수 있다. 이와 같이 이미지의 특정 부분에 특정 사이트를 연결시켜 놓는 방식이 바로 이미지맵이다.
위의 이미지맵 구현은 아래와 같은 방식으로 이루어졌습니다. 아마 아래의 소스를 잘 관찰하면 이미지맵의 구현은 두 부분으로 이루어져 있다는 것을 알 수 있을 겁니다. 이미지맵 선언부인 <map> 과 </map> 으로 이루어진 부분과 이미지 삽입 부분(img src="URL")으로 말입니다. 그러면 소스 아랫 부분에서 이미지맵 작성법에 대하여 설명하기로 합시다.

</body>
</html>

이미지맵의 작성

일단 <map> 과 </map>을 선언해서 이미지맵의 시작을 알린다. <map> 태그 내에는 'name' 속성을 지정한다. 위의 소스처럼 'portal' 이라고 했다면 이제 'portal'이라는 이름의 맵정보가 만들어진다.
이제는 <map> 과 </map> 사이에 맵의 구조를 설정해 주어야 한다. 다시 말한다면 링크하고자하는 부분의 영역 설정을 지정한다는 말이된다. 이미지맵의 영역 설정은 <area>태그를 사용한다. <area>태그내에 모양 설정과 모양의 범위를 설정하는데 모양 설정은 'shape' 속성을 이용하고 범위는 'coords' 속성을 사용한다. 'shape'에는 사각형 'rect', 과 원 'circle', 그리고 다각형 'poly' 가 하부 선택자로 있다. 'coords' 속성은 'shape'에서 지정한 도형의 x, y 좌표를 나타내준다. 이 좌표 따는 법은 여러가지가 있는데 전용 소프트웨어를 사용하든지 아니면 페인터샵 이라든지 포토샵을 이용해서 좌표를 구할 수 있다. 표토샵에서 좌표를 구하는 방법은 아래에 설명되어 있다. 마지막으로 'href' 속성에 이동하고 싶은 URL을 지정한다. 그리고 마침태그 </map>를 이용해서 구문을 닫는다.
이미지맵의 구조 작업이 끝났으면 다음엔 문서에 이미지를 삽입해야 한다. 이미지 삽입은 <img>로 시작하죠. 'src'를 선언해서 이미지가 위치한 곳의 URL을 지정해주고 중요한 것은 'usemap' 속성을 첨가해 앞서 정의한 맵의 구조를 참조하도록 한다. usemap="#name" 처럼 선언해서 이미지맵의 구조를 불러오는 것이다. 이것으로 이미지맵의 절차는 모두 끝났다.

이미지맵의 좌표따기

포토샵을 열고 좌표를 따고 싶은 그림을 불러 온다. 그리고 오른쪽 그림과 같이 도구상자에서 사각영역 선택도구(rectangular marquee tool)을 선택한다.
다음에는 팔레트에서 왼쪽 그림과 같이 인포메이션 팔레트를 선택해서 열어 놓습니다.('info'팔레트는 'navigator'와 'option'이 함께 묶여져 있습니다.) 만약 이 팔레트가 열려 있지 않다면 메뉴 중 'window/show info'를 선택하면 이 팔레트가 열린다. (참고 : 팔레트와 툴박스 나타내기 ; Tab 키를 누르면 툴박스와 팔레트 전부 보이지 않게 됩니다. 다시 Tab 키를 누르면 다 보입니다. 툴박스와 팔레트가 보이지 않는 상태에서 Shift + Tab 키를 누르면 팔레트만 보입니다.)
자 이제 좌표 딸 준비는 다 되었습니다. 이미 사각형 영역 선택도구를 선택해 놓았지요. 누르미(마우스)를 열어 놓은 그림 위로 올려 보세요. 그리고 'info' 팔레트에서 2번을 유심히 관찰해 보세요. 그러면 가로, 세로축(x, y)의 숫자가 변하고 있는 것이 보이지요. 바로 이것이 열어 놓은 그림에서의 위치(좌표)입니다. 참고로 사각 영역의 좌표 구성은 사각형의 왼쪽 위(1번)에서 오른쪽 아래(2번)로 위치 수치가 증가하며 따라서 사각형의 좌표 따기는 사각형의 왼쪽 위 시작점(1번)과 오른쪽 아래점(2번)의 좌표를 따면 됩니다. 다시 부연하면 시작점과 마침점의 각각 x, y축의 수치를 그대로 적으면 됩니다. 만약 시작점의 x, y축의 좌표(1번)가 '58,50'이고 오른쪽 아래 좌표(2번)가 '162,87'이었다면 '<area shape="rect" coords="58,50,162,87" 와 같이 적어주면 됩니다.
만약 이미지맵에서 선택 영역을 원(circle)으로 지정했다면 그 좌표도 원으로 지정해야 하겠지요. 우선 포토샵에서 선택도구 즉 마퀴툴을 바꾸어야 합니다. 위에서 사각형 선택도구를 설정해 놓았으니까 rectangular marquee tool을 다시 한번 꼭 눌러 보세요. 그러면 하위 도구가 나타나지요. 그기서 원선택 도구가 나타났지요. 원을 선택하세요. 다음 이제 열어 놓은 그림 위로 누르미를 옮기고 글쇠판에서 'shift'글쇠를 누른 상태(참고 : 윈도우시스템에서 영역설정시 shift글쇠를 누르고 영역 설정을 하면 정각형이 선택됩니다. 다 아시죠.)에서 누르미 왼쪽 단추를 누르며 끌기를 하세요. 물론 좌표를 따려면 시작점은 기억해 두어야 하지요. 적당한 영역이 설정되었으면 다음 info팔레트에서 3번을 봅니다. 원의 폭과 높이 수치가 나오지요. 이미지맵의 원선택시 필요한 것은 이 시작점과 원의 반지름입니다. 따라서 '<area shape="circle" coords="58,50,162" 와 같은 식으로 적어주면 됩니다. 다각형일 때는 시작점부터 마침점까지의 좌표를 차례차례로 기술해주면 됩니다(시계방향으로~~)

출처 : http://cafe.naver.com/q69/72099 (729)

Posted by 1010

03.HTML 4.X, HTML5, XML.../HTML/Css/Script2008. 10. 22. 11:13

스타일시트 예제 71가지

71 CSS menus for free

11 CSS navigation menus : at Exploding Boy
12 more CSS Navigation Menus. : at Exploding Boy
14 Free Vertical CSS Menus : at Exploding Boy
2-level horizontal navigation : demo at Duoh
Absolute Lists: Alternatives to Divs : An approach of using lists instead of divs at evolt
Accessible Image-Tab Rollovers : demo at Simplebits
ADxMenu : multiple menu examples at aPlus
A drop-down theme : at CSS Play
Bookend Lists: Using CSS to Float a Masthead : at WebSiteOptimization
Bulletproof Slants : demo at Simplebits
Centered Tabs with CSS : at 24ways
Clickable Link Backgrounds : A bulletproof unordered list of links, each with a unique (purely decorative) left-aligned icon that is referenced with CSS ; but that is also clickable.
Create a Teaser Thumbnail List Using CSS: Part 1 : lists of items made up of a title, short descript-xion, and thumbnail.
Creating Indented Navigation Lists : A multi-level indented list
Creating Multicolumn Lists : at Builder.com
cssMenus - 4 Level Deep List Menu : at SolarDreamStudios
CSS and Round Corners: Build Accessible Menu Tabs : at SitePoint
CSS-Based Tabbed Menu : a simple tabbed menu.
CSS-based Navigation : demo at Nundroo
CSS: Double Lists : A single list that appears in two columns
CSS Mini Tabs (the UN-tab, tab) : demo at Simplebits
CSS only dropdown menu : at CSS Play
CSS only flyout menus : at CSS Play
CSS only flyout/dropdown menu : at CSS Play
CSS only flyout menu with transparency : at CSS Play
CSS only vertical sliding menu : at CSS Play
CSS Swag: Multi-Column Lists : at A List Apart
CSS Tabs : tabs without any images
CSS Tabs : list of various tab solutions
CSS tabs with Submenus : at Kalsey.
dTree Navigation Menu : Javascript-xs Tree at Destroydrop
Definition lists - misused or misunderstood? : appropriate uses of definition lists
Do You Want To Do That With CSS? - Multiple Column Lists : multi-column lists.
Drop-Down Menus, Horizontal Style : at A List Apart
Float Mini tabs : at Web-Graphics
Flowing a List Across Multiple Columns : A table without using tables.
Free Menu Designs V 1.1 : ready-to-download block menusat e-lusion
FreeStyle Menus : XHTML compliant, CSS-formatted menu script-x at TwinHelix
Hidden tab menu : at CSS Play
How to Style a Definition List with CSS : at WebReference
How to Style an Unordered List with CSS : at WebReference
How to Use CSS to Position Horizontal Unordered Lists : at WebReference
Hybrid CSS Dropdowns : at a List Apart
Inline Mini Tabs : at Web-Graphics
Intelligent Menus : CSS and PHP menu at PhotoMatt.net
Inverted Sliding Doors Tabs : at 456BereaStreet
Light Weight Multi Level Menu : at CssCreator
List Display Problems In Explorer For Windows : list hack for IE
Listamatic : simple lists; various styles.
Listamatic2 : nexted lists; various styles
Menus galleries in CSS and XHTML : multiple examples and downloads at Alsacreations
Mini-Tab Shapes : demo at Simplebits
Mini-Tab Shapes 2 : demo at Simplebits
More than Just Bullets : at W3.org
Multiple Column Lists : at css-discuss
A Navbar Using Lists : A lightweight nav bar at WestCiv
Navigation Matrix Reloaded : at SuperfluousBanter
Remote Control CSS : examples of lists styled differently
Remote Control CSS Revisited - Caving in to peer pressure : multi-column remote control
Rounding Tab Corners : by Eric A. Meyer.
Simple CSS Tabs : at SilverOrange
Simplified CSS Tabs : demo at Simplebits
Sliding Doors : at A List Apart
Spruced-Up Site Maps : sitemaps as lists
Styling Nested List : at SimpleBits
Suckerfish Dropdowns : at HTMLDog
Tabtastic : Gavin Kistner.
Tabs Tutorial at BrainJar
Taming Lists : at A List Apart
Turning a List into a Navigation Bar : at 456BereaStreet
Ultimate css only dropdown menu : at CSS Play

출처 : http://www.hompydesign.com/bbs/board.php?bo_table=html_study&wr_id=114

Posted by 1010

03.HTML 4.X, HTML5, XML.../HTML/Css/Script2008. 10. 19. 16:28

CSS 규격

CSS (Cascading Style Sheets) Level 1

CSS는 일찍이 HTML의 타락(문서의 구조가 아닌 표현과 관련된 태그로 오염되는)과 웹디자이너의 아픔과 고통을 덜고자 탄생했다.
CSS는 HTML을 보완하고, 사이트의 전체적인 스타일과 디자인을 통일성 있게 계획하고 제작할 수 있도록 도와주는 W3C의 표준입니다.
CSS 명세 … http://www.w3.org/Style/CSS/
CSS1 부라우저 호환성 표 … http://www.ddj.com/webreview/style/css1/charts/mastergrid.shtml
아래의 Form Value Example에서 "속성값1 | 속성값2" 로 적어준 것에서 | 는 or 의 의미로 사용하였다. 즉, 여러 속성값 중에 하나들 선택하여 적용할 수 있음을 뜻한다. || 는 속성값을 적용하는 또 다른 방법을 보여준다.

Cascading Style Sheet Level 1 (CSS1) Properties

Properties Set	Property:	Korean Name	Form Value Example
Font 글꼴	font-family:	글꼴종류	font-family: family-name \| generic-family \|\| , ,"",
	font-style:	글꼴체	font-style: normal \| italic \| oblique
	font-variant:	글꼴변형	font-variant: normal \| small-cap
	font-weight:	글꼴굵기	font-weight: normal \| bold \| bolder \| lighter \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900
	font-size:	글꼴크기	font-size: xx-small \| x-small \| small \| medium \| large \| x-large \| xx- large \|\| larger \| smaller \|\| length
	font:	글꼴	font : font-style font-variant font-weight font-size line-height font-family
Color and Background 색상과 배경	color:	색상	color: #000000 \| black
	background-color:	배경색	background-color: #000000 \| black
	background-image:	배경그림	background-image: url(image.gif)
	background-repeat:	배경그림 반복	background-repeat: repeat\|repeat-x\|repeat-y\|no-repeat
	background-attachment:	배경의 성격	background-attachment: scroll \| fixed
	background-position:	배경그림 위치	background-position: length \|\| top left \|\| top\|center\|bottom\|left\|center\|right
	background:	배경	background: background-color background-image background-repeat background-attachment background-position
Text 문장	word-spacing:	낱말간격	word-spacing: normal \| length
	letter-spacing:	문자간격	letter-spacing: normal \| length
	text-decoration:	장식	text-decoration: none \| underline \| overline \| line-through \| blink
	vertical-align:	수직정렬	vertical-align: baseline \| sub \| super \| top \| text-top \| middle \| bottom \| text-bottom \| percentage
	text-transform:	문자변환	text-transform: none \| capitalize \| uppercase \| lowercase
	text-align:	수평정렬	text-align: left \| right \| center \| justify
	text-indent:	들여쓰기	text-indent: length
	line-height:	줄간격	line-height: normal \| length
Box 바깥여백	margin-top:
	margin-right:
	margin-bottom:
	margin-left:
	margin:	바깥여백	DIV { margin: top right bottom left }
Box 안여백	padding-top:
	padding-right:
	padding-bottom:
	padding-left:
	padding:	안여백	DIV { margin: top right bottom left }
Box 테두리선	border-top-width:
	border-right-width:
	border-bottom-width:
	border-left-width:
	border-width:	선굵기	border-width: thin \| medium \| thick \| length \|\| top rigth bottom left
	border-color:	선색상	border-color: color \|\| top rigth bottom left
	border-style:	선형태	border-style: none\|dotted\|dashed\|solid\|double\|groove\|ridge\|inset\|outset \|\| top rigth bottom left
	border-top:
	border-right:
	border-bottom:
	border-left:
	border:	테두리선	border: border-widht border-style color
Box 크기	width:	너비	width: length \| percentage \| auto
Box 크기	height:	높이	height: length \| percentage \| auto
Box 배치	float:	어울림	float: left \| right \| none
Box 배치	clear:	배척함	clear: none \| left \| right \| both
Classification Properties 문단형식	display:	표시	display: block \| inline \| list-item \| none
	white-space:	공백	white-space: normal \| pre \| nowrap
	list-style-type:	list-style-type: disc \| circle \| square \| decimal \| lower-roman \| upper-roman \| lower-alpha \| upper-alpha \| none
	list-style-image:	list-style-image: url(image.gif) \| none
	list-style-position:	list-style-position: inside \| outside
	list-style:	목록	list-style: list-style-type list-style-position \|\| url(image)

CSS Level 2

CSS2 Reference … http://www.w3schools.com/css/css_reference.asp

CSS2 Reference

속성 링크를 클릭하면 해당 속성의 유용한 정보를 볼 수 있습니다

Browser support : NN: Netscape, IE: Internet Explorer, W3C: Web Standard

Background

On-line examples

Property	Description	Values	NN	IE	W3C
background	A shorthand property for setting all background properties in one declaration	background-color background-image background-repeat background-attachment background-position	6.0	4.0	CSS1
background-attachment	Sets whether a background image is fixed or scrolls with the rest of the page	scroll fixed	6.0	4.0	CSS1
background-color	Sets the background color of an element	color-rgb color-hex color-name transparent	4.0	4.0	CSS1
background-image	Sets an image as the background	url none	4.0	4.0	CSS1
background-position	Sets the starting position of a background image	top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos	6.0	4.0	CSS1
background-repeat	Sets if/how a background image will be repeated	repeat repeat-x repeat-y no-repeat	4.0	4.0	CSS1

Border

On-line examples

Property	Description	Values	NN	IE	W3C
border	A shorthand property for setting all of the properties for the four borders in one declaration	border-width border-style border-color	4.0	4.0	CSS1
border-bottom	A shorthand property for setting all of the properties for the bottom border in one declaration	border-bottom-width border-style border-color	6.0	4.0	CSS1
border-bottom-color	Sets the color of the bottom border	border-color	6.0	4.0	CSS2
border-bottom-style	Sets the style of the bottom border	border-style	6.0	4.0	CSS2
border-bottom-width	Sets the width of the bottom border	thin medium thick length	4.0	4.0	CSS1
border-color	Sets the color of the four borders, can have from one to four colors	color	6.0	4.0	CSS1
border-left	A shorthand property for setting all of the properties for the left border in one declaration	border-left-width border-style border-color	6.0	4.0	CSS1
border-left-color	Sets the color of the left border	border-color	6.0	4.0	CSS2
border-left-style	Sets the style of the left border	border-style	6.0	4.0	CSS2
border-left-width	Sets the width of the left border	thin medium thick length	4.0	4.0	CSS1
border-right	A shorthand property for setting all of the properties for the right border in one declaration	border-right-width border-style border-color	6.0	4.0	CSS1
border-right-color	Sets the color of the right border	border-color	6.0	4.0	CSS2
border-right-style	Sets the style of the right border	border-style	6.0	4.0	CSS2
border-right-width	Sets the width of the right border	thin medium thick length	4.0	4.0	CSS1
border-style	Sets the style of the four borders, can have from one to four styles	none hidden dotted dashed solid double groove ridge inset outset	6.0	4.0	CSS1
border-top	A shorthand property for setting all of the properties for the top border in one declaration	border-top-width border-style border-color	6.0	4.0	CSS1
border-top-color	Sets the color of the top border	border-color	6.0	4.0	CSS2
border-top-style	Sets the style of the top border	border-style	6.0	4.0	CSS2
border-top-width	Sets the width of the top border	thin medium thick length	4.0	4.0	CSS1
border-width	A shorthand property for setting the width of the four borders in one declaration, can have from one to four values	thin medium thick length	4.0	4.0	CSS1

Classification

On-line examples

Property	Description	Values	NN	IE	W3C
clear	Sets the sides of an element where other floating elements are not allowed	left right both none	4.0	4.0	CSS1
cursor	Specifies the type of cursor to be displayed	url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help	6.0	4.0	CSS2
display	Sets how/if an element is displayed	none inline block list-item run-in compact marker table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption	4.0	4.0	CSS1
float	Sets where an image or a text will appear in another element	left right none	4.0	4.0	CSS1
position	Places an element in a static, relative, absolute or fixed position	static relative absolute fixed	4.0	4.0	CSS2
visibility	Sets if an element should be visible or invisible	visible hidden collapse	6.0	4.0	CSS2

Dimension

On-line examples

Property	Description	Values	NN	IE	W3C
height	Sets the height of an element	auto length %	6.0	4.0	CSS1
line-height	Sets the distance between lines	normal number length %	4.0	4.0	CSS1
max-height	Sets the maximum height of an element	none length %			CSS2
max-width	Sets the maximum width of an element	none length %			CSS2
min-height	Sets the minimum height of an element	length %			CSS2
min-width	Sets the minimum width of an element	length %			CSS2
width	Sets the width of an element	auto % length	4.0	4.0	CSS1

Font

On-line examples

Property	Description	Values	NN	IE	W3C
font	A shorthand property for setting all of the properties for a font in one declaration	font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar	4.0	4.0	CSS1
font-family	A prioritized list of font family names and/or generic family names for an element	family-name generic-family	4.0	3.0	CSS1
font-size	Sets the size of a font	xx-small x-small small medium large x-large xx-large smaller larger length %	4.0	3.0	CSS1
font-size-adjust	Specifies an aspect value for an element that will preserve the x-height of the first-choice font	none number			CSS2
font-stretch	Condenses or expands the current font-family	normal wider narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded			CSS2
font-style	Sets the style of the font	normal italic oblique	4.0	4.0	CSS1
font-variant	Displays text in a small-caps font or a normal font	normal small-caps	6.0	4.0	CSS1
font-weight	Sets the weight of a font	normal bold bolder lighter 100 200 300 400 500 600 700 800 900	4.0	4.0	CSS1

Generated Content

Property	Description	Values	W3C
content	Generates content in a document. Used with the :before and :after pseudo-elements	string url counter(name) counter(name, list-style-type) counters(name, string) counters(name, string, list-style-type) attr(X) open-quote close-quote no-open-quote no-close-quote	CSS2
counter-increment	Sets how much the counter increments on each occurrence of a selector	none identifier number	CSS2
counter-reset	Sets the value the counter is set to on each occurrence of a selector	none identifier number	CSS2
quotes	Sets the type of quotation marks	none string string	CSS2

List and Marker

On-line examples

Property	Description	Values	NN	IE	W3C
list-style	A shorthand property for setting all of the properties for a list in one declaration	list-style-type list-style-position list-style-image	6.0	4.0	CSS1
list-style-image	Sets an image as the list-item marker	none url	6.0	4.0	CSS1
list-style-position	Sets where the list-item marker is placed in the list	inside outside	6.0	4.0	CSS1
list-style-type	Sets the type of the list-item marker	none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha	4.0	4.0	CSS1
marker-offset		auto length			CSS2

Margin

On-line examples

Property	Description	Values	NN	IE	W3C
margin	A shorthand property for setting the margin properties in one declaration	margin-top margin-right margin-bottom margin-left	4.0	4.0	CSS1
margin-bottom	Sets the bottom margin of an element	auto length %	4.0	4.0	CSS1
margin-left	Sets the left margin of an element	auto length %	4.0	3.0	CSS1
margin-right	Sets the right margin of an element	auto length %	4.0	3.0	CSS1
margin-top	Sets the top margin of an element	auto length %	4.0	3.0	CSS1

Outlines

Property	Description	Values	W3C
outline	A shorthand property for setting all the outline properties in one declaration	outline-color outline-style outline-width	CSS2
outline-color	Sets the color of the outline around an element	color invert	CSS2
outline-style	Sets the style of the outline around an element	none dotted dashed solid double groove ridge inset outset	CSS2
outline-width	Sets the width of the outline around an element	thin medium thick length	CSS2

Padding

On-line examples

Property	Description	Values	NN	IE	W3C
padding	A shorthand property for setting all of the padding properties in one declaration	padding-top padding-right padding-bottom padding-left	4.0	4.0	CSS1
padding-bottom	Sets the bottom padding of an element	length %	4.0	4.0	CSS1
padding-left	Sets the left padding of an element	length %	4.0	4.0	CSS1
padding-right	Sets the right padding of an element	length %	4.0	4.0	CSS1
padding-top	Sets the top padding of an element	length %	4.0	4.0	CSS1

Positioning

On-line examples

Property	Description	Values	NN	IE	W3C
bottom	Sets how far the bottom edge of an element is above/below the bottom edge of the parent element	auto % length	6.0	5.0	CSS2
clip	Sets the shape of an element. The element is clipped into this shape, and displayed	shape auto	6.0	4.0	CSS2
left	Sets how far the left edge of an element is to the right/left of the left edge of the parent element	auto % length	4.0	4.0	CSS2
overflow	Sets what happens if the content of an element overflow its area	visible hidden scroll auto	6.0	4.0	CSS2
right	Sets how far the right edge of an element is to the left/right of the right edge of the parent element	auto % length		5.0	CSS2
top	Sets how far the top edge of an element is above/below the top edge of the parent element	auto % length	4.0	4.0	CSS2
vertical-align	Sets the vertical alignment of an element	baseline sub super top text-top middle bottom text-bottom length %	4.0	4.0	CSS1
z-index	Sets the stack order of an element	auto number	6.0	4.0	CSS2

Table

Property	Description	Values	NN	IE	W3C
border-collapse	Sets the border model of a table	collapse separate		5.0	CSS2
border-spacing	Sets the distance between the borders of adjacent cells (only for the "separated borders" model)	length length			CSS2
caption-side	Sets the position of the caption according to the table	top bottom left right			CSS2
empty-cells	Sets whether cells with no visible content should have borders or not (only for the "separated borders" model)	show hide	6.2		CSS2
table-layout	Sets the algorithm used to lay out the table	auto fixed		5.0	CSS2

Text

On-line examples

Property	Description	Possible Values	NN	IE	W3C
color	Sets the color of a text	color	4.0	3.0	CSS1
direction	Sets the text direction	ltr rtl			CSS2
letter-spacing	Increase or decrease the space between characters	normal length	6.0	4.0	CSS1
text-align	Aligns the text in an element	left right center justify	4.0	4.0	CSS1
text-decoration	Adds decoration to text	none underline overline line-through blink	4.0	4.0	CSS1
text-indent	Indents the first line of text in an element	length %	4.0	4.0	CSS1
text-shadow		none color length
text-transform	Controls the letters in an element	none capitalize uppercase lowercase	4.0	4.0	CSS1
unicode-bidi		normal embed bidi-override		5.0	CSS2
white-space	Sets how white space inside an element is handled	normal pre nowrap	4.0	5.5	CSS1
word-spacing	Increase or decrease the space between words	normal length	6.0	6.0	CSS1

속성 120여개 (알파벳순)

azimuth:
background:
background-attachment:
background-color:
background-image:
background-position:
background-repeat:
border:
border-collapse:
border-color:
border-spacing:
border-style:
border-top:
border-right:
border-bottom:
border-left:
border-top-color:
border-right-color:
border-bottom-color:
border-left-color:
border-top-style:
border-right-style:
border-bottom-style:
border-left-style:
border-top-width:
border-right-width:
border-bottom-width:
border-left-width:
border-width:
bottom:
caption-side:
clear:
clip:
color:
content:
counter-increment:
counter-reset:
cue:
cue-after:
cue-before:
cursor:
direction:
display:
elevation:
empty-cells:
float:
font:
font-family:
font-size:
font-size-adjust:
font-stretch:
font-style:
font-variant:
font-weight:
height:
left:
letter-spacing:
line-height:
list-style:
list-style-image:
list-style-position:
list-style-type:
margin:
margin-top:
margin-right:
margin-bottom:
margin-left:
marker-offset:
marks:
max-height:
max-width:
min-height:
min-width:
orphans:
outline:
outline-color:
outline-style:
outline-width:
overflow:
padding:
padding-top:
padding-right:
padding-bottom:
padding-left:
page:
page-break-after:
page-break-before:
page-break-inside:
pause:
pause-after:
pause-before:
pitch:
pitch-range:
play-during:
position:
quotes:
richness:
right:
size:
speak:
speak-header:
speak-numeral:
speak-punctuation:
speech-rate:
stress:
table-layout:
text-align:
text-decoration:
text-indent:
text-shadow:
text-transform:
top:
unicode-bidi:
vertical-align:
visibility:
voice-family:
volume:
white-space:
widows:
width:
word-spacing:
z-index:

Posted by 1010

03.HTML 4.X, HTML5, XML.../HTML/Css/Script2008. 10. 19. 16:26

CSS1 카스케이딩 스타일쉬트 규격

Cascading Style Sheets, level 1

번역자 주기: 변역자 주기는 이 색상으로 표시하였으며, 가급적 원본에 준하여 번역하였으나, 연결이 가능한 한글 문서에 연결하도록 하였다.
브라우저마다 다소의 표현이 다름을 명심하라.
스타일 표현에서 영문에만 적용되는 부분이 많으므로 예제에서는 영문을 그대로 표현한 것이 많이 있다.
또한 W3C에서 번역문에서 추가적인 기능을 부가하지 않도록 요청받아 설명에 추가하지 않고 가급적 원형 상태를 유지했다.

프레임 없이 프레임 있게

CSS1 카스케이딩 스타일쉬트 규격 번역문

W3C 추천안 1996년 12월 17일, 1999년 1월 11일 수정

이 버전은 REC-CSS1-19990111

	이 버전은:	영문 http://www.w3.org/TR/1999/REC-CSS1-19990111
	최종 버전:	영문 http://www.w3.org/TR/REC-CSS1
	이전 버전:	영문 http://www.w3.org/TR/REC-CSS1-961217
	저자:	영문 Håkon Wium Lie (howcome@w3.org) 영문 Bert Bos (bert@w3.org)

이 규격의 상태

이 규격은 W3C의 추천안이다. 이는 영문 W3C (http://www.w3.org/) 멤버들에 의하여 점검 되었고, 이 규격이 사용하는데 적당하다는 일반적으로 공감대가 형성되었다. 이는 안정적 문서로서 조회하고 다른 문서에서 인용할 수 있다. W3C는 이 추천안 발전을 널리 보급하도록 장려한다.

현재 W3C의 추천안들의 목록과 다른 기술적 문서들을 영문 http://www.w3.org/TR/에서 볼 수 있다.

이 규격은 당초 1996년 12월 17일 제시된 것으로 부터 개정된 버전이다.
당초의 버전으로부터의 개정 내용은 목록 영문 부록 F에 있다.
이 규격의 알려진 오류는
영문 http://www.w3.org/Style/CSS/Errata/REC-CSS1-19990111-errata에 있다.

요약

이 규격(CSS1)은 Cascading Style Sheet 기능의 level 1을 정의한다. CSS1은 제작자들과 문서를 보는 리더들이 스타일(예를 들어 글꼴, 색상과 간격 주기)을 HTML 문서들에 추가할 수 있도록 하는 단순한 스타일쉬트 기능이다. CSS1 언어는 일반적인 컴퓨터(desktop)에서 문서 작성 용어로, 인간이 읽고, 쓰고, 표현할 수 있는 것이다.

CSS의 하나의 기초적인 능력은 style sheets cascade이다.; 제작자들은 선호하는 스타일쉬트를 첨부할 수 있으며, 리더는 장애자등을 위하여 그가 원하는 스타일쉬트로 조정할 수 있다. 이 규격에는 다른 스타일쉬트 간의 충돌을 해결하는 규칙이 정의되어 있다.

이 추천안 W3C의 영문 Style Sheets 분야 활동의 결과물이다. [1] 스타일쉬트에 대한 배경 정보를 참조하라.

요약
용어

1 기본 개념
1.1 HTML 문서에 포함
1.2 구룹으로 묶기
1.3 전달(inherit)
1.4 선택자(selector)로서 클래스(class)
1.5 선택자(selector)로서 ID
1.6 복합 선택자(contextual selector)
1.7 코멘트(Comment)
2 가상 클래스(class)와 가상 엘레멘트
2.1 앤커(anchor) 가상 클래스(class)
2.2 인쇄(typographical) 가상 엘레멘트들
2.3 첫줄('first-line') 가상 엘레멘트
2.4 첫글자('first-letter') 가상 엘레멘트
2.5 선택자(selector) 안의 가상 엘레멘트
2.6 복수 가상 엘레멘트
3 카스케이드(cascade)
3.1 중요('important')
3.2 카스케이딩 순서
4 양식화(formatting) 모델
4.1 블럭레벨(block-level) 엘레멘트
4.1.1 수직 양식화
4.1.2 수평 양식화
4.1.3 목록(List-item) 엘레멘트들
4.1.4 유동(floating) 엘레멘트들
4.2 인라인(inline) 엘레멘트들
4.3 대체된(replaced) 엘레멘트들
4.4 줄의 높이
4.5 화면
4.6 'BR' 엘레멘트들
5 CSS1 속성들
5.1 속성값에 대한 주기
5.2 글자(font) 속성들
5.2.1 글자(font) 맞추기
5.2.2 글꼴들('font-family')
5.2.3 글꼴 스타일('font-style')
5.2.4 글꼴 변화('font-variant')
5.2.5 글꼴 굵기('font-weight')
5.2.6 글꼴 크기('font-size')
5.2.7 글꼴('font')
5.3 색상(color)과 배경(background) 속성
5.3.1 색상('color')
5.3.2 배경색('background-color')
5.3.3 배경 이미지('background-image')
5.3.4 배경 반복('background-repeat')
5.3.5 배경 첨부('background-attachment')
5.3.6 배경 위치('background-position')
5.3.7 배경('background')
5.4 텍스트(text) 속성들
5.4.1 단어 간격('word-spacing')
5.4.2 글자 간격('letter-spacing')
5.4.3 텍스트 장식('text-decoration')
5.4.4 수직 정렬('vertical-align')
5.4.5 텍스트 변환('text-transform')
5.4.6 텍스트 정렬('text-align')
5.4.7 텍스트 들여쓰기('text-indent')
5.4.8 줄높이('line-height')
5.5 박스(box) 속성들
5.5.1 위쪽 마진('margin-top')
5.5.2 오른쪽 마진('margin-right')
5.5.3 아래쪽 마진('margin-bottom')
5.5.4 왼쪽 마진('margin-left')
5.5.5 마진('margin')
5.5.6 위쪽 패딩('padding-top')
5.5.7 오른쪽 패딩('padding-right')
5.5.8 아래쪽 패딩('padding-bottom')
5.5.9 왼쪽 패딩('padding-left')
5.5.10 패딩('padding')
5.5.11 위쪽 테두리 두께('border-top-width')
5.5.12 오른쪽 테두리 두께('border-right-width')
5.5.13 아래쪽 테두리 두께('border-bottom-width')
5.5.14 왼쪽 테두리 두께('border-left-width')
5.5.15 테두리 두께('border-width')
5.5.16 테두리 색상('border-color')
5.5.17 테두리 스타일('border-style')
5.5.18 위쪽 테두리('border-top')
5.5.19 오른쪽 테두리('border-right')
5.5.20 아래쪽 테두리('border-bottom')
5.5.21 왼쪽 테두리('border-left')
5.5.22 테두리('border')
5.5.23 너비('width')
5.5.24 높이('height')
5.5.25 유동('float')
5.5.26 'clear'
5.6 속성들의 분류
5.6.1 'display'
5.6.2 공백('white-space')
5.6.3 목록 스타일 타입('list-style-type')
5.6.4 목록 스타일 이미지('list-style-image')
5.6.5 목록 스타일 위치('list-style-position')
5.6.6 목록 스타일('list-style')
6 단위(unit)들
6.1 길이 단위
6.2 백분율 단위(percentage unit)들
6.3 색상 단위(color unit)들
6.4 URL
7 CSS1에 부합
7.1 향 후 버전에 부합한 처리(parsing)
8 참고
9 문서를 구성한 인사들

부록 A: HTML 2.0을 위한 견본 스타일쉬트
부록 B: CSS1 문법
부록 C: 엔코딩(encoding)
부록 D: 감마(gamma) 수정
부록 E: CSS1의 적용성과 확장성
부록 F: 1996년 12월 17일 버전으로 부터의 변경들

용어

애트리뷰트: HTML 애트리뷰트
제작자: HTML 문서의 제작자
블럭레벨(block-level) 엘레멘트: 이전과 이후에 줄바꿈이 일어난 부분의 한 엘레멘트(예를 들어 HTML의 'H1')
화면: 문서들이 표현되는 사용도구의 부분
하위(child) 엘레멘트: SGML 용어[5]에서 하나의 하위 엘레멘트
복합 선택자(contextual selector): 해당하는 엘레멘트들 문서 구조에서의 위치에 기초한 선택자(selector). 하나의 복합 선택자(contextual selector)는 여러개의 단순한 선택자들(selectors)로 구성된다. 예를 들어, 'H1.initial B'의 복합 선택자(contextual selector)는 'H1.initial'과 'B' 두개의 단순한 선택자들(selectors)로 구성되어 있다.
CSS: 캐스케이딩 스타일쉬트(Cascading Style Sheet)
CSS1: 캐스케이딩 스타일쉬트(Cascading Style Sheet), level 1. 이 규격은 단순히 웹에서 스타일쉬트의 기능을 설명하는 CSS1을 정의한다.
CSS1 발전된 기능: 이 규격에서 기술된 기능이지만, CSS1 핵심 기능으로 표시되지 않았다.
CSS1 핵심 기능: 모든 CSS1 규격에 맞는 사용도구들에 필요한 CSS1 부분이다.
CSS1 처리자(parser): CSS1 스타일쉬트를 읽는 사용도구
선언: 속성(예를 들어 글꼴 크기('font-size'))과 이에 상응하는 값(예를 들어 '12pt')
설계자: 스타일쉬트 설계자
문서: HTML 문서
엘레멘트: HTML 엘레멘트
엘레멘트 타입(type): SGML 용어[5]에서 하나의 기본 인식자(generic identifier)
가상(fictional) 태그 순서: 가상 클래스(class)와 가상 엘레멘트 행위를 기술하는 도구
글자 크기(font size): 글자의 크기를 지정한다. 전형적으로 그 글자 크기는 대략 아래로 튀어나온것(예:g)을 표함한 가장 낮은 글자의 바닥으로 부터 가장 키큰 글자의 위로 튀어나온 부분(예:h), 부호(예:Ü)를 포함한 맨위까지의 거리와 같다.
HTML: SGML의 하나인 Hypertext Markup Language: HTML 4 규격 번역문.
HTML 표현(extension): 사용도구에 의해 소개된 마크업(Markup)으로 대부분 보는 표현을 지원한다. "FONT", "CENTER"와 "BLINK" 엘레멘트과 "BGCOLOR" 애트리뷰트등은 HTML 표현의 예제들이다. CSS의 하나의 목표는 HTML 표현(extension)의 대용 기능을 주는 것이다.
인라인(inline) 엘레멘트: 이전과 이후에 줄바꿈하지 않는 엘레멘트(예를 들어 HTML의 'STRONG')
원래의 규격(intrinsic dimension): 그 엘레멘트 자체에 의하여 지정된 너비(width)와 높이(height), 주위의 것을 포함하지 않는다. 이 규격에서 모든 대체된(replaced) 엘레멘트들 -- 그리고 대체된(replaced) 엘레멘트들 만 -- 원래의 규격(intrinsic dimension)들을 갖는 것으로 가정한다.
모체(parent) 엘레멘트: SGML 용어[5]에서 하나의 상위 엘레멘트
가상 엘레멘트: 가상 엘레멘트는 가정적 항목을 지명하기 위하여 CSS 선택자(selector)에 사용된다.(예를 들어 구조적(structural) 엘레멘트 대신 엘레멘트의 첫번 줄)
가상 클래스(class): 가상 클래스는 HTML 자원의 외부 정보를 허용하기 위하여 CSS 선택자(selector)에 사용된다.(예를 들어 방문했던 앤커인가 방문하지 않았던 앤커인가의 엘레멘트 분류)
속성(property): CSS를 통하여 영향을 주는 스타일 성질(parameter). 이 규격은 속성들의 목록과 그에 상응하는 값을 정의한 것이다.
리더(reader): 문서를 읽어 보는 사람
대체된(replaced) 엘레멘트: CSS 양식자(formatter)가 그 intrinsic dimensions을 알 때 하나의 엘레멘트. HTML의 'IMG', 'INPUT', 'TEXTAREA', 'SELECT', 'OBJECT' 엘레멘트들이 대체된(replaced) 엘레멘트의 예제가 될 수 있다. 예를 들어, 'IMG' 엘레멘트의 내용은 자주 그 SRC 애트리뷰트가 지시하는 이미지로 대체된다. CSS1은 어떻게 그 intrinsic dimensions을 찾는가를 정의하지 않는다.
명령(rule): 하나의 선언(예를 들어 'font-family: helvetica')와 그 선택자(selector)(예를 들어 'H1')
선택자(selector): 어떤 엘레멘트에 해당 명령(rule)이 적용되는가를 지정하는 하나의 문자열. 하나의 선택자(selector)는 단순한 선택자가 될 수 있고(예를 들어 'H1'), 또는 여러개의 단순 선택자로 구성된 복합 선택자(contextual selector:예를 들어 'H1 B')가 될 수 있다.
SGML: HTML도 이 적용의 하나인 Standard Generalized Markup Language[5]
단순 선택자(selector): 문서 구조 안에서 엘레멘트의 위치가 아닌, 엘레멘트 type과 애트리뷰트에 기초한 해당하는 엘레멘트의 하나의 선택자(selector), 예를 들어, 'H1.initial'는 하나의 단순 선택자(selector)이다.
스타일쉬트(style sheet): 여러 명령(rule)들의 집합체
사용도구: 웹문서를 표현하는 도구로 웹브라우저를 포함하는 기타 메디아 브라우저
사용자: 리어(reader)와 동의어
우선순위(weight): 명령(rule)의 우선순위

이 규격의 텍스트안에서, 단일 따옴표('...') 안의 내용은 HTML과 CSS 문장이다.

1 기본 개념

단일 스타일 쉬트를 설계하는 것은 간단하다. 누구나 을 간단히 알고 기본적인 편집을 알면된다. 예를 들어, 'H1' 엘레멘트의 색상을 청색으로 설정하려면, 쉽게 아래와 같이 표시하면 된다. <PRE>H1 { color: blue }</PRE>

위예제는 단일 CSS 명령(rule)이다. 명령(rule)은 두 부분으로 구성되는데: 선택자(selector) ('H1')와 선언('color: blue')이다. 선언은 두 부분으로 구성되는데: 속성 ('color')과 값('blue')이다. While the 위 예제에서는 HTML 문서를 표현하는데 한가지 속성 만 지정 했는데, 이로서 자신의 스타일쉬트가 되는 것이다. 다른 백여종의 기본 기능의 스타일쉬트들과 조합하여 최종적인 문서의 표현을 하게 되는 것이다.

선택자(selector)는 HTML 문서와 스타일쉬트를 연결시고, 모든 HTML 엘레멘트들이 선택자(selector)가 될 수 있다.
HTML 엘레멘트들은 HTML 규격을 참조하라.

색상('color') 속성은 약 50 속성들 중의 하나로 HTML 문서 표현을 결정한다. 속성들과 가능한 값들의 목록이 이 규격에 정의되어 있다.

HTML 제작자들은 그의 문서에서 특정 스타일을 제시하기를 원할 때 만 스타일쉬트를 사용할 필요가 있다. 각 사용도구는 문서의 합리적인 표현을 위한 디폴트 스타일쉬트를 가지고 있다. 그러나 제각기 다르다. 부록 A는 HTML 문서들을 표현하기 위해 제안된 [3] HTML 2.0 규격의 단순 스타일쉬트를 포함하고 있다.

공식적인 CSS1 언어의 문법은 부록 B에 정의되어 있다.

1.1 HTML 문서에 포함

스타일쉬트가 문서의 표현에 영향을 주기 위해서는, 사용도구는 그 존재를 알아야 한다. HTML 규격은 HTML를 어떻게 스타일쉬트와 연결시키는가를 정의하고 있다. 따라서 이 항목은 정보를 제공하는 것이며, 지명적인 것은 아니다. <PRE><HTML> <HEAD> <TITLE>title</TITLE> <LINK REL=STYLESHEET TYPE="text/css" HREF="http://style.com/cool" TITLE="Cool"> <STYLE TYPE="text/css"> @import url(http://style.com/basic); H1 { color: blue } </STYLE> </HEAD> <BODY> <H1>Headline is blue</H1> <P STYLE="color: green">While the paragraph is green. </BODY></HTML></PRE>

예제는 스타일과 HTML을 결합하는 네가지 방법을 보여준다.
1. 'LINK' 엘레멘트로 외부 스타일쉬트와 연결
2. 'HEAD' 엘레멘트 안에서 'STYLE' 엘레멘트 지정
3. CSS '@import'의 기술로 스타일 쉬트 도입(import)
4. 'BODY' 안에서 엘레멘트에 'STYLE' 애트리뷰트로
마지막 선택은 스타일과 내용을 섞어 사용하여 전통적인 스타일쉬트의 해당 잇점을 감소시킨다.

'LINK' 엘레멘트는 리더가 선택할 수 있는 대체 가능한 스타일쉬트를 조회하고, 도입(import)은 스타일쉬트를 자동적으로 불러 나머지 스타일쉬트와 통합한다.

전통적으로 사용도구는 조용히 알지 못하는 태그를 무시하여 왔다. 그 결과, 옛 사용도구들은 'STYLE' 엘레멘트를 무시한다. 그러나 그 내용들이 문서 본체(body)의 부분으로 처리되어 그렇게 표현된다. 이전 단계에서는, 'STYLE' 엘레멘트 내용은 SGML 코멘트(Comment)를 사용하여 감춰질 수 있다. <PRE><STYLE TYPE="text/css"></STYLE></PRE>

'STYLE' 엘레멘트는 문서 타입 정의(DTD)에서 "CDATA"로 정의 되므로, 규격에 맞는 SGML 처리자(parser)는 위의 스타일쉬트를 스타일쉬트로 고려하지 않고 코멘트로 해석하여 표현하지 않을 것이다.

1.2 구룹으로 묶기

스타일쉬트의 크기를 줄이기 위하여 선택자을 컴마로 분리하여 구룹으로 묶어 목록을 만들 수 있다. <PRE>H1, H2, H3 { font-family: helvetica }</PRE>

같은 방법으로 선언도 구룹으로 묶을 수 있다. <PRE>H1 { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: helvetica; font-variant: normal; font-style: normal;}</PRE>

추가적으로 일부 속성들은 그들 자체로 구룹으로 묶기를 할 수 있는데 문법은 <PRE>H1 { font: bold 12pt/14pt helvetica }</PRE>

이는 위의 예제와 같다.

1.3 전달(inherit)

첫번째 예제에서, 'H1' 엘레멘트의 색상을 청색으로 지정하였다. 'H1' 엘레멘트에 강조된 엘레멘트가 있다고 가정하면 <PRE><H1>제목 중에 <EM>이 부분이</EM> 중요하다.</H1></PRE>

만일 'EM' 엘레멘트에 색상이 지정되지 않았으면, 강조된 "이 부분이"는 모체(parent) 엘레멘트 본래의 색상을 가질 것이다. 여기서 예를 들면 역시 청색으로 나타난다. 예를 들어 'font-family'와 글꼴 크기('font-size')등 다른 스타일 속성들은 같은 방식으로 전달된다.

한 문서의 디폴트("default") 스타일 속성을 설정하려면, 모든 보이는 엘레멘트들의 속성을 설정할 수 있다. HTML 문서들에서, 'BODY' 엘레멘트는 여러가지 이런 기능을 할 수 있다. <PRE>BODY { color: black; background: url(texture.gif) white; }</PRE>

제작자가 만일 'BODY' 태그를 생략하여도 HTML 표현기는 누락된 태그를 삽입하여 이것은 작용된다. 위 예제에서 텍스트의 색상을 검정으로하고 배경에 이미지를 넣었다. 이미지가 없으면 배경색은 백색으로 된다.(항목 5.3을 참조하라.)

일부 스타일 속성들은 모체(parent) 엘레멘트로 부터 하위(child) 엘레멘트로 전달되지 않는다. 대부분의 경우 그렇지 않은지는 쉽게 이해할 수 있다. 예를 들어, 배경('background') 속성은 전달되지 않으나, 모체(parent) 엘레멘트의 배경(background)은 디폴트로 전체적으로 적용된다.

자주 속성값이 백분율로 되는데, 이는 다른 속성(property)을 참조한다. <PRE>P { font-size: 10pt }P { line-height: 120% } /* 글꼴 크기('font-size')의 상대적인 값, 여기서는 12pt */</PRE>

백분율 값들을 허용하는 각 속성은, 그것이 어떤 속성을 참조하는지 정의한다. 'P'의 하위 엘레멘트들은 줄높이('line-height')의 전달된 값에서 백분율이 아니라 계산된 값이 된다(말하자면 12pt).

1.4 선택자(selector)로 클래스(class)

엘레멘트들에 대한 점진적인 제어를 향상시키기 위하여, 'CLASS'라는 새로운 애트리뷰트가 HTML에 글라스(class)로 추가 되었다. 'BODY' 엘레멘트 안의 모든 엘레멘트들은 클래스(class)화될 수 있고, 클래스(class)는 스타일쉬트에 지정될 수 있다. <PRE><HTML> <HEAD> <TITLE>Title</TITLE> <STYLE TYPE="text/css"> H1.pastoral { color: #00FF00 } </STYLE> </HEAD> <BODY> <H1 class=pastoral>녹색을 표현하는 방법</H1> </BODY></HTML></PRE>

일반적인 전달 명령(rule)들은 클래스(class)화된 엘레멘트들에 적용된다. 문서 구조안에서 모체로 부터 값이 전달된다.

모든 엘레멘트들에 같은 클래스(class)를 선택자(selector)를 생략하고 사용할 수 있다. <PRE>.pastoral { color: green } /* 모든 엘레멘트들을 CLASS pastoral로 */</PRE>

선택자(selector) 마다 하나의 클래스(class) 만을 지정할 수도 있다. 'P.pastoral.marine'는 CSS1에서 개별 선택자(selector)이다. 복합 선택자(contextual selector)들은 아래 설명하는데, 단일 선택자(selector)가 하나의 클래스(class)를 갖는다.

CSS는 CLASS 애트리뷰트에 큰 능력을 제공하지 않는다, 이것은 많은 경우 어떤 HTML 엘레멘트의 클래스(class)가 설정되었는가 문제가 되지 않고 어떤 엘레멘트에도 사용될 수 있기 때문이다. 이 기능에 의존하는 것은 추천되지 않는데, 이는 HTML 엘레멘트들의 공통적인 구조의 의미를 희석시키기 때문이다. CLASS에 기초한 구조는 클래스(class)의 의미가 상호 합의된 제한된 도메인에서 만 유용하다.

1.5 선택자(selector)로서 ID

HTML('id' 지정자)은 또한 전 문서를 통한 유일한 값을 보증하는 'ID' 애트리뷰트를 도입했다. 따라서 이는 스타일쉬트 선택자(selector)에서 특별히 중요한며, '#'로 시작하도록 지정한다. <PRE>#z98y { letter-spacing: 0.3em }H1#z98y { letter-spacing: 0.5em }<P ID=z98y>Wide text</P></PRE>

위 예제에서, 첫번째 선택자(selector)는 'P' 엘레멘트는 'ID' 애트리뷰트 값 때문에 맞는다. 두번째 선택자(selector)에서는 엘레멘트 type ('H1')와 ID 값 두가지를 다 지정 했으므로, 'P' 엘레멘트에 맞지 않는다.

ID 애트리뷰트를 선택자(selector)로 사용함에 있어서, 스타일 속성들을 엘레멘트 단위를 기준으로 설정할 수 있다. 스타일쉬트을은 문서 구조를 위하여 설계되었기 때문에, 이 기능은 제작자들이 HTML의 구조적 엘레멘트들의 잇점을 이용하지 않고 화면에 잘 표현되는 문서를 만들도록 한다. 스타일쉬트의 이와 같은 사용은 피하는 것이 좋다.

1.6 복합 선택자(contextual selector)

전달은 CSS 설계자들의 입력을 절약 해 준다. 모든 스타일 속성들을 지정하는 대신, 디폴트(default)를 만들고 제외되는 목록를 만들 수 있다. 'H1' 안의 'EM' 엘레멘트들을 다른 색상으로 지정하기 위하여 다음과 같이 할 수 있다. <PRE>H1 { color: blue }EM { color: red }</PRE>

이 스타일쉬트가 작용하면'H1'의 안에 있던 밖에 있던 모든 강조 부분이 붉은색이 된다. 'H1' 안에 있는 'EM' 엘레멘트들만 붉게 하려면 다음과 같이 하면 된다. <PRE>H1 EM { color: red }</PRE>

이 선택자(selector)는 이제 검색 형태를 가지고 열린 엘레멘트들을 검정한다. 이와 같은 선택자(selector)를 복합 선택자(contextual selector)라 한다. 복합 선택자들은 몇개의 단순 선택자들을 빈칸으로 구분하여 지정한 것이다(지금까지 설명한 것은 모두 단순 선택자들이었다). 마지막 단순 선택자에 맞는 엘레멘트들 만('EM' 엘레멘트) 그리고 이 검색 과정에 맞는 것 만이 표현된다. CSS1에서 복합 선택자(contextual selector)들은 원형적 관계를 검색한다. 그러나 다른 관계들(예를 들어 모체-하위)은 향 후 버전에 반영된다. 위의 예제에서, 검색 과정은 만일 'EM'이 'H1' 안에 있을 때 적용된다. <PRE>UL LI { font-size: small }UL UL LI { font-size: x-small }</PRE>

여기에서, 첫번째 선택자(selector)가 'LI' 엘레멘트들과 맞으면 최소의 하나의 'UL' 조상을 갖는다. 두번째 예제에서 선택자는 맞으면 첫째의 하위 'LI' 엘레멘트는 최소 두개의 'UL' 조상을 갖는다. 두번째 선택자의 보다 긴 검색 구조 때문에 구체적으로 되어 이 혼동은 해결된다. 항목 3.2 카스케이딩 순서를 참조하라.

복합 선택자(contextual selector)들은 엘레멘트 타입(type)들, CLASS 애트리뷰트들, ID 애트리뷰트들 또는 이들의 조합을 검정할 수 있다. <PRE>DIV P { font: small sans-serif }.reddish H1 { color: red }#x78y CODE { background: blue }DIV.sidenote H1 { font-size: large }</PRE>

첫번째 선택자(selector)는 'DIV' 조상들 중에서 모든 'P' 엘레멘트들이 맞는 것을, 두번째 선택자 클래스(class) 'reddish' 조상을 갖는 모든 'H1' 엘레멘트들이 맞는 것을, 세번째 선택자는 'ID=x78y'를 갖는 것들 중 모든 'CODE' 엘레멘트들을, 그리고 네번째 선택자는 'DIV' 조상에 클래스(class) 'sidenote'를 가진 모든 'H1' 엘레멘트들에 맞는 것이다.

여러 복합 선택자(contextual selector)들도 구룹지워 질 수 있다. <PRE>H1 B, H2 B, H1 EM, H2 EM { color: red }</PRE>

이는 아래와 같은 것이다. <PRE>H1 B { color: red }H2 B { color: red }H1 EM { color: red }H2 EM { color: red }</PRE>

1.7 코멘트(Comment)

CSS 스타일쉬트에서 코멘트(Comment) 텍스트는[7] 프로그램 언어 C에서와 비슷하다. <PRE>EM { color: red } /* red, 이는 적색이다 */</PRE>

코멘트(Comment)는 네스트될 수 없다. CSS1 표현기에서 코멘트(Comment)는 공간과 같다.

2 가상 클래스(class)와 가상 엘레멘트

CSS1에서, 스타일은 일반적으로 문서 구조의 해당 위치의 엘레멘트에 추가된다. 이 단순한 모델은 다양한 스타일들에 충분하나, 일부 보편적인 효과를 해결하지 못한다. 가상 클래스(class)와 가상 엘레멘트의 개념이 CSS1에서 양식화 과정에 외부 정보를 허용하도록 확장한다.

가상 클래스(class)들과 가상 엘레멘트들이 CSS 선택자(selector)로 사용될 수 있다. 그러나 이들은 HTML 자원에는 존재하지 않는다. 오히려 이들은 어떤 경우에 스타일쉬트로 사용될 수 있도록 사용도구에 의하여 삽입된다. 이들은 "글래스"와 "엘레멘트"로 불리우는데, 이는 그들의 행동을 기술하는데 편리하기 때문이다. 더 구체적으로, 이들의 행동은 가상 태그 기능으로 정의된다.

가상 엘레멘트들은 엘레멘트들의 하위 부분을 지명하는데 사용된다. 가상 클래스(class)들에서 스타일쉬트가 다른 엘레멘트 타입(type)들을 다르게 처리하기 때문이다.

2.1 앤커(anchor) 가상 클래스(class)

사용도구들은 일반적으로 새롭게 방문한 앤커를 과거에 방문한 것과 다르게 표현한다. CSS1에서 이것이 'A' 엘레멘트의 가상 클래스(class)를 통하여 처리된다. <PRE>A:link { color: red } /* 방문하지 않은 연결 */A:visited { color: blue } /* 방문했던(visited) 연결 */A:active { color: lime } /* 활성(active) 연결 */</PRE>

'HREF' 애트리뷰트를 갖는 모든 'A' 엘레멘트들은 하나의, 단지 하나의, 이들 구룹으로 된다(말하자면 목표(target) 앤커들은 영향을 받지 않는다). 사용도구들은 방문했던('visited')에서 일반 연결('link')로 일정한 시간 후에 변화시키는 것을 선택할 수 있다. 활성('active') 연결은 리더에 의하여 마우스 단추 느름 등으로 현재 선택한 연결을 말한다.

앤커(anchor) 가상 클래스(class)의 양식화는 클래스(class)가 수동적으로 삽입되는 것과 같이 이루어 진다. 사용도구는 현재 표현된 문서를 앤커(anchor) 가상 클래스(class) 활동 때문에 다시 양식화할 필요는 없다. 예를 들어, 스타일쉬트는 문법에 맞게 지정할 수 있다. 활성('active') 연결의 글꼴 크기('font-size')를 방문 했던('visited') 연결보다 크게 지정할 수 있다. 그러나 사용도구는 리더가 방문했던( 'visited') 연결을 선택했을 때 탄력성있게 그 문서를 재 양식화할 필요는 없다.

가상 클래스(class) 선택자들은 일반 클래스(class)들과 맞지 않으며 그 역도 마찬가지이다. 따라서 아래 예제의 스타일 명령(rule) 아무 영향이 없다. <PRE>A:link { color: red }<A class=link NAME=target5> ... </A></PRE>

CSS1에서 앤커(anchor) 가상 클래스(class)들은 'A' 엘레멘트 이외의 엘레멘트에는 영향이 없다. 따라서, 엘레멘트 type이 선택자에서 생략될 수 있다. <PRE>A:link { color: red }:link { color: red }</PRE>

CSS1에서 위의 두 선택자들은 같은 엘레멘트들을 선택한다.

가상 클래스(class)의 이름(name)들은 대소분자를 구별하지 않는다.

가상 클래스(class)들은 다른 복합 선택자(contextual selector)들 안에서 사용될 수 있다. <PRE>A:link IMG { border: solid blue }</PRE>

또한, 가상 클래스(class)들은 일반 클래스(class)들과 조합될 수 있다. <PRE>A.external:visited { color: blue }<A class=external HREF="http://out.side/">external link</A></PRE>

위의 예제에서 연결이 방문했던(visited) 것이면 청색으로 표현된다. 일반 클래스(class) 이름(name)들이 선택자의 가상 클래스(class)들보다 선행한다는 점에 주의하라.

2.2 인쇄(typographical) 가상 엘레멘트들

일부 보통 인쇄(typographical) 효과들은 구조적 엘레멘트들과 연관되지 않고, 화면에 양식화되는 인쇄(typographical) 항목들에 연관된다. CSS1에서, 두가지 이런 인쇄(typographical) 항목들을 가상 엘레멘트들을 통하여 지정할 수 있는데, 엘레멘트의 첫 줄과 첫 글자이다.

CSS1 핵심: 사용도구들은 모든 명령(rule)들에서 선택자의 첫 줄(':first-line') 혹은 첫 글자(':first-letter')을 무시할 수 있다. 또는 이들 가상 엘레멘트들 속성들의 하위 설정 만을 지원할 수 있다(항목 7 참조).

2.3 첫줄('first-line') 가상 엘레멘트

첫줄('first-line') 가상 엘레멘트는 화면에서 첫줄에 특수한 스타일을 적용하기 위하여 사용된다. <PRE><STYLE TYPE="text/css"> P:first-line { font-variant: small-caps }</STYLE> <P>The first line of an article in Newsweek.</PRE>

텍스트 기준 사용도구에서 이는 다음과 같이 양식화된다. <PRE>THE FIRST LINE OF AN article in Newsweek.</PRE>

위 예제의 가상 태그 기능은 <PRE><P><P:first-line>The first line of an </P:first-line>article in Newsweek. </P></PRE>

첫줄('first-line') 종료태그는 첫줄 끝에 삽입한다.

첫줄('first-line') 가상 엘레멘트는 블럭레벨(block-level) 엘레멘트에 만 사용될 수 있다.

첫줄('first-line') 가상 엘레멘트는 인라인(inline) 엘레멘트와 비슷하다. 그러나 제한들이 있다. 첫줄('first-line') 엘레멘트에는 다음 속성들 만이 적용된다.
(5.2 글자(font) 속성들), (5.3 색상과 배경 속성들), (5.4.1 단어 간격('word-spacing')), (5.4.2 글자 간격('letter-spacing')), (5.4.3 텍스트 장식('text-decoration')),(5.4.4 수직 정렬('vertical-align') ), (5.4.5 텍스트 변환('text-transform')), (5.4.8 줄높이('line-height')), (5.5.26 'clear').

2.4 첫글자('first-letter') 가상 엘레멘트

첫글자('first-letter') 가상 엘레멘트는 일반적인 인쇄(typographical) 효과를 갖는 "initial caps" 와 "drop caps"에 사용된다. 이는 유동('float') 속성이 'none'이면 인라인(inline) 엘레멘트와 유사하고, 아니면 유동(floating) 엘레멘트와 유사하다. 첫글자('first-letter') 가상 엘레멘트들에 적용되는 속성들은:
(5.2 글자(font) 속성들), (5.3 색상(color)과 배경(background) 속성), (5.4.3 텍스트 장식('text-decoration')), (유동('float')가 'none' 일 때 만, 5.4.4 수직 정렬('vertical-align')), (5.4.5 텍스트 변환('text-transform')), (5.4.8 줄높이('line-height')), (5.5.1 margin 속성들-5.5.5), (5.5.6 padding 속성들-5.5.10), (5.5.11 border 속성들-5.5.22), (5.5.25 유동('float')), (5.5.26 'clear').

이것은 드롭캡(dropcap) 최초 글자 스판(span) 두 줄을 만드는 것이다. <PRE><HTML> <HEAD> <TITLE>Title</TITLE> <STYLE TYPE="text/css"> P { font-size: 12pt; line-height: 12pt } P:first-letter { font-size: 200%; float: left } SPAN { text-transform: uppercase } </STYLE> </HEAD> <BODY> <P><SPAN>The first</SPAN> few words of an article in The Economist.</P> </BODY></HTML></PRE>

만일 택스트 기준 사용도구가 첫글자('first-letter') 가상 엘레멘트를 지원하면(아마 아닐 것이다), 이는 다음과 같이 양식화된다. <PRE>___ | HE FIRST few | words of an article in the Economist.</PRE>

가상 태그 기능으로 <PRE><P><SPAN><P:first-letter> T </P:first-letter>he first</SPAN>few words of an article in the Economist.</P></PRE>

첫글자('first-letter') 가상 엘레멘트 택그들은 내용(말하자면 첫 글자)에 인접하고, 첫글자('first-letter') 가상 엘레멘트 시작태그는 그것이 첨부된 엘레멘트 시작태그 바로 다음에 삽입된다는 점을 주시하라.

사용도구는 어떤 글자들이 첫글자('first-letter') 엘레멘트 안에 있는가를 판정한다. 일반적으로 첫글자 앞에 따옴으로 첫글자가 포함되어야 한다. <PRE>||/\ bird in/ \ the hand/----\ is worth/ \ two in the bush," says an old proverb.</PRE>

문단이 다른 구둣점으로 시작되거나(예를 들어 괄호와 구둣점들) 일반적으로 글자로 간주되지 않는 다른 글자들로 시작되면(예를 들어 숫자와 수학기호들), 첫글자('first-letter') 가상 엘레멘트들은 일반적으로 무시된다.

일부 언어들에서 어떤 문자 조합을 어떻게 처리할 것인지 특정 명령(rule)들을 지정할 수 있다. 예를 들어 홀랜드어에서, 단어의 시작에서 만일 글자 조합 "ij"가 나타나면, 이들은 두 글자 모두 첫글자('first-letter') 가상 엘레멘트로 고려되어야 한다.

첫글자('first-letter') 가상 엘레멘트는 블럭레벨(block-level) 엘레멘트에 만 사용할 수 있다.

2.5 선택자(selector)들 안에서 가상 엘레멘트

복합 선택자(contextual selector)에서, 가상 엘레멘트들은 그 선택자(selector) 맨 뒤에 만 허용된다. <PRE>BODY P:first-letter { color: purple }</PRE>

가상 엘레멘트들은 선택자(selector)들 안에서 클래스(class)들과 조합할 수 있다. <PRE>P.initial:first-letter { color: red }<P class=initial>First paragraph</A></PRE>

위 예제는 'CLASS=initial'을 갖는 모든 'P' 엘레멘트들의 첫글자를 붉은색으로 만들 것이다. 클래스(class)들 또는 가상 클래스(class)들이 조합되면, 가상 엘레멘트들은 선택자(selector) 맨 뒤에 지정되어야 한다. 선택자마다 하나의 가상 엘레멘트 만 지정할 수 있다.

2.6 복수 가상 엘레멘트

복수의 가상 엘레멘트들이 조합될 수 있다. <PRE>P { color: red; font-size: 12pt }P:first-letter { color: green; font-size: 200% }P:first-line { color: blue }<P>Some text that ends up on two lines</P></PRE>

이 예제에서, 각 'P' 엘레멘트의 첫글자는 녹색이며 글자 크기는 24pt이다. 나머지 첫줄은(화면에 양식화되는) 청색이고, 나머지 문단은 붉은색이 된다. 단어 "ends" 전에 줄바꿈이 발생되었다고 가정하면, 가상 택그 기능은 <PRE><P><P:first-line><P:first-letter> S </P:first-letter>ome text that </P:first-line>ends up on two lines</P></PRE>

첫글자('first-letter') 엘레멘트는 첫줄('first-line') 엘레멘트 안에 있다 점에 유의하라. 첫줄('first-line')에 설정된 속성들 첫글자('first-letter')로 부터 전달된다. 그러나 같은 첫글자('first-letter') 속성이 설정되면 덮어씌우기(override)가 된다.

만일 가상 엘레멘트가 본래 엘레멘트를 붕괴되면, 필요한 추가 태그들이 가상 태그 기능에서 다시 생성되어야 한다. 예를 들어, 만일 SPAN 엘레멘트가 </P:first-line> 태그 밖으로 확장되면, 종료태그와 시작태그가 다시 생성되어야 하며 가상 태그 기능은 다음과 같이 된다. <PRE><P><P:first-line><SPAN>This text is inside a long</SPAN></P:first-line><SPAN>span 엘레멘트</SPAN></PRE>

3 카스케이드(cascade)

CSS에서, 하나이상의 스타일쉬트가 표현에 동시에 영향을 줄 수 있다. 이는 두가지 주된 이유가 있는데 하나는 모듈화 속성이고 다른 하나는 제작자/리더 바란스이다.

모듈화 속성(modularity): 스타일쉬트는 복잡성을 피하기 위하여 여러개의 부분적인 스타일쉬트들을 조합하도록 설계되었다. <PRE>@import url(http://www.style.org/pastoral);@import url(http://www.style.org/marine);H1 { color: red } /* 도입된(imported) 스타일을 덮어씌움(override) */</PRE>
제작자/리더 바란스: 리더와 제작자들이 스타일쉬트를 통하여 표현에 영향을 줄 수 있다. 이를 위해 그들은 같은 스타일쉬트 언어를 사용하여 웹의 기초 기능을 반영하여야 한다. 누구나 문서 발행자가 될 수 있다. 사숑도구는 개인적인 스타일쉬트 표현 기능의 선택이 자유이다.

때로는 스타일쉬트들이 표현에 영항하는데 모순이 일어난다. 모순의 해결은 각 스타일 명령(rule)에 기초하여 우선순위(weight)를 갖는다. 디폴트로 리더의 명령(rule)들 보다 제작자 문서의 명령(rule)들이 우선 적용된다. 말하자면, 만일 들어오는 문서와 리더의 개별 스타일쉬트 간의 마찰이 생기면, 제작자의 명령(rule)들이 사용된다. 리더나 제작자 명령(rule)들이 모두 사용도구의 디폴트 값을 덮어씌운다.

도입된(imported) 스타일쉬트 또한 서로 카스케이드(cascade)된다. 도입된 순서에 따라, 카스케이드(cascade) 명령(rule)은 아래 설명한다. 스타이쉬트에 지정된 어떤 명령(rule)들은 자체가 도입된(imported) 스타일쉬트의 명령(rule)들를 덮어씌운다. 이는 도입된 스타일쉬트가 지체 스타일쉬트에 있는 명령(rule)보다 낮은 카스케이딩 순서를 갖는다는 뜻이다. 도입된 스타일쉬트는 반복적으로 도입하고 다른 스타일쉬트를 덮어씌울 수 있다.

CSS1에서, 모든 '@import' 선언은 스타일쉬트 시작부분에 나와야 하며 선언 이전에 이루어 져야한다. 이는 보기 쉽게하며, 스타일쉬트 자체의 명령(rule)들이 도입된 스타일쉬트의 명령들을 덮어씌우게 한다.

3.1 중요('important')

스타일쉬트 설계자는 그들 선언의 중요도를 증가시킬 수 있다. <PRE>H1 { color: black ! important; background: white ! important }P { font-size: 12pt ! important; font-style: italic }</PRE>

위 예제에서, 첫 세가지 선언은 중요도를 증가시킨 선언들이고, 마지막 것은 보통의 중요도이다.

사용자의 중요 선언 명령(rule)은 제작자 보통 선언 명령(rule)을 덮어씌운다(override). 제작자 중요 선언 명령(rule)은 사용자의 중요 선언 명령(rule)을 덮어씌운다.

3.2 카스케이딩 순서

모순되는 명령(rule)들은 CSS 기능의 원칙에 따른다. 엘레멘트/속성 조합의 값을 찾기위하여 다음 순서의 기능을 따라야 한다.

문제의 모든 엘레멘트/속성에 적용되는 모든 선언들을 찾는다. 문제의 엘레멘트가 그 선택자(selector)와 맞으면 선언(declaration)들을 적용한다. 선언이 적용되지 않으면 전달된(inherited) 값이 사용된다. 전달된 값이 없으면('HTML' 엘레멘트와 속성들이 전달되지 않은 경우) 최초값이 적용된다.
표현 중요도에 따라 선언(declaration)들이 정렬된다. 중요한 표시('!important')가 된 것이 선언되지 않은 것 보다 우선한다.
원본의 순서에 따라 정렬된다. 제작자의 스타일쉬트가 리더 스타일쉬트를 덮어씌우고(override), 리더 스타일쉬트는 사용도구의 디폴트 값들을 덮어씌운다. 도입된(imported) 스타일쉬트는 그 스타일쉬트가 도입된 자원과 같은 원본이다.
지정된 선택자(selector)로 정렬된다. 보다 구체적인 선택자(selector)가 일반적인 선택자를 덮어씌운다. 보다 구체적으로 찾기 위해, ID 애트리뷰트들의 선택자(a) 갯수를 세고, CLASS 애트리뷰트들의 선택자(b) 갯수를 세고, 선택자 안의 태그 이름(c)의 갯수를 센다. 이 세 갯수들의 연쇄(큰 베이스의 수치 시스템 안에서)는 구체적으로 주어진다. 예제를 보면 <PRE>LI {...} /* a=0 b=0 c=1 -> 구체화수 = 1 */UL LI {...} /* a=0 b=0 c=2 -> 구체화수 = 2 */UL OL LI {...} /* a=0 b=0 c=3 -> 구체화수 = 3 */LI.red {...} /* a=0 b=1 c=1 -> 구체화수 = 11 */UL OL LI.red {...} /* a=0 b=1 c=3 -> 구체화수 = 13 */#x34y {...} /* a=1 b=0 c=0 -> 구체화수 = 100 */</PRE>
가상 엘레멘트들과 가상 클래스(class)들은 각각 일반 엘레멘트들과 클래스(class)들로 합산된다.
지정된 우선순위로 정렬한다. 만일 두가지 명령(rule)이 같은 우선순위를 가지면, 나중에 지정된 것이 적용된다. 도입된(imported) 스타일쉬트의 명령(rule)들은 스타일쉬트 자체의 어떤 명령들 이전의 것으로 간주된다.

속성값의 검색은 한 명령(rule)이 같은 엘레멘트/속성 조합에 적용되는 다른 명령들보다 높은 우선순위를 갖는 것을 만나면 종료된다.

이 원칙은 제작자의 스타일쉬트가 리더의 스타일쉬트보다 상당히 높은 우선순위를 갖게한다. 따라서 리더는 어떤 스타일쉬트의 영향을 중지시킬 수 있게하는 것이 중요하다. 예를 들어 풀다운(pull-down) 메뉴를 통하여

어떤 엘레멘트의 'STYLE' 애트리뷰트에서 선언(예제는 항목 1.1 참조)은 스타일쉬트 맨 뒤에 지정한 ID 선택자(selector)와 같은 우선순위를 갖는다. <PRE><STYLE TYPE="text/css"> #x97z { color: blue }</STYLE><P ID=x97z STYLE="color: red"></PRE>

위 예제에서, 'P' 엘레멘트의 색상은 붉은색일 것이다. 두 선언에서 같은 구체화수를 갖지만, 'STYLE' 애트리뷰트의 선언이 'STYLE' 엘레멘트의 선언을 덮어씌울 것이다. 이는 위의 카스케이딩 원칙 5번을 따르기 때문이다.

사용도구는 다른 스타일적 HTML 애트리뷰트들 선택할 수 있다. 예를 들어 'ALIGN'. 그런 경우, 이들 애트리뷰트들은 해당 CSS 명령(rule)들로 해석하여, 구체화수는 1이 된다. 이 명령(rule)들은 제작자 스타일쉬트의 시작부분에 있는 것으로 간주된어 후속 스타일 명령들에 의하여 덮우씌우게 된다. 과도적 단계에서 이 정책은 스타일적 애트리뷰트들을 스타일쉬트와 동시에 사용하기 쉽게 한다.

4 양식화(formatting) 모델

CSS1은 단순 박스형(box-oriented) 양식 모델을 가정한다. 거기서 각 양식화된 엘레멘트가 하나이상의 사각형 박스들을 만드는 것이다. 'display' 값이 'none'인 엘레멘트들은 양식화되지 않고, 따라서 박스를 만들지 않을 것이다. 모든 박스(box)들은 중심 내용 지역(area)과 주위 패딩(padding), 테두리(border)와 마진(margin) 지역을 갖는다. <PRE>_______________________________________| || margin (마진: 투명) || _________________________________ || | | || | border (테두리) | || | ___________________________ | || | | | | || | | padding (패딩) | | || | | _____________________ | | || | | | | | | || | | | content (내용) | | | || | | |_____________________| | | || | |___________________________| | || |_________________________________| ||_______________________________________| | 엘레멘트 너비 || 박스(box) 너비 |</PRE>

마진(margin), 태두리(border) 그리고 패딩(padding)의 크기(size)는 각각 (5.5.1 margin-5.5.5), (5.5.6 padding-5.5.10) 와 (5.5.11 border-5.5.22) 속성들이 설명되어 있다. 패딩(padding) 지역은 엘레멘트 자체와 같은 배경을 사용한다. (5.3.2 background 속성들-5.3.7 참조). 테두리의 색상(color)과 스타일은 테두리(border) 속성들과 함께 설정한다. 마진은 항상 투명하여, 모체 엘레멘트가 잘 표현된다.

박스의 크기는 엘레멘트(말하자면 양식화된 택스트나 이미지) 너비와 패딩, 테두리, 마진 지역들의 합산이다.

양식화 견지에서 엘레멘트들의 두가지 주된 타입(type)들이 있는데, 블럭레벨(block-level)과 인라인(inline)이다.

4.1 블럭레벨(block-level) 엘레멘트

'display' 값이 블럭('block') 또는 목록('list-item') 인 엘레멘트들은 블럭레벨(block-level) 엘레멘트들이다. 또한, 유동('float') 값이 'none'이 아닌 다른 값을 가진 엘레멘트들인 유동(floating) 엘레멘트들도 블럭레벨(block-level) 엘레멘트들로 간주된다.

다음 예제는 2개의 하위 구조를 가진 'UL' 엘레멘트의 마진(margin)과 패딩(padding)이 어떻게 양식화되는지를 보여준다. 간단히 하기 위하여 도표는 테두리(border)들이 없다. 또한 이 예제에서 CSS1 분법에는 맞지 않으나, 스타일쉬트의 값들을 도표에 표시하도록 편이상 단일 글자 내용("constants")를 사용하였다. <PRE><STYLE TYPE="text/css">UL { background: red; margin: A B C D; padding: E F G H;}LI { color: white; background: blue; /* 청색바탕에 흰색 글씨 */ margin: a b c d; padding: e f g h;}</STYLE> ..<UL><LI>목록의 1번 엘레멘트<LI>목록의 2번 엘레멘트</UL></PRE><PRE> _______________________________________________________| || A UL 마진(margin: 투명) || _______________________________________________ || D | | B || | E UL 패딩(padding: 적색) | || | _______________________________________ | || | H | | F | || | | a LI 마진(margin: 투명, | | || | | 적색이 비침) | | || | | _______________________________ | | || | | d | | b | | || | | | e LI 패딩(padding: 청색) | | | || | | | | | | || | | | h 목록의 1번 엘레멘트 f | | | || | | | | | | || | | | g | | | || | | |_______________________________ | | | || | | | | || | | max(a, c) <- 최대 부분 | | || | | _______________________________ | | || | | | | | | || | | d | e LI 패딩(padding: 청색) | | | || | | | | | | || | | | h 목록의 2번 엘레멘트 f | | | || | | | | | | || | | | g | | | || | | |_______________________________ | | | || | | | | || | | c LI 마진(margin: 투명, | | || | | 적색이 비침) | | || | |_______________________________________ | | || | | || | G | || |_______________________________________________ | || || C ||_______________________________________________________ |</PRE>

전형적으로, 패딩(padding)과 마진(margin) 속성들은 전달(inherit)되지 않는다. 그러나, 예제에서 본바와 같이, 엘레멘트의 대체는 모체들과 형제들에 상대적으로 이루어 진다. 따라서 이들 엘레멘트들의 패딩(padding)과 마진(margin) 속성들이 그들의 하위 항목에서 영향을 받는다.

만일 위의 예제에 테두리(border)들이 있다면, 이 테두리들은 패딩과 마진들사이에 나타 날 것이다.

다음 도표는 유용한 용어들을 설명한다. <PRE> ----------------------- <-- 맨위(top) 위쪽 마진(top margin) ----------------------- 위쪽 테두리(top border) ----------------------- 위쪽 패딩(top padding) +-----------+ <-- 내부 맨위(inner top)| | | | | | | ||-왼쪽-|-왼쪽-|-왼쪽--|-- 내용 --|-오른쪽-|-오른쪽-|-오른쪽-|| 마진 |태두리| 패딩 | | 패딩 | 태두리 | 마진 ||-left-|-left-|-left--|- content -|-right--|-right--|-right--||margin|border|padding| |padding | border | margin || | | | | | | | +-----------+ <-- 내부 맨아래(inner bottom)^ ^ ^ ^왼쪽 왼쪽 오른쪽 오른쪽외부틀 내부틀 내부틀 외부틀left left right rightouter inner inner outeredge edge edge edge 아래쪽 패딩(bottom padding) ----------------------- 아래쪽 테두리(bottom border) ----------------------- 아래쪽 마진(bottom margin) ----------------------- <-- 맨아래(bottom)</PRE>

왼쪽 외부틀(left outer edge)은 그의 패딩(padding), 테두리(border)와 마진(margin)을 포함한 엘레멘트의 틀이다.
왼쪽 내부틀(left inner edge)는 어느 패딩(padding), 테두리(border)와 마진(margin) 안에 있는 내용(content) 만의 틀이다.
맨위(top)는 패딩(padding), 테두리(border)와 마진(margin)을 포함한 그 엘레멘트의 맨 위이다. 이는 인라인(inline)이며 유동(floating) 엘레멘트들에 만 지정되며, 유동하지 않는(non-floating) 블럭레벨(block-level) 엘레멘트들에는 지정되지 않는다.
내부 맨위(inner top)는 어느 패딩(padding), 테두리(border)와 마진(margin) 안에 있는 내용의 맨위이다.
맨아래(bottom)는 패딩(padding), 테두리(border)와 마진(margin)을 포함한 그 엘레멘트의 맨아래이다. 이는 인라인(inline)이며 유동(floating) 엘레멘트들에 만 지정되며, 유동하지 않는(non-floating) 블럭레벨(block-level) 엘레멘트들에는 지정되지 않는다.
내부 맨아래(inner bottom)는 어느 패딩(padding), 테두리(border)와 마진(margin) 안에 있는 내용의 맨아래이다.

엘레멘트의 너비(width)는 내용(content)의 너비이며, 말하자면, 왼쪽 내부틀(left inner edge)과 오른쪽 내부틀(right inner edge)과의 거리이고, 높이(height)는 내용(content)의 높이로 내부 맨위(inner top)와 내부 맨아래(inner bottom)와의 거리이다.

4.1.1 수직 양식화

유동 않는(non-floating) 블럭레벨(block-level) 엘레멘트들의 마진(margin) 너비는 주위 박스(box)의 틀(edge)들사이의 최소 거리이다. 두개 혹은 그이상의 인접한 수직 마진들은 패딩(padding), 테두리(border)가 없거나 그사이의 내용(content)이 없을 때 마진의 값을 최대로 사용하기 위하여 붕괴된다. 대부분의 경우에는, 수직 마진들이 붕괴된 후, 실제로 설계자가 기대하는 것에 가깝고 편하게 보이는 결과를 가져다 준다. 위의 예제에서, 1번 LI 엘레멘트의 아래쪽 마진('margin-bottom')과 2번 LI 엘레멘트의 위쪽 마진('margin-top')의 최대 사용으로, 두 'LI' 엘레멘트들은 붕괴된다. 같은 방식으로 만일 'UL' 과 1번 'LI' 엘레멘트(내용 "E")사이의 패딩이 0이 되면, UL 과 1번 LI 엘레멘트들의 마진들은 붕괴된다.

마진들이 음수인 경우, 음수 절대 최대 인접 마진들은 양수 절대 최대 인접 마진들로 부터 빼진다. 만일 양수 마진들이 없으면, 음수 절대 최대 인접 마진들은 0에서 빼진다.

4.1.2 수평 양식화

유동 않는(non-floating) 블럭레벨(block-level) 엘레멘트의 수평 위치와 크기(size)는 7가지 속성들에 의하여 결정된다.

왼쪽 마진('margin-left')
왼쪽 테두리('border-left')
왼쪽 패딩('padding-left')
너비('width')
오른쪽 패딩('padding-right')
오른쪽 테두리('border-right')
오른쪽 마진('margin-right')

이들 7 가지의 합계는 항상 모체 엘레멘트의 너비('width')와 같다.

디폴트로, 어떤 엘레멘트의 너비('width')는 자동('auto')이다. 만일 그 엘레멘트가 대체된(replaced) 엘레멘트가 아니면, 이는 언급한 7 가지 속성들의 합산이 모체 너비과 같도록 너비('width')가 사용도구에 의해 계산된다는 의미한다. 만일 그 엘레멘트가 대체된(replaced) 엘레멘트이면, 너비 값 자동('auto')은 자동적으로 본래의(intrinsic) 그 엘레멘트의 너비로 대체된다.

7 가지 속성들 중 왼쪽 마진('margin-left'), 너비('width') 와 오른쪽 마진('margin-right') 3 가지는 자동('auto')으로 설정될 수 있다. 대체된(replaced) 엘레멘트들에서, 너비 값 'auto'는 본래의 너비로 대체되고 두가지 만 'auto' 값을 가질 수 있게 된다.

너비('width')가 음수가 아닌 경우, 엘레멘트에 따라 다르고 나아가 다른 속성들에 따라 다르지만 사용도구가 정의한 최소값이 된다. 만일 너비가 지명적으로 그렇게 지시하였거나, 자동('auto')을로 되었는데 그 명령(rule)이 너무 작게 요구하여, 그 한계 이하이면 그 대신 그 값은 최소값으로 대체된다.

만일 왼쪽 마진('margin-left'), 너비('width'), 오른쪽 마진('margin-right') 중 하나만 자동('auto')이면, 사용도구는 7 가지 합산이 모체의 너비와 같게 되도록 속성값을 지정한다.

만일, 아무 속성도 'auto'로 지정되지 않았으면, 오른쪽 마진('margin-right') 값이 'auto'가 설정된다.

만일 세개 중 한개이상이 'auto'이면, 그리고 그 중 하나가 너비('width')이면, 그러면 다른 것들은(왼쪽 마진('margin-left') 그리고/혹은 오른쪽 마진('margin-right')) 0으로 설정되고, 너비('width')는 7 가지 합산이 모체의 너비가 되도록 필요한 값을 갖게 된다.

아니면, 만일 왼쪽 마진('margin-left')와 오른쪽 마진('margin-right')가 'auto'이면, 같은 값들이 설정된다. 따라서 그의 모체 안에서 그 엘레멘트가 중앙에 위치하게 된다.

만일 'auto'가 7 가지 속성들 중 하나가 인라인(inline) 또는 유동(floating) 엘레멘트에 설정되면, 그것은 0으로 설정된 것으로 간주된다.

수직 마진(margin)들과는 달리, 수평 마진들은 붕괴되지 않는다.

4.1.3 목록(list-item) 엘레멘트들

'display' 속성의 목록('list-item') 값을 가진 엘레멘트들은 블럭레벨(block-level) 엘레멘트들로 양식화된다. 그러나 목록(list-item) 메이커(marker)가 먼저 나온다. 메이커(marker)의 타입(type)은 목록 스타일('list-style') 속성(property)에 의허여 결정된다. 메이커(marker)는 목록 스타일('list-style') 속성(property)값에 따라 위치한다. <PRE><STYLE TYPE="text/css">UL { list-style: outside }UL.compact { list-style: inside }</STYLE><UL><LI>1번 목록 1번 항목<LI>1번 목록 2번 항목</UL><UL class=COMPACT><LI>2번 목록 1번 항목<LI>2번 목록 2번 항목</UL></PRE>

위 예제는 다음과 같이 양식화된다. <PRE>* 1번 목록 1번 항목* 1번 목록 2번 항목 * 2번 목록 1번 항목 * 2번 목록 2번 항목</PRE>

오른쪽에서 왼쪽으로 쓰는 텍스트에서는, 그 메이커(marker)들은 박스의 오른쪽에 나온다.

HTML의 목록 설명을 참조하라

4.1.4 유동(floating) 엘레멘트

유동('float') 속성(property)을 사용하여, 한 엘레멘트는 엘레멘트들의 정상 유동(flow)인 외부(outside)로 선언될 수 있다. 그리고 그 것은 블럭레벨(block-level) 엘레멘트로 양식화된다. 예를 들어, 이미지(image)를 왼쪽('left')으로 유동('float') 속성을 지정하면, 그 이미지는 다른 블럭레벨(block-level) 엘레멘트의 마진(margin), 패딩(padding) 또는 테두리(border)에 도달할 때까지 왼쪽으로 이동한다. 일반적인 유동(flow)은 오른쪽에서 줄바꿈을 한다. 그 엘레멘트 지체의 margin, border 와 padding들은 그대로 표현될 것이고, 그 마진(margin)들은 인접 엘레멘트들의 마진들과 절대로 붕괴되지 않는다.

한 유동(floating) 엘레멘트는 다음의 내용에 따라 위치한다(section 4.1 블럭레벨 엘레멘트를 참조하라).

왼쪽 유동(left-floating) 엘레멘트의 왼쪽 외부틀(left outer edge)은 모체 엘레멘트의 왼쪽 내부틀(left inner edge) 왼쪽에 오지 않을 수 있다. 오른쪽 유동(right floating) 엘레멘트들도 마찬가지이다.
왼쪽 유동(left-floating) 엘레멘트의 왼쪽 외부틀(left outer edge)은 각 먼저(HTML 문서에서) 왼쪽 유동(left-floating) 엘레멘트의 오른쪽 외부틀(right outer edge) 보다 오른쪽에 있어야 한다. 또한 이전의 맨위(top)는 나중의 맨아래(bottom)보다 낮아야 한다. 오른쪽 유동(right floating) 엘레멘트들에서도 같은 원칙이 적용된다.
왼쪽 유동(left-floating) 엘레멘트의 오른쪽 외부틀(right outer edge)은 그 오른쪽에 있는 오른쪽 유동(right floating) 엘레멘트 왼쪽 외부틀(left outer edge)의 오른쪽이 아닐 수 있다. 오른쪽 유동(right floating) 엘레멘트들에서도 같은 원칙이 적용된다.
유동(floating) 엘레멘트의 맨위(top)는 그 모체의 내부 맨위(inner top)보다 높지 않을 수 있다.
유동(floating) 엘레멘트의 맨위(top)는 먼저의 유동 혹은 블럭레벨(block-level) 엘레멘트의 맨위(top)보다 높지 않을 수 있다.
유동(floating) 엘레멘트의 맨위(top)는 어떤 HTML에서 유동(floating) 엘레멘트보다 먼저의 내용 인라인 박스(line-box)(항목 4.4 참조)의 맨위보다 높지 않을 수 있다.
유동(floating) 엘레멘트는 가능한한 높게 위치하여야 한다.
왼쪽 유동(left-floating) 엘레멘트는 가급적 왼쪽에 멀리 위치하여야 하고, 오른쪽 유동(right floating) 엘레멘트는 가급적 오른쪽에 멀리 위치하여야 한다. 높은 위치가 왼쪽/오른쪽으로 멀리 나가는 것보다 선호된다.

<PRE><STYLE TYPE="text/css">IMG { float: left }BODY, P, IMG { margin: 2em }</STYLE><BODY><P><IMG SRC=img.gif> 간단한 설명 택스트 ...</BODY></PRE>

위의 예제는 다음과 같이 양식화된다. <PRE> ________________________________________|| 최대(BODY 마진(margin), P 마진)| ______________________________| | | 간단한 설명 택스트| B | P | IMG margins 유동(floating) 엘레멘트| O | | _____ 설명 목적 외에는| D | m | | | 다른 목적이 없다.| Y | a | | IMG | 유동 엘레멘트는 모체| | r | | | 엘레멘트 쪽으로| m | g | |_____| 마진(margin)들,| a | i | 테두리(border)들| r | n | 그리고 패딩(padding)을| g | | 유지하면서 이동하였다.| i | |인접 수직 마진들이 비유동(non-floating)| n | |블럭레벨(block-level) 엘레멘트들과의| | |사이에서 어떻게 붕괴되는가를 주시하라.</PRE>

'P' 엘레멘트의 마진이 유동(floating) 'IMG' 엘레멘트를 닫는다 점을 주시하라.

유동(floating) 엘레멘트들이 다른 엘레멘트들의 margin, border 그리고 padding 지역과 중복될 수 있는 2 가지 경우가 있다.

유동(floating) 엘레멘트가 음수 마진을 가질 때: 유동(floating) 엘레멘트들의 음수 마진들은 다른 블럭레벨(block-level) 엘레멘트들에 표현된다.
유동(floating) 엘레멘트가 안에 있는 엘레멘트보다 넓거나 높을 때

4.2 인라인(inline) 엘레멘트들

블럭레벨(block-level) 엘레멘트들로 양식화되지 않는 엘레멘트들은인라인(inline) 엘레멘트들이다. 인라인(inline) 엘레멘트는 라인 지역(space)을 다른 엘레멘트들과 공유할 수 있다. 다음 예제를 보라. <PRE><P>몇개의 <EM>강조된</EM> 단어들이<STRONG>나타난다</STRONG>.</P></PRE>

'P' 엘레멘트는 보통의 블럭레벨(block-level)이고, 'EM'과 'STRONG'는 인라인(inline) 엘레멘트들이다. 만일 'P' 엘레멘트가 모든 엘레멘트들을 한 줄에 양식화하기에 충분히 넓으면, 두개의 인라인(inline) 엘레멘트들이 한 줄에 오게 된다. <PRE>몇개의 강조된 단어들이 나타난다.</PRE>

만일 한 줄에 한 인라인(inline) 엘레멘트의 공간이 충분하지 않으면, 몇개의 박스(box)들로 나누게 된다. <PRE><P>몇개의 <EM>강조된 단어들이</EM> 여기에 나타난다.</P></PRE>

위 예제는 다음과 같이 양식화된다. <PRE>몇개의 강조된 단어들이 여기에 나타난다.</PRE>

만일 인라인(inline) 엘레멘트가 마진(margin)들, 테두리(border)들, 패딩(padding) 또는 첨부된 텍스트 장식들을 가지면, 이들은 엘레멘트가 깨져서(broken) 아무 효과도 없을 것이다. <PRE>---------- 몇개의|강조된 ---------- ----- 단어들이| 여기에 나타난다.-----</PRE>

위의 모양("figure")이 약간 찌그러 졌는데, 이는 ASCII 그래팩을 사용했기 때문이다. 항목 4.4 높이 계산 방식을 참조하라.

4.3 대체된(Replaced) 엘레멘트들

대체된(replaced) 엘레멘트는 하나의 그 엘레멘트가 지정하는 내용이 대체된(replaced) 엘레멘트이다. 예를 들어, HTML에서, 'IMG' 엘레멘트가 'SRC' 애트리뷰트가 지시하는 이미지로 대체된다(replaced). 대체된(replaced) 엘레멘트들은 그들 본연(intrinsic)의 규격(dimension)을 갖는다고 가정할 수 있다. 만일 너비('width') 속성값이 'auto'이면, 본연(intrinsic)의 너비를 그 엘레멘트의 너비로 사용한다. 만일 스타일쉬트에 지정한 그 값이 'auto'가 아니면, 이 값이 사용고, 그 대체된(replaced) 엘레멘트는 이에 따라 재싸이징(resize)된다. 재싸이징(resize) 방법은 메디아에 따라 다르다. 높이('height') 속성은 다음과 같은 방식으로 사용된다.

대체된(replaced) 엘레멘트들은 블럭레벨(block-level) 이나 인라인(inline)이 될 수 있다.

4.4 줄의 높이

모든 엘레멘트들은 줄높이('line-height') 속성은 갖느데, 이는 원칙적으로, 택스트의 총 높이를 준다. 공간이 택스트의 상부와 하부에 추가되어 줄높이를 현성한다. 예를 들어, 만일 텍스트가 12pt 높이이고 줄높이('line-height')가 '14pt'로 설정되면, 줄에 2pt의 공백이 상부에 1pt, 하부에 1pt가 추가된다. 빈 엘레멘트들은 내용을 가지고 있는 엘레멘트들과 꼭 같은 계산으로 영향을 준다.

글자크기(font size)와 줄높이('line-height')의 차이는 선행(leading)이라 불리운다. 선행(leading)의 반을 선행의 반(half-leading)이라 부른다. 양식화 이후에 각 줄은 사각형 줄박스(line-box)를 형성한다.

만일 택스트를 갖는 줄에 다른 줄높이('line-height') 값이있으면(줄에 다른 인라인(inline) 엘레멘트들이 있어서), 이들 각 부분들은 각각의 선행의 반(half-leading)을 아래, 위에 갖는다. 줄박스(line-box)의 높이는 가장 높은 부분의 맨위에서 가장 낮은 부분의 맨아래까지의 거리가 된다. 맨위와 맨아래는 반드시 가장 키가 큰 엘레멘트에 상응하는 것이 아님을 주시하라. 왜냐하면 엘레멘트들은 수직정렬('vertical-align') 속성(property)으로 수직적으로 배치되기 때문이다. 문단(paragraph)을 구성하기 위하여 각 줄박스(line-box)들은 전 줄의 바로 밑에 차곡 차곡 쌓여진다.

대체 안된(non-replaced) 인라인(inline) 엘레멘트들 위와 아래 어떤 패딩(padding), 테두리(border) 또는 마진(margin)은 줄높이에 영향을 주지 않는다 점에 주의하라. 다른 말로 줄높이('line-height')가 선택된 패딩이나 테두리를 위해 너무 작으면, 이 것들은 다른 줄들의 텍스트에 넘쳐 중복(overlap)된다.

줄에 있는 대체된(replaced) 엘레멘트들(예를 들어 이미지들)은 줄박스(line-box)를 크게 만들 수 있다. 만일 대체된(replaced) 엘레멘트의 맨위(top), 이를테면, 모든 그의 패딩(padding), 태두리(border), 마진(margin)을 포함하여, 가장 키가 큰 텍스트 맨위보다 높거나, 가장 낮은 맨아래 보다 낮을 수 있기 때문이다.

보통의 경우, 전 문단에 하나의 줄높이('line-height') 값 만 가지고 있는 경우, 그리고 키 큰 이미지들이 없는 경우, 위의 정의가 그대로 적용되어 후속 줄들의 기초라인(baseline)들이 정확히 줄높이('line-height') 만큼씩 떨어지는 것이 확실하다. 이는 예를 들어 표(table)에서 텍스트의 컬럼(column)들에서 다른 글자들 정렬(align)되는데 중요하다.

이는 두 인접 라인들에 있는 텍스트들이 서로 중복되는 것을 제외하지 않는다 점에 주의하라. 줄높이('line-height')는 텍스트 높이보다 작을 수 있는데, 이런 경우 선행(leading)은 음수가 된다. 이것이 텍스트가 모두 대문자이어 기준선 밑으로 튀어나오는 것이 없슴이 확실할 때 줄들이 서로 가깝게 나오게 할 때, 유용하다.

4.5 화면

화면은 표면에 문서들이 표현되는 사용도구의 한 부분이다. 화면에 해당하는 문서의 구조적 엘레멘트는 없다. 이는 문서의 양식화에 두가지 과제를 제공한다.

어디서 부터 화면의 크기(dimension)를 산정할 것인가 ?
문서가 전 화면을 커버(cover)하지 못 할 때, 어떻게 그 지역을 표현할 것인가 ?

첫번째 문제에 대한 합당한 대답은 최초의 화면의 너비는 윈도우 창 크기이다. 그러나 CSS1은 이 문제를 사용도구가 결정하도록 남겨두었다. 이 또한 사용도구가 창을 재싸이징(resize)할 때 화면의 너비를 변경하는 것을 기대하는 것이 합리적이다. 그러나 이 또한 CSS1 범위 밖이다.

HTML 표현(extension)들은 두번째 과제에 중점을 주었다. 'BODY' 엘레멘트에 설정하는 배경(background) 애트리뷰트들는 전체 화면에 배경을 깐다. 설계자의 기대를 지원하기 위하여, CSS1는 화면의 배경(background)을 찾기 위하여 특수 명령(rule)을 소개하였다.

만일 'HTML' 엘레멘트의 배경('background') 값이 투명('transparent')과 다르면 그것을 사용하고, 아니면 'BODY' 엘레멘트의 배경('background') 값을 사용한다. 만일 그 결과 값이 투명('transparent')이면, 표현은 정의되지 않은 것이다.

이 명령은 아래와 같은 사용을 허용한다. <PRE><HTML STYLE="background: url(http://style.com/marble.png)"><BODY STYLE="background: red"></PRE>

위의 예제에서, 화면은 대리석("marble") 이미지로 배경이 된다. 'BODY' 엘레멘트의 배경색은 전체 화면을 덮을 수도 있고 그렇지 않을 수도 있지만 붉은 색이다.

화면 지정에 대한 다른 방법이 유용하게 될 때까지는, 화면 속성들을 'BODY' 엘레멘트에 설정하는 것을 추천한다.

4.6 'BR' 엘레멘트들

현재의 CSS1 속성들과 그 값들은 'BR' 엘레멘트의 기능을 설명할 수 없다. HTML에서, 'BR' 엘레멘트는 단어사이에서 줄바꿈(line break)을 지정한다. 실제, 이 엘레멘트는 줄바꿈(line break)에 의해 대체된(replaced) 것이다. 향후 CSS 버전에서는 추가(added)와 대체된(replaced) 내용을 다루게 된다. 그러나 CSS1 기준 양식화에서는 'BR'를 특별히 취급하여야 한다.

5 CSS1 속성들

스타일쉬트(style sheet)들은 스타일(style) 속성들의 값을 설정하므로서 문서들의 표현에 영향을 준다. 이 장에서는 CSS1의 스타일(style) 속성들의 정의된 목록과 그에 해당하는 가능한 값의 목록을 다룬다.

5.1 속성값에 대한 주기

아래 텍스트는, 각 속성에 대한 허용된 값의 목록과 아래와 같이 문법을 기재하였다.

값: N | NW | NE
값: [ <길이> | thick | thin ]{1,4}
값: [<family-name>, ]* <family-name>
값: <url>? <color> [ / <color> ]?
값: <url> || <color>

"<"와 ">"사이의 단어들은 값의 타입(type)을 제공한다.
가장 일반적인 타입들은 <길이>, <백분율>, <url>, <수치>와 <color>이며, 이들은 항목 6 단위에 기술 되었다.
좀 더 전문화된 타입들(예를 들어 <font-family>와 <border-style>)은 해당 속성(property)에 지정하였다.
다른 단어들은 키워드(keyword)들인데, 따옴표 없는 글자로 표시되었다.
슬래쉬(/) 와 컴마(,) 또한 글자로 표시되었다.
여러가지 나란히 된 수단은 그들 모든 것이 그 순서로 나와야 만 하는 것이다.
그들 중 하나가 나타나야 하는 선택적 항목은 바(|)로 구분하였다.
이중 바(A || B)는 A 또는 B 또는 둘 다, 명시된 순서로, 나타나야 하는 것을 의미한다.
괄호들([])은 구룹으로 묶기한 것이다.
나란히 나온 것은 이중 바들 보다 우선하고, 이중 바들은 다른 바보다 우선한다.
따라서 "a b | c || d e"는 "[ a b ] | [ c || [ d e ]]"와 같다.

각 타입(type), 키워드(keyword), 또는 괄호 안의 구룹은 다음과 같은 것들 중 하나의 수정자(modifier)가 따라 나올 수 있다.

별표 (*)는 앞의 타입(type), 단어(word) 또는 구룹이 0번 혹은 여러번 나올 수 있슴을 나타낸다.
더하기표(+)는 앞의 타입(type), 단어(word) 또는 구룹이 한번이상 나옴을 나타낸다.
물음표(?)는 앞의 타입(type), 단어(word) 또는 구룹이 선택적임을 나타낸다.
괄호 안 수치들({A,B})의 짝은 앞의 타입(type), 단어(word) 또는 구룹이 최소 A번 최대 B번 반복 됨을 나타낸다.

5.2 글자(font) 속성들

글자(font) 속성들을 설정하는 것은 스타일쉬트 사용들 중 가장 보편적인 것이다. 불행햐게도, 잘 정의된 세계 공통적으로 수용되는 글꼴들의 분류가 없다는 것이다. 한가지 글꼴 가족(font family)에 적용되는 것이 다른것에서는 적용되지 않을 수 있다. 예를 들어 'italic'은 일반적인 기울어진 글자를 위하여 사용되나, 기울어진 글자들이 또한 Oblique, Slanted, Incline, Cursive 또는 Kursiv등으로 표시되기도 한다. 따라서 특정 글꼴(font) 선택 속성들로 특정 font를 지정하는 것이 간단치 않다.

CSS1는 그 속성들 글꼴들('font-family'), 글꼴 스타일('font-style'), 글꼴 변화('font-variant'), 글꼴 굵기('font-weight'), 글꼴 크기('font-size'), 'font'를 정의하고 있다.

5.2.1 글자(font) 맞추기

글자(font) 속성들의 세계 공통적으로 수용되는 글꼴들의 분류가 없기 때문에, 글꼴(font face)들에 속성들을 맞추는(matching) 것을 주의 깊게 하여야 한다. 그 속성들은 그 마춤 과정의 결과들이 가능한 한 여러 사용도구들(같은 글꼴이 같이 표현됨을 가정하면서) 간에 일정하게 할 수 있도록 잘 정의된 순서로 맞춰줘야 한다.

사용도구는 사용도구가 알고 있는 CSS1에 상응하는 모든 글자(font)들의 속성들의 데이터베이스를 만들고 접속한다. 사용도구는, 그 것이 지역적(locally)으로 설치(install)되었기 때문에, 혹은, 이전에 웹으로 부터 다운로드 받았가 때문에, 글자를 알고 있을 수 있다. 만일 두가지 글자가 꼭 같은 속성들을 가지면 하나는 무시한다.
주어진 엘레멘트에서 그리고 그 엘레멘트의 각 속성은, 사용도구는 그 엘레멘트에 적용할 수 있는 글자 속성들을 조합한다(assemble). 완전한 속성들의 세트(set)를 사용하여, 사용도구들은 그 글꼴들('font-family') 속성을 임시적인 글꼴(font family)로 선택하여 사용한다. 나머지 속성들은 각 속성(property)에 설정된 마춤(matching) 기준(criteria)에 따라 그 family에 대하여 검정한다. 만일 이 맞춤이 모든 나머지 속성들에 맞으면, 그것이 주어진 엘레멘트의 맞는 글꼴(font face)이 된다.
만일 글꼴들('font-family')들 중에 맞는 글꼴(font face)이 없으면, 두번째 단계로 진행한다. 만일 다음 가능한(alternative) 글꼴들('font-family')들 중에 맞는 글꼴이 있는가의 두번째 단계를 반복한다.
만일 맞는 글꼴이 있으나, 현재의 글자를 표현할 수 없고, 추가적인 가능한 글꼴이 있으면, 다음 글꼴로 두번째 단계를 반복한다. 부록 C 글꼴와 글자 엔코딩을 참조하라.
만일 두번째 단계에서 맞는 글꼴이 발견되지 않으면, 사용도구에 따른 디폴트 글꼴들('font-family')을 사용하여 두번째 단계를 반복하여 디폴트 글꼴 중에서 가장 잘 맞는 것을 찾기위하여 반복한다.

(위의 기능이 CSS1 속성들의 각 글자마다 재방문을 회피하기 위하여 적정화(optimized)될 수 있다.)

위 두번째 속성 맞춤(matching) 과정은 다음과 같다.

글꼴 스타일('font-style')이 제일 먼저 시도된다. 사용도구의 글꼴(font) 데이터베이스에서 CSS 키워드(keyword) 'italic' (선호 됨) 또는 'oblique'로 라벨된 글꼴이 있으면 'italic'이 만족스러워 진다. 아니면 그 값들 꼭 맞는 것이 찾아져야 하고 그렇지 않으면 font-style 실패가 된다.
다음 글꼴 변화('font-variant')가 시도된다. 'normal'을 'small-caps'로 라벨되지않는 글꼴과 맞춘다. 'small-caps'을 'small-caps'로 라벨된 글꼴과 맞춘다 matches(1). (2)는 small caps의 합성된(synthesized) 글꼴이다. 또는 (3)는 모든 소문자들이 대문자로 대체된(replaced) 글꼴이다. small-caps 글꼴은 정상 글꼴의 대문자들로 부터 전기적으로 비례적으로 합성(synthesized)할 수 있다.
다음은 글꼴 굵기('font-weight')를 점검한다. 이는 실패하지 않는다.(아래 글꼴 굵기('font-weight')를 참조하라)
글꼴 크기('font-size')는 사용도구에 따른 마진(margin)의 허용 범위(tolerance)에 맞춘다. (전형적으로, 크기(size)들을 비례적으로 변화시키는데(scale)는 가장 가까운 픽셀(pixel)로 반올림한다. 비트 단위로 구성된(bitmapped) 글꼴은 20%까지 크게 할 수 있다.) 다른 내용들, 예를 들어 'em'등 다른 속성들에서 값은 그 것이 사용하는 글꼴 크기('font-size') 값에 기초하고, 지정된 값으로 하지 않는다.

5.2.2 글꼴들('font-family')

값: [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>]
최초값:사용도구에 따라 다름
적용: 모든 엘레멘트들
전달: 전달 됨
백분율 값들: 없슴

이 값은 글꼴 가족(font family name) 그리고/또는 일반 글꼴(generic family name)의 적용 우선순위를 열거한 목록이다. 다른 CSS1 속성들과는 달리, 그 값은 컴마로 분리하고, 이는 서로 대체(alternative)한다는 것을 나타낸다. <PRE>BODY {font-family: gill, helvetica, sans-serif}</PRE>

두가지의 타입(type)들의 목록 값들이 있다.

<family-name>

선택된 글꼴들의 이름이다. 마지막 예제에서, "gill"과 "helvetica"는 긁꼴들(font family)이다.

<generic-family>

위의 예제에서, 마지막 값은 일반 글꼴(generic family) name이다. 다음 일반 글꼴(generic family)들이 정의 되었다.

'serif' (예를 들어 Times)
'sans-serif' (예를 들어 Helvetica)
'cursive' (예를 들어 Zapf-Chancery)
'fantasy' (예를 들어 Western)
'monospace' (예를 들어 Courier)

스타일쉬트는 설계자는 일반 글꼴(generic font family)을 마지막 대체(alternative) 글꼴로 제시하도록 추천한다.

글꼴 이름에 공백이 있으면 반드시 따옴표로 묶어야 한다. <PRE>BODY { font-family: "new century schoolbook", serif }<BODY STYLE="font-family: 'My own font', fantasy"></PRE>

만일 따옴표가 생략되면, 글꼴 이름의 앞과 뒤에나오는 공간을 무시고, 하나이상의 빈 공간은 하나의 빈 공간으로 간주된다.

font-family 표현 예제

5.2.3 글꼴 스타일('font-style')

값: normal | italic | oblique
최초값: normal
적용: 모든 엘레멘트들
전달: 전달 됨
백분율 값들: 없슴

글꼴 스타일('font-style') 속성은 글꼴(font family) 안에서 normal(때로는 "roman" 또는 "upright"로 불리운다), 'italic'과 'oblique' 중에서 선택한다.

값 'normal'은 사용도구의 글꼴 데이터베이스에서 'normal'로 분류된 글자를 선택한다. 'oblique'는 'oblique'로 라벨된 글꼴을, 'italic'은 'italic'으로 라벨된 글꼴을 찾으며 없으면 'oblique'로 라벨된 것을 찾는다.

사용도구의 글꼴 데이터베이스에서 'oblique'로 라벨된 글꼴은 실제적으로 정상 글자를 전자적으로 기우려서 생성할 수 있다.

Oblique, Slanted 또는 Incline으로 이름지워진 글꼴들는 사용도구의 글꼴 데이터베이스에서 전형적으로 'Ioblique'로 라벨된다. Italic, Cursive 또는 Kursiv로 이름 지워 진 글꼴들은 전형적으로 'italic'으로 라벨된다. <PRE>H1, H2, H3 { font-style: italic }H1 EM { font-style: normal }</PRE>

위의 예제에서, 'H1' 안의 강조된 텍스트는 보통 글꼴로 나타 날 것이다.

5.2.4 글꼴 변화('font-variant')

값: normal | small-caps
최초값: normal
적용: 모든 엘레멘트들
전달: 전달 됨
백분율 값들: 없슴

글꼴 안에서 다른 변형은 small-caps이다. small-caps 글꼴에서 소문자들은 대문자 비슷하게 나타난다. 그러나 작은 글꼴 크기에서는 약간 다른 비율들을 갖는다. 글꼴 변화('font-variant') 속성은 그 글꼴를 선택한다.

'normal' 값은 small-caps 글꼴을 선택하지 않고, 'small-caps'은 small-caps 글꼴을 선택한다. small-caps가 정상 글꼴로 부터 소문자를 대문자로 비율적(scale)으로 변환하여 만드는 것을 CSS1에서 수용(acceptable)한다. 그러나 필요한 것은 아니다. 마지막으로, 대문자들이 small-caps 글꼴을 위하여 사용될 수 있다.

다음 예제는 'H3' 엘레멘트 안에 small-caps로, 강조된 글자를 기울어진 oblique small-caps로 나타난다. <PRE>H3 { font-variant: small-caps }EM { font-style: oblique }</PRE>

글꼴 안에 old-style numerals, small-caps numerals, condensed 또는 expanded letters, 등 다른 종류의 변종(variant)들이 더 있을 수 있다. CSS1에는 이들을 선택하기 위한 속성들이 없다.

CSS1 핵심: 이 속성이 텍스트를 대문자로 변환을 설명한 바와 같이, 이와 같은 텍스트 변환('text-transform')의 적용이 고려된다.

5.2.5 글꼴 굵기('font-weight')

값: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
최초값: normal
적용: 모든 엘레멘트들
전달: 전달 됨
백분율 값들: 없슴

글꼴 굵기('font-weight') 속성으 글꼴의 굵기를 선택한다. '100'에서 '900'의 그 값들은 순서대로 각 수치는 굵기를 지정하는데 뒤의 것이 앞의 것보다 더 어둡다. 키워드(keyword) 'normal'은 값 '400'에 해당하며, 'bold'는 값 '700'과 같다. 키워드(keyword) 'normal'과 'bold'는 글꼴 이름들과 수치 값과 자주 혼동되므로 위의 9 단계 값의 목록으로 하였다. <PRE>P { font-weight: normal } /* 400 */H1 { font-weight: 700 } /* bold */</PRE>

'bolder' 와 'lighter' 값은 글꼴 굵기(weight)를 모체로 부터 전달된(inherited) 값에 상대적으로 선택한다. <PRE>STRONG { font-weight: bolder }</PRE>

하위(child) 엘레멘트들은 결과 굵기(weight)를 전달한다. 그러나 키워드 값을 전달하는 것은 아니다.

글꼴 데이터들은 전형적으로 하나이상의 속성들을 갖는데, 글꼴의 두께("weight")를 설명하도록 주어진 이름들의 값을 갖는다. 이들 두께(weight) 이름들은 세계 공통적으로 수용되는 것은 없다. 그 일차적인 임무는한 글꼴 안에서 다른 검은 정도로 글꼴를 구별하는 것이다. 여러 글꼴들사이에서는 대단히 변이가 많다. 예를 들어 굵은(bold) 것으로 생각되는 글꼴이, 그 디자인 안에서 그 글꼴의 보통("normal")이 얼마나 검은가에 따라, Regular, Roman, Book, Medium, Semi-, DemiBold, Bold, 또는 Black로 지정된다. 이름들의 사용에 표준이 없으므로, 이 굵기(weight) 속성값들은 CSS1에서 수치 값으로 주어졌다. 여기서 값 '400' (='normal')이 그 글꼴의 보통("normal") 글꼴에 해당하는 것이다. 이 굵기(weight) 이름은 그 글꼴에서 전형적으로 Book, Regular, Roman, Normal 또는 때로는 Medium과 같이 주어진다.

그 글꼴에서 다른 굵기들과의 연관은 그 수치 굵기(weight)의 값들의 검은 정도의 순서를 유지하는 것 만을 목표로 하였다. 그러나 다음 체계는 전형적인 경우에 어떻게 지정하는가를 보여준다.

만일 글꼴이 이미 9 단계(예를 들어 OpenType에서와 같이) 수치 값들을 사용하면, 그 글꼴의 두께(weight)는 직접 그에 의해 표현하여야 한다.
만일 글꼴에 Medium으로 라벨된 것과 Book, Regular, Roman 또는 Normal로 라벨된 것이 있으면, 그 Medium은 일반적으로 값 '500'으로 할당한다.
글꼴이 "Bold"로 라벨된 것은 자주 그 굵기(weight) 값 '700'에 상응한다.
만일 글꼴 안에서 9 단계 보다 적은 단계로 되어있으면, 빈 것("holes")을 채우는 디폴트 기능은 다음에 따른다. 만일 '500'이 지정되지 않았으면, 이것은 같은 글꼴에서 '400'으로 설정한다. 만일 그 값들이 '600', '700', '800' 또는 '900' 중 어느 것도 지정되지 않았으면, 같은 글꼴에서 다음번 검은 키워드(keyword)를 지정한다. 그 중 어느 것이 지정되어 있지 않으면, 그 다음 엷은(lighter) 것이 된다. '300', '200' 또는 '100' 값이 지정되지 않았으면, 그 다음 엷은(lighter) 것의 키워드(keyword)를 지정한다. 지정되었으면 그 다음 검은 것이 지정된다.

다음 두가지 예제들은 이 과정을 설명한다. "예제1" 글꼴에서 4 가지 굵기 단계를 가정한다. 엷은 것에서 검은(어두운) 것으로의 순서는 Regular, Medium, Bold, Heavy이다. "예제2" 글꼴에서 6 가지 굵기 단계를 가정한다. 여기서는 Book, Medium, Bold, Heavy, Black, ExtraBlack 순서가 된다. 두번째 예제에서 "예제2 ExtraBlack"를 지정하지 않기로 결정하였음을 주시하라. <PRE>가능한 글꼴 |지정 | 기타------------------+-----+-------------------"예제1 Regular" | 400 | 100, 200, 300"예제1 Medium" | 500 |"예제1 Bold" | 700 | 600"예제1 Heavy" | 800 | 900가능한 글꼴 |지정 | 기타------------------+-----+-------------------"예제2 Book" | 400 | 100, 200, 300"예제2 Medium" | 500 |"예제2 Bold" | 700 | 600"예제2 Heavy" | 800 |"예제2 Black" | 900 |"예제2 ExtraBlack"|none |</PRE>

상대 키워드(keyword) 'bolder'와 'lighter'이 더 검은(darken, 어두운) 또는 더 엷은(lighten) 표면으로 그 글꼴 안에서 지정하는 것을 의도하였으므로, 또한 한 글꼴이 이 모든 굵기의 기호적 값들을 가지고 있지 않을 수 있기 때문에, 'bolder'에 마춤은 사용자에게 그 글꼴 안에서 가능한 그 다음 검은 표면을 사용하게 하였다. 그리고 'lighter'로 그 글꼴 안에서 그 다음 엷은 표면과 맞추게(matching) 하였다. 상대적(relative)인 키워드(keyword) 'bolder'와 'lighter'의 의미는 정확하게 다음과 같다.

'bolder'는 전달된(inherited) 값보다 한 단계 더 검은 다음 번 두께(weight)를 선택한다. 만일 그런 두께(weight)가 없으면, 단순히 글꼴의 변동없이 다음 번 검은 수치 값을 지정한다. 전달된 값이 '900'인 경우에는 결과도 '900'이다.
'lighter'도 이와 유사하다. 그러나 반대 방향으로 작용한다. 전달된(inherited) 값보다 한 단계 더 엷은 다음 번 두께(weight)를 선택한다. 만일 그런 두께(weight)가 없으면, 단순히 글꼴의 변동없이 다음 번 검은 수치 값을 지정한다.

각 글꼴 굵기('font-weight') 값이 더 검은 표면를 표현한다는 보장은 없다. 예를 들어, 일부 글꼴들은 정상(normal)과 굵은(bold) 표면 만을 갖는다. 다른 것들은 8 단계 다른 표면을 두께(weight)들은 갖는다. 사용도구가 글꼴 안에서 어떤 두께(weight) 값을 어떻게 글꼴 표면으로 표현할 것이라는 보증은 없다. 보증은 단지, 더 엷은 값들로 주어진 표면보다, 주어진 값의 표면이 덜 검지 않다는 것이다.

5.2.6 글꼴 크기('font-size')

값: <absolute-size> | <relative-size> | <길이> | <백분율>
최초값: medium
적용: 모든 엘레멘트들
전달: 전달 됨
백분율 값들: 모체 엘레멘트의 글꼴 크기(font size)에 대해

절대 크기(<absolute-size>): 키워드(keyword) <absolute-size>는 사용도구에 의하여 계산되고 유지되는 글꼴 크기 표(table)의 색인이다. 가능한 값은: [ xx-small | x-small | small | medium | large | x-large | xx-large ]이다. 컴퓨터 화면에서 인접 색인들 가운데 1.5 배율(scaling factor)이 암시된다. 만일 보통('medium') 크기가 10pt이면 'large' 글꼴는 15pt가 된다는 것이다. 다른 메디아(media)에서는 다른 배율(scaling factor)이 될 수 있다. 또한 사용도구는 그 표(table)를 계산하는데 가능한 글꼴들과 그들의 품질을 고려하여야 한다. 그 표는 글꼴에 따라 다를 수 있다.
상대 크기(<relative-size>): 키워드(keyword) <relative-size>는 모체 엘레멘트의 글꼴 크기와 글꼴 크기 표(table)의 상대적인 관계이다. 가능한 값은: [ larger | smaller ]이다. 예를 들어, 만일 모체 엘레멘트가 글꼴 크기 'medium'을 가지면, 'larger'는 현재 엘레멘트의 글꼴 크기를 'large'로 만들 것이다. 만일 모체 엘레멘트의 크기가 표(table)의 글자들의 크기와 비슷하지 않으면, 사용도구가 글자들 간의 비율 또는 가장 가까운 것을 택하는 것은 자유이다. 사용도구는 만일 수치 값이 키워드(keyword) 범위를 벋어나면, 추가적으로 표의 값을 계산해야 할 수 있다.

엘레멘트의 글꼴 크기를 계산하는데 길이와 백분율 값들은 글꼴 크기 표(table)에서 고려하지 않는다.

음수는 허용되지 않는다.

모든 다른 속성들에서, 'em' 과 'ex' 길이 값들은 현재 엘레멘트의 글꼴 크기를 참조한다. 그 글꼴 크기('font-size') 속성(property)에서, 이들 길이 단위들은 모체 엘레멘트의 글꼴 크기를 참조한다.

문장에 따라서 적용될 때 지정한 크기를 다시 해석할 수 있슴을 주지하라. 예를 들어, 비디오(VR)에서 글꼴는 틀어짐을 고려하여 다른 글꼴 크기를 가질 수 있다.

글꼴 크기의 예제 <PRE>P { font-size: 12pt; }BLOCKQUOTE { font-size: larger }EM { font-size: 150% }EM { font-size: 1.5em }</PRE>

만일 암시된 배율(scaling factor) 1.5를 사용한다면 뒤의 3 가지는 모두 같다.

5.2.7 글꼴('font')

값: [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>
최초값: 약식속성들에는 정의되지 않음
적용: 모든 엘레멘트들
전달: 전달 됨
백분율 값들: <font-size>와 <line-height>에 허용됨

글꼴('font') 속성은 같은 스타일쉬트에서 글꼴 스타일('font-style'), 글꼴 변화('font-variant'), 글꼴 굵기('font-weight'), 글꼴 크기('font-size'), 줄높이('line-height'), 글꼴들('font-family')를 설정하기 위한 약식속성이다. 이 속성의 문법은 관계된 글꼴들의 복수 속성들을 지정하는 전통적인 문구에 기초한다.

가능한 값과 최초값을 지정하기 위하여 이전에 정의된 속성들을 참조하라. 값이 주어지지 않는 속성들은 최초값으로 지정된다. <PRE>P { font: 12pt/14pt sans-serif }P { font: 80% sans-serif }P { font: x-large/110% "new century schoolbook", serif }P { font: bold italic large Palatino, serif }P { font: normal small-caps 120%/120% fantasy }</PRE>

두번째 명령(rule)에서, 글꼴 크기(font size) 백분율 값 ('80%')은 모체 엘레멘트의 글꼴 크기를 참조한다. 세번째 명령에서, 줄높이 백분율은 그 엘레멘트 자체의 글꼴 크기를 참조한다.

앞 3 개의 명령에서, 글꼴 스타일('font-style'), 글꼴 변화('font-variant')와 글꼴 굵기('font-weight')는 명시적으로 지정하지 않았다. 이는 모든 3 개의 예제에서 그들의 최초값 ('normal')이 설정되어 있다는 의미이다. 네번째 명령(rule)에서 글꼴 굵기('font-weight')가 'bold'로 설정되었는데, 그 글꼴 스타일('font-style')을 'italic'과 글꼴 변화('font-variant')를 'normal'로 명시적으로 설정하였다.

다섯번째 예제는 글꼴 변화('font-variant')를 ('small-caps')로 설정하였는데, 그 글꼴 크기('font-size')는 모체 글꼴의 120%, 줄높이('line-height')는 글꼴 크기의 120%, 그리고 글꼴들('font-family')는 'fantasy'이다. 키워드(keyword) 'normal'이 나머지 두가지 속성들, 글꼴 스타일('font-style')과 글꼴 굵기('font-weight')에 설정된다.

5.3 색상(color)과 엘레멘트의 배경(background) 속성

이들 속성들은 색상(자주 foreground color로 불리운다)과 배경(background:내용이 표현되는 표면)을 지정한다. 배경에 배경색 그리고/또는 배경 이미지를 설정할 수 있다. 또한 그 이미지의 위치, 반복, 고정되는지 굴리는지(scroll)를 그 화면에 상대적으로 설정할 수 있다.

색상('color') 속성은 일반적으로 전달(inherit)되며, 배경(background) 속성들은 전달되지 않는다. 그러나 그 모체 엘레멘트의 배경(background)은 배경색('background-color')에 최초값 투명('transparent')이 설정되어 있기 때문에 디폴트로 전체에 나타난다.

5.3.1 색상('color')

값: 색상(<color>)
최초값:사용도구에 따라 다름
적용: 모든 엘레멘트들
전달: 전달 됨
백분율 값들: 없슴

이 속성은 엘레멘트의 텍스트 색상(자주 foreground color 로 불리움)을 지정한다. 여러가지로 적색을 지정할 수 있다. <PRE>EM { color: red } /* 자연 언어 */EM { color: rgb(255,0,0) } /* RGB 범위 0-255 */</PRE>

항목 6.3 가능한 색상값들을 참조하라. HTML 색상표도 참조하라.

5.3.2 배경색('background-color')

값: <color> | transparent
최초값: transparent(투명)
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 없슴

이 속성은 엘레멘트의 배경색(background color)을 지정한다. <PRE>H1 { background-color: #F00 }</PRE>

5.3.3 배경 이미지('background-image')

값: <url> | none
최초값: none
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 없슴

이 속성은 엘레멘트의 배경 이미지(background image)를 설정한다. 배경 이미지가 설정되면, 그 이미지가 없을 때를 대비하여 표현될 배경색을 동시에 지정하여야 한다. 이미지가 유효하면 배경색 위에 표현된다. <PRE>BODY { background-image: url(marble.gif) }P { background-image: none }</PRE>

5.3.4 배경 반복('background-repeat')

값: repeat | repeat-x | repeat-y | no-repeat
최초값: repeat(반복)
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 없슴

만일 배경 이미지가 지정되면, 배경 반복('background-repeat')의 값은 어떻게 그 이미지를 반복할 것인가 혹은 반복하지 않을 것인가를 지정한다.

값 'repeat'는 이미지가 수평, 수직 양 방향으로 반복되는 것을 의미한다. 값 'repeat-x' ('repeat-y')는 이미지가 수평(수직) 방향으로 반복되는 것으로 이미지가 한 방향으로 띠를 형성한다. 값 'no-repeat'로는 반복 없이 한번 만 표현된다. <PRE>BODY { background: red url(pendant.gif); background-repeat: repeat-y;}</PRE>

위의 예제에서, 이미지는 수직적으로 반복된다.

5.3.5 배경 첨부('background-attachment')

값: scroll | fixed
최초값: scroll(굴림)
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 없슴

만일 배경 이미지가 지정되면, 배경 첨부('background-attachment') 값은 지정한다. 이미지를 화면에 고정시킬 것인가 내용에 따라 굴릴(scroll) 것인가를 지정한다. <PRE>BODY { background: red url(pendant.gif); background-repeat: repeat-y; background-attachment: fixed;}</PRE>

CSS1 핵심: 사용도구들은 'fixed'를 'scroll'로 처리할 수 있다. 그러나, 제작자가 'fixed' 만을 지원하는 브라우저들에게 이미지를 제공할 수 있는 방법이 없으므로, 최소한 HTML과 BODY 엘레멘트들에서 바르게 'fixed'로 처리할 것을 추천한다. (항목 7 참조.)

5.3.6 배경 위치('background-position')

값: [<백분율> | <길이>]{1,2} | [top | center | bottom] || [left | center | right]
최초값: 0% 0%
적용: 블럭레벨(block-level)과 대체된(replaced) 엘레멘트들
전달: 안됨
백분율 값들: 그 엘레멘트 자체의 크기를 참조하라

만일 배경 이미지가 지정되면, 배경 위치('background-position') 값은 최초 위치를 지정한다.

값이 '0% 0%'이면, 이미지의 위 왼쪽 모퉁이가 그 엘레멘트의 내용이 들어가는 박스(box)의 위 왼쪽 모퉁이에 위치 한다 (말하자면, 그 padding, border 또는 margin에 의하여 둘려 쌓인 박스가 아님). 값 '100% 100%'는 이미지의 아래 오른쪽 모퉁이가 그 엘레멘트의 아래 오른쪽 모퉁이에 위치 시킨다. 값 '14% 84%'는 이미지의 가로 14% 아래로 84% 지점에 그 엘레멘트의 가로 14% 아래로 84% 지점을 위치시킨다.

값 '2cm 2cm'는 이미지의 왼쪽 맨 위 지점을 그 엘레멘트의 왼쪽 끝에서 오른쪽으로 2cm, 맨 위에서 아래로 2cm 지점에 위치시킨다.

만일 백분율 또는 길이 값이 하나 만 지정되면, 수평 지점 만 설정되고 수직 위치는 50%로 설정된다. 두 값이 설정될 때 수평 위치가 먼저 나온다. 예를 들어 '50% 2cm'와 같이 길이와 백분율 값의 조합도 가능하다. 위치 값의 음수도 허용된다.

배경 이미지의 위치를 지정하기 위하여 키워드(keyword) 값들을 사용할 수도 있다. 키워드는 백분율 값이나 길이 값과 조합할 수 없다. 가능한 키워드들과 그 해석은 다음과 같다.

'top left', 'left top' 모두 '0% 0%'와 같다.
'top', 'top center', 'center top' 모두 '50% 0%'와 같다.
'right top', 'top right' 모두 '100% 0%'와 같다.
'left', 'left center', 'center left' 모두 '0% 50%'와 같다.
'center', 'center center' 모두 '50% 50%'와 같다.
'right', 'right center', 'center right' 모두 '100% 50%'와 같다.
'bottom left', 'left bottom' 모두 '0% 100%'와 같다.
'bottom', 'bottom center', 'center bottom' 모두 '50% 100%'와 같다.
'bottom right', 'right bottom' 모두 '100% 100%'와 같다.

예제: <PRE>BODY { background: url(banner.jpeg) right top } /* 100% 0% */BODY { background: url(banner.jpeg) top center } /* 50% 0% */BODY { background: url(banner.jpeg) center } /* 50% 50% */BODY { background: url(banner.jpeg) bottom } /* 50% 100% */</PRE>

만일 배경 이미지가 그 화면에 대해 고정(fixed)되면(위 배경 첨부('background-attachment') 속성 참조), 그 이미지는 그 엘레멘트 대신 그 화면에 대해 위치한다. 예를 들어: <PRE>BODY { background-image: url(logo.png); background-attachment: fixed; background-position: 100% 100%;}</PRE>

위의 예제에서, 그 이미지는 그 화면의 오른쪽 맨 아래 위치한다.

5.3.7 배경('background')

값: <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>
최초값: 약식속성들에는 정의되지 않음
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: <background-position>에 허용됨

그 배경('background') 속성은 개별 배경 속성들, 말하자면, 배경색('background-color'), 배경 이미지('background-image'), 배경 반복('background-repeat'), 배경 첨부('background-attachment'), 배경 위치('background-position')을 한 곳에 지정하는 약식속성이다.

이 배경('background') 속성들의 가능한 값들은 개별 속성들의 모든 가능한 값들이다. <PRE>BODY { background: red }P { background: url(chess.png) gray 50% repeat fixed }</PRE>

이 배경('background') 속성은 항상 모든 개별 배경 속성들을 설정한다. 위 예제에서 첫번째 명령(rule)은 배경색('background-color') 값 만 갖고, 다른 개별 속성들은 그들의 최초값에 의하여 설정된다. 두번째 명령(rule)에는 모든 개별 속성들이 지정되었다.

5.4 텍스트(text) 속성들

5.4.1 단어 간격('word-spacing')

값: normal | <길이>
최초값: normal
적용: 모든 엘레멘트들
전달: 전달 됨
백분율 값들: 없슴

이 길이 단위는 단어 간격의 디폴트 공간에 추가하여 단어 간격의 공간을 지정한다. 값은 음수가 될 수 있으나, 적용에 따른 범위가 있을 수 있다. 사용도구는 정확한 간격 띄우기 기능을 선택하는데 방법은 자유이다. 단어 간격은 또한 정렬에 의하여 영향 받을 수 있다. 텍스트 정렬('text-align') 속성(property)값 참조. <PRE>H1 { word-spacing: 1em }</PRE>

여기서, 'H1' 엘레멘트들 안에서 단어 간격('word-spacing')은 '1em' 만큼 증가된다.

CSS1 핵심: 사용도구들은 단어 간격('word-spacing')의 어떤 값을 'normal'로 해석할 수 있다. (항목 7 참조.)

5.4.2 글자 간격('letter-spacing')

값: normal | <길이>
최초값: normal
적용: 모든 엘레멘트들
전달: 전달 됨
백분율 값들: 없슴

이 길이 단위는 글자 간격의 디폴트 공간에 추가하여 글자 간격의 공간을 지정한다. 값은 음수가 될 수 있으나, 적용에 따른 범위가 있을 수 있다. 사용도구는 정확한 간격 띄우기 기능을 선택하는데 방법은 자유이다. 글자 간격은 또한 정렬('align' 속성값)에 의하여 영향 받을 수 있다. <PRE>BLOCKQUOTE { letter-spacing: 0.1em }</PRE>

여기서 'BLOCKQUOTE' 엘레멘트들 안에서 각 글자의 글자 간격('letter-spacing')은 '0.1em' 만큼씩 증가된다.

값 'normal'로, 사용도구들은 글자들의 간격을 적당히 수정할 수 있다. 그러나 만일 글자 간격('letter-spacing')을 <길이> 값으로 명시하면 그렇지 않다. <PRE>BLOCKQUOTE { letter-spacing: 0 }BLOCKQUOTE { letter-spacing: 0cm }</PRE>

결과적인 글자 간격이 디폴트 간격과 같지 않으면 사용도구들은 그 것을 사용하지 말아야 한다.

CSS1 핵심: 사용도구들은 글자 간격('letter-spacing')의 어떤 값을 'normal'로 해석할 수 있다. (항목 7 참조.)

5.4.3 텍스트 장식('text-decoration')

값: none | [ underline || overline || line-through || blink ]
최초값: none
적용: 모든 엘레멘트들
전달: 안됨, 그러나 아래 설명을 보라
백분율 값들: 없슴

이 속성은 엘레멘트의 텍스트에 추가하는 장식(decoration)을 지정한다. 만일 이 엘레멘트가 텍스트를 가지고 있지 않으면(예를 들어 HTML에서 'IMG' 엘레멘트), 또는 이 것이 빈(empty) 엘레멘트(예를 들어 '<EM></EM>')이면, 이 속성은 아무 효과도 없다. 값 'blink'는 텍스트을 깜빡(blink)거리게 한다.

텍스트 장식을 위하여 색상이 필요하면, 'color' 속성값이 되어야 한다.

이 속성은 전달(inherit)되지 않는다. 그러나 엘레멘트들은 그 모체와 일치하여야 한다. 예를 들어, 만일 엘레멘트가 밑줄그어(underlined) 졌으면, 그 줄이 하위(child) 엘레멘트들로 확장되어야 한다. 밑줄의 색상은, 엘레멘트들이 다른 색상('color') 값을 가지고 있더라도 택스트 색상과 같다. <PRE>A:link, A:visited, A:active { text-decoration: underline }</PRE>

위 예제에서 'A' 엘레멘트들로서 'HREF' 애트리뷰트를 가진 모든 연결들 텍스트는 밑줄 쳐진다.

사용도구들은 키워드(keyword) 'blink'를 인식하여 하나, 깜빡이는 효과를 반드시 지원할 필요는 없다.

5.4.4 수직 정렬('vertical-align')

이 속성은 엘레멘트의 수직 위치에 영향을 준다. 키워드(keyword)가 설정되면 모체 엘레멘트에 상대적이다.

'baseline': 그 모체의 baseline으로 그 엘레멘트의 기초라인(baseline: 또는 그 엘레멘트가 baseline을 갖고 있지 않으면 맨아래( bottom) 정렬(align)한다.
'middle': 그 모체의 기초라인(baseline) 더하기 x-height의 반에 그 엘레멘트의 중심선을 수직으로 정렬한다(image에서 전형적).
'sub': 그 엘레멘트 아래첨자(subscript)
'super': 그 엘레멘트의 위첨자(superscript)
'text-top': 모체 엘레멘트의 글꼴 맨 위(top)에 그 엘레멘트의 맨 위에 정렬한다.
'text-bottom': 모체 엘레멘트의 글꼴 맨 아래(bottom)에 그 엘레멘트의 맨 위에 정렬한다.

다른 일단의 속성들은 그 엘레멘트의 일 부분인 양식화(formatted) 라인에 상대적이다.

'top': 그 줄에서 가장 키 큰(tallest) 엘레멘트를 그 엘레멘트의 맨 위(top)에 정렬한다.
'bottom': 그 줄에서 가장 낮은(lowest) 엘레멘트를 그 엘레멘트의 맨 아래(bottom)에 정렬한다.

'top'과 'bottom' 정렬은 사용하는데 있어서, 엘레멘트에 관련된 루프(loop) 형성하는데서, 해결하지 못하는 상황들이 발생할 수 있다.

백분율 값들은 그 엘레멘트 자체의 줄높이('line-height') 속성값을 참조한다. 이들은 엘레멘트의 기초라인(baseline)을, 그 모체의 기초라인에서부터, 지정한 양(amount) 만큼 끌어 올린다. 기초라인(baseline)이 없으면 바닥(bottom)라인에 적용한다. 음수값이 가능하다. 예를 들어, 값 '-100%'는 그 엘레멘트의 기초라인이 다음 줄의 텍스트가 와야하는 기초라인에서 끝나도록 그 엘레멘트를 낮춘다. 이것은 기초라인을 갖고 있지 않는 엘레멘트들(글자들 위치에서 사용되는 이미지들 등)의 수직 위치에 정밀한 제어를 허용한다.

향후 CSS 버전에서는 이 속성(property)값으로 <길이>가 허용될 것으로 기대된다.

5.4.5 텍스트 변환('text-transform')

값: capitalize | uppercase | lowercase | none
최초값: none
적용: 모든 엘레멘트들
전달: 전달 됨
백분율 값들: 없슴

'capitalize': 각 단어의 첫글자을 대문자(uppercase)로 바꿈
'uppercase': 엘레멘트의 모든 글자들을 대문자(uppercase)로 바꿈
'lowercase': 엘레멘트의 모든 글자들을 소문자(lowercase)로 바꿈
'none': 전달(inherit)된 값을 그 대로

실제적인 대소문자 변환은 인간언어에 따라 다르다. [4] 엘레멘트의 언어 찾기를 참조하라. HTML의 언어정보와 글자방향도 참조하라. <PRE>H1 { text-transform: uppercase }</PRE>

위의 예제에서 'H1' 엘레멘트들에서 텍스트을 대문자로 변환한다.

CSS1 핵심: 영어(Latin-1) 레파토리(repertoire)의 글자들이 아닌 경우와, 엘레멘트들이 언어들에서 그 변환이 Unicode [8]의 대소문자 변환 표(case-conversion table)에 의해 지정된 것과 다른 경우에, 사용도구들은 텍스트 변환('text-transform')을 처리하지 않고 무시할 수 있다.

5.4.6 텍스트 정렬('text-align')

값: left | right | center | justify
최초값:사용도구에 따라 다름
적용: 블럭레벨(block-level) 엘레멘트들
전달: 전달 됨
백분율 값들: 없슴

이 속성은 엘레멘트 안에서 텍스트가 어떻게 정렬(align)할 것인가를 지정한다. 실제적인 적용 기능은 사용도구와 인간언어에 따라 다르다.

예제: <PRE>DIV.center { text-align: center }</PRE>

텍스트 정렬('text-align')이 전달(inherit)되기 때문에, 'CLASS=center'를 갖고 있는 'DIV' 엘레멘트 안에 있는 모든 블럭레벨(block-level) 엘레멘트들 가운데(center) 위치한다. 정렬은 그 화면에 대한 것이 아니고, 그 엘레멘트의 너비(width)에 상대적인 것이다. 만일 'justify'가 지원되지 않으면, 사용도구는 대안을 제공할 것이다. 전형적으로 서구 언어에서 이것은 'left'가 된다.

CSS1 핵심: 그 엘레멘트의 디폴트 쓰는 방향이 왼쪽에서 오른쪽으로(left-to-right)인지 오른쪽에서 왼쪽으로(right-to-left)인지에 따라, 사용도구들은 'justify'를 'left' 또는 'right'로 취급할 수 있다.

5.4.7 텍스트 들여쓰기('text-indent')

값: <길이> | <백분율>
최초값: 0
적용: 블럭레벨(block-level) 엘레멘트들
전달: 전달 됨
백분율 값들: 모체 엘레멘트의 너비(width) 참조

이 속성은 양식화된 줄의 앞에 나타도록 들여쓰기(indent)를 지정한다. 텍스트 들여쓰기('text-indent')의 값은 음수가 될 수 있으나 적용에 따라 한계가 있을 수 있다. 들여쓰기는 HTML의 'BR'와 같은 줄바꿈과 같이 다른 것에 의하여 줄바꿈하는 엘레멘트의 중간에 삽입되는 것은 아니다.

예제: <PRE>P { text-indent: 3em }</PRE>

5.4.8 줄높이('line-height')

값: normal | <수치> | <길이> | <백분율>
최초값: normal
적용: 모든 엘레멘트들
전달: 전달 됨
백분율 값들: 그 엘레멘트 자체의 글꼴 크기(font size)에 상대적이다.

이 속성은 인접한 라인들의 기초라인(baseline)들 간의 거리를 지정한다.

수치 값이 지정되면, 그 줄높이는 현재 엘레멘트의 글꼴 트기(font size) 곱하기 수치 값이 된다. 이는 백분율 값과는 전달(inherit)에서 다르다. 수치 값이 지정되면, 하위(child) 엘레멘트들은, 해당 값이 전달되는 것이 아니고, 그 자체의 배율(factor)이 전달(inherit)된다. 백분율과 다른 단위들을 참조하라.

음수는 허용되지 않는다.

아래 예제에서 이 세가지는 같은 줄높이 결과를 준다. <PRE>DIV { line-height: 1.2; font-size: 10pt } /* 수치 */DIV { line-height: 1.2em; font-size: 10pt } /* 길이 */DIV { line-height: 120%; font-size: 10pt } /* 백분율 */</PRE>

값 'normal'은 줄높이('line-height')를 그 엘레멘트 글꼴의 합리적인 값을 설정한다. 사용도구들은 값 'normal'로 수치 범위 1.0과 1.2사이의 수치 설정을 암시한다.

어떻게 줄높이가 블럭레벨(block-level) 엘레멘트의 양식화에 영향하는가(항목 4.4)를 참조하라.

5.5 박스(box) 속성들

이 박스(box) 속성들은 엘레멘트들을 대표하는 박스들의 크기(size), circumference, 위치(position)를 지정한다. 양식화 모델(항목 4)에서 박스(box) 속성들의 사용 방법의 예를 참조하라.

margin 속성들은 엘레멘트의 마진을 설정한다. 다른 마진 속성들은 그 해당 면(side) 만을 설정하는데 반해, 이 'margin' 속성은 모든 4 면들을 위하여 마진(margin)들을 설정한다.

padding 속성들은 테두리(border)와 내용(content: 예를 들어, text 또는 image)사이에 얼마나 많은 공백을 삽입할 것인가를 지정한다. 다른 padding 속성들은 해당 면(side) 만을 설정하는데 반해, 패딩('padding') 속성은 모든 4 면의 padding들을 설정한다.

border 속성들은 엘레멘트의 테두리(border)들을 설저한다. 각 엘레멘트는 4개의 테두리들를 갖으며, 각 면(side)에 하나씩 갖고, 너비(width), 색상(color), 스타일(style)이 지정된다.

너비('width')와 높이('height') 속성들은 그 박스(box) 크기를 지정하며, 유동('float')과 'clear' 속성들이 엘레멘트들의 위치를 변경시킬 수 있다.

5.5.1 위쪽 마진('margin-top')

값: <길이> | <백분율> | auto
최초값: 0
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 가장 가까운 조상(ancestor) 블럭레벨(block-level)의 너비를 참조한다.

이 속성은 엘레멘트의 위쪽 마진(top margin)을 설정한다. <PRE>H1 { margin-top: 2em }</PRE>

음수가 허용되나 적용에 따라 한계가 있을 수 있다.

5.5.2 오른쪽 마진('margin-right')

이 속성은 엘레멘트의 오른쪽 마진을 설정한다. <PRE>H1 { margin-right: 12.3% }</PRE>

음수가 허용되나 적용에 따라 한계가 있을 수 있다.

5.5.3 아래쪽 마진('margin-bottom')

이 속성은 엘레멘트의 아래쪽 마진을 설정한다. <PRE>H1 { margin-bottom: 3px }</PRE>

음수가 허용되나 적용에 따라 한계가 있을 수 있다.

5.5.4 왼쪽 마진('margin-left')

이 속성은 엘레멘트의 왼쪽 마진을 설정한다. <PRE>H1 { margin-left: 2em }</PRE>

음수가 허용되나 적용에 따라 한계가 있을 수 있다.

5.5.5 마진('margin')

값: [ <길이> | <백분율> | auto ]{1,4}
최초값: 약식속성들에는 정의되지 않음
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 가장 가까운 조상(ancestor) 블럭레벨(block-level)의 너비를 참조한다.

'margin' 속성은 같은 스타일쉬트에서 위쪽 마진('margin-top'), 오른쪽 마진('margin-right'), 아래쪽 마진('margin-bottom'), 왼쪽 마진('margin-left')를 설정하는 약식속성이다.

만일 4 길이의 값들이 지정되면, 각 값은 top, right, bottom, left에 각각 적용된다. 하나의 값 만 지정되면 모든 면(side)들에 적용되고, 두 값이나 세 값들이 지정되면, 지정되지 않은 값은 반대편 면에서 택한다. <PRE>BODY { margin: 2em } /* 모든 마진(margin)들을 2em로 */BODY { margin: 1em 2em } /* top & bottom=1em, right & left = 2em */BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */</PRE>

위의 마지막 예제는 아래 예제와 같다. <PRE>BODY { margin-top: 1em; margin-right: 2em; margin-bottom: 3em; margin-left: 2em; /* 반대편(right) 면에서 복사 */}</PRE>

음수가 허용되나 적용에 따라 한계가 있을 수 있다.

5.5.6 위쪽 패딩('padding-top')

값: <길이> | <백분율>
최초값: 0
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 가장 가까운 조상(ancestor) 블럭레벨(block-level)의 너비를 참조한다.

이 속성은 엘레멘트의 위쪽 패딩을 설정한다. <PRE>BLOCKQUOTE { padding-top: 0.3em }</PRE>

Padding 값들은 음수가 될 수 없다.

5.5.7 오른쪽 패딩('padding-right')

값: <길이> | <백분율>
최초값: 0
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 가장 가까운 조상(ancestor) 블럭레벨(block-level)의 너비를 참조한다.

이 속성은 엘레멘트의 오른쪽 패딩을 설정한다. <PRE>BLOCKQUOTE { padding-right: 10px }</PRE>

Padding의 음수값은 허용되지 않는다.

5.5.8 아래쪽 패딩('padding-bottom')

값: <길이> | <백분율>
최초값: 0
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 가장 가까운 조상(ancestor) 블럭레벨(block-level)의 너비를 참조한다.

이 속성은 엘레멘트의 아래쪽 패딩을 설정한다. <PRE>BLOCKQUOTE { padding-bottom: 2em }</PRE>

Padding 음수값은 허용되지 않는다.

5.5.9 왼쪽 패딩('padding-left')

값: <길이> | <백분율>
최초값: 0
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 가장 가까운 조상(ancestor) 블럭레벨(block-level)의 너비를 참조한다.

이 속성은 엘레멘트의 왼쪽 패딩을 설정한다. <PRE>BLOCKQUOTE { padding-left: 20% }</PRE>

Padding은 음수값은 허용되지 않는다.

5.5.10 패딩('padding')

값: [ <길이> | <백분율> ]{1,4}
최초값: 약식속성들에서는 허용되지 않음
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 가장 가까운 조상(ancestor) 블럭레벨(block-level)의 너비를 참조한다.

패딩('padding') 속성은 한 스타일쉬트에서 위쪽 패딩('padding-top'), 오른쪽 패딩('padding-right'), 아래쪽 패딩('padding-bottom'), 왼쪽 패딩('padding-left')을 지정하는 약식속성이다.

만일 4 길이의 값들이 지정되면, 각 값은 top, right, bottom, left에 각각 적용된다. 하나의 값 만 지정되면 모든 면(side)들에 적용되고, 두 값이나 세 값들이 지정되면, 지정되지 않은 값은 반대편 면에서 택한다.

padding 지역의 표면은 배경('background') 속성(property)으로 지정한다. <PRE>H1 { background: white; padding: 1em 2em; }</PRE>

위 예제에서 '1em'이 수직 padding(위쪽 패딩('padding-top'), 아래쪽 패딩('padding-bottom'))에, '2em'이 수평(오른쪽 패딩('padding-right'), 왼쪽 패딩('padding-left'))에 설정된다. 'em' 단위는 엘레멘트의 글꼴 크기(font size)에 상대적이며 '1em'은 사용하고 있는 글꼴 크기와 같다.

Padding 음수값은 허용되지 않는다.

5.5.11 위쪽 테두리 두께('border-top-width')

값: thin | medium | thick | <길이>
최초값: 'medium'
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 없슴

이 속성은 엘레멘트 너비의 위쪽 테두리(border)를 설정한다. 너비의 키워드(keyword) 값들은 사용도구에 따라 다르나, 'thin' <= 'medium' <= 'thick' 공식이 성립된다.

이 키워드(keyword) 너비들는 한 문서 전체에 고정되어 적용된다. <PRE>H1 { border: solid thick red }P { border: solid thick blue }</PRE>

위의 예제에서, 'H1'과 'P' 엘레멘트들은 글꼴 크기에 관계없이 같은 테두리를 가질 것이다. 상대 너비들을 얻기 위해, 'em' 단위를 사용할 수 있다. <PRE>H1 { border: solid 0.5em }</PRE>

Border의 너비(width)들은 음수가 될 수 없다.

5.5.12 오른쪽 테두리 두께('border-right-width')

값: thin | medium | thick | <길이>
최초값: 'medium'
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 없슴

이 속성은 엘레멘트의 오른쪽 테두리의 두께를 지정한다. 지정하지 않으면 이는 위쪽 테두리 두께('border-top-width')와 같다.

5.5.13 아래쪽 테두리 두께('border-bottom-width')

값: thin | medium | thick | <길이>
최초값: 'medium'
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 없슴

이 속성은 엘레멘트의 아래쪽 테두리의 두께를 지정한다. 지정하지 않으면 이는 위쪽 테두리 두께('border-top-width')와 같다.

5.5.14 왼쪽 테두리 두께('border-left-width')

값: thin | medium | thick | <길이>
최초값: 'medium'
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 없슴

이 속성은 엘레멘트의 왼쪽 테두리의 두께를 지정한다. 지정하지 않으면 이는 위쪽 테두리 두께('border-top-width')와 같다.

5.5.15 테두리 두께('border-width')

값: [thin | medium | thick | <길이>]{1,4}
최초값: 약식속성들에는 정의되지 않음
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 없슴

이 속성은 한 스타일쉬트에서 'border-width-top', 'border-width-right', 'border-width-bottom', 'border-width-left'를 지정하는 약식속성이다.

값이 1 개 부터 4 개가 될 수 있으며 다음과 같이 적용된다.

하나의 값: 모든 4 개의 테두리(border)의 너비들이 이 값이 된다.
두개의 값: top, bottom 테두리(border)의 너비들이 첫번째 값이되고, right, left가 두번째 값이 된다.
세개의 값: top은 첫번째 값이, right, left는 두번째 값이, bottom은 세번째 값이 된다.
네개의 값: 각각 top, right, bottom, left를 지정한다.

아래 예제에서, 코멘트(Comment)는 결과적인 top, right, bottom, left 테두리들 각각의 두께를 나타낸다. <PRE>H1 { border-width: thin } /* thin thin thin thin */H1 { border-width: thin thick } /* thin thick thin thick */H1 { border-width: thin thick medium } /* thin thick medium thin */H1 { border-width: thin thick medium thin } /* thin thick medium thin */</PRE>

Border의 너비(width)들은 음수가 될 수 없다.

5.5.16 테두리 색상('border-color')

값: <color>{1,4}
최초값: 'color' 속성(property)값
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 없슴

테두리 색상('border-color') 속성은 4 개의 테두리(border) 색상을 설정한다. 테두리 색상('border-color')은 1 개 부터 4 개사이의 값들을 가질수 있고, 그 값들은 위의 테두리 두께('border-width')에서와 같이 다른 면(side)들의 값들을 설정한다.

색상이 지정되지 않으면, 그 엘레멘트 지체의 색상('color') 속성값이 적용된다. <PRE>P { color: black; background: white; border: solid;}</PRE>

위 예제에서, 테두리(border)는 굵은 검정 줄이 된다.

5.5.17 테두리 스타일('border-style')

테두리 스타일('border-style') 속성은 4 개의 테두리 스타일(border style)들를 설정한다. 값은 1 개 부터 4 개사이의 값들을 가질수 있고, 그 값들은 위의 테두리 두께('border-width')에서와 같이 다른 면(side)들의 값들을 설정한다. <PRE>#xy34 { border-style: solid dotted }</PRE>

위 예제에서, 수평 테두리들은 'solid', 수직 테두리들은 점선('dotted')이 된다.

테두리 스타일의 최초값이 'none'이므로, 테두리 스타일이 설정되지 않으면 테두리가 보이지 않을 것이다.

테두리 스타일들은 다음의 의미를 갖는다.

none: 테두리 두께('border-width') 값에 관계 없이 테두리가 보이지 않는다.
dotted: 테두리는 점선(dotted line)으로 그 엘레멘트의 배경 맨 위(top)에 그려진다.
dashed: 테두리는 사선(dashed line)으로 그 엘레멘트의 배경 맨 위(top)에 그려진다.
solid: 테두리는 연속(solid line)
double: 테두리는 이중선(double line)으로 그 엘레멘트의 배경 맨 위(top)에 그려진다. 두개의 단일 선들의 합과 그사이의 공간은 <border-width>의 값과 같다.
groove: <color> 값에 기초한 색상으로 3D groove가 그려진다.
ridge: <color> 값에 기초한 색상으로 3D ridge가 그려진다.
inset: <color> 값에 기초한 색상으로 3D inset가 그려진다.
outset: <color> 값에 기초한 색상으로 3D outset가 그려진다.

CSS1 핵심: 사용도구들은 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset', 'outset' 모두를 'solid'로 해석할 수 있다.

5.5.18 위쪽 테두리('border-top')

값: <border-top-width> || <border-style> || <color>
최초값: 약식속성들에는 정의되지 않음
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 없슴

엘레멘트의 위쪽 테두리(top border)의 width, style, color을 설정하는 약식속성이다. <PRE>H1 { border-bottom: thick solid red }</PRE>

위의 예제는 H1 엘레멘트 아래 테두리의 width, style, color를 설정한다. 생략된 값들은 그들의 최초값들로 설정된다. <PRE>H1 { border-bottom: thick solid }</PRE>

위의 예제에서 색상 값이 생략되었으므로, 그 border color은 그 엘레멘트 자체의 색상('color') 값과 같다.

테두리 스타일('border-style') 속성은 4 개까지의 값들을 받을 수 있는데 반해, 이 속성은 하나의 값 만을 받을 수 있슴을 저시하라.

5.5.19 오른쪽 테두리('border-right')

값: <border-right-width> || <border-style> || <color>
최초값: 약식속성들에는 정의되지 않음
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 없슴

엘레멘트의 오른쪽 테두리(righ border)의 width, style, color을 설정하는 약식속성이다. 지정하지 않으면 위쪽 테두리('border-top')와 같다.

5.5.20 아래쪽 테두리('border-bottom')

값: <border-bottom-width> || <border-style> || <color>
최초값: 약식속성들에는 정의되지 않음
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 없슴

엘레멘트의 아래쪽 테두리(bottom border)의 width, style, color을 설정하는 약식속성이다. 지정하지 않으면 위쪽 테두리('border-top')와 같다.

5.5.21 왼쪽 테두리('border-left')

값: <border-left-width> || <border-style> || <color>
최초값: 약식속성들에는 정의되지 않음
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 없슴

엘레멘트의 왼쪽 테두리(left border)의 width, style, color을 설정하는 약식속성이다. 지정하지 않으면 위쪽 테두리('border-top')와 같다.

5.5.22 테두리('border')

값: <border-width> || <border-style> || <color>
최초값: 약식속성들에는 정의되지 않음
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 없슴

테두리('border') 속성은 엘레멘트 모든 4 개의 테두리의 같은 width, color, style를 설정하기 위한 단축 속성이다. 예를 들어, 첫번째 명령(rule)은 그 다음 4 개에서 각각 설정한 것과 같다. <PRE>P { border: solid red }P { border-top: solid red; border-right: solid red; border-bottom: solid red; border-left: solid red}</PRE>

마진('margin'), 패딩('padding') 약식속성들과는 달리, 테두리('border') 속성은 4 개의 테두리를 다른 값들로 설정할 수 없다. 이를 위해 하나이상의 다른 border 속성들을 사용하여야 한다.

이속성들이 기능적으로 일부 중복을 하므로 이들을 지정하는 순서가 중요하게 된다. 예제를 보면: <PRE>BLOCKQUOTE { border-color: red; border-left: double color: black;}</PRE>

위 예제에서, 왼쪽 테두리의 색상은 검정(black)이 될 것이고, 다른 테두리들은 적색(red)이 된다. 이는 왼쪽 테두리('border-left')에 width, style, color가 설정 되었기 때문이다. 왼쪽 테두리('border-left') 속성(property)에 색상이 설정되지 않았으므로, 이는 'color' 속성(property)에서 값을 받을 것이다. 실제로 'color' 속성이 나중에 설정 되었으므로, 왼쪽 테두리('border-left') 속성이 적용되지 않는다.

테두리 두께('border-width') 속성은 4 개 길이의 값들을 지정할 수 있지만, 이 속성은 하나 만 받을 수 있슴을 주시하라.

5.5.23 너비('width')

값: <길이> | <백분율> | auto
최초값: auto
적용: 블럭레벨(block-level)과 대체된(replaced) 엘레멘트들
전달: 안됨
백분율 값들: 모체 엘레멘트의 너비(width) 참조

이 속성은 text 엘레멘트들에 적용될 수 있으나, 이미지(image)들과 같은 대체된(replaced) 엘레멘트들에 가장 유용하게 사용된다. 너비(width)는 필요할 때, 배율(scale)을 조절하여 보완할 수 있다. 배율을 조절할 때, 이미지의 변경 비율(ratio)은 높이('height') 속성이 'auto'이면 그대로 유지된다.

예제: <PRE>IMG.icon { width: 100px }</PRE>

만일 대체된(replaced) 엘레멘트 너비('width')와 높이('height')가 둘 다 'auto'이면, 이들 속성들 그 엘레멘트의 규격을 그 대로 설정한다.

음수는 허용되지 않는다.

이 속성과 마진(margin), 패딩(padding)의 관계를 위하여 양식화 모델(항목 4)을 참조하라.

5.5.24 높이('height')

값: <길이> | auto
최초값: auto
적용: 블럭레벨(block-level)과 대체된(replaced) 엘레멘트들
전달: 안됨
백분율 값들: 없슴

이 속성은 text 엘레멘트들에 적용될 수 있으나, 이미지(image)들과 같은 대체된(replaced) 엘레멘트들에 가장 유용하게 사용된다. 높이(height)는 필요할 때, 배율(scale)을 조절하여 보완할 수 있다. 배율을 조절할 때, 이미지의 변경 비율(ratio)은 너비('width') 속성이 'auto'이면 그대로 유지된다.

예제: <PRE>IMG.icon { height: 100px }</PRE>

만일 대체된(replaced) 엘레멘트 너비('width')와 높이('height')가 둘 다 'auto'이면, 이들 속성들 그 엘레멘트의 규격을 그 대로 설정한다.

텍스트 엘레멘트에 적용되면, 높이(height)는 예를 들어 화면 굴리기(scrollbar)등으로 보완될 수 있다.

음수는 허용되지 않는다.

CSS1 핵심: 사용도구들은, 그 엘레멘트가 대체된(replaced) 엘레멘트가 아니면, 높이('height') 속성을 무시('auto' 처리)할 수도 있다.

5.5.25 유동('float')

값: left | right | none
최초값: none
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 없슴

값 'none'로, 그 엘레멘트는 그 텍스트(text) 안에서 나타 날 곳에 표현(display)된다. 값 'left' ('right')로 그 엘레멘트는 left (right)으로 이동하여, 그 텍스트(text)는 그 엘레멘트의 right (left) 면(side)에 줄바꿈(wrap)한다. 값 'left' 또는 'right'로, 그 엘레멘트는 블럭레벨(block-level)로 처리된다('display' 속성이 무시된다). 항목 4.1.4의 설명을 참조하라. <PRE>IMG.icon { float: left; margin-left: 0; }</PRE>

위 예제는 'CLASS=icon'를 갖는 모든 IMG 엘레멘트들은 그 모체 엘레멘트의 왼쪽(left )을 따라 위치시킨다.

이 속성은 인라인(inline) 이미지들에서 가장 자주 사용되나, 텍스트(text) 엘레멘트들에도 적용된다.

5.5.26 'clear'

값: none | left | right | both
최초값: none
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 없슴

이 속성은 엘레멘트를 유동(floating) 엘레멘트들의 옆면(side)들에 허용할 것인가를 지정한다. 더 구체적으로, 이 속성값은 유동(floating) 엘레멘트들이 허용되지 않는 면(side)들의 목록(list)이다. 'clear'가 'left'를 설정하면, 엘레멘트는 어떤 유동(floating) 엘레멘트 밑의 왼쪽으로 이동한다. 'clear'가 'none'으로 설정되면, 유동(floating) 엘레멘트들은 모든 면(side)들에 허용된다. 예제를 보면: <PRE>H1 { clear: left }</PRE>

5.6 속성들의 분류

이들 속성들은 엘레멘트들을 특정 보이는 파라메터(parameter)들를 설정하는 것에 추가하여 카테고리들(categories)로 분류한다.

이 목록 스타일(list-style) 속성들은 어떻게 목록 항목들(목록 항목('list-item')의 'display' 값을 갖는 엘레멘트들)을 기술하는가를 양식화한다. 이 목록 스타일(list-style) 속성들은 어떤 엘레멘트에도 설정될 수 있고, 이는 일반적으로 계통도(tree) 하부로 전달(inherit)된다. 그러나, 이들은 목록 항목('list-item')의 값이 'display' 일 때 만 엘레멘트들에 효과를 줄 것이다. HTML에서 이는 전형적으로 'LI' 엘레멘트의 경우이다.

5.6.1 'display'

값: block | inline | list-item | none
최초값: block
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 없슴

이 속성은 엘레멘트가 화면에 표현(display)될 것인가, 그렇다면 어떻게 디스플레이될 것인가를 기술한다. 이는 인쇄에서나 컴퓨터 화면등이 될 수 있다.

엘레멘트가 'display' 값 'block'을 가지면 새로운 박스(box)를 연다. 그 박스는 CSS 양식화 모델에 따라 인접 박스들에 상대적으로 위치한다. 전형적으로, 'H1'와 'P'와 같은 엘레멘트들은 블럭('block') 타입니다. 값 목록 항목('list-item')은 목록(list-item) 메이커(marker)가 추가된다는 것 이외에는 블럭('block')과 유사하다. HTML에서, 'LI'는 전형적으로 이 값을 갖는다.

엘레멘트의 'display' 값 'inline'은 이전의 내용(content)이 있는 것과 같은 줄에 새로운 인라인(inline) 박스(box)를 생성한다. 이 박스(box)는 양식화(formatted)된 내용의 크기에 따라 크기(dimension)가 결정된다. 만일 내용이 텍스트이면, 이는 여러 줄들에 확장(span)할 수 있으며, 또한 그들은 각 줄에 하나의 박스가 있는 것이다. 마진(margin), 테두리(border), 패딩(padding) 속성들은 '인라인(inline)' 엘레멘트들에 적용되나, 줄바꿈들에서는 아무 효과도 없다.

값 'none'은 엘레멘트의 하위(child) 엘레멘트들과 주위 박스(box)을 포함하여 디스플레이를 중지시킨다. <PRE>P { display: block }EM { display: inline }LI { display: list-item }IMG { display：none }</PRE>

마지막 명령(rule)은 이미지들의 디스플레이를 중지시킨다.

'display'의 최초값은 'block'이지만, 사용도구는 모든 HTML 엘레멘트들을 위하여, HTML 규격에서 엘레멘트들의 표현을 위하여 제시된 바에 따라, 전형적인 디폴트 값들 가진다.

CSS1 핵심: 사용도구들은 'display'를 무시하고, 사용도구의 디폴트(default) 값들 만을 사용할 수 있다.(항목 7를 참조하라.)

5.6.2 공백('white-space')

값: normal | pre | nowrap
최초값: normal
적용: 블럭레벨(block-level) 엘레멘트들
전달: 전달 됨
백분율 값들: 없슴

이 속성은 엘레멘트 안에서 어떻게 공간(whitespace)을 처리할 것인가를 기술한다. 방법은 'normal' (공간이 붕괴 됨), 'pre' (HTML의 'PRE' 엘레멘트처럼 작용) 또는 'nowrap'(BR 엘레멘트들가 있을 때만 줄바꿈 함)이 있다. <PRE>PRE { white-space: pre }P { white-space: normal }</PRE>

공백('white-space')의 최초값이 'normal'이지만, 사용도구는 모든 HTML 엘레멘트들을 위하여, HTML 규격에서 엘레멘트들의 표현을 위하여 제시된 바에 따라, 전형적인 디폴트 값들을 갖는다.

CSS1 핵심: 사용도구들은 제작자와 리더의 스타일쉬트에서 공백('white-space') 속성 무시하고, 사용도구의 디폴트(default) 값들 만을 사용할 수 있다.(항목 7를 참조하라.)

5.6.3 목록 스타일 타입('list-style-type')

이 속성은 목록(list-item) 메이커(marker)의 모양을 결정하는데, 목록 스타일 이미지('list-style-image')가 'none'이거나, URL에 의하여 지정되는 이미지가 표현될 수 없를 때 사용된다. <PRE>OL { list-style-type: decimal } /* 1 2 3 4 5 ... */OL { list-style-type: lower-alpha } /* a b c d e ... */OL { list-style-type: lower-roman } /* i ii iii iv v ... */</PRE>

5.6.4 목록 스타일 이미지('list-style-image')

값: <url> | none
최초값: none
적용: 목록('list-item') 값 'display'를 갖는 엘레멘트들
전달: 전달 됨
백분율 값들: 없슴

이 속성은 목록(list-item) 메이커(marker)에 사용될 이미지를 설정한다. 이미지가 유효하면 이 이미지는 목록 스타일 타입('list-style-type') 메이커(marker)가 설정한 것을 대체한다. <PRE>UL { list-style-image: url(http://png.com/ellipse.png) }</PRE>

5.6.5 목록 스타일 위치('list-style-position')

값: inside | outside
최초값: outside
적용: 목록('list-item') 값 'display'를 갖는 엘레멘트들
전달: 전달 됨
백분율 값들: 없슴

목록 스타일 위치('list-style-position') 값은 목록(list-item) 메이커(marker)가 내용에 대하여 어떻게 그려 지는가를 결정한다. 양식화(formatting) 예제는 목록 엘레멘트(항목 4.1.3)를 참조하라.

5.6.6 목록 스타일('list-style')

값: [disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none] || [inside | outside] || [<url> | none]
최초값: 약식속성들에는 정의되지 않음
적용: 목록('list-item') 값 'display'를 갖는 엘레멘트들
전달: 전달 됨
백분율 값들: 없슴

목록 스타일('list-style') 속성은 목록 스타일 타입('list-style-type'), 목록 스타일 이미지('list-style-image'), 목록 스타일 위치('list-style-position') 세가지 속성을 한 스타일쉬트에서 지정하는약식속성이다. <PRE>UL { list-style: upper-roman inside }UL UL { list-style: circle outside }LI.square { list-style: square }</PRE>

'LI' 엘레멘트들에 직접 목록 스타일('list-style')를 설정하는 것은 기대하지 않은 결과를 초래할 수 있다. 예제를 보라: <PRE><STYLE TYPE="text/css"> OL.alpha LI { list-style: lower-alpha } UL LI { list-style: disc }</STYLE><BODY> <OL class=alpha> <LI>수준 1 <UL> <LI>수준 2 </UL> </OL></BODY></PRE>

위의 예제에서 스타일쉬트 안의 첫번째 명령(rule)이 높은 우선순위(카스케이딩 순서에 정의된 것과 같이)를 갖기 때문에, 이는 모든 'LI' 엘레멘트들의 두번째 명령(rule)을 덮어씌울(override) 것이며, 'lower-alpha' 목록 스타일 만이 사용될 것니다. 따라서 목록 스타일('list-style')는 목록 타입(list type) 엘레멘트들에 만 지정할 것을 추천한다. <PRE>OL.alpha { list-style: lower-alpha }UL { list-style: disc }</PRE>

위 예제에서, 목록 스타일('list-style') 값들은 'OL' 과 'UL' 엘레멘트들로 부터 'LI' 엘레멘트들로 전달된다.

URL 값은 다른 어떤 값의 조합될 수 있다. <PRE>UL { list-style: url(http://png.com/ellipse.png) disc }</PRE>

위의 예제에서, 이미지가 우효하지 않으면 'disc'가 사용된다.

6 단위들(Units)

6.1 길이 단위

길이 값의 양식은 선택적 부호('+' 또는 '-', 디폴트는 '+')와 그 뒤 바로 따라오는 수치(소수점이 있거나 없거나) 그리고 그 바로 뒤에 두 글자로 간단히 된 단위 인식자(identifier)로 된다. 수치 0 뒤의 단위 지정자는 선택적이다.

일부 속성들은 음수의 길이 단위들을 허용하나, 이는 양식화 모델을 복잡하게 하고 적용에 따라 한계가 있을 수 있다. 만일 음수 길이 값이 지원되지 않으면, 지원되는 값 중에서 가장 가까운 값으로 대체된다.

길이의 단위들에는 상대적(relative)인 것과 절대적(absolute)인 것 두가지가 있다. 상대적인 단위들은 다른 길이 속성(property)에 상대적으로 나타낸다. 상대적인 단위들을 사용하는 스타일쉬트들은 한 메디아에서 다른 메디아로(예를 들어 컴퓨터 화면에서 레이저 프린터로) 스테일(scale)하는 것이 보다 용이하다. 아래 설명하는 백분율 단위(percentage unit)들과 키워드(keyword) 값(예를 들어 'x-large')들은 이와 비슷한 잇점들이 있다.

아래와 같은 상대(relative) 단위들이 지원된다. <PRE>H1 { margin: 0.5em } /* em, 엘레멘트의 글꼴(font) 높이 */H1 { margin: 1ex } /* x-height, 글자 'x'의 높이 */P { font-size: 12px } /* pixels, 화면에 상대적으로 */</PRE>

상대적인 단위 'em'과 'ex'는 그 엘레멘트 자체의 글꼴 크기(font size)에 상대적이다. CSS1에서 한가지 예외는 글꼴 크기('font-size') 속성인데, 여기서는 'em'과 'ex' 값은 모체 엘레멘트의 글꼴 크기(font size)를 참조한다.

예제의 마지막 줄에서 사용된 픽셀(pixel) 단위는, 그 화면의 해상도(resolution), 말하자면 대부분의 경우 컴퓨터 디스플레이에 상대적이다. 만일 출력 장티의 픽셀(pixel) 밀도(density)가 일반적인 컴퓨터 디스플레이에서와 다르면, 사용도구는 픽셀(pixel) 값들을 재 스케일(rescale)하여야 한다. 암시된 참조 픽셀(pixel)은 픽셀 밀도 90dpi(dots per inch) 장치에서 리더가 한 팔 거리에서 한개의 픽셀의 볼 수 있는 시각의 각도이다. 일반적인 한 팔 거리는 28인치이고 보는 각도는 약 0.0227도이다.

하위(Child) 엘레멘트들에는 상대값이 아닌 계산된 값이 전달(inherit)된다. <PRE>BODY { font-size: 12pt; text-indent: 3em; /* 말하자면 36pt */ }H1 { font-size: 15pt }</PRE>

위의 예제에서, 'H1' 엘레멘트들의 텍스트 들여쓰기('text-indent') 값은 45pt가 아니라 36pt이다.

절대(Absolute) 길이 단위들은 출력 장치의 물리적 속성들이 알려졌을 때에 만 유용하다. 이들 절대(absolute) 단위들은 아래와 같이 지원된다. <PRE>H1 { margin: 0.5in } /* 인치(inche), 1in = 2.54cm */H2 { line-height: 3cm } /* cm, centimeter */H3 { word-spacing: 4mm } /* mm, millimeters */H4 { font-size: 12pt } /* 포인트(point), 1pt = 1/72 in */H4 { font-size: 1pc } /* 피카(pica), 1pc = 12pt */</PRE>

특정 길이가 지원되지 않으면, 사용도구들은 대략적으로 시도하여야 한다. 모든 CSS1 속성들에서, 추가적인 계산과 전달은 이 대략적인 값을 기준으로 하여야 한다.

6.2 백분율 단위(percentage unit)들

백분율 값의 양식은 선택적 기호('+' 또는 '-', 디폴트는 '+')와 그 뒤에 바로 따라오는 수치(소수점 있거나 없거나) 그리고 바로 뒤에 '%'로 된다.

백분율 값들은 항상, 예를 들어 길이 단위등, 다른 값에 대해 상대적이다. 백분율 단위(percentage unit)들이 허용되는 각 속성은 그 백분율 값이 무엇을 참조하는가가 정의되어 있다. 그 엘레멘트 자체의 글꼴 크기(font size)를 참조하는 경우가 가장 많다. <PRE>P { line-height: 120% } /* 엘레멘트의 글꼴 크기('font-size')의 120% */</PRE>

모든 전달(inherit)된 CSS1 속성들이 백분율 값을 가지면, 하위(Child) 엘레멘트들에는 그 백분율 값이 아닌 계산된 값이 전달(inherit)된다.

6.3 색상 단위(color unit)들

색상(color)은 키워드(keyword) 또는 수치적 RGB 규격이다.

암시된 색상 이름들의 키워드(keyword) 목록은 aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow등이다. 이들 16 색상(color)들은 윈도우즈(Windows) VGA palette로부터 온 것이고, 그 들 RGB 값들은 이 규격에 정의되어 있지 않다. <PRE>BODY {color: black; background: white }H1 { color: maroon }H2 { color: olive }</PRE>

RGB 색상 모델은 수치 색상 규격으로 사용된다. 아래 예제에서 모두 같은 색상을 나타낸다. <PRE>EM { color: #f00 } /* #rgb */EM { color: #ff0000 } /* #rrggbb */EM { color: rgb(255,0,0) } /* 정수 범위: 0 - 255 */EM { color: rgb(100%, 0%, 0%) } /* 유동(float) 범위: 0.0% - 100.0% */</PRE>

RGB 값의 양식은 '#'로 시작하는 16 진수(hexadecimal) 표현이다. '#' 다음에 바로 3 자 혹은 6 자 16진수 글자(0,1,2,3...,a,b,c,d,e,f)들이 나온다. 3 자 RGB 표현(#rgb)은 각 글자를 복사하여(0을 더하는 것이 아니고) 6 자 (#rrggbb) 양식을 만든다. 예를 들어, #fb0는 #ffbb00로 된다. 이 것으로 흰색(#ffffff)을 약식(#fff)으로, 색상 깊이 등 부속 변화를 생략하고, 확실히 표현할 수 있다.

RGB 값은 기능적 표현 양식으로 기술할 수 있는데, 'rgb(' 다음에 컴마(,)로 분리한 세가지 색상 값을 목록화 하고 ')'로 닫는다. 여기서 세가지 색상의 각 색상 값은 정수 0-255 범위의 수치, 또는 0.0%에서 100.0%까지 범위의 세개의 백분율 값들이 된다. 수치 앞과 뒤에 공백(whitespace)이 허용된다.

수치 범위 밖의 수치 값들은 잘려진다. 아래 예제에서 세가지는 모두 같다. <PRE>EM { color: rgb(255,0,0) } /* 정수 범위: 0 - 255 */EM { color: rgb(300,0,0) } /* 255로 잘림 */EM { color: rgb(110%, 0%, 0%) } /* 100%로 잘림 */</PRE>

RGB 색상(color)들은 [9] sRGB color space에 정의되어 있다. 사용도구들은 색상들을 표현하는 주파수(fidelity)가 서로 다를 수 있으나, sRGB 사용은 모호하지 않고, 어떤 색상이 되어야 한다는 것이 확실히 양적으로 국제적인 규격들[10]에 정의되어 있다.

사용도구들은 색상들을 디스플레이 하는데 색상 보정(gamma-correction) 수행을 위한 그들의 노력을 생략할 수 있다. sRGB는 지정된 보이는 상황에서 디스플레이 감마(gamma)를 2.2로 정의하고 있다. 사용도구들은 CSS에서 주어진 색상들을 출력 장치의 자연("natural") 디스플레이 감마(gamma)와 조합하여, 실효 디스플레이 감마(gamma)가 2.2가 되도록 보정(부록 D)한다. CSS에서 정의한 색상들 에서 만 영향을 받는다는 점을 주시하라. 예를 들어 이미지들은 그들 자신의 색상 정보를 표현할 것으로 기대된다.

6.4 URL

URL(Uniform Resource Locator:공통 자원 지정자)는 기능적 표현으로 지정한다. <PRE>BODY { background: url(http://www.bg.com/pinkish.gif) }</PRE>

URL 값은 'url('로 시작하고 바로 뒤에 선택적 공백, 그 다음 선택적 단일 따옴(') 또는 이중 따옴("), 그 다음에 ([11] URL 자체에서 정의된 것과 같이)가 나온다. 그리고 다시 선택적 단일 따옴(') 또는 이중 따옴("), 그 다음 선택적 공백, 그리고 ')'로 닫는다. 따옴표는 URL 자체의 부분은 아니며 반드시 짝을 맞춰야 한다.

URL 안의 괄호, 컴마, 공백, 단일 따옴('), 이중 따옴(")들은 역슬래쉬(\)를 사용하여 '$', '$', '\,' 등으로 에스케이프(escape)되어야 한다.

부분적 URL들은, 그 문서에 상대적이 아니라, 스타일쉬트 자원(source)에 상대적으로 해석된다. <PRE>BODY { background: url(yellow) }</PRE>HTML의 URI 설명을 참조하라.

7 CSS1에 부합

문서들을 표현하는 CSS1를 사용하는 사용도구는 다음 경우 CSS1 규격에 부합한다.

이 규격에 따라 모든 참조 스타일쉬트를 가져오도록 시도하고 해석(parse)하도록 시도한다.
카스케이딩 순서에 따라 선언들을 정렬(sort)한다.
표현 도구의 능력 범위 안에서 CSS1 기능을 적용한다.(아래 설명 참고)

CSS1 스타일쉬트 출력 사용도구가 CSS1 규격에 부합하려면

유효한 CSS1 스타일쉬트 출력

문서들을 디스플레이 하는데 CSS1를 사용하는, 그리고, CSS1 스타일쉬트를 출력(output)하는, 두가지 부합 필요 조건을 충족시키는 사용도구는 CSS1 규격에 부합하는 것이다.

사용도구는 CSS1의 모든 기능들을 적용해야 하는 것은 아니다. 핵심 기능들을 적용하면 CSS1에 부합하는 것이 될 수 있다. 제외된 부분이라는 명시된 것을 제외하고, 핵심(core) 기능(functionality)이 CSS1 규격의 전체를 구성한다. 이 규격에서는 "CSS1 핵심:"이라고 표시하고, 그 뒤에 어떤 기능이 핵심 기능 밖에 있는가의 설명이 따른다. 핵심 기능 밖의 것들을 CSS1 발전된 기능이라 한다.

이 항목에서는 단지 CSS1 부합성을 정의한다. 향 후 CSS 수준에서 부합하기 위하여 사용도구는 다른 기능들의 수행이 필요하게 된다.

메디아의 표현에서 제한적인 예제들은, 제한된 자원들(fonts, color)과 제한된 해상도(resolution), 따라서 테두리(margin)들이 정확하지 않은 것 등이다. 이런 경우 사용도구는 스타일쉬트 값들의 대략을 사용하여야 한다. 또한, 다른 사용자 인터페이스(interface) 기준에서 그 들 자신의 제한을 가질 수 있는데 예를 들어 비디오(VR) 브라우저에서 사용자와의 "거리"에 따라 스케일을 다시(rescale)할 수 있다.

사용도구들은 리더(for reader)에게 표현의 추가적인 선택을 제공할 수 있다. 예를 들어, 사용도구가 리더에게 시각 장애자 선택 또는 깜빡거림(blink) 중지 선택을 줄 수 있다.

CSS1은 양식화의 모든 견지들을 정의하지 않는다는 점을 주시하라. 예를 들어, 사용도구는 글자 간격(letter-spacing)이 기능 방법(algorithm) 선택은 자유이다.

이 규격은 사용도구에, 요구하지 않으나, 추천하는 것들이 있다.

리더(reader)에게 개인적인 스타일쉬트를 지정할 수 있게 허용
개별 스타일쉬트를 켜고, 끌 수 있게 허용

위의 부합성 설명은. 사용자에게 표현(user interface)되는 것이 아니고. 그 기능적 면 만을 설명한 것이다.

7.1 향 후 버전에 부합한 처리(parsing)

이 규격은 CSS 수준(level) 1을 정의한다. 추가적인 기능들를 갖는 CSS의 높은 수준이 기대되며 이는 향후 정의될 것이다. 사용도구들이 단순히 CSS1를 지원하지 않고, 향 후 더 높은 수준의 스타일쉬트를 읽을 수 있도록 지원을 확실히 하기 위하여, 이 항목은 사용도구가 CSS1에서 유효하지 않은 구조를 만나면, 어떻게 하여야 하는가를 정의한다.

모르는 속성의 선언은 무시한다. 예를 들어, 스타일쉬트가 <PRE>H1 { color: red; rotation: 70deg }</PRE>
사용도구는 이를 아래와 같은 스타일쉬트로 처리한다. <PRE>H1 { color: red; }</PRE>
유효하지 않은 값들, 또는 유효하지 않은 부분을 갖는 값들은 그 선언이 없는 것으로 처리한다. <PRE>IMG { float: left } /* CSS1 */IMG { float: left top } /* "top"은 유동('float')의 값이 아님 */IMG { background: "red" } /* CSS1의 키워드(keyword)에는 따옴표가 없슴 */IMG { border-width: 3 } /* 단위는 길이의 값으로 지정하여야 함 */</PRE>
위 예제에서, CSS1 처리자(parser)는 첫 명령(rule) 만 인정하고 나머지는 무시 하여 다음과 같아 질 것이다. <PRE>IMG { float: left }IMG { }IMG { }IMG { }</PRE>
향 후 CSS 규격에 부합하는 사용도구는 하나이상의 다른 규칙도 받아 드릴 수 있어야 한다.
개별 무효(invalid) at-keyword는, 그 이후에 따라나오는 것을 쎄미콜론(;), 또는 ({...}) 짝 중에서 먼저 나오는 것까지 포함하여 모두 무시된다. 예를 들어, 다음을 보면: <PRE>@three-dee { @background-lighting { azimuth: 30deg; elevation: 190deg; } H1 { color: red }}H1 {color: blue}</PRE>
CSS1에서 '@three-dee'는 무효 코드이다. 따라서 모든 at-rule( 세번째 '}'를 포함하여 그 것까지) 무시된다. CSS1 사용도구는 건너 띄워, 스타일쉬트를 효과적으로 아래와 같이 줄인다. <PRE>H1 {color: blue}</PRE>

더 자세히 설명하면:

CSS 각 버전의 CSS 스타일쉬트는 statements의 목록으로 구성되어 있다. 두종류의 statements가 있는데, at-rules과 rulesets이다. statements의 앞과 뒤에 공백(space, tab, newline)이 있어도 된다.

CSS 스타일쉬트는 자주 HTML 문서들에 깔리며(embed), 옛날(older) 사용도구들에서는 스타일쉬트를 감출 수 있는데, 이는 스타일쉬트를 HTML 코멘트(Comment) 안에 넣는데 편리하다. HTML 코멘트(Comment)의 ""가 statements의 앞, 뒤, 그리고 그 안에 나올 수 있고, 그 주위에 공백이 올 수 있다.

At-rules은 at-keyword로 시작되며, 그 인식자(identifier)의 시작을 알리는 '@'을 사용한다(예: '@import', '@page'). 인식자(identifier)는 글자, 수치, 대쉬(-)와 에스케입된(escaped) 글자들로 구성된다(아래 정의).

at-rule은 다음에 나오는 쎄미콜론(;) 또는 블럭(block: 곧 설명 함) 중 먼저 나오는 것까지, 그리고 그것을 포함하여, 모든 것으로 구성된다. CSS1 사용도구는, '@import' 이외의 다른 at-keyword로 시작되는 at-rule을 만나면, at-rule과 그 다음의 계속적인 처리(parsing)을 전부 무시한다. 만일 이것이 스타일쉬트의 맨 위에 나오지 않으면, 말하자면 어떤 명령(rule) 다음에 나온다면 그것이 유효하지 않더라도, '@import'로 시작되는 at-rule도 무시한다. 여기 예제가 있다.

CSS1 처리자(parser)가 아래 스타일쉬트를 만났다면: <PRE>@import "subs.css";H1 { color: blue }@import "list.css";</PRE>

두번째 '@import'는 CSS1에서 유효하지 않다. CSS1 처리자(parser)는 전체 at-rule을 무시하고, 효과적으로 아래와 같이 간단히 한다. <PRE>@import "subs.css";H1 {color: blue}</PRE>

한 블럭(block)은 '{'로시작되고 '}'로 끝난다. 그 사이에, 항상 짝이 맞아야 하고 네스트(nest)될 수 있는 괄호들'(), [], {}'들은 제외하고, 글자들이 나올 수 있다. 단일 따옴표(')와 이중 따옴표(") 도 짝을 맞추어 나오고, 그 사이의 글자들은 문자열(string)로 처리(parse)된다. 부록 B 문자열 정의 토큰(token)을 참조하라. 여기 블럭(block)의 예제가 있다. 따옴표 속의 오른쪽 '}'는 블럭(block) 시작 '{'와 짝이 맞지 않고, 두번째 단일 따옴표는 에스케입(escape)된 글자이며, 따라서 열린 따옴표와 짝이 맞지 않음을 주시하라. <PRE>{ causta: "}" + ({7} * '\'') }</PRE>

ruleset는 selector-string와 그 뒤에 declaration-block으로 구성된다. selector-string는 처음 '{'까지, 그 '{'를 포함하지 않는, 모든 것으로 구성된다. selector-string으로 시작하는 ruleset는 무효 CSS1는 건너 뛴다.

CSS1 처리자(parser)가 다음 예제의 스타일쉬트를 만났다면 <PRE>H1 { color: blue }P[align], UL { color: red; font-size: large }P EM { font-weight: bold }</PRE>

두번째 줄은 CSS1에서 무효인 selector-string를 만났다. CSS1 사용도구는 이 ruleset를 건너 뛰어, 다음과 같이 된다. <PRE>H1 { color: blue }P EM { font-weight: bold }</PRE>

선언블럭(declaration-block)은 '{'로 시작하고 짝 맞는 '}'로 끝난다. 그 사이에 하나도 없거나 여러개의 선언(declaration)들이 쎄미콜론(;)으로 분리되어 위치한다.

선언(declaration)은 속성(property), 콜론(:) 그리고 값(value)으로 구성된다. 그 앞, 뒤에 공간(whitespace)이 들어 갈 수 있다. 속성은 앞에서 정의한 바와 같은 인식자(identifier)이다. 값에는 어떤 글자도 올 수 있는데 괄호들'(), [], {}'과 단일 따옴표(')와 이중 따옴표(") 도 짝을 맞추어 사용하여야 한다. 괄호들'(), [], {}'은 네스트(nest)될 수 있다. 따옴표 속의 글자들은 문자열(string)로 처리(parse)된다

현재의 속성들에 새로운 속성들과 값들을 향 후 추가할 수 있게하기 위하여, 사용도구는 유효하지 않은 속성 이름이나 유효하지 않은 값을 갖는 선언을 건너 뛰어야 한다. 각 CSS1 속성은 그것이 수용(accept)하는 값들에 문법적, 의미적 제한이 있다.

CSS1 처리자(parser)가 다음 예제의 스타일쉬트를 만났다면 <PRE>H1 { color: red; font-style: 12pt }P { color: blue; font-vendor: any; font-variant: small-caps }EM EM { font-style: normal }</PRE>

첫번째 줄의 두번째 선언에서 '12pt'는 무효 값이다. 두번째 줄의 두번째 선언에서 'font-vendor'는 정의되지 않은 속성이다. CSS1 처리자(parser) 이 선언들을 건너 띄고, 다음과 같이 줄일 것이다. <PRE>H1 { color: red; }P { color: blue; font-variant: small-caps }EM EM { font-style: normal }</PRE>

코멘트(Comment: 항목 1.7 참조)는, 공백으로 고려되는, 공백이 있는 곳에는 어디나 나올 수 있다. CSS1는 값의 안에서 추가적으로 공백이 나올 수 있는 곳을 정의하였다. 그 곳에서 코멘트(Comment)도 허용된다.

다음 규칙이 항상 적용된다.

모든 CSS 스타일쉬트는, CSS의 통제(control)를 받지 않는 부분을 제외하고는, 대소분자를 구분(case-insensitive)한다. CSS1에서 글꼴(font family) 이름과 URL은 대소분자를 구분(case-insensitive)할 수 있다. 또한 HTML [2] 제어 아래 있는 CLASS와 ID 애트리뷰트들은 대소분자를 구분(case-insensitive)한다.
CSS1에서, 선택자(selector: 엘레멘트의 name, class, ID)들은 글자 A-Z, 0-9, Unicode 글자 161-255, '+', '-' 만을 가질 수 있다. '-'나 수자로 시작될 수 없다. 에스케입(escape) 글자와 Unicode 글자의 수치 코드(다음 참조)를 가질 수 있다.
\(backslash) 다음의 16 진수(01..9abcdef)는 Unicode 글자의 번호이다.
16 진수 이외의 어느 글자는, \(backslash)를 그 글자 앞에 넣어, 그 특수 의미를 제거하여, 에스케입(escape)될 수 있다. 예를 들어 (\")는 한 이중 따옴표 한 글자의 배열변수(string)이다.
위 두가지는 백슬래쉬 에스케입(backslash-escape)을 정의하였다. 백슬래쉬 에스케입은, 문자열(string) 속의 것을 제외하고는, 항상 인식자(identifier)의 한 부분으로 고려된다. 말하자면, "{"는 구둣점인데, "\7B"는 구둣점이 아니고, "2"는 허용되지 않으나, "\32"는 글라스(class) 이름 시작에 허용된다.

주기: HTML의 CLASS 애트리뷰트는 클래스(class) 이름에 위 선택자(selector)로 허용된 글자 이외의 다른 글자들을 허용한다. CSS1에서, 이들 글자들은 에스케입(escape)되거나 또는 Unicode 번호로 써야 한다.
"B&W?"는 "B\&W\?" 또는 "B\26W\3F"로 쓸 수 있고,
그리스어(Greek: "kouros"): "κουρος"는 "\3BA\3BF\3C5\3C1\3BF\3C2"로 써야한다.
항 후 CSS 버전에서는 더 많은 글자를 직접 입력할 수 있을 것으로 기대된다.

부록 B CSS1 문법을 참조하라.

8 참고

[1] 영문 W3C 스타일쉬트 자원 페이지 (http://www.w3.org/Style)

[2] HTML 4 규격 번역문,
영문 HTML 4.0 규격 "http://www.w3.org/TR/REC-html40/",
D. Raggett, A. Le Hors, I. Jacobs, December 1997.

[3] T Berners-Lee, D Connolly: "Hypertext MarkupLanguage - HTML 2.0",
영문 RFC1866,
MIT/W3C, November 1995.
영문 규격 웹양식 "http://www.w3.org/MarkUp/html-spec/html-spec_toc.html"

[4] F Yergeau, G Nicol, G Adams, M Dürst:
영문 Hypertext Markup Language의 국제화 "ftp://ds.internic.net/rfc/rfc2070.txt"

[5] 영문 ISO 8879:1986
정보 처리 - 텍스트와 오피스 시스템 -
Standard Generalized Markup Language (SGML)
HTML의 SGML 설명을 참조하라.

[6] 영문 ISO/IEC 10179:1996
정보 기술 -- 프로그램 언어 --
Document Style Semantics and Specification Language (DSSSL).

[7] 영문 ISO/IEC 9899:1990
프로그램 언어 -- C.

[8] 유니코드 컨소시움(The Unicode Consortium),
Unicode 표준 -- 세계 글자 엔코딩 -- Version 1.0,
Addison-Wesley, Volume 1, 1991, Volume 2, 1992.

[9] 영문 인터넷을 위한 표준 디폴트 색상, version 1.10,
M. Stokes, M. Anderson, S. Chandrasekar, and R. Motta, 5 November 1996.

[10] CIE Publication 15.2-1986, 영문 Colorimetry, 제 2 판,
ISBN 3-900-734-00-3
"http://www.hike.te.chiba-u.ac.jp/ikeda/CIE/publ/abst/15-2-86.html"

[11] T Berners-Lee, L Masinter, M McCahill: "Uniform Resource Locators (URL)",
영문 RFC1738,
CERN, Xerox Corporation, University of Minnesota, December 1994

[12] 영문 PNG (Portable Network Graphics) 규격, Version 1.0
"http://www.w3.org/TR/REC-png-multi.html"

[13] Charles A. Poynton: 영문 Macintosh Platform에서 감마(gamma) 수정
"ftp://ftp.inforamp.net/pub/users/poynton/doc/Mac/Mac_gamma.pdf"

[14] 국제 색상 컨소시움(International Color Consortium):
영문 ICC Profile Format Specification, version 3.2, 1995
"ftp://sgigate.sgi.com/pub/icc/ICC32.pdf"

[15] S C Johnson: "YACC - Yet another compiler compiler",
Technical Report, Murray Hill, 1975

[16] "Flex: The Lexical Scanner Generator", Version 2.3.7, ISBN 1882114213

9 문서를 구성한 인사들

짧은 HTML의 역사 동안, 여러번의 영문 스타일쉬트 제안들이 있었는데, 이 제안은 그 것들에 기인하였다. 특히 Robert Raisch, Joe English와 Pei Wei의 제안들에서 영향을 많이 받았다.

CSS1 발전에 여러 사람들이 공헌하였다. 우리는 특히 다음 사람들에게 감사드린다. Terry Allen, Murray Altheim, Glenn Adams, Walter Bender, Tim Berners-Lee, Yves Bertot, Scott Bigham, Steve Byrne, Robert Cailliau, James Clark, Daniel Connolly, Donna Converse, Adam Costello, Todd Fahrner, Todd Freter, Roy Fielding, Neil Galarneau, Wayne Gramlich, Phill Hallam-Baker, Philipp Hoschka, Kevin Hughes, Scott Isaacs, Tony Jebson, William Johnston, Gilles Kahn, Philippe Kaplan, Phil Karlton, Evan Kirshenbaum, Yves Lafon, Murray Maloney, Lou Montulli, Colas Nahaboo, Henrik Frystyk Nielsen, David Perrell, William Perry, Scott Preece, Paul Prescod, Liam Quin, Vincent Quint, Jenny Raggett, Thomas Reardon, Cécile Roisin, Michael Seaton, David Seibert, David Siegel, David Singer, Benjamin Sittler, Jon Smirl, Charles Peyton Taylor, Irène Vatton, Daniel Veillard, Mandira Virmani, Greg Watkins, Mike Wexler, Lydja Williams, Brian Wilson, Chris Wilson, Lauren Wood and Stephen Zilles.

이 작업과 HTML3을 작업한 Dave Raggett, 특히 색상과 글꼴 분야에서 계속적인 공헌한 Chris Lilley, 그리고 이 구성과 창의적인 숙련을 제공한 Steven Pemberton, 이 세 분의 공헌을 특별히 명시한다.

부록 A: HTML 2.0을 위한 견본 스타일쉬트

(이 부록은 지명적이 아니고 정보를 제공하기 위한 것이다.)

다음 스타일쉬트는 작성 [3] HTML 2.0 규격으로 암시되는 표현을 하기 위해 제공 되었다. 일부 스타일들, 예를 들어, 색상들은 완전성을 위하여 추가되었다. 아래의 제시된 스타일쉬트와 유사한 것이 사용도구의 디폴트로 사용되기를 제안한다. <PRE>BODY { margin: 1em; font-family: serif; line-height: 1.1; background: white; color: black;}H1, H2, H3, H4, H5, H6, P, UL, OL, DIR, MENU, DIV,DT, DD, ADDRESS, BLOCKQUOTE, PRE, BR, HR, FORM, DL { display: block }B, STRONG, I, EM, CITE, VAR, TT, CODE, KBD, SAMP, IMG, SPAN { display: inline }LI { display: list-item }H1, H2, H3, H4 { margin-top: 1em; margin-bottom: 1em }H5, H6 { margin-top: 1em }H1 { text-align: center }H1, H2, H4, H6 { font-weight: bold }H3, H5 { font-style: italic }H1 { font-size: xx-large }H2 { font-size: x-large }H3 { font-size: large }B, STRONG { font-weight: bolder } /* 그 모체에 상대적 */I, CITE, EM, VAR, ADDRESS, BLOCKQUOTE { font-style: italic }PRE, TT, CODE, KBD, SAMP { font-family: monospace }PRE { white-space: pre }ADDRESS { margin-left: 3em }BLOCKQUOTE { margin-left: 3em; margin-right: 3em }UL, DIR { list-style: disc }OL { list-style: decimal }MENU { margin: 0 } /* 치밀한 양식 */LI { margin-left: 3em }DT { margin-bottom: 0 }DD { margin-top: 0; margin-left: 3em }HR { border-top: solid } /* 'border-bottom'도 사용될 수 있다 */A:link { color: blue } /* 방문하지 않은 연결 */A:visited { color: red } /* 방문 했던 연결(visited link) */A:active { color: lime } /* 활성 연결(active link) *//* 앤커 이미지 엘레멘트 주위의 테두리 설정은 복합(contextual) 선택자(selector)가 필요하다 */A:link IMG { border: 2px solid blue }A:visited IMG { border: 2px solid red }A:active IMG { border: 2px solid lime }</PRE>

부록 B: CSS1 문법

(이 부록은 지명적이다)

(CSS의 어떤 버전의) 최소의 CSS 문법은 지원할 필요가 있는 모든 적용들이 항목 7에 정의되어 있다. 아래의 문법은 훨신 짧게 기술되어 있는데 이는 CSS1의 문법(syntax)을 정의한다.

그러나 어떤 의미에서는 여전히 CSS1의 superset이다. 이 문법에는 표현되지 않은 추가적인 의미적인 제한들이 있다. 부합하는 사용도구는 또한 향 후 버전 부합성(항목 7.1) 처리(parsing), 그 속성과 값 표현(항목 5) 그리고 단위 표현(항목 6)를 준수하여야 한다. 또한 HTML도 제한이 있는데, 예를 들면, CLASS 애트리뷰트의 가능한 값들 등이다.

아래 문법은 LL(1)이다. 그러나 대부분의 사용도구들은 직접 사용하지 않아야 한다. 왜냐하면 이는 그 처리(parsing) 자체를 표현한 것이 아니고, CSS1의 문법 만을 다룬 것이기 때문이다. 이 양식은 인간이 읽기 좋게 최적화하였으며, [15] yacc 이외의 약식 표기도 사용하였다. <PRE>* : 0 또는 그 이상+ : 1 또는 그 이상? : 0 또는 1| : 대체 가능한(alternative) 항목의 분리[] : 구룹지우기(grouping)</PRE>

결과물은 다음과 같다. <PRE>stylesheet : [CDO|CDC]* [ import [CDO|CDC]* ]* [ ruleset [CDO|CDC]* ]* ;import : IMPORT_SYM [STRING|URL] ';' /* 예: @import url(fun.css); */ ;unary_operator : '-' | '+' ;operator : '/' | ',' | /* empty */ ;property : IDENT ;ruleset : selector [ ',' selector ]* '{' declaration [ ';' declaration ]* '}' ;selector : simple_selector+ [ pseudo_element | solitary_pseudo_element ]? | solitary_pseudo_element ; /* "id"는 엘레멘트 타입에 왼쪽에 P#p007와 같이 추가되는 ID이다. ** "solitary_id" 는 #p007 처럼 그렇게 추가되지 않은 ID이다. ** 글라스(class)들과 가상 글라스(pseudo-class)에서 동시에. */simple_selector : element_name id? class? pseudo_class? /* 예: H1.subject */ | solitary_id class? pseudo_class? /* 예: #xyz33 */ | solitary_class pseudo_class? /* 예: .author */ | solitary_pseudo_class /* 예: :link */ ;element_name : IDENT ;pseudo_class /* A:link에서 처럼 */ : LINK_PSCLASS_AFTER_IDENT | VISITED_PSCLASS_AFTER_IDENT | ACTIVE_PSCLASS_AFTER_IDENT ;solitary_pseudo_class /* :link에서 처럼 */ : LINK_PSCLASS | VISITED_PSCLASS | ACTIVE_PSCLASS ;class /* P.note에서 처럼 */ : CLASS_AFTER_IDENT ;solitary_class /* .note에서 처럼 */ : CLASS ;pseudo_element /* P:first-line에서 처럼 */ : FIRST_LETTER_AFTER_IDENT | FIRST_LINE_AFTER_IDENT ;solitary_pseudo_element /* :first-line에서 처럼 */ : FIRST_LETTER | FIRST_LINE ; /* id와 solitary_id에서 "#" 다음 부분은 ** 유효한 HTML ID 값 이어야 한다는 제한이 있다. ** 예: "#x77"는 OK, 그러나 "#77"는 무효. */id : HASH_AFTER_IDENT ;solitary_id : HASH ;declaration : property ':' expr prio? | /* empty */ /* 문법 오류를 방지하기 위하여 */ ;prio : IMPORTANT_SYM /* 중요(!important) */ ;expr : term [ operator term ]* ;term : unary_operator? [ NUMBER | STRING | PERCENTAGE | LENGTH | EMS | EXS | IDENT | hexcolor | URL | RGB ] ; /* 색상에서 "#" 다음에 16 진수(0-9a-fA-F)가 ** 3 개 또는 6 개가 나와야 한다는 제한이 있다. ** 예: "#000"는 OK, 그러나 "#abcd"는 무효. */hexcolor : HASH | HASH_AFTER_IDENT ;</PRE>

다음은 [16] flex로 기술한 토큰화하는 것(tokenizer)이다. flex의 8-bit 적용을 가정함을 주시하라. 토큰화하는 것(tokenizer)은 대소문자를 구분한다(case-insensitive). (flex command line option -i). <PRE>unicode \\[0-9a-f]{1,4}latin1 [¡-ÿ]escape {unicode}|\\[ -~¡-ÿ]stringchar {escape}|{latin1}|[ !#$%&(-~]nmstrt [a-z]|{latin1}|{escape}nmchar [-a-z0-9]|{latin1}|{escape}ident {nmstrt}{nmchar}*name {nmchar}+d [0-9]notnm [^-a-z0-9\\]|{latin1}w [ \t\n]*num {d}+|{d}*\.{d}+string \"({stringchar}|\')*\"|\'({stringchar}|\")*\'%x COMMENT%s AFTER_IDENT%%"/*" {BEGIN(COMMENT);}<COMMENT>"*/" {BEGIN(0);}<COMMENT>\n {/* ignore */}<COMMENT>. {/* ignore */}@import {BEGIN(0); return IMPORT_SYM;}"!"{w}important {BEGIN(0); return IMPORTANT_SYM;}{ident} {BEGIN(AFTER_IDENT); return IDENT;}{string} {BEGIN(0); return STRING;}{num} {BEGIN(0); return NUMBER;}{num}"%" {BEGIN(0); return PERCENTAGE;}{num}pt/{notnm} {BEGIN(0); return LENGTH;}{num}mm/{notnm} {BEGIN(0); return LENGTH;}{num}cm/{notnm} {BEGIN(0); return LENGTH;}{num}pc/{notnm} {BEGIN(0); return LENGTH;}{num}in/{notnm} {BEGIN(0); return LENGTH;}{num}px/{notnm} {BEGIN(0); return LENGTH;}{num}em/{notnm} {BEGIN(0); return EMS;}{num}ex/{notnm} {BEGIN(0); return EXS;}<AFTER_IDENT>":"link {return LINK_PSCLASS_AFTER_IDENT;}<AFTER_IDENT>":"visited {return VISITED_PSCLASS_AFTER_IDENT;}<AFTER_IDENT>":"active {return ACTIVE_PSCLASS_AFTER_IDENT;}<AFTER_IDENT>":"first-line {return FIRST_LINE_AFTER_IDENT;}<AFTER_IDENT>":"first-letter {return FIRST_LETTER_AFTER_IDENT;}<AFTER_IDENT>"#"{name} {return HASH_AFTER_IDENT;}<AFTER_IDENT>"."{name} {return CLASS_AFTER_IDENT;}":"link {BEGIN(AFTER_IDENT); return LINK_PSCLASS;}":"visited {BEGIN(AFTER_IDENT); return VISITED_PSCLASS;}":"active {BEGIN(AFTER_IDENT); return ACTIVE_PSCLASS;}":"first-line {BEGIN(AFTER_IDENT); return FIRST_LINE;}":"first-letter {BEGIN(AFTER_IDENT); return FIRST_LETTER;}"#"{name} {BEGIN(AFTER_IDENT); return HASH;}"."{name} {BEGIN(AFTER_IDENT); return CLASS;}url${w}{string}{w}$|url${w}([^ \n\'\")]|\\\ |\\\'|\\\"|\\$)+{w}\) {BEGIN(0); return URL;}rgb${w}{num}%?{w}\,{w}{num}%?{w}\,{w}{num}%?{w}$ {BEGIN(0); return RGB;}[-/+{};,#:] {BEGIN(0); return *yytext;}[ \t]+ {BEGIN(0); /* 공간 무시 */}\n {BEGIN(0); /* 공간 무시 */}\<\!\-\- {BEGIN(0); return CDO;}\-\-\> {BEGIN(0); return CDC;}. {fprintf(stderr, "%d: Illegal character (%d)\n", lineno, *yytext);}</PRE>

부록 C: 엔코딩(encoding)

(이 부록은 지명적이 아니고 정보를 제공하기 위한 것이다.)

HTML 문서들은 대략 30,000개의 유니코드(Unicode)에서 정의한 다른 글자들을 가질 수 있다. 많은 문서들은 몇 백가지 글자로서 충분하다. 많은 글꼴들 또한 몇 백가지의 도형(glyph)들 만을 가지고 있다. 이 부록은, 항목 5.2 글꼴의 속성들과 조합하여, 문서의 글자들과 글꼴의 도형(glyph)들이 어떻게 서로 맞는가를 설명한다.

글자 엔코딩(encoding)

HTML 문서의 내용(content)은 글자(character)들과 마크업(markup)들의 연속이다. 쓰여진 것이 송신되면, 이는, 여러가지 가능한 방법 중 한가지 엔코딩(encoding)을 사용하여, 바이트(byte)들의 연속으로 바뀌어(encode) 진다. HTML 문서는 글자들은 찾기 위 해 엔코딩되어야 한다. 예를 들어, 서부 유럽에서, 관습적으로 a-with-grave-accent (à)를 위하여, 244 바이트(bite)를 사용하였다. 그러나 히브리어(Hebrew)에서는, 224을 Aleph를 위하여 사용하는 것이 더 보편적이다. 일본어에서는 한 바이트(byte)의 의미가 그 뒤의 바이트들에 의하여 달라진다. 일부 엔코딩(encoding)에서는 한 글자가 두개(혹은 그 이상)의 바이트들로 엔코딩된다.

사용도구는 http header에 있는 글자세트("charset")를 점검하여 어떻게 엔코딩할 것인가를 안다. 전형적인 엔코딩(encoding: 글자세트의 값)들은 영어에서 아스키("ASCII"), 서유럽에서 "ISO-8859-1", 히브리어에서 "ISO-8859-8", 일본어에서 "Shift-JIS", 한글에서 "EUC-KR"이다.

[2] HTML 2.0과 [4] HTML 4에서, 일반적으로 유니코드(Unicode)에 의하여 정의되어 있는 30,000여 다른 글자들을 허용한다. 그렇게 많은 글자들을 사용하는 문서들은 많지 않을 것이다. 그리고 올바른 엔코딩(encoding)의 선택은 일반적으로 그 문서가 한 글자마다 한 바이트(byte) 만 필요하게 해 줄 것이다. 엔코딩 밖에 있는 때때로 사용하는 글자들도 글자 참조 수치를 입력하여 사용할 수 있다. 'Π'는 어느 엔코딩를 사용하던 관계없이 항상 그리스어 Pi의 대문자(Π)를 의미한다. 사용도구들은, 단지 몇가지 엔코딩(encoding)들 만을 채택한다 하더라도, 어떤 유니코드(Unicode) 글자도 처리할 수 있어야 한다는 점을 주시하라.

HTML의 엔코딩 설명을 참조하라.

글꼴(font) 엔코딩(encoding)

글꼴(font)는 글자(character)들을 포함하지 않고 글자들의 도형(glyph)이라 불리우는 그림(picture)들을 갖는다. 이 도형(glyph)들은 아우트라인(outline) 비트맵(bitmap)에서 글자의 독특한 표현을 한다. 명시적(explicit)으로 혹은 암시적(implicit)으로, 각 글꼴는 그에 연관된 글꼴 엔코딩 표(font encoding table)를 갖는데, 이는 각 도형(glyph)이 어떤 글자을 표현하는가를 말해 준다. 타입(Type) 1 글꼴(font)는, 표에서 엔코딩 벡터(encoding vector)로 참조된다.

실제로, 많은 글꼴들은 한 글자를 위하여 여러가지 도형(glyph)들을 같는다. 어느 도형(glyph)이 사용되는가는 언어의 명령(rule)들이나 도형 설계자를 참조하는데 따라 채택된다.

예를 들어 아랍어(Arabic)에서, 모든 글자들은 네가지 다른 모양(shape)들을 갖는데, 그 글자가 단어의 앞에 오는가, 가운데 오는가, 끝에오는가 혹은 독립적으로 사용되는가에 따라 다르다. 이는 모든 경우에 같이 적용되고, 따라서 HTML 문서에서 한 가지의 글자인 것이다. 그러나 인쇄되면 매 번 다르게 보인다.

그래픽 디자이너들이 여러 대체 모양들 중에서 골라 사용할 수 있는 글꼴들도 남겨 놓았다. 불행하게도 CSS1은 아직 이들 대체 모양을 선택하는 수단을 제공하지 못하고 있다. 현재로서는 선택된 그런 글꼴는 항상 디폴트 모양(shape)으로 된다.

글꼴쎄트(font set)

단일 글꼴로 문서나 단일 엘레멘트의 모든 글자들을 표현하기에 불 충분한 경우의 문제를 다루기 위하여, CSS1는 글꼴쎄트(font set)들의 사용을 허용한다.

CSS1에서 글꼴쎄트(font set)는 글꼴들의 목록이다. 모두 같은 스타일(style)과 크기를 갖고있으며, 어떤 글자가 도형(glyph)을 갖고 있는가를 점검하는 일련의 순서이다. 한 엘레멘트가 영어 텍스트를 가지고 수학기호(mathematical symbol)들과 섞여 있을 때, 하나는 글자와 수자, 다른 하나는 수학기호를 갖는, 두가지 글꼴의 글꼴쎄트가 필요할 수 있다. 글꼴쎄트를 선택하는 기능(mechanism)에 대한 설명은 항목 5.2 글꼴 속성을 참조하라.

아래 글꼴쎄트 예제는 문장에 영어(Latin) 글자들, 일본어 글자들과 수학기호들이 들어가는 것이 예상되는 경우에 적당하다. <PRE>BODY { font-family: Baskerville, Mincho, Symbol, serif }</PRE>

Baskerville 글꼴(Latin 글자만 있슴)에 있으면 그 글꼴에서 채택하고, 일본어는 Mincho 글꼴에서, 그리고 수학기호는 Symbol 글꼴에서 올 것이다. 다른 글자들은 (희망적으로) 일반 글꼴(generic font family)인 'serif' 글꼴에서 올 것이다. 'serif' 글꼴는 하나이상의 다른 글꼴들이 없을 때도 사용될 수 있다.

부록 D: 감마(gamma) 수정

(이 부록은 지명적이 아니고 정보를 제공하기 위한 것이다.)

감마(gamma)에 대하여 잘 모르면 [12] PNG 규격의 영문 감마 안내서(Gamma Tutorial)를 참조하라.

사용도구들이 CRT(화면)에 디스플레이는, 계산하는데 있어, 이상적인 CRT를 가정하고 떨림(dithering)에 의하여 발생되는 gamma의 효과를 무시할 수 있다. 이는 현재의 프래트폼(platform)들에서 필요한 처리를 최소화 함을 의미한다.

MS-Windows를 사용하는 PC: 없슴
X11을 사용하는 Unix: 없슴
QuickDraw를 사용하는 Mac: 감마(gamma) 1.39 적용 [13] (ColorSync-savvy 적용들은 올바른 색상 보정을 위하여 단순히 sRGB ICC profile [14]을 ColorSync에 전달한다.)
X를 사용하는 SGI: 감마(gamma) 값을 /etc/config/system.glGammaVal로 부터 적용
(디폴트 값은 1.70; Irix 6.2 이상에서 운영되는 적용들은 단순히 sRGB ICC profile을 색상 관리 시스템에 전달한다)
NeXT using NeXTStep: 감마(gamma) 2.22 적용

감마를 적용한다("applying gamma")는 것은 운영체계(OS)에서 처리되기 전에 각 R, G, B 삼색이 R'=R^gamma, G'=G^gamma, B'=B^gamma로 환산되어야 한다는 의미이다.

이는 브라우저마다 아래와 같이 한번에 256-엘레멘트 조견표(table)를 만들므로서 신속히 이루어 질 수 있다. <PRE>for i := 0 to 255 do raw := i / 255; corr := pow (raw, gamma); table[i] := trunc (0.5 + corr * 255.0)end</PRE>

그러면 이것은 색상 애트리뷰트마다나 픽셀(pixel)마다의 어떤 고급 계산의 필요를 피할 수 있다.

부록 E: CSS1의 적용성과 확장성

(이 부록은 지명적이 아니고 정보를 제공하기 위한 것이다.)

CSS1에 대하여 작업하는 목표는 HTML 문서들을 위하여 간단한 스타일쉬트 기능을 만들기 위한 것이다. 현재의 규격은 스타일쉬트을 웹에 사용 타당성을 제시하는 간단성과 풍부한 보이는 제어를 위하여 제작자들로부터의 압력에 의한 것의 사이에서 균형을 갖춘 상태이다. CSS1는 다음 사항들을 제공한다.

보이(visual)는 마크업(markup) 대체: HTML 표현(extension)들, 예를 들어 "CENTER", "FONT", "SPACER" 등은 CSS1 스타일쉬트로 쉽게 대체된다.
더 멋있는 마크업(markup): 인기있는 작은 대분자(small-caps) 스타일을 얻기 위해 "FONT" 엘레멘트들을 사용하는 대신에 스타일쉬트에서 하나의 선언(declaration)으로 충분하다. 마크업(markup)과 비교하면: <PRE><H1>H<FONT SIZE=-1>EADLINE</FONT></H1></PRE>
스타일쉬트로는: <PRE>H1 { font-style: small-caps }<H1>Headline</H1></PRE>
여러가지 통합 레벨들: CSS1 스타일 명령(rule)들은 외부 스타일쉬트로 부터 가져 올 수 있고, 'STYLE' 엘레멘트에 포함시킬 수 있고, 또는 'STYLE' 애트리뷰트 안에 넣을 수 있다. 나중의 선택은 HTML 표현(extension)들로 부터의 변환을 용이하게 한다.
새로운 효과들: 일부 새로운 보이는 효과들이 사용자의 흥미를 위하여 추가되었다. 인쇄술을 위한 가상 엘레멘트들과 배경(background) 속성의 추가적 값들은 여기에 해당된다.
배수에 의한 조정 가능(scalability): CSS1는 단순한 텍스트 터미날들에서부터 고 해상도 색상 워크스테이션(workstation)들까지 두루 유용하다. 제작자들은 한 스타일쉬트을 써서 합리적으로 의도하는 스타일이 가능한 가장 좋은 방식으로 나타 날 것이라는 것을 확실히 할 수 있다.

CSS1는 아래 사항들을 제공하지 않는다.

픽셀(pixel) 단위 제어: CSS1 값들의 제어 수준보다는 단순성에 중점을 두어, 이미지 배경과 스타일화된 HTML의 조합이 강력 함에도 불구하고, 픽셀(pixel) 수준의 제어는 불가능하다.
제작자 제어: 제작자는, 암시는 할 수 있을 뿐, 어떤 스타일의 사용을 보완할 수 없다.
배치(layout) 언어: CSS1는, 텍스트의 흐름(text-flow), 프레임의 겹침(overlapping) 등, 복수 컬럼들을 제공하지 않는다.
처리(parse) 계통(tree)에서 풍부한 쿼리(query) 언어: 다른 스타일쉬트들(예를 들어 [6] DSSSL)은 완전한 쿼리(query) 언어를 제공하는데 반 해, CSS1는 처리(parse) 계통(tree)에서 조상(ancestor) 엘레멘트들을 찾는 기능 만을 제공할 수 있다.

CSS에서 다음 여러 방향으로 확장될 것으로 기대한다.

종이(paper): HTML 문서들의 개선된 인쇄 지원
보이지 않는(non-visua) 메디아 지원: 속성들 목록에 추가하는 작업이 진행되고 있으며, 해당 값들은 음성 장치나 점자 출력을 지원한다.
색상명(color name)들: 현재의 목록의 확장
글꼴(font)들: 현재의 CSS1 글자(font) 속성들을 보완하기 위하여 보다 정확한 글꼴 규격 체계가 기대 됨.
값들과 속성들: 관련 업체(vendor)들에 의한 값들과 속성들의 CSS1 쎄트에 확장들이 제안될 것으로 기대한다. 이 방향으로의 확장은 규격의 자질구레한 부분이나, 서로 다른 사용도구들 사이에서 공동적 사용(interoperability)을 다룬다.
배치(layout) 언어: 전통적인 편집기등에서 두 차원 배치(two-dimensional layout)를 지원
다른 문서타입정의(DTD)들: CSS1은 예를 들어 'CLASS'와 'ID' 애트리뷰트들의 특수 상태(status) 등 HTML에 맞는(HTML-specific) 부분들을 갖는다. 그러나 쉽게 다른 문서타입정의(DTD)들의 적용에 확장되어야 할 것이다.

CSS는 다음 사항을 취급하지 않을 것이다.

프로그램 언어

부록 F: 1996년 12월 17일 버전으로 부터의 변경들

(이 부록은 지명적이 아니고 정보를 제공하기 위한 것이다.)

이 규격은 1996년 11월 17일 최초 발표된 것으로부터 개정된 CSS1 추천안으로, 아래 목록은 모든 변경들을 설명한다. 스타일쉬트 오류("errata")를 선택 함으로서 해당 변경들이 부각된다.

Komachi Yushi, Steve Byrne, Liam Quinn, Kazuteru Okahashi, Susan Lesch, Tantek Çelik에게 이 개정을 준비하는데 도움을 준 것에 대해 감사한다.

철자와 인쇄 상의 오류들, 일반 오류들, 구조와 구성 조정

오류들은 과거의 오류에서 부터 수정된 내용을 기술할 것으로, 번역문에서는 특별한 의미가 없고, 이미 수정되었기 때문에 번역을 생략하였다.
필요하면 원문을 참고하라.

Posted by 1010

«이전 1 2 3 4 5 6 7 다음»

'03.HTML 4.X, HTML5, XML.../HTML/Css/Script'에 해당되는 글 196건

HTML 태그 제거 정규식#

태그제거[1]↓ #

한 줄로 표현하기[1]↓ #

주석 제거#

HTML 태그 제거 소스 [2]↓ #

See also#

참고자료#

prototype.js 를 위한 개발자 노트

1.4.0 버전을 다룸

Table of Contents

Prototype은 무엇인가.?

관련글

유틸리티 함수들(utility functions)

$() 함수 사용하기

$F() 함수 사용하기

$A() 함수 사용하기

$H() 함수 사용하기

$R() 함수 사용하기

Try.these() 함수 사용하기

Ajax 객체

Ajax.Request 클래스 사용하기

Ajax.Updater 클래스 사용하기

열거(Enumerating)...

루프, 루비-스타일

스테로이드(steroids)에서 당신의 배열

내가 강력하게 추천하는 책들.

prototype.js 참조

JavaScript 클래스에 대한 확장

Object 클래스를 위한 확장

Number 클래스를 위한 확장

Function 클래스를 위한 확장

String 클래스를 위한 확장

Array 클래스를 위한 확장

document DOM 객체를 위한 확장

Event 객체를 위한 확장

prototype.js에 새롭게 정의된 객체와 클래스

PeriodicalExecuter 객체

Prototype 객체

Enumerable 객체

Hash 객체

ObjectRange 클래스

Class 객체

Ajax 객체

Ajax.Responders 객체

Ajax.Base 클래스

Ajax.Request 클래스

options 인자 객체

Ajax.Updater 클래스

Ajax.PeriodicalUpdater 클래스

Element 객체

Element.ClassNames class

The Abstract 객체

Abstract.Insertion 클래스

Insertion 객체

Insertion.Before 클래스

Insertion.Top 클래스

Insertion.Bottom 클래스

Insertion.After 클래스

Field 객체

Form 객체

Form.Element 객체

Form.Element.Serializers 객체

Abstract.TimedObserver 클래스

Form.Element.Observer 클래스

Form.Observer 클래스

Abstract.EventObserver 클래스

Form.Element.EventObserver 클래스

Form.EventObserver 클래스

Position 객체 (예비 문서)

모든 셀에 한꺼번에 바탕색 지정

테이블 태그의 테두리 빈틈 없애기

71 CSS menus for free

CSS2 Reference

CSS1 카스케이딩 스타일쉬트 규격 번역문

W3C 추천안 1996년 12월 17일, 1999년 1월 11일 수정

이 규격의 상태

HTML 태그 제거 정규식^#

태그제거^[1]^↓ ^#

한 줄로 표현하기^[1]^↓ ^#

주석 제거^#

HTML 태그 제거 소스 ^[2]^↓ ^#

See also^#

참고자료^#