세이박스

CSS 이미지 테두리를 액자처럼 라인 넣어 주기

웹프로그램
사용자 삽입 이미지


이미지만 출력시 다소 허전한 느낌을 줄때 테두리에 연한 회색으로 그려 주면 다소 깔끔하게 보입니다.
스타일 적용은 다음과 같습니다.

<div style="width:이미지폭px;height:이미지높이px;border:2 solid #CDCDCD;padding:2px;">
<img src="이미지">
</div>

위처럼 Div 로 이미지 소스를 감싸 주시면 되며
width : 이미지의 폭 픽셀 값을 넣어 주시구요
height : 이미지의 높이 픽셀 값을 넣어 주세요
border : 라인 두께 인데 적절히 조절해서 이용하세요
solid #color : color 값은 이미지에 어울리는 색으로 넣어 주시면 됩니다.
padding : 이미지와 라인 사이 공백으로써 적절히 띄워주시면 깔끔하게 보입니다. 큰 이미지 일수록 많이 띄워야 겠죠..^^ 

CSS 텍스트 범위 벗어나면 숨기고 ... 붙이기

웹프로그램
<div style="width:100;text-overflow:ellipsis;overflow:hidden">abcdefghight1234567890</div>

결과 :
abcdefghig...

IE 6.0 이상에서 적용되며 div 에서 사용시 폭을 벗어난 글자는 숨기고 "..." 처리 해줌.
굿이 일일이 php 에서 길이계산후 "..." 처리 안해도 손쉽게 적용 가능

CSS 웹폰트 설정 방법

웹프로그램
웹폰트 설정 방법

<style type="text/css">
@font-face {font-family:fontname;src:ur(fontname.eof);fontname.eof);
</style>

CSS style 로 이미지 위에 텍스트 표시 하기

웹프로그램
<style>
.korea_medalx {width:548px;height:162px;background:url(ranking.gif) no-repeat;font-size:11px;font-family:돋움,Dotum,AppleGothic,serif; color:#666;position:relative;}
.korea_medalx .gold  {position:absolute;top:108px;left:184px;font:bold 16px Verdana; color:#f60;}
.korea_medalx .silver  {position:absolute;top:108px;left:247px;font:bold 16px Verdana; color:#353b3f;}
.korea_medalx .bronze  {position:absolute;top:108px;left:308px;font:bold 16px Verdana; color:#ba5af14;}
.korea_medalx .total  {position:absolute;top:110px;left:385px;font:bold 16px Verdana; color:#ff7062;}
.korea_medalx .rank  {position:absolute;top:110px;left:490px;font:bold 16px Verdana; color:#FF7062;}
.korea_medalx .link1  {position:absolute;top:138px;left:332px;width:93px;}
.korea_medalx .link2  {position:absolute;top:138px;left:446px;width:93px;}
</style>

<div class="korea_medalx">
<div class="gold">0</div>
<div class="silver">0</div>
<div class="bronze">0</div>
<div class="total">0</div>
<div class="rank">-</div>
<div class="link1"><a href="#"><img src="link1.gif"></a></div>
<div class="link2"><a href="#"><img src="link2.gif"></a></div>
</div>
 
ranking.gif 이미지를 배경 이미지로 표시하고 그 위에 position으로 텍스트 및 이미지를 표시 할 수 있습니다.

CSS 스타일시트 기본 속성

웹프로그램
ㅇ 텍스트(text) 관련 옵션
font-size:9pt; //폰트크기
font-weight:bold; //폰트 볼드
text-align:center; //폰트 정렬 (left, center, right)
color:#FFFF00; //폰트컬러
word-spacing:5pt; //단어간 간격 조절
letter-spacing:7pt; //자간 조절
line-height:200%; //줄간격 조절
(%,px,pt 등등 사용가능)

CSS 텍스트(text) 관련 옵션

웹프로그램
font-size:9pt; //폰트크기
 
font-weight:bold; //폰트 볼드
 
text-align:center; //폰트 정렬 (left, center, right)
 
color:#FFFF00; //폰트컬러
 
word-spacing:5pt; //단어간 간격 조절
 
letter-spacing:7pt; //자간 조절
 
line-height:200%; //줄간격 조절
 
(%,px,pt 등등 사용가능)