코드공부방

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

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

jQuery(제이쿼리) 동적으로 생성된 요소 이벤트 및 index(인덱스) 가져오기 한 개발자분이 ajax를 통해 동적으로 불러온 이미지 리스트 중 선택된 이미지를 삭제하는 것을 jQuery코드로 구현하고 있는데 클릭 이벤트 발생부터 애를 먹고 있었다. 해당 UI와 HTML코드는 아래와 같다. 동적으로 불러온 이미지 목록이 아니었다면 아래와 같이 클릭한 X버튼이 속한 li태그의 삭제기능 jQuery코드로 구현할 수 있다. //Javascript $('.car-image-list li .btn-delete').on('click', function(){ $(this).parent('li').remove(); }); 하지만 ajax등을 통해 후에 불러와진 목록이라면 삭제버튼의 클릭이벤트 부터 먹통이 될 것이다..

CSS3 Animation으로 햄버거 메뉴 애니메이션 구현 (PULIP) UI Clone PC web에서는 대메뉴를 전부 노출시켜두어 사용자들이 바로바로 원하는 메뉴에 접근이 가능하다. 하지만 모바일 환경은 공간이 협소하여 메뉴를 전부 노출시켜둘 수 없다. 이럴때 보통 Header영역에 햄버거 메뉴를 두어 클릭하면 메뉴를 토글시키는 방식으로 표현한다. (아이콘 모양이 햄버거처럼 생겨 햄버거 메뉴라고 불리운다.) 요즘은 꼭 모바일에 한정짓지 않고 PC web환경에서도 자주 쓰이기도 한다. 그리고 예전과 달리 이 햄버거메뉴를 가지고 사이트마다 경쟁이라도 하듯이 다양하고 창의적인 인터랙션을 구현하고 있는데, 이번에 리뉴얼된 플립커뮤니케이션즈의 웹사이트에서 햄버거메뉴에 심플한(정말 심플) 인터랙티브가 적용되어 ..

CSS로 한줄, 여러줄 글 길어지면 말줄임("...") 표시하기 웹사이트 제작시 필수로 사용되는 말줄임표시, 보통 한줄 말줄임표시만 CSS에서 처리하고 그 외 여러줄 말줄임 표시는 개발자에게 맡기거나 하는편이다. 이 포스팅에서 CSS가지고 한줄, 여러줄 말줄임표시(CSS3)를 구현하는 방법과 CSS3속성이 지원되지 않는 하위 브라우저에서는 어떻게 대응해야하는지 알아보려고 한다. 먼저 아래와 같이 HTML과 CSS 코드를 작성한다. 쉽게 볼 수 있는 최신 글 목록 UI이다. 뉴스목록 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil in vero, deleniti fugiat laudantium maiores corrupti, dolor ea..

유튜브(Youtube) 영상 비율에 맞게 (반응형 사이즈)로 가져오기 (YouTube videos in responsive size) 웹페이지 또는 개인 블로그 내에 Youtube영상을 삽입해야하는 경우가 있다. Youtube에서는 자체적으로 동영상을 공유하는 기능을 제공하고 있다. 유튜브에서 제공하는 코드를 내 페이지에 붙여넣으면 iframe을 통해 내 페이지에서 유튜브 영상을 바로 볼 수 있다. 코드에 대해 잘 모르는 사람들에게는 정말 편리한 서비스를 제공한다고 볼 수 있다. 하지만 한가지 아쉬운점이 있다. 바로 iframe으로 태그 자체로 공유기능을 제공하다보니 최적화된 사이즈로 제공이 어렵고 특히 반응형웹에는 취약할 수 밖에 없다. 위 이미지를 보면 우선 작은 사이즈로 갈 경우에 높이가 고정이다보..

쿠키(cookie) 활용하여 오늘 하루 보지 않기 기능 구현하기 웹사이트 작업을 하다보면 항상 들어가는 기능이 있다. 바로 공지사항 등을 레이어팝업이나 페이지 최상단에 노출시키고 매번 노출시키면 사용자가 번거로울 수 있으니 하루동안은 해당 배너가 뜨지 않도록 해주는 "오늘 하루 보지 않기", "오늘 하루동안 안보기"로 불리우는 기능이다. 오늘 하루 보지 않기 기능이 들어간 사이트는 쉽게 찾아볼 수 있다. 이 기능을 구현하는 방법에는 여러가지가 있을 수 있을 것이라 생각된다. 이 글에서는 복잡하지 않고 정말 쉬운방법인 제이쿼리 쿠키(jQuery Cookie)를 가지고 기능을 구현해보려 한다. 사실 마땅한 기능명이 없으니 오늘 하루 보지 않기 기능이라고 하는거지 쿠키(cookie)를 가지고 여러가지 기능을 ..

역동적인 이미지 로드 (현대차 N Brand website) UI Clone 웹서핑을 하다가 현대차 N Brand 사이트를 발견하게 되었다. 메인페이지의 시작부터 꽤 역동적인 영상이 나와 시선을 끌기 충분했다. 한참을 넋 놓아 보다가 정신차리고 스크롤을 내렸다. 그러던 중 눈에 띄던 효과가 있었다. 바로 사진 노출 전 컬러풀한 박스가 이미지 영역을 스캔(?)한 뒤 동시에 이미지가 나타나는 하는 효과였다. 엄청난 효과는 아니지만 뭔가 다이내믹해 보이는게 사이트 컨셉과 딱 맞아떨어졌다. 아래 사이트 링크에서 확인할 수 있다. https://www.hyundai-n.com/ N Brand High Performance Cars | Hyundai N Welcome to Hyundai N's official wo..

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

CSS 로딩UI 만들기 #1. 회전하는 원(Circle) 웹사이트에 자주 사용되는 로딩 UI 중, 무한으로 회전하는 원(Circle)을 사용하는 경우가 있다. 이때 돌아가는 원을 GIF이미지로 만들어 사용하는 경우도 있는데 그 경우에 background 처리가 깔끔하게 되지 않는다. 이때는 웹에서 background가 투명처리된 png이미지를 다운받거나 디자이너로부터 이미지를 받아 CSS로 돌리는 방법도 있지만 따로 디자이너의 손을 빌리지 않고 직접 만들어 쓸 수 있도록 CSS로 몇가지 로딩UI를 만들어보려고 한다. 첫번째는 아주 심플한 원을 무한으로 회전시키는 UI이다. (물론 디자이너 손을 거쳐나온 이미지가 더 이쁘겠지만..) 위와 같이 레이어를 띄워 dim 처리된 배경 가운데에 로딩하는 원을 돌려볼..