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)); …
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; /* 이미지 스프라이트 사용 */ …
첫 번째 모바일 앱
이제 본격적으로 앱에 기능을 추가해 볼 차례입니다. 모바일 앱의 UI를 조금 더 편하게 꾸미기 위해 jQuery Mobile 라이브러리를 사용하기로 했습니다. jQuery Mobile과 비슷한 모바일 프레임워크로는 Sencha Touch가 있는데, HTML로 UI를 꾸미는 jQuery Mobile과는 달리 Sencha Touch는 자바스크립트로 UI를 만들어야 해서 후보에서 제외했습니다. 또한 jQuery Mobile에는 직접 시각적으로 자신의 테마를 꾸밀 수 있는 ThemeRoller가 제공되기 때문입니다. [...]