CSS
date : 16-04-05 10:38   hit : 4,002
실무에서 자주쓰이는 CSS 모음입니다.


border-radius


모서리가 둥근 사각형을 만듭니다.
div { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }

inline-block


인라인요소이나 폭과 높이를 가질 수 있게 합니다.
li { display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; }

box-sizing: border-box


width, height 지정시 padding과 border를 포함하고, margin은 포함하지 않습니다.
div { width:500px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

box-shadow


블럭요소의 그림자를 표현합니다.
div {
   -webkit-box-shadow: 2px 2px 10px 0px rgba(50, 50, 50, 0.75);
   -moz-box-shadow:    2px 2px 10px 0px rgba(50, 50, 50, 0.75);
   box-shadow:         2px 2px 10px 0px rgba(50, 50, 50, 0.75);
}


text-overflow: ellipsis


텍스트가 지정 크기보다 넘치면 말줄임표로 줄입니다.
.text-container { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

float를 clear하기


float 요소에 clearfix 클래스를 적용하여 float를 해제합니다.
.clearfix:after { content: ""; display: table; clear: both; }

Full Background Image


지정된 영역에 꽉차게 배경 이미지를 채웁니다.
.fullBackground {
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}


Opacity


투명도를 조절합니다. ie7, ie8 대응
.opacity {
   opacity:0.5;
   filter:alpha(opacity=50);
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"
}