코딩하다가 검색하게 되는 CSS

작업할때마다 뭐였지? 하고 찾아보게 되는 CSS

가끔씩 쓰다보니 외워지지도 않고 손에 붙지도 않고 -ㅅ-

CSS 줄바꿈

작업하다 한글의 경우는 괜찮은데 가끔 영문이나 숫자인 경우 공백없이

가로사이즈는 정해져있는데 주르륵 나열해야하는경우 

글자가 영역을 넘어서는 경우가 발생한다.

그럴경우 

word-break:break-all; 

적용해 주면 2번처럼 해결된다.

CSS 말줄임

한줄 제목 게시판에 많이 사용함.

제목이 길경우 사이즈만큼만 보이고 나머지는 ... 처럼 보이고 싶을때

text-overflow:ellipsis; 

overflow:hidden; 

white-space:nowrap;

 적용해 주면 2번처럼 해결된다.

CSS 그라디언트

공통버튼 만들때 그라디언트 속성값이 너무길고 

사용방법이 여러가지라 헷갈린다 -ㅅ- 

.btn{
background-image: -webkit-linear-gradient(top, #001f33, #2980b9);
background-image: -moz-linear-gradient(top, #001f33, #2980b9);
background-image: -ms-linear-gradient(top, #001f33, #2980b9);
background-image: -o-linear-gradient(top, #001f33, #2980b9);
background-image: linear-gradient(to bottom, #001f33, #2980b9);
}

그라디언트 적용하기.

CSS 확대효과

네이버메인등 요즘 많이 사용하는 호버(:hover) 효과

마우스 오버하면 이미지가 확대된다.

a img {
    -webkit-transition:all 0.35s ease;
    -moz-transition:all 0.35s ease;
    -ms-transition:all 0.35s ease;
    -o-transition:all 0.35s ease;
    transition:all 0.35s ease;
}
a:focus img,
a:hover img {
    -ms-transform: scale(1.05,1.05);
    -webkit-transform: scale(1.05,1.05);
    transform: scale(1.05,1.05);
}