letter-spacing 을 쓰다가 이상한 글자를 발견했다. fi 가 떨어지지 않고 계속 붙어있는 것이다. Sketch에서도 이와 같은 이슈가 있었다는 걸 알았는데, CSS에서도 동일한 현상이 발견되었다. 근본적인 원인은 fi 은 ligature(합자)여서 한글의 ㅃ과 같이 한 글자로 인식하는 것이었다. 모든 폰트에서는 발생하는 것은 아니고 'Roboto Condensed'를 사용했을 때 발생했다. ligature(합자)① 두 글자 또는 세 글자를 합하여 한 글자로 만드는 것. 현대 한글 활자꼴의 ‘ㅃ ’의 경우 세로줄기 하나가 생략되어 사용되는 경우가 있는데 이런 경우를 이음자라 한다. 로마글의 리가츄어(ligature).② 둘 이상의 글자를 합하여 하나로 주조한 활자를 말하며, 구문 활자에는 fi,..

https://ux.stackexchange.com/questions/83184/is-user-select-none-bad-ux/83249https://www.webpagefx.com/blog/web-design/disable-text-selection/https://blogs.msdn.microsoft.com/ie_ko/2012/01/18/css-user-select/https://css-tricks.com/almanac/properties/u/user-select/http://caniuse.com/#search=user-select

--> https://github.com/filamentgroup/tablesaw/issues/58 table { table-layout: fixed; min-width: 100%; max-width: none; width: auto; }

▼ ▼ ▼ ▼ ▼ http://mymusictaste.github.io/

이런 디자인의 버튼이 있을 때, 폰트에 그라디언트만 적용할 수 있다면 굳이 이미지 에셋으로 뽑지 않아도 된다. [참고]https://css-tricks.com/snippets/css/gradient-text/http://caniuse.com/#search=-webkit-background-cliphttp://caniuse.com/#search=-webkit-text-fill-color See the Pen [CSS] font gradient by zinee (@zineeworld) on CodePen.

마크업에서 단순히 아이템들이 채워져 있는 모습을 보여주기 위해 반복되는 돔을 Ctrl+C/V 해놓는 경우가 많은데, 템플릿으로 분리하고 필요한 갯수만큼만 스크립트로 반복해서 삽입할 수 있도록 했다. HTML JS function cloneChild(target, n){ for(var i=1; i

See the Pen [CSS Drawing] Single Element Profile (ZINEE) by zinee (@zineeworld) on CodePen. 정말 오랜만에 CSS 드로잉!단일 요소만 사용해서 모두 box-shadow로 그렸습니다 :-)

IssueiOS 하위 버전(10미만)에서 auto copy가 안 되는 이슈가 있어서, 인풋 영역을 터치하면 자동으로 영역을 잡아주는 기능으로 대체했다. 적어도 드래그 하면서 셀렉트 영역을 잡는 수고로움을 덜어주기 위해! 그런데 select()만으로는 iOS 에서 영역이 전체 선택되지 않고, readonly 임에도 불구하고 커서가 나타났다 (키보드 없이). 그래서 찾아보니 setSelectionRange()를 사용하면 된다는 걸 알았다. Syntax inputElement.setSelectionRange(selectionStart, selectionEnd, [optional] selectionDirection); [참고] https://developer.mozilla.org/ko/docs/Web/API/H..

"보더에는 그라디언트 못 넣어요?" 디자이너님의 말 한마디에서 시작되었다. 그라디언트는 당연히 배경색에나 넣는 건 줄 알았던 나는 (!!!) 부랴부랴 방법이 있는지 찾아봤다. 역.시.있.었.다 https://developer.mozilla.org/ko/docs/Web/CSS/border-image-slicehttps://developer.mozilla.org/en-US/docs/Web/CSS/border-image-width See the Pen [CSS] gradient border by zinee (@zineeworld) on CodePen.