저는 가끔 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 자바스크립트는 타입 선언이 없기 때문에 협업시 불편한 점이 많습니다. 대표적인 예로 함수나 객체를 협업 개발자에게 배포하는 경우가 있습니다. 협업 개발자는 함수를 사용하기 위한 시그니처, 인자의 타입 정보를 알 더보기…
이 글은 “The Past Present and Future of JavaScript”를 번역하여 작성한 글입니다. 이 책은 자바스크립트의 과거와 현재, 미래에 대해 간략히 설명하고 있습니다. 자바스크립트의 과거 1995년, 당시 네스케이프사의 네비게이터가 웹브라우저 시장을 지배하고 있었는데, 네스케이프는 HTML페이지에 경량의 프로그램 언어를 통하여 인터렉티브한 것을 추가 하기로 결정했다. 그래서 더보기…
WebStorm 9 EAP(Early Access Program) 출시 Node.js 개발 시에도 Live Edit와 Spy-js(자바스크립트 트레이스 도구)를 지원합니다. Spy-js를 이용하면 함수의 처리 시간이나 실행 후의 변수 값과 반환 값 등을 볼 수 있습니다. 실행 후의 값을 알 수 있게 때문에 코드 읽기가 훨씬 편합니다. 자세한 내용은 아래 링크를 참고하세요. Live Edit Updates in 더보기…