실전에서 유용하게 쓰이는 CSS 코드 -1-

body {background-image: url(img.gif);background-repeat: repeat-y; /* 바탕화면 배경 줄서는 방법*  repeat-x (가로) repeat(반복) no repeat(1번만표시)*/

background-position: center; /* 백그라운드 위치선정*/

background-attachment: fixed; /*백그라운드 스크롤 방지(배경은 멈추고 텍스트만 움직이게 하고 싶을때*/}

/* 텍스트 area 룰오버 색깔 변경*/

textarea.example {scrollbar-base-color: transparent; scrollbar-arrow-color: transparent;}

/* 전체 룰오버 세세설정*/

body {scrollbar-face-color: #ff8c00; scrollbar-track-color: #fff8dc; scrollbar-arrow-color: #ffffff; scrollbar-highlight-color: #fff8dc; scrollbar-shadow-color: #d2691e;

scrollbar-3dlight-color: #ffebcd; scrollbar-darkshadow-color: #8b0000;}

/* 커서 모양*/

.wait { cursor: wait; }

.help { cursor: help; }

.face { cursor: url(face.cur), default; }

/* 배경에 선 만들기 hr 요소 사용*/

hr.example { height: 1px; background-color: #0000ff; border: none; color: #0000ff;}

/* 스타일 시트 테이블 설정 방법*/

/* 경계선 결합*/

table.example1 { border-collapse: collapse;}

/*경계선 분리*/

table.example2 {border-collapse: separate;}

/*셀의 경계선의 간격을 지정하는 프롭퍼티 # 반드시 경계선 분리를 지정한경우에만 사용가능*/

table {border: 2px #000000 solid; border-collapse: separate; border-spacing: 5px;}

table { width: 300px; table-layout: fixed;/*테이블이 재빨리 표시 되는 고정 레이아웃*/}

/*표제의 표시 위치를 지정*/

caption { caption-side: bottom; text-align: right; } /* … 겉(표)아래 + 오른쪽 대어로 표시 */ 

caption { caption-side: left; vertical-align: middle; } /* … 겉(표)의 왼쪽 + 수직 방향의 중앙에 표시 */

/* baseline의 지정 text  가지런히*/

table.example td { vertical-align: baseline; }

/*영역내에 완전히 해결되지 않는 내용을, 어떻게 처리하는지를 지정*/

div { width: 200px; height: 100px; overflow: auto; /*(hidden, visible, auto)*/}

/*overflow の width height 지정*/

div.example1 { width: 200px; height: 100px; white-space: nowrap; overflow-x: scroll;}

div.example2 { width: 200px; height: 100px; overflow-y: scroll;}

/*요소의 표시 형식을 지정하는 프롭퍼티입니다.

이 스타일을 설정하면, 블록 레벨 요소를 인 라인으로 표시하거나 인 라인 요소를 블록 레벨로 표시할 수 있습니다.*/

.example1 { display: inline; }

.example2 { display: block; }

.example3 { display: list-item; margin-left: 1em; }

.example4 { display: none; }

/*표시·비표시를 지정하는 프롭퍼티입니다.*/

div { visibility: hidden;}

/*z-index (은)는, 박스의 중복의 순서를 지정하는 프롭퍼티입니다. 이 지정은,position프롭퍼티그리고 relative,absolute,fixed (을)를 지정해 있는 경우에 유효가 됩니다*/

div {width: 200px; height: 100px; position: absolute;}

div.example1 {z-index: 2;background-color: #85b9e9;top: 100px;left: 50px;}

div.example2 {z-index: 3;background-color: #ffd78c;top: 150px;left: 200px;}

div.example3 {z-index: 1;background-color: #bde9ba;top: 50px;left: 150px;}

div.example {

position: relative; /* 통상의 위치를 기준으로 한 상대적인 배치*/top: 50px;left: 50px;}

div.example { position: absolute; /* 윈도우 또는 친박스를 기준으로 한 절대적인 배치*/ top: 50px; left: 50px;}

.example { clear:both; /*어느 쪽의 회전 포함도 해제*/clear: left; /*왼쪽 플로트에 대한 회전 포함을 해제*/}

/*리스트 항목  Type*/

ul {list-style-type: square;}

ol {list-style-type: upper-alpha;}

/*리스트 항목 Image*/

ul {list-style-image: url(mark.gif);}

/* 가로로 오른쪽 자동 정렬시키는 방법 1 #이 경우 padding값이 인라인요소로인해 적용이 되자 않는다*/

ul.example li {display: inline; /*이 스타일을 지정했을 경우는, 리스트 마커는 표시되지 않습니다.*/margin-right: 20px;}

/* 가로로 오른쪽 자동 정렬시키는 방법 2*/

ul.example {margin: 0; padding: 0; list-style-type: none;}

ul.example li {float: left; width: 8em; margin-right: 5px; padding: 2px; border: 1px #ffb366 solid; background-color: #fffdee; text-align: center;}

/*루비(일본식 가나읽기)의 위치를 지정한다*/

ruby.example1 { ruby-align: distribute-letter; }

ruby.example2 { ruby-position: inline; }

/*생략 부호에 관한 표시*/

p.example1 { text-overflow: clip; } /* 생략부호 생략*/

p.example2 { text-overflow: ellipsis; }  /*생략부호 표시*/

/*행의 높이를 지정한다*/

p {line-height: 150%;}

/*문자 들어쓰기 */

p {text-indent: 1em;}

/* 일본어와 영어사이에 스페이스가 들어갈수 있다*/

p {text-autospace: ideograph-alpha;}

/* 첨부 문자 예)co2 h2o*/ 

span.example1 { vertical-align: super; } /*상부 첨부 문자*/

span.example2 { vertical-align: sub; } /*하부 첨부 문자*/

/*세로 쓰기를 지정한다*/

p {writing-mode: tb-rl; font: bold 200%/150% serif;}

/*요소의 전후에 내용을 추가한다*/

p:before {content: "문자열";}

p:after {content: url(icon.gif);}

q[cite]:after {content: attr(cite);}

/*q요소의 전후에 인용부호를 삽입 */

q {quotes: "「" "」" "「" "」";}

q:before {content: open-quote;}

q:after {content: close-quote;}

/*화상을 잘라낸다*/

img {position: absolute; clip: rect(50px 500px 300px 100px);}

/*form size*/

textarea {width: 300px;height: 10em;}

/*form color*/

input, select, textarea {background-color: #bde9ba;}

/*포커스시의 배경색을 지정한다*/

input:focus {background-color: #e0e0e0;}

/*폼 부품의 경계선을 지정한다*/

input {border: 2px #ff0000 double;}

/*포커스시의 아웃라인을 지정한다*/

input:focus {outline: 1px #ff0000 dashed;}

/* form color change*/

fieldset {margin-bottom: 20px;padding: 0 20px 15px;background-color: #00CCFF;}

fieldset p {margin-bottom: 1em;}

fieldset input {width: 300px;}

/*

<form method="post" action="example.cgi">

<fieldset>

<legend>신청자</legend>

<p>이름：<input type="text" name="name1" size="50"></p>

<p>주소：<input type="text" name="address1" size="50"></p>

</fieldset>

<fieldset>

<legend>신고처</legend>

<p>이름：<input type="text" name="name2" size="50"></p>

<p>주소：<input type="text" name="address2" size="50"></p>

</fieldset>

<p><input type="submit" value="송신한다"></p>

</form>

*/

/*form border color setting*/

fieldset {border: 2px #ff0000 double;}

/* form magin and padding*/

fieldset {margin: 0 0 20px;padding: 0 20px 15px;}

/*자동 일본어 입력모드*/

input.example {ime-mode: inactive;}

/*iframe

<p><iframe src="example.html">대체 내용</iframe></p>

*/

iframe  {width: 300px;height: 200px;}

/* IE 버젼만 가능한 필터 효과들 */

.example {filter: glow(color=red, strength=100);}-->발광효과

.example {filter: alpha(style=1, opacity=0, finishopacity=100, startx=0, starty=0, finishx=200, finishy=200);}-->반투명 알파효과

/*firefox

filter:alpha(opacity=25);-moz-opacity:0.25;opacity:0.25;

@gradation

filter:alpha(style=1, opacity=100 ,finishopacity=40);-moz-opacity:0.65;opacity:0.65;*/

.example {filter: shadow(color=red, direction=135);}-->부드러운 그림자

.example {filter: dropshadow(color=red, offx=10, offy=10, positive=true);}-->샤프한 그림자

.example {filter: blur(add=true, direction=90, strength=10);}-->흔들림효과

.example {filter: wave(add=false, freq=3, strength=5, lightstrength=30, phase=50);}-->마스크 물결효과

.example {filter: fliph();}-->좌우반전

.example {filter: flipv();}-->상하반전

.example {filter: xray();}-->엑스 선효과

.example {filter: invert();}-->색 반전

.example {filter: invert();}-->흑백

.example {filter: chroma(color=#0000ff);}-->색투과

.example {filter: chroma(color=#0000ff);}-->마스크 씌우기

/* 포인트 했을 때에 문자를 움직인다*/

a:hover {position: relative; top: 1px; left: 1px; text-decoration: none;}