사용자 삽입 이미지


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

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

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

세이박스

세이박스는 세상의 모든 이야기를 담는 소통박스 입니다.

댓글을 달아 주세요

<div style="width:100;text-overflow:ellipsis;overflow:hidden">abcdefghight1234567890</div>

결과 :
abcdefghig...

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

블로그 이미지

세이박스

세이박스는 세상의 모든 이야기를 담는 소통박스 입니다.

댓글을 달아 주세요

웹폰트 설정 방법

<style type="text/css">
@font-face {font-family:fontname;src:ur(fontname.eof);fontname.eof);
</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으로 텍스트 및 이미지를 표시 할 수 있습니다.

블로그 이미지

세이박스

세이박스는 세상의 모든 이야기를 담는 소통박스 입니다.

댓글을 달아 주세요

ㅇ 텍스트(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 등등 사용가능)

블로그 이미지

세이박스

세이박스는 세상의 모든 이야기를 담는 소통박스 입니다.

댓글을 달아 주세요

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 등등 사용가능)
블로그 이미지

세이박스

세이박스는 세상의 모든 이야기를 담는 소통박스 입니다.

댓글을 달아 주세요