코드공부방

지도 이미지맵 온라인에서 쉽게 만들고 코드(좌표) 가져오기 (With.Image Map Generator) 요즘에는 이미지맵(image map)은 잘 쓰이지 않는다. 이미지를 큼지막하게 잘라서(여백포함하여) 웹페이지를 만들던 때엔 이미지맵이 정말 유용하게 사용됐었다. 하지만 분명 이미지맵이 사용되어야 하는 순간이 있다. 아래 이미지는 네이버 부동산 페이지에서 가져온 서울시 지도 일부이다. 예를 들어 위와 같은 이미지에 각 구별로 링크를 걸어달라고 한다면 어떻게 작업할 것인가? 바로 이런 경우에 이미지 맵을 유용하게 사용할 수 있다. 하지만 사각형이 아닌 저런 영역의 이미지 맵을 직접 포토샵을 열어서 꺾어지는 모든 부분의 좌표를 일일이 따서 코드로 표현하기란 쉽지 않은 일이다. 바로 이런 어려움을 해결해 ..

VSCode(비주얼스튜디오코드)에서 SFTP에 직접 붙어 작업하기 (부제 : 안녕, Editplus) 아마 웹개발자라면 누구나 Editplus를 써보았을 것이다. 아니, 지금도 사용하고 있는 웹개발자도 많을 거라 생각된다. FTP에 직접 붙어서 서버에 있는 파일을 직접 열어 작업하고 저장하는데는 Editplus만한 툴이 없다고 생각된다. 허나 나는 FTP에 직접 붙어서 작업할 일도 없어지기도 하고 서버에 직접 붙어서 작업하다보면 다수의 개발자가 존재할 경우 충돌이슈나 버전관리도 안되기때문에 사용한지는 꽤 됐다. 아예 Editplus는 설치도 안되어있다. 최근에는 주로 VSCode나 Eclipse를 주로 사용하는 편인데 얼마전 회사 업무 중 직접 FTP에 붙어서 작업해야하는 이슈가 생겨 VSCode에서 직..

무료 온라인 이미지 최적화 서비스 Optimizilla 웹 프로젝트를 진행할때 큰 리소스를 차지하는 것중 하나가 바로 이미지 파일들이다. 때문에 사용자에게 원활한 서비스 제공을 위해서는 많은 이미지 사용을 지양해야겠지만 프로모션 이미지나 배너 이미지 등 모든 비주얼적 요소까지 이미지 사용을 제한하는 것은 한계가 있다. 심미성과 사용성 두마리 토끼를 잡기 위해서는 사용될 이미지를 최적화 하는 방법이 있다. 보통 웹사이트 신규 작업 시 사용되는 이미지들은 디자이너나 퍼블리셔, 또는 프론트엔드 개발자들의 손을 거치면서 이미지 최적화작업을 거치게 되는데, 웹사이트가 운영으로 넘어가면서 이벤트, 배너, 콘텐츠에 들어가는 이미지등은 이미지 최적화 작업이 생략되는 경우가 많다. (사실 몰라서 못하는 경우도 많을 것이..

변수, 함수, 클래스, 아이디 네이밍 스타일 / variable, function, class, id naming style 프로그래밍을 할때 고민을 많이 하게 되는 것중 하나가 네이밍이 아닐까 싶다. 변수, 함수, 클래스, 아이디.. 네이밍 해야할 것도 많다. 해당 기능에 맞게, 내용에 딱 맞는 아름다운(?) 이름을 지어주기 위하여 오늘도 열심히 구글 번역기를 돌리고 있다. (프로그래밍 작명소는 없나..) 이름을 뭐라고 짓냐는 것도 고민인데 그 이름을 짓는 방식도 한가지가 아니다. 이것은 사실 스타일이기 때문에 각 프로젝트에서 협의된 대로 따르는 게 좋지만 어떤 종류가 있는지 알고 있으면 좋으니 정리해보았다. 1. 카멜 표기법 (Lower Camel Case : LCC) 첫단어는 소문자로 표기하며 이후..

웹사이트 작업을 하다보면 임시 이미지를 삽입해야하는 경우가 많이 생긴다. 간혹 디자이너가 만들어주기도 하지만 그렇지 않은 경우도 많다. 그럴땐 구글 검색 해서 적당한 이미지 URL을 따와서 사용했었는데, 더 좋고 깔끔한 방법이 있다. 바로 placeholder.com URL에서 나타내듯 placeholder image 서비스이다. 사용법도 매우 간단하다. 위와 같이 작성하면 300px * 300px 사이즈의 이미지가 아래와 같이 바로 로드된다. 임시 이미지에 해당 이미지의 사이즈까지 친절하게 쓰여져 있어 더욱 편하다. 정사각형이 아닌 경우는 200x400과 같이 가로x세로를 써주기만 하면 된다. 이미지 확장자는 gif뿐만 아니라 jpg, jpeg, png도 사용 가능하다. 생성(?)된 이미지를 다운로드 ..