콘텐츠기획자의 IT입문서

버튼을 클릭하면 input에 담긴 value가 바로 복사되는 버튼을 만들어 봤다. 우선 value가 가상의 공간에 담기고, 그것을 복사하게 되는 copyToClipboard 함수를 만든다. /* 클립보드로 복사 */ function copyToClipboard(val){ let text = document.createElement("textarea"); document.body.appendChild(text); text.value = val; text.select(); document.execCommand('copy'); document.body.removeChild(text); } 참고 한 것은 여기! https://manition.tistory.com/8 위의 함수를 활용해서 '복사하기' 버튼을 클릭..

현재 구축 중인 쇼핑몰은 회원등급에 따라 환급금이 달라지는데 이를 영수증으로 출력해서 서비스 이용자들에게 공유하기 위해 만들어 보았다. (매번 계산기 두들기고, 그걸 psd 열어서 숫자 수정하고.. 인간의 영역이 아니다) 추후 디자인은 조금 수정될 예정이지만 구조는 대략 이렇다.. simple is the best 1. 환급금 계산 input에 입력한 값을 기반으로 환급금이 자동 계산되도록 script를 짜보았다! function selectLevel(e){ const value = e.value; document.getElementById('level_result').innerText = value; let level = document.getElementById('level_result').inner..

타임세일 이벤트는 많은 쇼핑몰에서 진행되고 있는 이벤트 중 하나! 위의 디자인처럼 구현은 하지 않았지만 비슷한 형식으로 타임세일을 구현해보았다. 매일 특정시간대에 진행되는 타임세일 이벤트이기 때문에 카운트다운 하는 시계를 만드는 코드에 추가적으로 if else 문을 통해 시간 조건을 걸어주었다. 1. 특정 시간대만 상품이 노출되게 한다. 2. 이벤트 진행 시간대가 아니라면 1) 이벤트 진행 전 - 상품에 blur 필터를 추가하여 정보를 가리고, "3시 OPEN" 문구 노출 2) 이벤트 진행 후 - 상품에 blur 필터를 추가하여 정보를 가리고, "내일 3시에 만나요" 문구 노출 function timeSale() { var nowTime = new Date(); var openTime = new Date..

현재 카페24를 이용하여 쇼핑몰을 구축중인데 기존에 제공되는 카테고리 모듈의 경우 클릭을 해도 페이지만 이동할 뿐 아무런 css, js적인 변화가 없다. 그래서 현재 페이지가 어디인지 명확하게 소비자에게 인지되지 않을 것 같아 디자인을 추가하기로 함! 클릭시 addClass를 해주게 되었을 때 클릭 후 리다이렉트 되므로 Class가 다시 사라져서 ㅠㅠㅠ 현재 페이지의 URL에 따라 addClass가 되도록 코드를 수정했다. HTML 홈 {$name|cut 25} {$name|cut 25} jQuery var url = $(location).attr('href'); var home = 'https://홈페이지 주소/'; var no = url.substring(url.lastIndexOf('=') + 1)..

IMG MAP 이미지의 부분마다 링크를 다르게 연결하고 싶다면 을 사용해주면 된다. 이미지 태그에는 usemap="#맵핑명" 을 추가해주고 맵 태그에는 name="맵핑명" 으로 연결해주면 적용이 된다 :) 좌표는 어떻게 구할까? 라고 한다면 포토샵, 그림판과 같은 이미지 에디터 프로그램을 통해 구할 수 있다. 포토샵으로도 좌표를 구해봤지만 이상한 곳으로 좌표가 찍히길래 그림판으로 좌표를 찾아서 적용했더니 정상 작동한다! ​ 참고로 서치하다 image map 에디터 사이트를 발견해서 나중에 쓸 일 있을까 해서 기록해 둔다. http://maschek.hu/imagemap/imgmap/ maschek.hu - Online Image Map Editor maschek.hu 반응형 MAP 좌표 기준이기 때문에 ..