CSS의 transition 을 사용하면 간단한 것부터 복잡한 애니메이션 효과를 만들 수 있다. 간단한 예시는 아래를 참고하고, 자세한 내용은 맨 아래에 링크된 글을 참고한다. .btn-default { display:inline-block; padding: 5px 20px; background-color:#E5E5E5; border:1px solid #AAA; cursor:pointer; -webkit-transition:background-color .5s; transition:background-color .5s; } .btn-default:hover { background-color:#AAA; } ※참고. https://developer.mozilla.org/en-US/docs/Web/CSS/CS..

방법은 굉장히 여러 가지 수단이 있는데 아래는 그 중의 하나 .clearfix { overflow:auto; zoom:1; /* for IE6 */ } 작업하다보면 성가시게 만드는 것 같다. ※Clearfix - http://stackoverflow.com/questions/8554043/what-is-clearfix ※Ref 1) http://aboooks.tistory.com/328 2) http://ko.learnlayout.com/clearfix.html

LESS 로 다음과 같은 코드가 입력되있다고 하자 @form_width: 600px; @form_height: 400px; #content { position: absolute; top: 50%; left: 50%; width: @form_width; min-height: @form_height; /* 이 부분 */ margin-top: -1 * @form_height / 2; margin-left: -1 * @form_width / 2; } 원리는 간단하다. 해당 박스(#content)의 기준 점이 왼쪽 상단인데, position과 top, left 로 인해 이것이 화면의 중앙에 위치하게 된다. 이것을 가운데에 배치된 것처럼 만드려면 해당 박스의 가로 폭의 반만큼 왼쪽으로, 세로 폭의 반만큼 위쪽으로 ..

카카오톡이나 SNS 등에서 특정 링크를 붙여놓으면 알아서 만들어주는 기능을 볼 수 있을텐데 그 역할을 하는 것이 이것이다. ※자세한 내용은 https://ogp.me/ 에서 확인할 수 있다.