Font-Family:WingDings [u]
Font-Family:WingDings [l]
Font-Family:WingDings [N]
Font-Family:WingDings [N](bo Bar)

<font style="font-family:WingDings; font-size:100px; color:white;>N</font>

font-family와 font-size를 지정한 글자는 그 크기가 이미지같이 일정합니다. 그래서 왼쪽의 그림을 paintshop같은 그래픽 툴로 잘라서 사용한다고 생각하면 됩니다. 이 좌표를 구하는 것이 (font size checker)입니다. 이것을 사용하여 해골의 왼쪽눈의 중앙을 보니까 left:40, top:37 정도가 나오는군요.. 위의 그림이 table 안에 있지만 레이어에 넣어도 위의 모습과 같습니다.

많은 부분 이런 그림글자들을 여러겹으로 놓아야 재미있는 그림을 만들 수가 있습니다. 위의 그림에서 해골부분만 출력을 할려면 그 좌표를 구해서 레이어의 clip을 사용하면 됩니다. ie4는 position:relative 인 레이어에서 clip이 듣지않습니다. 그리고 하위의 레이어가 좌표를 상위레이어의 크기보다 크거나 작은 좌표에 위치시켜도 하위 레이어가 보입니다. 그래서 하위 레이어를 조절하기 위해서는 상위레이어를 absolute를 주고 같이 clip을 해야합니다.

#skull { 
	position:absolute; left:100; top:100; width:20; height:20; 
	clip:rect(0,142,180,0);
}
#skullFaceU { 
	position:absolute; left:-63px; top:-62px; width:10; height:20; 
	font-family:WingDings; font-size:400px; color:white;
}
#skullFaceD { 
	position:absolute; left:-59px; top:-60px; width:10; height:20; 
	font-family:WingDings; font-size:400px; color:gray;
}

<div id=skull>
<table><tr><td>
	<div id=skullFaceD>N</div>
	<div id=skullFaceU>N</div>
</td></tr></table>
</div>

[실행하기]       

상위 레이어에 table을 넣어준 것은 ie4에서 width, height 보다 큰 내용물은 큰만큼 잘려 나갑니다. 그래서 table를 넣어주었습니다. width, height 값에 신경쓰지 않고 큰 글자를 넣을 수 있습니다. 이 경우 nn4는 자동으로 늘어납니다.

레이어를 가지고 있는 레이어가 바탕색을 지정시 꼭 nn4에서는 layer-background-color만을 사용해야 합니다. background-color을 같이 지정시 안의 레이어어의 글자가 나오지 않았습니다. (nn4.05)

위의 예제들을 실행해 보면 페이지의 이동막대가 생깁니다. 이것을 안생기게 할려면 페이지 크기의 레이어를 만들고 clip을 페이지 크기로 주어서 그 속에 위의 예제들을 넣어주면 됩니다.

[T O P]