tinymce의 플러그인을 만들다가 EditorWindow 내부의 요소를 fixed로 배치할 일이 생겼다. 근데 0, 0 포지션이 document가 아니라 EditorWindow기준으로 계산되었다. 이상하다 생각해서 스타일을 하나하나 테스트하다보니 transform:scale(1)이 이런 현상을 만들었음을 발견했다. 놀랍게도 transform에 어떤 속성을 사용하더라도 이런 현상이 발생했다. 와 신기하다며 알아보니 2014년, 2015년에 작성된..

custom 디자인의 select box를 만들려면 아래쪽 방향의 caret이 필요하다. 이미지로 만들어도 되지만 CSS로 간단히 만드는 방법이 있다. border를 이용한 방법인데 아주 신박하다. 각 border가 만나는 지점이 사선으로 처리된다는 것을 이용했다. border-left:4px solid transparent; border-right:4px solid transparent; /* 아래쪽 */ border-top:4px solid #3..

Open Graph는 페이스북이 공유되는 외부 문서들을 효율적으로 관리하기 위해 고안한 프로토콜이다. 처음엔 <title> 이나 이미 존재하는 메타태그들로 가능한 걸 왜 이렇게 하나 싶었는데 점점 활용이 늘어나서 동영상, 오디오, 슬라이드 쇼, 음악 등등 별 것을 다 할 수 있게 되었다. 요즘엔 블로그에서도 참조 문서를 넣을 때 og를 사용해서 미리보기같은 모습으로 넣는 것을 지원한다. 브런치, 포스트가 할때만 해도 그냥 하나보다..

회사에서 사정상 php를 메인개발언어로 사용하고 있다. 처음엔 익숙하게 사용하던 Apache friends의 XAMPP를 사용했었는데 docker 능력자가 나타나서 모든 것을 docker로 바꿔주었다. 첨엔 어리둥절했지만 사용하면 사용할 수록 docker가 참 좋다. docker허브에 등록된 php docker 같은 것을 사용하면 간단하게 php 웹서버를 돌려볼수도 있다. 물론 옵션을 조정하기 시작하면 직접 docker를 등록하기도 하고 해야하는데..

Tistory Editor는 처음엔 단순히 markdown editor가 있었으면 해서 만들었다가 조금씩 욕심이 생겨 에디터가 무려 3종류나 붙어있는 app이 되었다. markdown하나와 wysiwyg에디터 2개다. 그러고보니 Quill을 붙였을때 앱 버전이 0.2가 되었다. 그리고 Tinymce가 붙어 0.3이 되었다. tinymce는 처음 시작할 때는 문서도 엉망이고 불친절해서 욕도 좀 하곤 했는데 에디터 자체의 구조가 너무 좋아 참고 참아 ..