코드공부방

window popup 새창(팝업창) 열기, 띄우기 (javascript window.open()) 예전엔 아주 많이 사용했던 윈도우 팝업(window popup)창, 요즘은 보기 힘들다. 주로 내부 시스템, 관리자 같은 곳에 쓰이는 편이다. 가끔 필요할때마다 검색해서 사용하다가 그냥 정리해서 갖고 있으면 좋을 것 같아서 정리해본다. 사용방법은 window객체의 open메소드를 사용하면 된다. //Javascript window.open('경로', '팝업 이름', '옵션'); 아래는 팝업창 함수 사용 예제이다. 팝업창 열기 //javascript function openWindowPop(url, name){ var options = 'top=10, left=10, width=500, height=600,..

페이지 프린트(print)할때 background 안나오는 현상 해결 오프라인에서 사용할 문서를 온라인에서 출력할 수 있는 페이지(팝업창)를 작업해달라는 요청이 와서 작업을 진행했다. 진행할 업무 얘기를 들었을때부터 "아 뭔가 프린트할때 이슈가 생기겠구나" 예상은 하고 우선 보내준 엑셀 파일을 참고하여 UI 작업을 진행했다. 별도 디자인이 없는 상황에서 참고용으로 준 엑셀문서보다는 보기좋게 결과물이 나와야 했기 때문에 여기저기 테이블 스타일을 참고하여 웹페이지 작업은 마무리됐다. 그리고 별 기대없이 해당페이지를 출력해봤다. 결과는? 역시 보란듯이 background-color가 표시되지 않았다. 예상했기에 덤덤하게 관련 키워드로 검색해보니 @media print 안에 -webkit-print-color-..

jQuery 사용, 이제는 정말 그만해야 하는걸까? (2020년 2월) 웹개발의 패러다임이 점차적으로 바뀌면서 예전에 흔히 말하던 웹퍼블리셔의 입지는 점점 설 곳이 좁아지고 있는 것 같은 분위기이다. 그리고 개발자들 사이에서는 jQuery 사용을 지양하려는 시도가 2017년쯤부터 조금씩 있었던 것 같다. 실제로 구글에 jQuery관련 글들에서도 지양, 퇴물, 퇴출 등 부정적인 단어가 섞인 관련 글들을 쉽게 찾아볼 수 있다. 평소 UI개발 시 jQuery를 즐겨 사용하고 있기때문에 많을 글들을 읽어보았고 또 해당글의 댓글란에서 글쓴이와 의견이 다른 사람들과 토론을 나누는 것들도 다 읽어보았다. jQuery를 부정적으로 보는 시각의 의견은 주로 개발 트렌드, 속도(페이지로드, 동작), 잘못된 javascri..

카톡(카카오톡)에서 URL 링크 공유 시 미리보기 썸네일 이미지와 내용 수정하기 (feat.og meta data) 카카오톡을 통해 지인들에게 특정 이벤트나 정보같은 것을 공유하기 위하여 URL링크를 공유한 경험이 한번쯤은 있을 것이다. (난 아주 적극적으로 공유기능을 사용하는 편이다.) 나는 URL만 전달 해줬는데 카카오톡 메세지에 자동으로 해당 페이지의 정보가 이어서 전달된다. 썸네일이미지, 제목, 내용 일부 미리보기가 지원된다. 이게 어떻게 가능한걸까? 이는 http://~ 형태의 URL 메세지가 전달된 경우 카카오톡에서 웹페이지 링크라는 것을 판단하고 미리 해당 웹페이지의 head 태그 내에서 og(Open Graph) meta 정보를 찾고 그 중 "og:title(제목), og:descripti..

지도 이미지맵 온라인에서 쉽게 만들고 코드(좌표) 가져오기 (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환경에서도 자주 쓰이기도 한다. 그리고 예전과 달리 이 햄버거메뉴를 가지고 사이트마다 경쟁이라도 하듯이 다양하고 창의적인 인터랙션을 구현하고 있는데, 이번에 리뉴얼된 플립커뮤니케이션즈의 웹사이트에서 햄버거메뉴에 심플한(정말 심플) 인터랙티브가 적용되어 ..