tinymce의 플러그인을 만들다가 EditorWindow 내부의 요소를 fixed로 배치할 일이 생겼다. 근데 0, 0 포지션이 document가 아니라 EditorWindow기준으로 계산되었다. 이상하다 생각해서 스타일을 하나하나 테스트하다보니 transform:scale(1)이 이런 현상을 만들었음을 발견했다. See the Pen transform and fixed by Joo (@joostory) on CodePen. 놀랍게도 transform에 어떤 속성을 사용하더라도 이런 현상이 발생했다. 와 신기하다며 알아보니 2014년, 2015년에 작성된 문서들이 보인다. 아... 내가 바보였구나 하는 생각이 든다. 많은 문서들 중에도 한글로 작성된 이 글이 젤 이해하기 쉽게 설명이 되어 있다. 공부하자.

custom 디자인의 select box를 만들려면 아래쪽 방향의 caret이 필요하다. 이미지로 만들어도 되지만 CSS로 간단히 만드는 방법이 있다. border를 이용한 방법인데 아주 신박하다. 각 border가 만나는 지점이 사선으로 처리된다는 것을 이용했다. border-left:4px solid transparent; border-right:4px solid transparent; /* 아래쪽 */ border-top:4px solid #333; /* 위쪽 */ border-bottom:4px solid #333; 이런 식이라면 위, 아래뿐만이 아니라 오른쪽, 왼쪽도 가능하다. 정말 창의적이고 대단한 방법이라는 생각이 들었다. See the Pen Caret by Joo (@joostory) o..

Open Graph는 페이스북이 공유되는 외부 문서들을 효율적으로 관리하기 위해 고안한 프로토콜이다. 처음엔 이나 이미 존재하는 메타태그들로 가능한 걸 왜 이렇게 하나 싶었는데 점점 활용이 늘어나서 동영상, 오디오, 슬라이드 쇼, 음악 등등 별 것을 다 할 수 있게 되었다. 요즘엔 블로그에서도 참조 문서를 넣을 때 og를 사용해서 미리보기같은 모습으로 넣는 것을 지원한다. 브런치, 포스트가 할때만 해도 그냥 하나보다 했는데 네이버 블로그가 해버리니 마치 반드시 필요한 기능같은 것이 되어버렸다. 사람들이 티스토리에는 왜 없냐고 자꾸 물어본다. 별다른 방법이 없어서 미루다가 tinymce에서는 이런 object를 다루기가 쉬워보여서 도전해보았다. 기본 타입 Open Graph protocol The Open..

회사에서 사정상 php를 메인개발언어로 사용하고 있다. 처음엔 익숙하게 사용하던 Apache friends의 XAMPP를 사용했었는데 docker 능력자가 나타나서 모든 것을 docker로 바꿔주었다. 첨엔 어리둥절했지만 사용하면 사용할 수록 docker가 참 좋다. docker허브에 등록된 php docker 같은 것을 사용하면 간단하게 php 웹서버를 돌려볼수도 있다. 물론 옵션을 조정하기 시작하면 직접 docker를 등록하기도 하고 해야하는데 어쨌든 머신이 바뀔때마다 새로 서버환경을 세팅할 필요가 없어서 참 좋다. 에디터에도 많은 변화가 있었다. 특출난 php 에디터가 없어서 sublime text, atom, emacs 같은 에디터를 사용했는데 PHPStorm의 존재를 알았다. 구매해야하긴 하는데..

Tistory Editor는 처음엔 단순히 markdown editor가 있었으면 해서 만들었다가 조금씩 욕심이 생겨 에디터가 무려 3종류나 붙어있는 app이 되었다. markdown하나와 wysiwyg에디터 2개다. 그러고보니 Quill을 붙였을때 앱 버전이 0.2가 되었다. 그리고 Tinymce가 붙어 0.3이 되었다. tinymce는 처음 시작할 때는 문서도 엉망이고 불친절해서 욕도 좀 하곤 했는데 에디터 자체의 구조가 너무 좋아 참고 참아 하나하나 알아가보니 꽤나 괜찮은 결과물이 나온다. Quill은 시작이 아주 쉽고 몇몇 기능은 아주 뛰어나지만 확장성이 그리 좋진 못하고 delta라는 놈이 나의 발목을 잡았다. delta to html 이라는 모듈도 만들어서 해결해보려 노력했지만 완벽히 변환되지..