Autoprefixer 3.0이 릴리즈 됐습니다. Autoprefixer는 CSS 코드에 vendor prefix를 추가할 수 있는 포스트프로세서(postprocessor, 후처리기) 입니다. Less, Sass 등을 프리프로세서(preprocessor, 전처리기)라고 부르는 반면 전처리된 CSS 코드를 처리하는 도구를 PostCSS 라는 장르로 분류하고 포스트프로세스라 부르고있습니다. Autoprefixer 3.0에서는 CoffeeScript로 작성한 기존 코드를 Ecma6 기반으로 재작성했습니다. 따라서 코드에서 사용하는 API도 변경됐습니다. Advanced objects 더보기…
Sass 3.4가 릴리즈 됐습니다. parent selector(&)의 기능이 개선됐고, 기본적으로 SourceMap이 생성되도록 변경(생성하지 않으려면 –sourcemap=none을 입력)됐습니다. 그리고 치명적인 오류시 메시지를 출력하는 @error 지시어를 지원합니다. SASS_CHANGELOG Compass 1.0이 릴리즈 됐습니다. Compass는 Sass를 기반으로 한 프레임워크입니다. autoprefixer와 동일하게 vendor prefix는 Can I use의 데이터를 사용하여 생성하며, Core 라이브러리를 Compass 명령 없이 사용할 더보기…
저는 가끔 Attribute Selector를 사용해서 특정 스타일을 분기처리할 때가 있습니다. 그런데 Dom이 동적으로 변경되서 작성한 Attribute Selector의 조건이 됬는데 Style 속성을 구분자로 사용할 경우 해당 스타일을 화면에 안그립니다. 예를들어 배너가 활성화되있으면 배너 아래 있는 A박스가 margin-top:0 인데 배너가 비활성화 상태가 되면 A박스는 margin-top:10px이 된야한다. 이 경우 대부분의 브라우저가 margin-top:10px을 못 더보기…
CSS로 만들 수 있는 다양한 인터렉션을 소개합니다. 대부분의 내용은 CSS3 내용이지만 모바일에서라면 충분히 도움이 될 거라 믿습니다. 혹은 회사의 클라이언트분들이 ‘우리는 IE10 이상부터 공식적으로 지원하겠습니다.’ 혹은 ‘신규 브라우저에서 사용자의 사용성을 더 좋게 만들면 되지’라는 멋진 생각을 가지고 계신다면, 이 아티클의 내용을 잘 활용하실 수 있을 거라 생각합니다. 마우스를 올리는 행위 더보기…
리퍼러(referrer)는 웹 브라우저로 월드 와이드 웹을 서핑할 때, 하이퍼링크를 통해서 각각의 사이트로 방문시 남는 흔적을 말한다. 예를 들어 A라는 웹 페이지에 B 사이트로 이동하는 하이퍼링크가 존재한다고 하자. 이때 웹 사이트 이용자가 이 하이퍼링크를 클릭하게 되면 웹 브라우저에서 B 사이트로 참조 주소(리퍼러)를 전송하게 된다. B 사이트의 관리자는 이 전송된 리퍼러를 보고 방문객이 A 사이트를 통해 더보기…
조은입니다. 요전번에 Github’s CSS라는 아티클에 삘받았는지, Lonely Planet, CodePen, Groupon 같은 많은 외국 기업에서 CSS Coding Style을 릴레이로 공개했는데요. 해당 내용 간단히 공유드립니다. – 바쁘신 분들을 위한 세줄요약 SASS를 (직접 공개한 사람들 기준으로는) 전 기업에서 활용하고 있습니다. 모듈단위로 CSS파일을 쪼개는 게 대세인 거 같습니다. Lonely Planet에서 OOCSS, Groupon에서는 SMACSS를 채택했다고 더보기…
왜 좋은 IDE를 사용하는가? 프론트엔드 개발자 중 일부는 인공지능적 IDE(통합 개발 환경, Integrated Development Environment)를 싫어합니다. 여러가지 이유가 있을 수 있겠지만 대부분 IDE가 제공하는 편리한 기능에 익숙해지면 자신의 개발 실력이 저하될까봐 두렵다고들 합니다. 만약 이 글을 읽는 여러분도 그렇게 생각하신다면 페이스북 그룹 django에서 활동하시는 박영록님의 글을 읽어보시길 바랍니다. 왜 더보기…
개요 Github와 Bitbucket 그리고 Gitlab은 이 README.md 파일을 이용해 저장소의 메인을 보여줍니다.그리고 javascript의 Documentation툴인 JSDoc은 버전 3부터 README.md 파일을 읽어서 문서의 index를 장식합니다. 이렇게 다방면으로 유용하게 쓰이는 README.md 파일은 마크다운 형식으로 작성됩니다. 마크다운은 일련의 작성 규칙(Markdown cheatsheet)이 있습니다. README.md 파일을 작성하다보면 어떻게 페이지에서 보여질까 궁금할때가 많습니다. 웹스톰의 마크다운 플러그인을 이용하면 더보기…
개요 자바스크립트 개발시 유용하게 사용할 수 있는 웹스톰과 인텔리제이의 세 가지(Parameter info, Quick Definition, Quick Documentation) 기능을 소개할까 합니다. Parameter Info 자바스크립트는 타입 선언이 없기 때문에 협업시 불편한 점이 많습니다. 대표적인 예로 함수나 객체를 협업 개발자에게 배포하는 경우가 있습니다. 협업 개발자는 함수를 사용하기 위한 시그니처, 인자의 타입 정보를 알 더보기…