어띠의 블로그

이번 포스팅에서는 카페24 상품 이미지 꾸미기 기능에 대해 알아보겠습니다. # 상품 이미지 꾸미기 기능 카페24 쇼핑몰에서 상품에 아이콘을 적용하는 방법은 크게 두 가지입니다. 하나는 상품 썸네일 아래 상품 정보 부분에 아이콘을 추가하는 방법이고, 이 부분은 쇼핑몰 운영시 거의 대부분이 많이 알고 또 사용하고 있는 기능입니다. 나머지 하나는 아이콘을 상품 썸네일 위에 겹쳐서 노출할 수 있는 '상품 이미지 꾸미기' 기능인데 이 기능은 잘 모르는 분들이 많으신 것 같습니다. 이 기능을 이용하면 썸네일 위에 할인이나 자체제작 또는 품절 상품 등의 아이콘을 운영 방식에 따라 다양하게 이용할 수 있습니다. 또 아이콘이 적용되는 기간을 설정할 수 있어 할인 기간이 정해져 있거나, 판매 전 사전 공개 제품 등에 이용..

이번 포스팅에서는 파비콘 만드는 방법과 카페24 쇼핑몰에서 등록하는 방법을 알아보겠습니다. #1 파비콘이란? 파비콘은 즐겨찾기(favorites)의 'fav'와 아이콘(icon)의 합성어로 브라우저 주소창 왼쪽 노출되는 16px X 16px의 작은 아이콘입니다. 또한 브라우저의 열린 탭 목록 및 북마크 목록에서 사이트 이름 옆에 표시되는 경우가 많기 때문에 사용자가 사이트를 쉽게 식별할 수 있습니다. 파비콘의 확장자는 ico 인데, 이 ico 는 포토샵에서는 저장할 수 없는 파일 형식이기 때문에 png나 gif 등의 이미지로 제작한 다음, 파비콘 변환 사이트를 통하여 확장자 변환을 해주어야 합니다. #2 파비콘 예비 이미지 만들기 먼저 포토샵에서 png 이미지를 만들어 보겠습니다. 파비콘은 16px X ..

백그라운드에는 여러 가지 css 속성이 있습니다. 그중 컬러, 이미지, 반복 여부, 위치, 사이즈 등의 속성이 가장 많이 사용되며, 이 속성들은 background 라는 하나의 속성으로 조합하여 작성할 수 있습니다. 속성 하나하나를 개별로 작성할 수도 있지만 최대한 간결하게 작성하는 것이 추후 유지관리에도 효율적입니다. # background css 작성 방법 background 속성 값은 '색상 이미지 반복 여부 위치 / 사이즈' 순서대로 작성할 수 있습니다. 컬러 속성 같은 특정 속성 값은 순서에 관계없이 작성할 수 있지만 위 순서를 기본값으로 생각해두고 작성하는 편이 좋습니다. background:#fff url(/web/upload/test/btn_down.png) no-repeat right 3..

모든 상품 상세페이지의 상단 또는 하단에 공통적으로 배송, 쇼핑몰 이용 관련 안내 이미지나 중요한 공지 이미지를 노출하는 방법입니다. #1 FTP 에 이미지 업로드 1 먼저 이미지를 준비한 후 FTP에 업로드합니다. 저는 web 폴더 내 upload 폴더에 test 라는 폴더를 만든 후 test 폴더에 detailImg.jpg 라는 이미지 파일을 업로드했습니다. 이제 스킨 소스창에 접속하여 이 이미지가 노출될 수 있도록 이미지 태그를 작성해보겠습니다. #2 이미지 태그 작성하기 기본 이미지 태그는 아래와 같이 작성됩니다. 앞서 /web/upload/ 폴더에 test 폴더를 만든 후 test 폴더에 이미지를 업로드했으니 경로는 /web/upload/test 가 되고, 이미지 파일명(확장자 포함)은 deta..

고객이 쇼핑몰을 접속하였을 때, 다양한 상품 카테고리 중 'NEW' 나 'BEST' 또는 '자체제작' 과 같은 특정 상품분류에 먼저 클릭을 유도할 수 있도록 특정 카테고리만 원하는 컬러로 변경하는 방법을 알아보겠습니다. css로 작성하는 방법, 스크립트로 작성하는 방법 등 여러 가지 방법이 있지만 제가 가장 자주 사용하는 방법은 스크립트로 작성하는 방법입니다. #1 장점 1) 카테고리 순서를 바꾸어도 영향을 받지 않는다. 2) 카테고리를 삭제한 후 같은 이름의 카테고리를 다시 생성해도 연동된다. #2 단점 1) 카테고리 이름을 바꿀 경우 스크립트 소스도 수정이 필요하다. 2) 스크립트 작성시 선택자를 구체적으로 지정하지 않을 경우 다른 곳에도 영향을 미칠 수 있다. 굳이 단점을 꼽자면 위 사항들이 있지만..