언젠가부터 많이 쓰는 웹폰트 Pretendard 체가 있다. 감사하게도 이미 cdn이 잘 되어 있으나 로딩이 좀 느릴 때가 있다. 카페24 쇼핑몰의 경로와 구조를 기준으로다가 Pretendard체의 웹폰트 세팅 방법을 기록해봤다. 1. 웹폰트용 폰트 파일 준비 : 예전에는 eof, woff, woff2 세 가지를 만들어서 준비했었는데, 요즘엔 보니 woff만으로도 많이 하고 문제가 없는것 같아서 woff만 준비했다. 원래는 기본 폰트 파일(ttf, otf)을 변환해야 하는데, Pretendard는 아예 다운로드 사이트에 woff가 올라와있다. 웹폰트가 weight(두께)별로 여러 종류가 있는데, 필요한 파일을 모두 다운로드해주면 되고, 만약 통째로 다운로드하는 거면 다운 받아 필요한 파일만 업로드 하면 ..

유용하게 잘썼다! 감삼다!!let lastScroll = document.documentElement.scrollTop || 0document.addEventListener('scroll', function(){ let scrollTop = document.documentElement.scrollTop if(scrollTop > lastScroll) { // down } else { //up } lastScroll = scrollTop})출처: https://ay9318.tistory.com/55 [정리코딩:티스토리]

솔직히 이거 없으면 슬라이더 작업 못한다.직접 만들어서 쓸 생각을 해본 적이 없는데 왜냐하면 항상 만족스러운 슬라이더 라이브러리가 있었기 때문이다.예전에 쓰던 것들은 이것 저것 쓰기도 했고, 어느순간 기능 지원이 중단되거나 그랬거 같아 이름이 기억나지는 않고, swiper.js를 알고난 뒤로는 항상 이것만 쓴다. 직접 라이브러리를 다운로드해서 내 사이트에 임베디드해서 사용할 수도 있고, 제공되는 cdn을 써도 된다.거의 cdn을 쓰고 있기 때문에 cdn해서 쓰는 기준으로 아래 예시 코드를 작성했다. 1. 데모 사이트 : https://swiperjs.com/demosswiper.js가 진짜 좋은 점 중 하나는 데모 사이트가 정말 잘 되어 있다!!이 글에서 간단하게 정리 & 자주 사용하는 내용을 소개하지만..

카페24 쇼핑몰 작업을 하다 보니 각 페이지의 오리지널(?) 링크 주소를 알고 있느냐 없느냐가 차이가 엄청나다.기본적으로 카페24는 페이지별 링크를 "모듈" 시스템을 통해 사용하도록 해두었기 때문에 각 페이지를 많이 커스터마이징해서 그 링크를 사용해야 할 경우 곤란하다. 오리지널 링크가 가장 많이 필요한 게시판 페이지, 상품 페이지에 대해 정리해봤다. 게시판 관련 기본 정보게시판 부분은 관리자 페이지의 게시판에서 관리가 가능하고 기본적으로 제공되는 시스템이 있다. 각자 필요에 따라 세세하게 수정이 가능하지만 대개 기본적으로 세팅되어 있는 내용을 그대로 사용하는 것 같다. 예를 들어 많은 쇼핑몰에서 대부분 사용하는 게시판은 공지사항, 후기 게시판, qna 게시판이고, 거기에 플러스로 갤러리 게시판, 자유 ..

일반적으로는 카페24 쇼핑몰의 장바구니 페이지는 링크를 클릭하면 해당 페이지가 전체 화면에 뜨는 방식으로 되어 있는데, 종종 장바구니 클릭시 팝업으로 뜨거나 화면 우측 혹은 좌측에서 메뉴처럼 스르륵 나오는 경우를 볼 수 있다. 첨에 엄청 헤매다가 찾았는데, 어느 쇼핑몰에 작업이 되어 있다? 한 두군데가 아니다? 근데 코드 수정 만으로는 안 되는 것 같다? 그러면 결국 쇼핑몰 관리자 페이지에서 해당 부분 세팅 & 코드 수정으로 사용할 수 있다. 설정 -> 쇼핑몰 설정(제일 하단 메뉴) -> 주문 설정 -> 주문시 설정 -> "장바구니 담기 확인창" 옵션 변경기본 : 장바구니 페이지로 바로 이동변경 : 확인창 출력후 장바구니 페이지 이동 유무 선택 & "담긴 상품 확인 및 구매가능" 까지 체크해야 해당 화면..

ul { text-align:center; }li { display:inline-block; }