아는만큼 보여요

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-css

http://stackoverflow.com/questions/11552380/how-to-automatically-crop-and-center-an-image

white-space: pre;

calc함수를 사용하면 css상에서 연산이 가능하다.

javascript단에서 연산해서 적용하는 수고를 덜어준다.

사용법은 간단하다.

이런식으로 나누기 연산이 가능하며

이렇게 하면 3을 나눈후 20px를 빼준다.

http://dizyne.net/30-tutorials-help-master-css3/

https://github.com/desandro/3dtransforms

http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css

http://css-tricks.com/examples/ShapesOfCSS/

별모양, 오각형, 평행사변형 등 다향한 도형을 css로 표현

선택자A + 선택자B  : 선택자A 바로뒤에 위치하는 선택자B를 선책한다.

선택자A ~ 선택자B  :  선택자A 뒤에 위치하는 선택자B를 선택한다.

설정한 width값보다 브라우저 창이 작을경우 다음과 같은 현상이 발생합니다.

max-width를 사용하면 설정한 넓이보다 웹의 창이 작아지면 웹 크기에에 맞춰 조절이 됩니다.

css는 순차적으로 정의되기 때문에 중복으로 정의할 경우 나중에 정의한 값이 적용이된다.

다시말하자면

라고 정의했다면 마지막에 정의한 blue색깔이 적용될 것이다.

!important를 사용하면 처음에 적용된 값을 유지하게 해준다.

앞의 색깔이 유지되는걸 확인할 수 있다.