코딩룸*◡*

콘텐츠1 콘텐츠2 콘텐츠3 콘텐츠1 콘텐츠2 콘텐츠3

이미지에 마우스를 올렸을 때 이미지가 확대되는 효과는 여러 사이트에서 사용되고 있습니다. CSS의 transform: scale(1.1);을 이용하면 됩니다. See the Pen Untitled by miyeon (@auseyoo) on CodePen. transform: scale(1.1); /* Defalut */ -webkit-transform: scale(1.1); /* Chrome */ -moz-transform: scale(1.1); /* FireFox */ -o-transform: scale(1.1); /* Opera */

1. box-sizing이란?box-sizing은 박스의 크기를 화면에 표시하는 방식을 변경하는 속성이다. 먼약에 엘리먼트에 테두리가 있는 경우에는 테두리의 두께로 인해서 원하는 크기를 찾기가 어렵다. 따라서 엘리먼트에 box-sizing을 지정하면 해당 엘리먼트의 padding과 border가 더는 너비를 늘리지 않게되서 크기를 예측하기가 더 쉬워진다. 2. box-sizing 속성box-sizing: content-box; 기본값. padding, border, margin 값은 포함하지 않는다.box-sizing: border-box; padding, border 값만 포함하며, margin값은 포함하지 않는다.box-sizing: padding-box; padding값만 포함하고, border, ..

http://colorscripter.com/ 코딩하면서 소스에 색상을 입히면 보기에도 쉽고 깔끔한데위의 url이 그것을 도와준다.

작업을 하다가 ol이나 ul에 자동으로 번호가 붙게 할 수 있다.그러나 이 번호 스타일은 변경이 불가능하고, 해당 단계에 대해서만 표시하지 다단계는 되지 않는다.그래서 CSS counter로 다단계 순번을 만들어보기로 했다. 1. li {counter-increment: customlistcounter;} ul.custom li { counter-increment : customlistcounter; } 2. li:before {content:counter(customlistcounter)" ";}content에 counter(customlistcounter) " ";은 "customlistcounter" 변수의 순번 값을 대문자 로마자로 출력하고 그 뒤에 빈칸을 붙이라는 의미이다. ul.custom l..