CSS 이미지를 위한 font-family
그림모음
추가 예제

ie4에서 같은 크기의 레이어를 1px씩 여러개 층을 이루어 배치를 하면 20px, 15pt 이상의 font-size를 지정한 레이어의 글자가 body line-height를 지정한 페이지에서 일부가 잘려나갑니다. 이때, 레이어를 table로 감싸니 잘리지 않았습니다. 즉, line-height보다 큰 글자를 사용하면 그 만큼 글자가 잘립니다. 그리고 position:relative 로 지정한 레이어는 JavaScript로 배치시킬 수가 없습니다.

nn4에서 레이어를 가지고 있는 레이어를 2개 이상 사용할 때, 두 번째 레이어가 제대로 나오게 하기 위해서 각 레이어의 하위 레이어에 style를 지정시 <style>택 안에 넣어야 두 번째 레이어가 나옵니다. inline으로 각 하위 레이어 택안에 style을 지정시 두번째 레이어부터 나오지 않습니다.


배치를 위해 table을 사용하지 않고 <span> 택은 정열이 까다롭습니다. position:absolute, relative 둘 다 마찬가지입니다. &nbsp;로 HTML을 작성할 때 미리 조정을 하면 되겠지만 레이어의 style width, body의 font-size, line-height 에 따라서 유동적이기 때문에 left 좌표는 약간 비슷하게 맞추겠지만 이것도 nn4와 ie4에서 &nbsp;의 크기가 달라서 어렵고 수직의 top으로는 더 어렵습니다.
<spacer>, <span style="visibility:hidden">앞 레이어 글자</span>을 지정하여도 두 브라우저 서로 다르게 출력됩니다.

그래서 이들 여러 이미지효과 레이어를 페이지에 정렬시 position:relative; 로 table로 정열 하는게 가장 간단했습니다. 그리고 하위 레이어들은 이미지 효과를 내기 위해서 position:absolute; 를 지정합니다.

table에 position:absolute; 를 가지고 있는 position:relative; 인 레이어를 넣을 때, 상위레이어의 width의 값에 따라서 ie4에서 table 속의 레이어들의 배치가 됩니다. 그래서 상위 레이어의 width값을 신경을 써야합니다. 절대 좌표의 레이어는 table의 border를 무시하고 위치합니다. 하위레이어가 많다면 더 신경을 써야합니다. 그리고 width로도 nn4에서는 배치가 안됩니다. 그래서, ie4와 nn4에서 둘 다 사용할 수 있게 가짜 내용을 각 상위레이어에 넣어줍니다. 이 가짜 내용은 글자 이미지로 사용할 하위 레이어의 크기보다 조금 크게하면 ie4와 nn4의 위의 문제를 해결할 수 있습니다. 가짜 내용의 크기는 하위레이어의 font-size + 각 하위레이어의 좌표차이로 하면 적당합니다.

#img7 { position:relative; width:100; }
  #img71 { 
  	position:absolute; left:3; top:3; width:20; 
  	color:silver; font-size:25px; font-weight:bold; 
  }
  #img72 { 
  	position:absolute; left:2; top:2; width:20; 
  	color:gray; font-size:25px; font-weight:bold; 
  }
  #img73 { position:absolute; left:0; top:0; width:20; 
	color:white; font-size:25px; font-weight:bold; 
  }
  #img74 { 
  	position:absolute; left:1; top:1; width:20; 
  	color:aqua; font-size:25px; font-weight:bold; 
  }
.gab {font-size:20pt; color:#f0e0d0;} 

</td><td>
<span id="img7">
<font class="gab"><nobr> 글자 이미지 7 </nobr></font>
	<span id="img71"><nobr>글자 이미지 7</nobr></span>
	<span id="img72"><nobr>글자 이미지 7</nobr></span>
	<span id="img73"><nobr>글자 이미지 7</nobr></span>
	<span id="img74"><nobr>글자 이미지 7</nobr></span>
</span>
</td>

위에서 굵은 글자가 table에서 공간을 확보하기 위한 가짜 내용입니다. color:#f0e0d0;는 필요가 없는 글자이므로 보이지 않게 바탕색과 같은 색을 지정합니다.

각 하위레이어의 글자들에게 <nobr>글자</nobr>을 넣어주었습니다. 한 줄로 레이어를 구성합니다. 레이어의 width의 값에 따라서 개행을 하는데 개행을 하지 못하게 합니다. width의 값에 신경쓸 필요없이 한 줄로 구성을 합니다. 레이어의 width의 값에 따른 글자의 개행은 영어는 width값을 넘는 글자가 공백이 있으면 개행을 하고 한글은 width값을 넘으면 공백이 있건 없건 무조건 개행을 합니다.

일반적으로 이미지를 링크로 많이 사용합니다. 글자 이미지로 만든 것도 링크로 사용할 수 있습니다. 하지만, 글자 이미지를 링크로 사용하기 위해서는 몇가지 주의를 해야합니다. 여러 층의 레이어가 있을 때, 가장 위의 레이어만 마우스로 사용할 수 있습니다.

링크로 사용할 이벤트로 mousedown을 사용할 수도 있지만, 가장 간단한 방법은 가장 위에오는 레이어의 글자를 링크로 만드는것입니다. 그냥 링크로 만들면 글자의 색깔이 링크 색깔로 나와서 파란색이 됩니다. 그래서 링크에 style text-decoration:none;을 넣어주어야 합니다. 글자 이미지를 링크로 만들었습니다. 이미지를 누르면 페이지 꼭대기로 이동합니다.