하드코딩을 선호하는 프론트앤드 개발자에게 아주 중요한 도구가 하나 있습니다. 예전에는 스니펫(snippets)이라고도 불렀었는데 그 사용법이 제공자마다 조금씩 달랐었습니다. 하지만 언제부턴가 Emmet이 나오면서 자동완성 코드의 사용법이 어느정도 통일이 된 것 같습니다. Emmet이 도대체 뭐야? Emmet을 한마디로 요약하면 제목에도 나와 있듯이 약속된 형태의 카워드를 작성하고 변환키를 눌러주면 자동으로 코드를 완성시켜주는 툴킷이라고 할 수 있습니다. Emmet은 웹 개발자를 위한 필수 툴킷 이며 현재 출시되어 있는 많은 인기있는 텍스트 편집기에서 플러그인 형태로 제공되고 있습니다. Emmet을 통해서 HTML 및 CSS 작업 과정을 효율적으로 작업할 수 있습니다. Emmet.io 적용가능한 텍스트 편..

시놀로지에서 도커로 Wordpress를 설치하면 불행하게도 멀티랭귀지로 설치되는 것이 아니라 영문Wordpress가 설치가 됩니다. 아무래도 Docker 이미지를 가볍게 유지하기 위해서 Languages 폴더를 제거하고 만들어서 그런것 같습니다. 지금 설명드리는 영문 Wordpress를 한글 Wordpress로 변경하는 것은 시놀로지 Docker에 만 해당되는 것은 아니고 모든 영문Wordpress를 한글로 변경할때 해당 되는 내용이기도 합니다. 시놀로지에서 Docker로 Wordpress를 설치하는 방법은 이전에 포스팅한 내용을 참고하세요. 시놀로지 Docker로 Wordpress 완벽하게 설치하기 현재 영문 Wordpress 원래 이자리에 언어를 선택하는 콤보박스가 있어야 하는데 없습니다. 언어를 선..

예전에 이미지를 정해진 크기의 DIV의 가로, 세로 기준으로 중앙으로 정렬시키는 방법에 대해 포스팅한 적이 있습니다. 원하는 DIV박스 안에 최적의 이미지 사이즈로 표시하기 이 방법보다 더 쉽고 간단한 방법을 찾아내어 다시 포스팅을 합니다. background image의 cover을 활용하는 방법입니다. HTML 구성 먼저 HTML로 구성해야 하는 코드입니다. 이미지를 감싸고 있는 DIV를 통해서 나와야 할 이미지의 크기를 설정하시면 됩니다. 그러면 이미지가 그 크기에 맞게 중앙 정렬이 됩니다.

예전에 비해 근래는 무료 웹폰트를 적용하기에 좋은 시절입니다. 예전에는 웹폰트 하나 적용하려면 지식도 많이 필요했고 폰트라이선스도 구매했었어야 했습니다. 하지만 지금은 무료로 제공되는 웹폰트도 많고 구글에서도 무료 웹폰트를 온라인으로 서비스하고 있어서 쉽게 적용 할 수 있습니다. 구글폰트에서 웹폰트 확인 및 코드 획득하기 먼저 구글 폰트 웹사이트에 접속합니다. 구글 폰트 웹사이트 구글폰트 웹사이트에 접속합니다. 한글 폰트를 적용하기 위해서 Language 선택에서 Korean을 선택합니다. 폰트리스트 중 사용하기 원하는 폰트를 선택합니다. 선택된 폰트는 우하단에 저장됩니다. + 버튼을 클릭하면 장바구니에 저장됩니다. 폰트 용량 자체가 크기 떄문에 폰트 굵기 종류가 1개 추가 될 때마다 용량이 많이 증가하..

javascript로 HTML의 DIV를 드레그할 수 있게 하는 간단한 기능 구현입니다. 이와 비슷한 기능은 jquery UI에서 제공해 주고 있긴 하지만 드레그 기능 하나 구현하겠다고 jquery UI를 붙히기는 웬지 손해 보는 느낌입니다. 바닐라JS로 구현하는 코드와 설명입니다. HTML 먼저 간단하지만 HTML 구성요소 입니다. CSS CSS도 간단하게 구현합니다. 마우스가 해당 요소에 올라가때 화살표 마우스 표시가 이동이 가능한 표시로 바뀜니다. #dragdiv { cursor: move; } javascript 핵심기능인 javascript 코드 입니다. 바닐라JS로 구현 시 3가지의 단계로 구현이 되면 하나씩 설명을 하겠습니다. 마우스로 요소를 클릭 할 때 기능 구현 클릭한 요소를 움직일 떄 ..

시놀로지는 정말 좋은 어른들의 장난감인것 같습니다. 할게 이것 저것 무궁무진하게 많습니다. 우리 가족의 사진 히스토리를 기록할 수도 있고 어디에서든지 비용부담없이 동영상을 즐길 수도 있고 만화서버로도 이용할 수 있습니다. 그중에서도 프로그래머나 개발자 라면 정말 반길만한 서비스가 있는데, 바로 도커(Docker)라고 할 수 있습니다. 도커에 대해서 자세히 알려면 공부를 많이 해야 겠지만 간단하게 말한다면… 개발자가 개발을 하다가 "이게 아닌가벼~~"하는 생각이 들때 그냥 도커 컨테이너만 삭제해 버리면 깨끗하게 삭제가 가능하다는 것입니다. 다시 시작 할 수도 있고 도커로 개발이 완료되었을때 그상태 그대로 운영으로 돌릴 수도 있습니다. 저도 몇개의 도커사용법을 포스팅했는데요. 아래의 경로를 참고하세요. 시놀..

이번에 시놀로지의 Docker 패키지 가지고 이것 저것하다가 너무 답답해서 RAM 업그레이드를 진행했습니다. 인터넷의 도움을 받고자 이것저것 찾아보고 최종적으로 실제 램업한 결과를 공유해 보고자 합니다. Synology의 DS918+ RAM UP은 얼마까지 가능한가? 제가 가지고 있는 시놀로지는 DS918+ 입니다. 슬롯은 2개가 있고 그 중에 한곳에 4G짜리 RAM이 하나 끼워져있습니다. 사진은 제가 교체하고 찍어서 삼성 RAM이 꽃힌게 보이지만 원래는 정품 Synology RAM이 꽂혀 있습니다. 어찌되었든 4GB RAM이 기본적으로 이렇게 슬롯 하나에 꽃혀있고 하나는 비워져 있습니다. 시놀로지의 공식적인 최대 RAM은 8GB로 되어 있습니다. 다시말하면 기본 4GB에 추가로 4GB를 끼워서 8GB로..

VScode의 유용한 익스텐션인 프로젝트매니져-Project Manager를 소개합니다. 이 익스텐션은 개발 소스를 프로젝트 단위로 쉽게 관리하게 해주는 익스텐션입니다. 장점 제목에서도 알 수 있듯이 프로젝트를 매우 쉽게 전환 시켜주는 익스텐션입니다. 프로젝트의 구분은 보통 폴더단위로 구성되는데, 프로젝트를 변경하거나 생성하려면 폴더열기를 통해서 다른 프로젝트의 경로를 찾아서 열거나 해야하는데 프로젝트 매니저는 쉽게 버튼하나 누르면 변경을 할 수 있습니다. 또한 쉽게 사용할 수 있게 VScode의 좌측에 아이콘 버튼을 달아 놨습니다. Git, Mercurial, SVN repositiories는 자동으로 감지를 합니다. 사용법 간단하게는 좌측의 버튼을 사용하여 활용할 수도 있고 F1을 눌러서 명령실행줄을..