본문 바로가기

퍼블리싱/CSS/CSS3

이미지가 뿌옇게 보이는 현상을 좀 더 샤프하게 보이게 함 image-rendering:-webkit-optimize-contrast; 이미지가 뿌옇게 보이는 현상을 좀 더 샤프하게 보이게 함 더보기
css3 ie support 정리 border-radius ie9 text-shadow ie10box-shadow ie9 background-size ie9background-color rgba ie9 2d transform(translate, rotate, scale, skew) ie10, ie9(with prefix -ms-)3d transform(rotateX, rotateY, rotateZ) ie10transition ie10@keyframes ie10animation ie10 더보기
cursor 속성값에 URL 사용 Gecko가 지원하는 모든 이미지 포맷을 사용할 수 있다. cursor: [,]* keyword; 형식으로 원하는 이미지를 순차적으로 넣은 후 맨 마지막에는 꼭 auto나 pointer처럼 기본적으로 지원하는 커서값을 넣어야한다.예를 들면 다음처럼 쓰면 된다. cursor: url(foo.cur), url(http://www.example.com/bar.gif), auto; css3에서는 다음처럼 추가적으로 속성값에 좌표값을 지원한다. cursor: url(foo.png) 4 12, auto; IE에서는 cur, ani 포맷만 지원한다. curosr: url(foo.cur), pointer, url(bar.cur), auto; 그러나 다른 브라우저에서는 지원안하기때문에, 다음처럼 다른 포맷이미지와 함께 .. 더보기
ol list-style decimal에서 점제거 (IE8+ 지원) // 적용 전 One Two // remove dot CSS ol { counter-reset: item; list-style-type: none; } li { display: block; } li:before { content: counter(item) " "; counter-increment: item } // 적용 후 One Two 더보기
Grid CSS : display:flex, display:box 특정 영역안의 여러 박스들을 세로 또는 가로 정렬을 해주는 속성으로, 일종의 float, 또는 table, table-cell과 비슷하다고 생각하면 될 것같다. display: box - is a version of 2009display: flexbox - is a version of 2011display: flex - is the actual version 현재 최신버전은 display:flex이지만, 버전이 낮을 경우 안먹히기때문에 다음처럼 써주는 것이 좋다.(안드로이드 4.4.2버전에서 먹히지 않았다.) div{ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } 참고.. 더보기