Web Development Reading List #133
원본 : Web Development Reading List #133
저자 : Anselm Hannemann
역자 : 조현석
오역 제보는 이메일과 댓글로 부탁드립니다.
Web Performance
Webfont를 사용할 때에 <link rel="preload">를 사용함으로 얻을 수 있는 이점과, 다른 방법들과의 테스트를 통한 결과를 공유합니다. 크로스브라우징 여부, 그리고 사용하게 될 웹폰트의 갯수에 따라 dataURI와 preload를 선택적으로 사용하는게 좋다고 합니다.
Font Face Observer
JavaScript로 제작된 도구인 Font Face Observer를 활용해 웹폰트의 로딩을 간결화하는 방법을 소개합니다.
HTML / SVG
SVG로 화살표 만들기
SVG의 <marker>요소를 활용하여 화살표를 만드는 방법을 소개합니다. Illustrator는 아직 <marker>요소를 사용하지 않기 때문에 화살표를 제작하는 경우라면 패킷을 아낄 수 있는 방법이 되겠네요.
Icon Font의 웹접근성
대표적인 아이콘폰트 서비스인 FontAwesome에서 아이콘폰트를 위한 웹접근성 가이드라인을 고융하였습니다. 웹접근성에서 정보를 아이콘으로 표시하는 것에 대한 갑론을박이 늘 있어왔는데, 해당 분야의 대표의 의견인 만큼 꼭 한번 읽어볼 필요가 있다고 생각됩니다.
덧붙여
WDRL 외에 금주 개인 프로젝트를 진행하는 동안 참고했던 내용들을 공유해 보려고 합니다.
ES6 객체지향 작성법
ES6 문법이 아직 눈에 익숙치 않아서, 기존 ES5에서의 Prototype Pattern을 기준으로 ES6의 Class Pattern을 설명하는 내용이 필요했습니다. 관련하여 검색하다가 찾은 유용한 포스트입니다.
:has Pseudo-Class
http://www.ericponto.com/blog/2015/01/10/has-pseudo-class-parent-selector/
관계형 Pseudo-Class인 :has 선택자에 대한 포스트입니다. CSS3도 아닌 무려 CSS4의 속성이지만, 미리 알아보고 꿈꿔보는 것도 꽤 괜찮은 위로가 될지도 모릅니다. :P