CSS3
CSS3 calc() 함수
CSS3에 새롭게 추가된 기능 중 calc()라는 것이 있습니다. 이름에서 보듯이 계산을 해주는 속성인데 기존에 자바스크립트로 하던 계산을 상당 부분 덜어줍니다. 예를 들어, 모든 문단을 “100% 너비에서 20픽셀(px)만큼 뺀 너비”로 설정하고 싶다면 다음과 같이 작성합니다. p { width : 95%; /* 구식 브라우저를 위한 대비책(fallback) */ width : -webkit-calc(100% – 20px); /* for Chrome, Safari */ [...]
CSS3 규칙을 쉽게 만들어주는 CSS3 Please!
CSS3가 많이 사용되고는 있지만 아직도 대부분은 브라우저 확장 스펙으로 구현해야 한다. 다시 말해 -webkit, -moz 등과 같은 성가신 접두어를 붙여야 하고 여러 브라우저를 지원할라치면 코드가 지저분해지는 것도 감수해야 한다는 뜻이다. 예를 들어 #444444 부터 #999999까지 선형적으로 변하는 그래디언트 색상은 다음과 같이 작성한다. .box-gradient { background-color: #444444; background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); background-image: [...]