CSS3 썸네일형 리스트형 [css3] image crop center div { width: 200px; height: 200px; overflow: hidden; position: relative; } img { position:absolute; left: -100%; right: -100%; top: -100%; bottom: -100%; margin: auto; min-height: 100%; min-width: 100%; }http://stackoverflow.com/questions/18673900/how-to-center-and-crop-an-image-to-square-with-csshttp://stackoverflow.com/questions/11552380/how-to-automatically-crop-and-center-an-image 더보기 [css3] div 안에서 줄바꿈 white-space: pre; 더보기 [css3] 크기 연산하기 calc함수를 사용하면 css상에서 연산이 가능하다. javascript단에서 연산해서 적용하는 수고를 덜어준다. 사용법은 간단하다. width: calc(100%/3); 이런식으로 나누기 연산이 가능하며 width: calc(100%/3 - 20px); 이렇게 하면 3을 나눈후 20px를 빼준다. 더보기 [css3] CSS3를 마스터하는 것을 도와줄 튜토리얼 30선 http://dizyne.net/30-tutorials-help-master-css3/ 더보기 [css3] css3 3d transform sample https://github.com/desandro/3dtransforms 더보기 [css3] Increase Your Site’s Performance with Hardware-Accelerated CSS http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css 더보기 [css3] 도형 정리 사이트 http://css-tricks.com/examples/ShapesOfCSS/ 별모양, 오각형, 평행사변형 등 다향한 도형을 css로 표현 더보기 [css3] +, ~ 선택자(selector) 선택자A + 선택자B : 선택자A 바로뒤에 위치하는 선택자B를 선책한다. 선택자A ~ 선택자B : 선택자A 뒤에 위치하는 선택자B를 선택한다. 더보기 [css3] max-width 설정한 width값보다 브라우저 창이 작을경우 다음과 같은 현상이 발생합니다. max-width를 사용하면 설정한 넓이보다 웹의 창이 작아지면 웹 크기에에 맞춰 조절이 됩니다. 더보기 [css3] !important css는 순차적으로 정의되기 때문에 중복으로 정의할 경우 나중에 정의한 값이 적용이된다. 다시말하자면 div{color:red} div{color:blue} 라고 정의했다면 마지막에 정의한 blue색깔이 적용될 것이다. !important를 사용하면 처음에 적용된 값을 유지하게 해준다. div{color:red !important;} div{color:blue} 앞의 색깔이 유지되는걸 확인할 수 있다. 더보기 이전 1 2 다음
