분류 전체보기

[카페24] 상품 목록 품절 아이콘 대신 텍스트로 표기하기

상품이 품절되면 상품 목록에 보통 이런 품절 아이콘이 뜨는데, 이런 아이콘 말고 그냥 텍스트를 보여주고 싶은 경우 수정하는 방법이다. 텍스트로 보여주면 홈페이지 디자인에 맞추어 폰트를 동일한 스타일로 지정할 수 있고, 혹시나 홈페이지가 반응형인 경우 깨져보이지 않는다는 장점이 있다. 참고로, 단순히 아이콘을 다른 아이콘으로 변경하고 싶은 경우에는 카페24 관리자페이지에서 쇼핑몰설정 > 사이트설정 > 아이콘설정에 접속해서 이미지를 교체하면 된다. 품절대신 Out of stock이나 Sold Out 등 텍스트로 표현하고 싶은 경우 아래와 같이 코드를 추가해주면 된다. 상품분류(product/list.html) 파일에서 상품목록 와사이에 원하는 위치에 {$soldout_icon}를 추가한다. 품절 텍스트의 위..

[php] 에러메시지 나타내기 / php 오류 찾기

php 코드작업을 하다가 제대로 작동안할 때, 일부러 에러메세지를 출력하여 어디서 오류가 났는지 확인 할 수가 있다. 아래 코드를 파일 안에 넣어준다. 그러면 아래처럼 코드를 추가한 페이지에 에러메세지가 뜨게 된다. 이 에러메세지를 확인한 후, 알맞게 코드를 수정하면 된다. 아래 메세지의 경우에는 변수들이 제대로 정확히 정의되지 않아서 발생한 에러이다. 반대로 에러메세지가 뜨는 경우, 뜨지 않게 하려면 아래 코드를 추가하면 된다.

[jQuery] 모바일/PC 디바이스 구분하여 스크립트 다르게 보여주기

디바이스 화면 크기에 따라 스크립트를 다르게 적용(반응형)하는 방법은 아래 글 참고! (화면 크기만으로 구분하므로, PC이더라도 화면 크기가 작아지면 모바일 버전으로 나오게 된다.) https://hongpage.kr/20 [jQuery] 디바이스 크기별로 jquery 스크립트 다르게 불러오기 (반응형) 홈페이지가 반응형인 경우, 디바이스 크기별 jQuery 스크립트를 다르게 불러와야하는 경우가 종종있다. 같은 슬라이더를 쓰더라도 PC버전과 Mobile 버전의 속성을 다르게 할 수도 있는데 아래와 같 hongpage.kr 아래의 방법은 디바이스 크기가 아니라 디바이스 기종에 따라서 모바일과 모바일이 아닌 경우를 구분하는 제이쿼리 스크립트이다. 따라서 PC에서 화면을 작게한다해도 모바일 스크립트가 적용되지..

[php] Warning: Illegal string offset 'file' 오류수정

파일을 수정한 적도 없는데, 어느 날 갑자기 게시판 글 수정 페이지에서 파일 에러 문구가 떴다. Warning: Illegal string offset 'file' in /web/home/xxx/html/skin/board/basic/write.skin.php on line 156 Warning: Illegal string offset 'source' in /web/home/xxx/html/skin/board/basic/write.skin.php on line 157 Warning: Illegal string offset 'size' in /web/home/mymoodae/html/skin/board/basic/write.skin.php on line 157 글 신규 등록시에는 뜨지 않는 에러인데, 첨부..

[php] PHPExcel 엑셀로 데이터 다운받기

1. PHPExcel 다운받기 PHPExcel은 데이터를 엑셀로 다운받을 수 있게 해주는 라이브러리이다. https://github.com/PHPOffice/PHPExcel 홈페이지에서 다운받거나 아래 파일을 다운 받는다. 2. 다운로드 파일 코드 별도의 php파일을 만든 후, 파일 상단에 include_once('/PHPExcel.php');를 넣어 PHPExcel.php을 불러온다. include_once('/PHPExcel.php'); 그 다음으로 SQL문 등 데이터를 가져오는 구문들을 넣어주고 $rows[] = array(1열데이터,2열데이터, 3열데이터, 4열데이터, 5열데이터); 이런식으로 array()안에 데이터를 콤마로 구분하여 넣어준다. 나는 세개의 시트로 나누어서 다운받게 할 예정이라 ..

tip
.pem 파일 <-> .ppk파일 키파일 확장자 변환하기

ppk vs. pem 이란? ppk 파일은 PuTTY Private Key file의 약자로 PuTTY 프로그램에서 사용하기 위한 키파일 확장자이고, pem은 Privacy Enhanced Mail의 약어로 Base64의 인코딩으로 이루어진 인증서 파일이다. 아마존 클라우드 서비스에서 프라이빗 키파일을 .pem 파일로 다운받아 사용하게 되는데 윈도우에서 FTP을 접속하거나, PuTTY 를 이용하려면 .ppk 형식의 확장자로 파일이 필요하다. 또는 .ppk 형태로 키파일을 관리하다가 맥북에서 FTP접속할 때는 .pem파일로 필요하게 되는 경우가 있다. 이 경우 상황에 맞추어 .pem .ppk 변환과정이 필요한데 방법은 아래와 같다. [공통] Puttygen 설치하기 컴퓨터에 Puttygen이 설치되어있지 ..

Swiper 슬라이더 익스플로러에서 작동 안될 때 해결 방법

다양한 옵션과 효과를 제공하여 홈페이지에서 많이 사용하고 있는 Swiper 슬라이더. 작업을 다 하고 브라우저별로 확인하는데 익스플로러에서는 Swiper 작동이 안되는 불상사가. 여기저기 헤매던 중 해결 방법을 찾게 되었다. 바로 Swiper버전을 낮추는 것! https://cdnjs.com/libraries/Swiper/ Swiper - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers Most modern mobile touch slider and framework with hardware accelerated transitions - Simple. Fast. Reliable. Cont..

tip
pdf 홈페이지에 임베드 하는 방법 / PDF 미리보기 기능

와 같은 방식으로 PDF를 링크를 걸면 디바이스에 따라 간혹 바로 보여지기도하고, 다운 받아지기도하는데 웹사이트에서 PDF 를 다운받지 않고 무조건 바로 볼수 있도록 (미리보기처럼) 하는 방법을 정리해보려고 한다. 첫번째 방법 : 사이에 넣어주면 된다. 두번째 방법 : embed 태그를 사용해 pdf를 임베드하는 방식이다.가장 직관적인 방법이라 할 수 있겠다. embed 경로를 pdf 경로로 넣고, type="application/pdf"를 넣어준다. 위의 두 방법은 간혹 익스플로러에서 제대로 작동하지 않을때가 있다. 따라서 세번째 방식이 가장 적합한 것 같다. 세번째 방법 : 구글 드라이브를 활용한 마치 구글드라이브에 업로드 하여 보여주는 듯한 효과로 브라우져에 상관없이 잘 작동한다. 경로를 https..

jquery | .not() 특정 선택자만 제외하기

.not() jquery 선택자 중에 특정 요소(특정 클래스, 특정 아이디)만 제외하고 싶은 경우 아래와 같이 사용하면 된다. .not(selector) 사용 예시 1) 클래스명이 link인 것만 제외한 a 태그 $('a').not('.link').css(); 2) 링크 주소가 #인 것만 제외한 a태그 $('a').not('[href^=#]').css(); 3) 클래스명이 content 가 아닌 #section $('#section').not('.content').css(); .not() 여러개 지정하기 아래와 같이 두가지 방법으로 사용 가능하다. [방법1] 선택자(여기서는 a태그) 밖에 .not()을 사용하여 '제외할 선택자1, 제외할선택자2' 로 표기한다. ※ 주의 ※ 작은 따옴표 안에 제외할 선택자..

fullcalendar 이벤트 표기 안되는 오류 (Fatal error: Cannot redeclare class Event)

FullCanlendar는 자바스크립트 기반으로 월별/주별/일별 다양한 포멧으로 달력 기능을 제공해주는 오픈소스이다. https://fullcalendar.io/ FullCalendar - JavaScript Event Calendar Open Source... With over 10 years of open source and over 120 contributors, FullCalendar will always have a free and open source core. Learn more fullcalendar.io 잘 잘동하던 fullcalendar가 갑자기 어느날 부터 이벤트를 달력에 표기하지 못하는 오류가 발생. 1. 오류 찾기 fullcalendar 파일 중 이벤트를 불러오는 get-event..

php + ajax return false 처리하기

php로 폼 내용을 전송하는 경우, 폼 스크립트 안에 ajax를 넣어 값을 체크한 뒤에 문제가 없는 경우 전송하는 스크립트를 짜는데, ajax success 안에 바로 return false를 쓰니 제대로 실행되지 않고 그냥 submit이 되어버렸다. 해결 방법은 ajax 구문안에 return false를 직접적으로 쓰기보다는 스크립트 상단 부분에 rtn=false;를 정의한뒤 ajax 구문안에서 실패한 경우 rtn = false; 성공한 경우 rtn = true 값을 넣어주고 스크립트 맨 마지막에 return rtn을 호출하면 된다. 이때 ajax 구문안에 async: false를 꼭 넣어줘야한다. function checkform() { var rtn = false; // 변수선언 $.ajax({ t..

카페24 갤러리 게시판 썸네일 크기 변경하기

카페24 갤러리 목록페이지(list.html) 썸네일을 아무리 고화질로 업로드해도 자체적으로 리사이즈가 되어 보여 깨져보인다. 관리자페이지에서 리사이즈 크기를 따로 설정할 수 있는 곳이 없는 것 같다. 코드로 직접 수정해주는 방법 밖에 없다. 썸네일을 리사이즈하지 않고, 원본크기를 불러오는 방식이다. 스킨편집에서 /board/gallery/list.html 파일을 수정하면 된다. 기존에 {$img_src}로 이미지를 불러오는데 이 경로를 /file_data/카페24아이디/{$real_filename} 로 변경해주면 된다. 썸네일로 이미지 원본을 불러오는 것이니 리스트 페이지 로드가 느려지지 않게 적절한 크기로 썸네일을 업로드 해주어야한다. 변경전 변경후

카페24 서브도메인 설정하기 / 2차도메인 추가

abc.com의 도메인을 쓰고 있는데, en.abc.com 처럼 기본 도메인 앞에 특정한 문자를 추가해 서브도메인을 사용하고 싶은 경우 카페24에서 쉽게 설정할 수 있다. 동일한 사이트에 한글/영문버전으로 나눠서 사용하는 경우 서브도메인을 많이 사용한다. 아래의 설명은 카페24 기준으로 설정 방법을 설명하지만, 가비아나 다른 서비스도 설정 방법은 비슷하다. 서브도메인이란? 도메인 네임 시스템(DNS) 계층에서 서브도메인(subdomain) 또는 하위 도메인은 다른 주도메인의 일부인 도메인이다. 예를 들어 example.com이라는 웹사이트의 일부로서 온라인 스토어를 제공하게 된다면 서브도메인 shop.example.com을 사용할 수 있다. (출저 : 위키백과) 카페24 서브도메인 설정 방법 1. 카페2..

tip
SmartEditor2 스마트에디터 기본 글꼴 변경하기

SmartEditor2 (스마트에디터2)란? WYSIWYG 모드 및 HTML 편집 모드와 TEXT 모드를 제공하고, 자유로운 폰트 크기 설정 기능, 줄 간격 설정 기능, 단어 찾기/바꾸기 기능 등 편집에 필요한 다양한 기능을 제공하는 네이버에서 만든 에디터 http://naver.github.io/smarteditor2/user_guide/ SmartEditor2 사용자 가이드 · GitBook No results matching "" naver.github.io 스마트에디터의 기본글꼴은 돋움 9pt로 초기 설정되어있다. 스마트에디터 글꼴 목록에 글꼴 추가하는 방법 1) 스마트에디터를 불러오는 스크립트 내의 옵션 htParams 안에 한줄 추가한다. aAdditionalFontList : [["Noto ..

[jQuery] Owl Carousel 여백 없애기

Owl Carousel는 jquery 기반으로 반응형, 터치 기능을 제공하는 이미지 슬라이더이다. https://owlcarousel2.github.io/OwlCarousel2/ Home | Owl Carousel | 2.3.4 Modules and Plugins Owl Carousel supports plugin modular structure. Therefore, you can detach plugins that you won't use on your project or create new ones that fit your needs owlcarousel2.github.io 그런데 Owl Carousel 옵션에 margin:0, items:1 을 넣어 이미지 하나씩 나오도록 설정하여 사용하였는데, 오..