CSS
글쓴이: 휴온   날짜: 16-04-05 10:38   조회: 4,804회  
 
실무에서 자주쓰이는 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)"
}