유용한 CSS 스니핏 몇가지 소개

유용한 CSS 스니핏을 소개한 블로그(출처)가 있어서 코드를 몇가지 퍼와봤습니다.

css Resets

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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html { height: 101%; }
body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; }
 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
 
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; } 
 
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
 
p { font-size: 1.2em; line-height: 1.0em; color: #333; }

css를 초기화 시키기 위해서 reset css를 사용하는 것도 좋긴하지만,
side effect을 최소화하기 위해서 normalize.css를 사용하는 것도 하나의 방법이라고 생각합니다.

clearfix

.clearfix:before, .container:after { content: ""; display: table; }
.clearfix:after { clear: both; }
 
/* IE 6/7 */
.clearfix { zoom: 1; }

Cross-Browser Transparency

.transparent {
    filter: alpha(opacity=50); /* internet explorer */
    -khtml-opacity: 0.5;      /* khtml, old safari */
    -moz-opacity: 0.5;       /* mozilla, netscape */
    opacity: 0.5;           /* fx, safari, opera */
}

Triangular List Bullets

ul {
    margin: 0.75em 0;
    padding: 0 1em;
    list-style: none;
}
li:before { 
    content: "";
    border-color: transparent #111;
    border-style: solid;
    border-width: 0.35em 0 0.35em 0.45em;
    display: block;
    height: 0;
    width: 0;
    left: -1em;
    top: 0.9em;
    position: relative;
}

Transparent PNG Fix for IE6

.bg {
    width:200px;
    height:100px;
    background: url(/folder/yourimage.png) no-repeat;
    _background:none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/folder/yourimage.png',sizingMethod='crop');
}
 
 
/* 1px gif method */
img, .png {
    position: relative;
    behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
       this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
       this.src = "images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
       this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
       this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
}

이 외에 개인적으로 많이 사용하는 스니핏도 몇가지 소개해드리면,

Text ellipsis

/* PC */
.ellis{overflow:hidden;white-space:nowrap;word-break:break-all;text-overflow:ellipsis}

/* Mobile */
.ellis_w{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
white-space:normal;word-wrap:break-word}

모바일의 경우 webkit 속성을 사용하여 2라인 이상을 말줄임시킬수가 있는데,
이때 말줄임되는 문자가 잘리지 않게 하려면, line-height와 height 값을 올바르게 설정해야 합니다.
예를 들어 line-height가 1.2em 이고 3라인을 자를 경우 height는
1.2em * 3 = 3.6em 으로 설정할 필요가 있습니다.

Blind contents

.blind{position:absolute;clip:rect(0 0 0 0);width:1px;height:1px;margin:-1px;overflow:hidden}
.table thead.blind{position:static;font-size:0} /* 테이블 thead blind 버그해결 */

보통 텍스트가 안보이게 하기 위해서 많이 사용되는 속성입니다.
table의 thead는 블라인드를 하더라도 제대로 안될경우가 있기 때문에
추가적인 속성지정이 필요합니다.

Nizbridge