정보검색

1. Vertical align div  (세로가운데 정렬)

http://stylizedweb.com/2008/02/01/vertical-align-div/

 

2. Min-Height (최소높이주기)

 

selector {

min-height:500px;

height:auto; !important

height:500px;

}

 

3. PNG transparency (투명한 PNG파일 적용하기)

http://stylizedweb.com/2007/12/30/png-transparency-issues/

4. Autoclear

 

.container:after {

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

.container {display: inline-table;}

/* Hides from IE-mac \*/

* html .container {height: 1%;}

.container {display: block;}

/* End hide from IE-mac */

 

5. Reset CSS (CSS로 속성초기화)

 

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {

border:0pt none;

font-family:inherit;

font-size:100%;

font-style:inherit;

font-weight:inherit;

margin:0pt;

outline-color:invert;

outline-style:none;

outline-width:0pt;

padding:0pt;

vertical-align:baseline;

}

table {

border-collapse:separate;

border-spacing:0pt;

}

caption, th, td {

font-weight:normal;

text-align:left;

}

blockquote:before, blockquote:after, q:before, q:after {

content:"";

}

blockquote, q {

quotes:"" "";

}

strong {

font-weight:bold;

}

em {

font-style:italic;

}

* {

margin:0pt;

padding:0pt;

}

 

6. Scrolling Render IE (IE 스크롤링 랜더)

 

html {

      background : url(null) fixed no-repeat;

     }

 

7. Opacity (투명도 주기)

 

#transdiv {

filter:alpha(opacity=75);

-moz-opacity:.75;

opacity:.75;

}

 

8. PRE Tag (PRE 테그)

 

pre {

white-space: pre-wrap; /* css-3 */

white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */

white-space: -pre-wrap; /* Opera 4-6 */

white-space: -o-pre-wrap; /* Opera 7 */

word-wrap: break-word; /* Internet Explorer 5.5+ */

}

 

9. Li Background Repeat IE (IE에서 li 배경 반복)

 

<!--[if lt IE 7]>

<style>

#leftnav li { zoom: 1;} /* haslayout=true */

</style>

 

<![endif]-->

 

10. Good to know (알면좋은것)

 

@charset "UTF-8";

 

/* ----------------------------------------------------------------------

	WinIE7

---------------------------------------------------------------------- */

*:first-child+html selector{property:value;}

 

/* ----------------------------------------------------------------------

	WinIE6 & Mac IE

---------------------------------------------------------------------- */

* html selector{property:value;}

 

/* ----------------------------------------------------------------------

	WinIE6

---------------------------------------------------------------------- */

/*\*/

* html selector{property:value;}

/**/

 

/* ----------------------------------------------------------------------

	MacIE

---------------------------------------------------------------------- */

/*\*//*/

selector{property:value;}

/**/

 

window.google_render_ad();

html 중에 단어별로 잘라 개행을 하느라 일일이 <br />을 넣어줘야하는 경우가 있습니다.

영어는 띄워쓰기 기준으로 개행되지만 한글은 되지 않는데, 이때 아래와 같은 태그를 사용하면 됩니다.
word-break:keep-all

이 CSS속성은 현재 IE에서만 지원된다고 합니다.

 

word-break 라는 속성은 MSDN 에서 다루고는 있지만 현재 활성버전의 CSS2 에는 포함되지 않았고 아직 초안(Working Draft) 단계인 CSS3에 제안된 상태로서 현재의 표준은 아닙니다.

다른 브라우저로 테스트 해보시면 아시겠지만 word-break는 현재 IE에서만 지원하고 있습니다.

하지만 이것이 다른 브라우저에서 오류를 유발하는 것은 아니므로 사용하셔도 별 문제는 없습니다.

* MSDN의 word-break 소개
  http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/wordbreak.asp

<script language="javascript">
<!--
function pop_center(url,w,h,tb,st,di,mb,sb,re)
{
  var position ="width="+w+",height="+h+",left=" + ((screen.width-w)/2) + ",top=" + ((screen.height-h)/2) + ",toolbar="+tb+",directories="+di+",status="+st+",menubar="+mb+",scrollbars="+sb+",resizable="+re+"";
  window.open( url, '', position);
}

//-->
</script>

<a href="javascript:" onclick="pop_center('SianC/index.html','800','500',0,0,0,0,0,0,0);"> OPEN </a>