CSS Interaction

CSS로 만들 수 있는 다양한 인터렉션을 소개합니다. 대부분의 내용은 CSS3 내용이지만 모바일에서라면 충분히 도움이 될 거라 믿습니다. 혹은 회사의 클라이언트분들이 ‘우리는 IE10 이상부터 공식적으로 지원하겠습니다.’ 혹은 ‘신규 브라우저에서 사용자의 사용성을 더 좋게 만들면 되지’라는 멋진 생각을 가지고 계신다면, 이 아티클의 내용을 잘 활용하실 수 있을 거라 생각합니다. 마우스를 올리는 행위 더보기…

레이어 중앙정렬

조은입니다. CSS만 사용하여 레이어를 중앙정렬 하는 몇가지 테크닉을 소개한다. Margin을 이용하는 방법 .layer { position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; /* width와 height의 절반만큼 이동 */ } 결과 : {codepen 링크} 장점 예로부터 자주 쓰인 방법으로 모든 브라우저에서 원활히 지원한다 단점 더보기…

외국 몇개 기업의 CSS

조은입니다. 요전번에 Github’s CSS라는 아티클에 삘받았는지, Lonely Planet, CodePen, Groupon 같은 많은 외국 기업에서 CSS Coding Style을 릴레이로 공개했는데요. 해당 내용 간단히 공유드립니다. – 바쁘신 분들을 위한 세줄요약 SASS를 (직접 공개한 사람들 기준으로는) 전 기업에서 활용하고 있습니다. 모듈단위로 CSS파일을 쪼개는 게 대세인 거 같습니다. Lonely Planet에서 OOCSS, Groupon에서는 SMACSS를 채택했다고 더보기…

프론트엔드 개발 시작하기

디자이너, 기획자 등을 대상으로 프론트 엔드 개발을 어떻게 시작해야하는 지 알려주었다. 발표자료를 공유한다. 프론트엔드로 시작하는 웹 개발 방법과 지식들 from Eun Cho 발표 중 라이브 코딩도 했는데, 코딩 내용도 공유한다. https://github.com/transbot/s_140809_FrontEnd

How Start JavaScript

지금까지 자바스크립트는 많은 오해를 받아왔고, 완성되지 않은 이상한 언어라는 수식어에서 벗어나지 못하였었다. 대부분의 개발자들은 복사 – 붙여넣기식으로 자바스크립트 코드를 활용하거나, Form의 유효성 검사 등에만 자바스크립트를 사용할 뿐 그 이상으로는 활용하지 않았다. 하지만 모바일에서 플래시를 지원하지 않아, 기존에 플래시로 제작하던 다양한 인터렉션을 CSS3와 자바스크립트를 활용하여 구현하기 시작하였다. 또한 웹 어플리케이션의 중요성을 더보기…

간단하게 HTML 페이지의 레이아웃을 확인하는 방법!

마크업 개발시 현재 페이지의 레이아웃을 쉽게 확인할 수 있는 툴을 소개합니다.   pestcide.io 라는 툴 인데요.   CSS상에서 레이아웃 문제가 있을때 해당 툴을 통해서 각각의 모든 요소들의 외곽선을 그어 확인할 수 있습니다. 각각의 요소들마다 다른 컬러값을 주어 표현할 수도 있습니다. (설치형 css를 받아서 보시면 모든 태그에 outline값을 적용해 주었습니다.)   적용 더보기…

[발표] 모바일 웹 어플리케이션 접근성

어제 한국장애인단체총연합회 및 한국웹접근성인증평가원에서 진행한 웹 접근성 세미나에서 발표를 맡게 되었습니다. 마지막 세션이라 긴장도 많이 되고 시간도 짧아서 많은 이야기를 드리지 못한 거 같아 아쉽습니다. 더 많은 내용은 블로그에서 추가로 다루도록 하겠습니다. 발표자료 공유드립니다. 모바일 웹 어플리케이션 접근성 from Eun Cho 감사합니다.

HTML의 원래 기능을 유지하자.

HTML, Hyper Text Markup Language는 1993년 ISO 표준이 되어 현재는 가장 사랑받는 웹 개발 언어입니다. 꽤 오랫동안 사용되어왔지만, 그동안 비표준 브라우저들의 시장 잠식, 브라우저 전쟁 등으로 인해 많은 오해를 받기도 한 언어입니다. HTML과 더불어 오랫동안 사용되어 왔던게 CSS, Cascading Style Sheet와 JS, JavaScript입니다. CSS를 이용해 웹사이트를 아름답게 꾸미고, JavaScript를 이용해서 더보기…

당신의 요소에 역할을 부여해주세요.

div태그로만 레이아웃을 구성하고, span태그로 모든 인라인 스타일을 넣어주던 시대도 있었지만, 시멘틱 웹의 중요성과 표준을 준수하는 것, 그리고 웹 접근성의 중요성이 대두되면서 대부분의 웹 페이지나 어플리케이션들이 태그의 목적에 맞게 태그를 사용하여 웹 페이지나 어플리케이션을 개발하는 시대가 되었습니다. HTML5에서 Content Model을 대대로 수정하면서 Sectioning Content가 생겨나고, section태그나 article태그와 같은 다양한 태그들이 추가되었습니다. 더보기…

W3C 스펙은 어떻게 읽어야 하는가?

How to read W3C specs from ourmaninjapan Front-End 개발자라면 누구나 한번쯤 W3C의 스펙을 접해봤으리라 생각합니다. W3C 스펙을 읽어야할 필요성은 어떤 개발자나 가지고 있지만, 영어에 대한 막역한 두려움과 W3C 문서들이 가지고 있는 법칙들을 이해하지 못해 읽는데 어려움을 겪었으리라 생각합니다. 그런 점에서 지난 주 금요일에 진행된 TTWF 행사의 발표 내용 중, “W3C의 더보기…