세이박스

text-overflow 이용한 텍스트 길이 제한하기

웹프로그램
게시판 리스트의 경우 제목이 길어지는 경우 특정 길이 이상은 자르고 "..." 붙이는거 많이 보셨을겁니다.
보통 php의 경우 substr() 함수를 이용하거나 left() 함수등 언어에 따라 다양하게 활용하는데
style로 간단하게 적용할 수 있습니다.
text-overflow 옵션을 활용하는 것입니다.

ellipsis
<nobr style="text-overflow:ellipsis;overflow:hidden;width:300px">내용</nobr>

ellipsis-word
<nobr style="text-overflow-mode:ellipsis-word ;overflow:hidden;white-space:nowrap;width:200px;">내용</nobr>

clip
<nobr style="text-overflow:clip;overflow:hidden;width:300px;">내용</nobr>

inherit
<nobr style="text-overflow:inherit;overflow:hidden;width:300px;">내용</nobr>

링크에적용1
<nobr style="text-overflow:ellipsis;overflow:hidden;width=300px;cursor:Hand">내용</nobr>

링크에적용2
<nobr class="nobr" style="width:120px;"><a href="javascript:goView(<%=BBS_SEQ%>);">내용</a></nobr>

테이블에 적용
<table width='200' border='0' cellpadding='0' cellspacing="0" style='table-layout:fixed;' cellspace='0'><tr>
<td><nobr style="text-overflow:ellipsis;width:200px;overflow:hidden;">내용</nobr></td>
</tr></table>

------------------------------------------------------------------------------------
#example1 {text-overflow-mode: clip; width: 200px; overflow:hidden;white-space : nowrap; }
#example2 {text-overflow-mode: ellipsis; width: 200px; overflow:hidden;white-space : nowrap; }
#example3 {text-overflow-mode: ellipsis-word; width: 200px; overflow:hidden;white-space : nowrap; }
------------------------------------------------------------------------------------


white-space :
요소 안에서의 띄어쓰기와 같은 빈 공간을 조절할 때 사용합니다.

white-space에 사용되는 값
normal : 줄 바꿈 디볼트 값을 유지합니다.
pre : 문서 소스에 서식을 할당해서 문서가 표시되게 합니다.
nowrap : 요소 내에서 줄바꿈이 되지 않습니다.

예제)
H1 {white-space: nowrap}
H1에서의 줄바꿈을 하지 않도록 설정합니다.
 

[style] 세이박스 메인 탑메뉴 처럼 메뉴 텍스트(text)에 그림자 효과 주기

웹프로그램
사용자 삽입 이미지
텍스트 메뉴에 그림자 스타일 효과 주기

filter:shadow() 를 이용하면 됩니다.

예) 흰색 메뉴 글자에 검정색 그림자 1px 효과 입니다.
<span style="color:#FFFFFF;filter:shadow(color=#000000,direction=135,strength=1);">메뉴1</span>

위 예제의 shadow 옵션 설명
color : 그림자 색상
direction : 그림자 각도
strength : 그림자 길이

세이박스 메인 탑메뉴에 그림자 효과를 주기위해 옵션을 여기 저기 찾아 보니 원하는 효과가 없었습니다.
1픽셀만큰 그림자 효과를 주고 싶었는데 알고보니 세이박스 게시글에 strength 옵션에 대해 제가 과거에 올려 놨었더군요.

http://www.saybox.co.kr/bbs/board.php?bo_table=board06&wr_id=21

먼곳에서 찾는다고 고생했다는 ㅋㅋ ^^;

IE 8.0에서 iframe 스크롤 생기는 문제 body style로 스크롤바 없애기

웹프로그램

사용자 삽입 이미지

iframe으로 광고 페이지를 삽입할 때  스크롤바 없애기

<iframe id="xxx" src="zzz" width="100" height="200" scrolling="0" frameborder="0" vspace="0" hspace="0"></iframe>

IE 8.0 에서는 위처럼 하더라도 iframe src 페이지 내용이 100*200을 넘어 버리면 스크롤이 생겨버립니다.

해결 방법은 src 페이지의 body style을 변경 해야합니다.

<body style="overflow-x:hidden; overflow-y:hidden;">


[옵션 설명]

- hidden : 스크롤 없애기

- auto : 내용이 지정된 사이즈 이상일때 자동으로 스크롤 생성

- visible : 사이즈에 관계 없이 내용 모두 보여준다

- scroll : 시작부터 스크롤바 생김



위 글은 세이박스(http://www.saybox.co.kr) 에서 작성한 글입니다. 퍼가실땐 출처를 남겨 주세요!

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 마우스 커서 모양 변경 하고 싶을 때 cursor

웹프로그램
마우스 커서 모양을 변경하고자 할때 cursor:에 모양을 지정해주면 되니다.

style="cursor:hand"

style="cursor:wait"

style="cursor:help"

style="cursor:move"

style="cursor:crosshair"

style="cursor:n-resize"

style="cursor:e-resize"

style="cursor:s-resize"

style="cursor:w-resize"

style="cursor:se-resize"

style="cursor:sw-resize"

style="cursor:ne-resize"

style="cursor:nw-resize"  

HTML + CSS + Script 정리 HTML

웹프로그램
HTML
 
1. 구조
 
<html>
<head>
<title></title> // 웹페이지 이름 정의
</head>
<body>
</body>
</html>
 
2. Tag들
 
<pre></pre> // html문서를 워드처럼 사용
        ex> 안녕하세요.    나는 나예요.
 
<h1 align = "center"></h1> // 주제 삽입(크기는 숫자가 작을수록 큼 1~6까지 있음). 옵션은 중앙정렬
        ex> <h1>졸려 자고싶다.</h1>
 
<hr noshade size = "3" color = "red" width = "30%"> // 수평선 긋기 noshade옵션은 수평선에 음영넣지 않기. 크기는 3 색깔은 빨강.
        ex> <hr noshade size = "3">
 
<p align = "right"></p> 단락나누기 PS. 문단 위아래로 <br> 효과가 들어감.
        ex> <p>대성이짱</p>
 
<b></b> 글자 굵게하기 이렇게
        ex> <b>4조 화이팅</b>
 
<i></i> 이탤릭체. 글자 기울게하기 이렇게
        ex> <i>글자가 기운다</i>
 
<u></u> 글자에 밑줄긋기 이렇게
        ex> <u>밑줄을 그어라~</u>
 
<s></s> 글자 중간으로 밑줄긋기
 
&nbsp; 스페이스바 효과 한칸 뛰기
 
&lt; p &gt; < p > 을 나타낸다.
 
<blockquote> 단락 들여쓰기
        ex> <blockquote><p>자야지</p></blcokquote>
 
<TT></TT> 타자체로 출력되도록 지정
 
<SUB></SUB> 아래첨자로 출력되도록 지정
 
<SUP></SUP> 위 첨자로 출력되도록 지정
 
<center></center> 센터 정렬시 사용
 
<big></big> 글자를 한단계 크게함. 중첩가능
 
<small></small> 글자를 한단계 작게함. 중첩가능
 
<font color = "red" face = "돋음" size = "5" weight = "100~900">
 
<body background = "kosta.jpg" bgcolor = "black" text = "yellow" link = "green" alink = "red" vlink = "magenta">
 
<span></span> span 사이의 문자열 영역에 style지정 가능. <div></div>도 같은 효과
        ex> <span style = "color:red">red</span>
 
<img src = "bed.jpg" align = "center" border = "1" height = "50%" width = "500">
align : left, right, left, right, bottom        PS. center 는 에러!
 
<ol start = "c || ii || 3" type = "a || i || 1"></ol>
<ul type = "circle || square || disc"></ul>
<li value = "5">
 
<table align = "left || right" bgcolor = "red" border = "1" height = "500" width = "500"
       cellpadding = "0" cellspacing = "0" bordercolor = "red">
PS. cellpadding // 셀 내의 여백 크기 지정 , cellspacing // 셀외곽 크기지정
<tr align = "center || right || left" valign = "top || middle || bottom" bgcolor = "red">
<td(th) align = "center || right || left" valign = "top || middle || bottom" bgcolor = "red"
       height = "500" width = "500" colspan = "2" rowspan = "2" nowrap>
PS. nowrap // 셀 내의 내용은 다음 라인으로 넘어갈 수 없음을 지정
 
<bgsound balance = "-10000 || 10000" loop = "-1 || 0 || n" src = "text.mid" volume = "-10000 || 0">
 
<a name = "앵커이름"></a>
<a href = "#앵커이름 || URL || URL#앵커이름" target = "_top || _blank || _self || _parent"></a>
 
 
이미지 맵 영역을 나눠서 링크 꾸미기
<img src = "1-28.jpg" usemap = "#mainmap">
<map name = "mainmap">
        <area shape = "rect" coords = "0.0.127.92" href = "http://www.yahoo.co.kr">
        <area shape = "circle" coords = "190,46,45" href = "http://www.daum.net">
        <area shape = "poly" coords = "0,138,127,93,252,138,127,182" href = "http://www.man.co.kr">
</map>
 
<frameset cols = "30%,*" rows = "30%,*" border = "20" bordercolor = "red" frameborder = "yes"></frameset>
frameborder // 프레임 사이의 경계선의 존재 여부 지정 yes , no
border // 프레임 사이의 경계선의 굵기 지정
 
<frame bordercolor = "red" frameborder = "yes" marginheight = "100" marginwidth = "100" name = "daesung"
       noresize scrolling = "yes || no || auto" src = "http://www.naver.com">
PS. 프레임은 바디 안에서 사용할 수 없다. 바디 안에서 사용가능 한건 iframe-x
<iframe-x bordercolor = "red" frameborder = "yes" marginheight = "100" marginwidth = "100" name = "daesung"
       noresize scrolling = "yes || no || auto" src = "http://www.naver.com"></iframe-x>
 
<form action = "1-28.htm" method = "get || post" name = "fm" enctype = "encodingType" target = "windowName"></form>
enctype // 폼의 데이터 전송 시 암호화 방법 지정.
target // CGI 프로그램에 의하여 전송되는 데이터를 출력할 윈도우 지정.
 
<input type = "text || password" maxlength = "8" name = "son" size = "10" value = "초기값지정">
<input type = "button || submit || reset || image" name = "son" value = "버튼이름">
        PS. 이미지 버튼 만들기
            ex> <input type = "image" src = "button.gif" name = "son" value = "전송">
                <button name = "button1" type = "reset"><img src = "button.gif" align = "middle">reset</button>
<input type = "checkbox || radio" checked name = "son" value = "이름">
        // 그룹으로 묶고 싶은 것끼리는 네임을 같게 해주어야한다.
 
<select name = "son" multiple size = "1"> // multiple 여러개 지정가능 size 보일 수 있는 항목 수
       <option value = "값" selected> // 초기 선택 값
</select>
 
<textarea cols = "30" rows = "20" name = "son" wrap = "off || hard || soft">
// cols, rows 텍스트 영역의 세로 가로 길이 wrap 텍스트의 자동 줄바꿈 처리지정.
 
******************** 참고 사항 ***********************
meta태그
ex> <meta http-equiv = "refresh" content = "3; url = hello.html">
    3초 후에 hello.html 파일로 이동합니다.
 
★marquee태그
<html>
<head><title>marquee</title></head>
<body>
<h3>marquee</h3>
<marquee direction=up width=200 height=60 scrollamount=1 onmouseover="this.stop()" onmouseout="this.start()">
<!-- 마퀴태그 안에 정의한 내용이 위로 1씩 올라간다, 마우스를 올리면 멈추고, 떼면 다시 움직인다 -->
<table width=200 border=0 cellspacing=3 cepllpadding=0>
<tr>
        <td><a href="http://www.naver.com"><img src="abc.gif" border=0>네uc0이uc0버uc0로</a></td>
</tr>
<tr>
        <td><a href="http://www.daum.net"><img src="abc.gif"  border=0>다uc0음uc0으uc0로</a></td> 
</tr>
</table>
</marquee>
</body>
</html>
**********************************************************
 
 
 
 
CSS
 
css 사용예1
<head>
<style>
        h4 { color:red; font-style:oblique }
</style>
</head>
 
css 사용예2
<body>
        <h4 style = "color:red; font-size:20pt"></h4>
</body>
 
css 사용예3
<head>
<style>
        .help { color:blue; font-size:20pt }
        h2.myclass { color:yellow; font-size:40pt }
</style>
</head>
<body>
        <p class = "help"></p>
        <h2 class = "myclass"></h2>
</body>
 
css 사용예4
<head>
<style>
        #help { color:blue; font-size:20pt }
        #myclass { color:yellow; font-size:40pt }
</style>
</head>
<body>
        <p id = "help"></p>
        <h2 id = "myclass"></h2>
</body>
 
css 사용예5
sheet.css
body { background:yellow; }
 
<head>
<style>
        @import url(sample.css); or @import "sheet.css"
</style>
</head>
or
<head>
<link rel = "stylesheet" type = "text/css" href = "sheet.css">
</head>
 
*********** 스타일은 상속된다!!!!!!!!!!!
 
<html>
<head><title>예제 2-8</title>
        <style type="text/css">
               body {color:blue;font-size:30pt}
               p {color:inherit; font-size:50%}
        </style>
</head>
<body>
<h3>스타일 상속 예제2</h3>
<hr noshade>
<p>15pt 글자 </p>
<p style="font-size:30pt">30pt 글자</p>
</body>
</html>
 
*******************************************
 
body{ margin: 2em } // 전체적용
body{ margin: 1em 2em } // 1em: top,bottom   2em: left, right
body{ margin: 1em 2em 3em } // 1em: top   2em: left, right   3em: bottom
body{ margin: 1em 2em 3em 4em } // 1em: top   2em: right   3em: bottom   4em:left
ex>

ul{ background:blue;
    margin:12px;
    padding:3px 6px 9px 12px;
  }
li{ color : black;
    background: yellow;
    margin:12px;
    padding:12px 0px 12px;
    list-style:none; //리스트 스타일 o ㅁ 등을 없애준다. list-style:square
  }
li.withborder{ border-style:dashed;
                border-width:thick;
                border-color:red;
  }
</style>
</head>
<body>
        <h3>박스모델예제</h3>
        <ul>
               <li>보더가없는 요소</li>
               <li class="withborder">보더가 있는 요소</li>
        </ul>
</body>
</html>
 
*************************************************
★cursor
<html>
<head><title>예제 2-16</title></head>
<body>
<h3>커서 예제</h3>
<hr noshade>
<p style="cursor:crosshair">여기에 커서가 오면 십자모양이 됩니다.</p> 
<p style="cursor:hand">여기에 커서가 오면 손모양이 됩니다.</p>
<p style="cursor:help">여기에 커서가 오면 도움말 커서가 됩니다.</p>
</body>
</html>
***************************************************

 

 
<style type="text/css">
body{   color:RGB(255,255,0);  // 글자색
        background-color:black; // 배경 검은색
        background-image:url("binu.jpg"); // 배경이미지
        background-attachment:fixed; // 배경 고정
        background-position:center; // 배경 위치 중앙
        background-repeat:repeat-y; // 배경 세로로 반복
}             
p{  color:white; background-color:blue }
</style></head>
 

* 글자색 지정은 font-color:red -> color:red 을 사용한다.
 
기타 알아야할 스타일들..
z-index = 1 // 숫자가 큰 객체가 제일 앞으로 오고 작은게 제일 뒤로간다.
visibility = visible | hidden | collapse // 객체를 보이게 하거나 안보이게한다. collapse는 테이블의 열이나 행 전체가 안보이게한다.
position = absolute | fixed | relative // fixed는 절대위치고정 absolute도 절대 위치 고정 relative는 상대위치고정(프레임을움직이면 위치가 변함)
        ex> position : absolute;
            left:0px; top:80px; width:100px; height:40px;
border-style = inset | outset | dotted | dashed // 보더 스타일을 지정한다.
border-color = red // 보더 색깔을 지정한다.
border-width = thick | thin // 보더 굵기를 지정한다. thick 굵게 thin 얇게
 
*********************************************************************************
<style type="text/css">
.alpha { font:inherit; background:yellowgreen;
        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=5,finishopacity=100,style=1);
} // 이미지를 흐려지게 하는 효과
.basicimage { font:inherit; background:yellowgreen; width:inherit;                  
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=0, xray=1, mirror=0, invert=0, opacity=0.15, rotation=0);
} // x-ray, 반사, 투명도, 보색 효과 등의 효과
.blur {
font:inherit; width:inherit;
filter: progid:DXImageTransform.Microsoft.Blur(Strength=7, Direction=0);
} 번지게 하는 효과
.dropshadow {
font:inherit; width:inherit;
filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=10, OffY=10, Color='Tomato', Positive='true');
} 입체적인 효과
.emboss {
font:inherit;  background:yellowgreen; width:inherit;
filter:progid:DXImageTransform.Microsoft.Emboss();
} gray 스케일로 엠보싱(양각) 효과
.engrave {
font:inherit; background:yellowgreen; width:inherit;
filter:progid:DXImageTransform.Microsoft.Engrave();
} gray 스케일로 음각 효과
.glow {
font:inherit; width:inherit;
filter:progid:DXImageTransform.Microsoft.Glow(color=red, Strength=10);  
} 불타는 듯한 효과     
.fliph {
font:inherit; background:yellowgreen; width:inherit;
filter: fliph();                                    
} 좌우 대칭 효과
.flipv {
font:inherit; background:yellowgreen; width:inherit;
filter: flipv();                                    
} 상하 대칭 효과
.shadow {
font:inherit; width:inherit;
filter:progid:DXImageTransform.Microsoft.Shadow(Color=gray, Direction=135, Strength=32);       
} 그림자 효과
.wave {
font:inherit; background:yellowgreen; width:inherit;
filter: progid:DXImageTransform.Microsoft.Wave(Add=false, Freq=2, LightStrength=5, Strength=5); 
} 물결치는 효과
.xray {
font:inherit; background:yellowgreen; width:inherit; 
filter: Xray();                                   
} x-ray 사진 효과
</style>
</head>
<body>
<hr noshade>
<div class="alpha">Alpha Filter</div><br>
<div class="basicimage">BasicImage</div><br>
<div class="blur">Blur</div><br>
<div class="emboss">Emboss</div><br>
<div class="engrave">Engrave</div><br>
<div class="dropshadow">DropShadow</div><br>
<div class="fliph">FlipH</div><br>
<div class="flipv">FlipV</div><br>
<div class="glow">Glow</div><br>
<div class="shadow">Shadow</div><br>
<div class="wave">Wave</div><br>
<div class="xray">Xray</div><br>
</body>
</html>

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 table 고정

웹프로그램
table을 고정시키시려면,,
style의 width,height,table-layout 속성을 주시면 됩니다.
 
예)   <table style="width:480;height:320;table-layout:fixed;">


CSS position:absolute 위치를 상대경로로 잡기

웹프로그램
<div style="position:relative;"> //부모 div 에 relative 시 상대경로로 잡겠다고 설정하는것
<div style="position:absolute;top:100px;left:100px;"> //자식 div 에 absolute 시 부모 좌표값 기준으로 top , left 이동함
 
모니터 좌표 0,0 기준이 아닌 부모의 div가 있는 위치 기준으로 잡음.
 
예로 노트에 포스트입을 100,100 위치에 붙인뒤 두번째 포스트입을 100,100 으로 붙이라고 하면 위 설정에서는 두번째 포스트가 실재로는 200,200 에 붙게 되는것입니다.

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 등등 사용가능)