Tip&Tech
CSS3 calc() 함수
CSS3에 새롭게 추가된 기능 중 calc()라는 것이 있습니다. 이름에서 보듯이 계산을 해주는 속성인데 기존에 자바스크립트로 하던 계산을 상당 부분 덜어줍니다. 예를 들어, 모든 문단을 “100% 너비에서 20픽셀(px)만큼 뺀 너비”로 설정하고 싶다면 다음과 같이 작성합니다. p { width : 95%; /* 구식 브라우저를 위한 대비책(fallback) */ width : -webkit-calc(100% – 20px); /* for Chrome, Safari */ [...]
웹 폰트를 사용한 아이콘
웹 페이지를 만들다보면 각종 아이콘을 사용할 일이 많습니다. 아이콘을 직접 그릴 줄 아는 디자이너가 아닌 이상은 여기저기서 가져다 쓰는 경우가 대부분일텐데 아이콘을 하나하나 이미지 파일로 두자니 네트워크 부하가 걱정되고, 그래서 CSS 스프라이트를 만들어놓자니 배경으로 지정해야 하고, 배경 위치도 정해줘야하고 이래저래 사용하기가 영 불편합니다. 게다가 크기 조절도 안됩니다. 특히 모바일 페이지의 경우 2배 크기의 아이콘을 따로 만들어야 [...]
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: [...]
CSS를 작성하는 더 편한 방법: LESS와 SASS
프로그래밍 언어를 다루는 입장에서 보기에 HTML 마크업과 CSS라는 분야는 굉장히 번거로운 작업처럼 보인다. 같은 내용을 몇 번이고 입력해야하는데 그 방법이라는게 복붙(Copy&Paste)밖에 없다. 더군다나 최근처럼 CSS 파일 하나에 1000라인쯤은 훌쩍 넘기는 일이 많아지는 경우에는 이런 성질이 굉장히 귀찮게 보였다. 다행히 이런 생각을 나만 한 것은 아니었나보다. 오래 전부터 이런 문제를 해결하려는 노력이 있어왔고 오늘 소개할 두 [...]
파이어폭스 button 요소 내부의 여백 없애기
최근 이런 모양의 버튼을 만들 일이 있었다. 버튼의 특성상 <a> 요소보다는 <button> 요소가 더 어울려서 다음과 같이 간단하게 마크업과 CSS를 만들었다. <style type=”text/css”> button.cart { display: block; margin: 10px 0 20px; padding: 0; background:#64b216 url(이미지경로) no-repeat 0 0; /* 이미지 스프라이트 사용 */ border: 0; border-radius: 4px; color: #fff; } button.cart strong { background-color:#81c540; display: [...]