본문 바로가기

ALL

오늘 하루 그만보기 (상단 배너) 유저의 시선이 많이 머무르는 위치가 웹사이트 상단, 하단이다 보니 띠 배너 형식으로 배너를 자주 넣게 됩니다. 오늘은 상단에 얇은 띠 배너 형식으로 배너를 넣고 브라우저 쿠키를 체크해서 오늘 하루 그만보기 기능을 넣는 소스를 알아보도록 하겠습니다. 1초 만에 회원가입하고 1000원 할인쿠폰 받기 오늘 하루 그만보기 닫기 css, html, script 를 따로 정리해 놓고 간략한 설명글은 주석을 달아 올려 놓았으니 한번씩 테스트해보시면 좋을 듯 합니다. 위 소스를 긁어서 보기 귀찮으신 분들은 하단에 첨부파일을 확인해 주세요~
[cafe24] 카페24 상품 이미지 섬네일 마우스오버 설정하기 카페24 쇼핑몰 제작 시 상품 섬네일에 마우스를 가져갔을 때 다른 이미지를 보여주는 방법을 공유하도록 하겠습니다. ※ 상품관리 1_상품관리 > 상품목록에 들어가서 상품등록 or 진열 상품을 클릭해서 들어갑니다. 2_하단에 이미지 정보로 이동합니다. 3_개별이미지등록을 클릭합니다. 4_이미지 사이즈 변경을 클릭하여 목록 이미지, 축소 이미지 사이즈를 추가하려는 이미지 사이즈에 맞게 수정해줍니다. 5_기본 상품 섬네일 이미지는 목록(medium) 이미지 입니다. 축소(small)에 마우스오버 시 노출될 이미지를 등록해 주세요. ※디자인관리 1_디자인관리에 들어가서 적용 중인 스킨에 수정을 클릭합니다. 2_상품분류 (list.html) 페이지를 열어주세요. 3_상품 이미지 노출 태그를 수정해 줍니다.
제이쿼리 슬라이드 배너 (ulslide) 제이쿼리를 이용한 간단한 슬라이드 배너를 소개해 드리겠습니다. 슬라이더를 검색하다가 간단한 슬라이더가 있어서 가져왔어요~ 버튼을 누르면 화면이 이동하고 마우스를 올려놓지 않으면 자동으로 롤링됩니다. 그럼 소스 나갑니다. 아래는 결과물 화면 캡쳐한 모습이에요.
제이쿼리 달력 달기 (datepicker) 제이쿼리 달력 플러그인 중에 많이 쓰이는 달력, datepicker를 소개해 드릴까 합니다. 먼저 http://jqueryui.com/download 에서 "datepicker"를 검색합니다. 플러그인을 다운받은 후 링크만 시켜주면 되는데요. JQuery Core 파일은 반드시 그 위에 external 시키시고, 안에 태그를 선택할 수 있는 selector를 지정합니다. 그럼 default로 사용 가능하죠. datepicker에 옵션을 추가해 줄 수 있는데 그 방법은 두가지가 있습니다. constructor를 만들고 option을 넣는 법. constructor를 만들때 argument로 {} 안에 option을 넣는 법 *옵션 1.animation animation의 종류에는 "show"."slideD..
제이쿼리 레이어 팝업 (bpopup) 레이어팝업이란? DIV 태그를 이용한 방법으로 사용자가 팝업 수행을 요청하면 DIV 영역을 제외한 부분의 명암이 어두워지면서 팝업이 띄워지는 형태를 말합니다. 대표적으로 아마존닷컴 같은 쇼핑사이트에서 이미지를 표시할 때 많이 사용됩니다. 그럼 샘플 소스를 통해 레이어팝업 예제를 수행해 보겠습니다. X 레이어 팝업이 완성 되었습니다. 팝업에 대한 크기는 content div에서 조정이 가능합니다 결과물 :
스마일 프리큐어 완구 : 프린세스 캔들, 스마일 팩트, 데콜 케이스 스마일 프리큐어 완구 프린세스 캔들, 스마일 팩트, 데콜 케이스입니다. 페가수스 장식이 인상적인 촛대 형태 아이템, 프린세스 캔들입니다. 완구 제일 위에 촛대 위에 바람을 불면 불이 꺼집니다. 개인적으로 디자인이 너무 제 취향이라 제일 좋아하는 완구 중 하나입니다. 콤팩트 형태의 완구 스마일 팩트입니다. 스마일 팩트는 가운데 큐어 데콜을 장착 후, 퍼프를 두드려 변신을 할 수 있는 아이템이라고 하네요. (필살기를 쓸 때도 사용한다고 합니다. 완구가 취향이라 수집했을 뿐 애니를 못 봐서 검색해 왔습니다~) 데콜 케이스는 트렁크 형태의 아이템으로 16개의 데콜을 전부 꽂으면 로열 퀸이 부활한다고 합니다.
심쿵 프리큐어 완구 : 러브 키스 루즈, 러브 아이즈 파레트 심쿵 프리큐어 장난감 러브 키스 루즈와 러브 아이즈 파레트 입니다. 큐어 에이스가 필살기를 쓸 때 사용하는 아이템입니다. 큐어 에이스 전용 변신 아이템입니다.
허긋토 프리큐어 완구 : 프리하트, 멜로디 소드 허긋토 프리큐어 프리하트, 멜로디 소드 완구입니다. 허긋토 프리큐어의 변신 아이템 프리하트 입니다. 완구를 비틀어서 전화 모드, 하트 모드를 즐길 수 있으며, 역대 프리큐어 변신기 중 최초로 변형 기능이 들어가 있다고 합니다. 허긋토 프리큐어 로드 형식 무기인 멜로디 소드입니다. 개인적으로 허긋토 프리큐어 완구 디자인이 취향이 아니어서 안 모으다가 우연히 기회가 돼서 구입하게 됐는데, 막상 구입하니 기능도 많고 만족스러웠어요~
후레쉬 프리큐어 완구 : 행복의 클로버박스 행복의 클로버박스는 보석상자형 아이템으로 다른 공간에 있는 미키와 세츠나를 비춰주고 인피니티로 각성한 시폰을 불러내기도 했습니다. 프리큐어 전사 네명의 합체 필살기 럭키 클로버 그랜드 피날레를 쓸 수 있게 도움을 주는 아이템이기도 합니다. 후레쉬 프리큐어 클로버박스에는 9가지의 주얼이 함께 들어있는데 주얼 별로 기능과 플레이할 수 있는 게임이 틀리고 오르골 모드로 연주도 할 수 있습니다. 먼저 위 영상은 오르골 모드로 베토벤 교향곡 "환희의 송가"를 플레이하는 모습입니다. 하단에 주얼 별로 플레이 영상을 첨부하도록 하겠습니다. 큐어피치 주얼 모드 큐어피치 주얼을 오르골 중앙에 배치하면 큐어피치와 멜로디 놀이를 할 수 있습니다. 멜로디가 끝나고 오르골 앞부분에 클로버 버튼에 손을 올리면 연주를 한번 더 플..
해피니스 프리큐어 완구 : 러브프리 브레스, 포츈 탬버린, 포츈 피아노, 허니 바톤, 프리체인지미러 처음에 러브프리브레스 장난감 디자인이 이뻐서 하나만 구매했다가 뒤늦게 포츈 탬버린, 포츈 피아노, 트리플 댄스 허니바톤 역시 세트병이 와서 구매했습니다. 러브프리브레스 구동 영상입니다. 기술이나 필살기를 사용할 때 사용하는 아이템입니다. 포츈 탬버린 구동영상입니다. 큐어 포츈의 기술이나 필살기를 쓰는 아이템입니다. 포츈 피아노 구동 영상입니다. 큐어 포츈의 변신 아이템으로 피아노 건반을 치면 반지의 색이 함께 바뀝니다. 트리플 댄스 허니바톤 장난감입니다. 큐어 허니의 아이템으로 평상시에는 바톤 형태지만 리본 모드나 마라카스 모드로도 사용할 수 있다. 프리체인지미러 아이템입니다. 프리큐어로 변신할 때 사용하는 아이템입니다. 프리카드를 사용해 복식을 갈아입을 수 있습니다.
하트캐치 프리큐어 완구 : 플라워택트 하트캐치 프리큐어 완구 플라워택트 구동 영상입니다. 처음에 구하기 힘들어서 끙끙 앓다가 두 개나 구해 버렸습니다. 힘들게 구해서 그런지 엄청 마음에 들어요!
스위트 프리큐어 완구 : 큐어 브로치, 힐링 체스트 스위트 프리큐어 완구 큐어 브로치, 힐링 체스트 작동 영상입니다. 큐어 브로치 구동 영상입니다. 국내에 기본형, 뮤즈 버전 두 가지가 출시됐습니다. 페어리 톤을 모두 모으려면 스위트 프리큐어 완구를 다 모아야 해요. 스위트 프리큐어 완구는 큐어 브로치, 힐링 체스트, 러브기타 로드, 미라클 베르티에, 판타스틱 베르티에 총 5가지로 구성돼있습니다. 힐링 체스트 구동 영상입니다. 제가 좋아하는 악기형 완구고 금장 장식이 굉장히 이쁩니다.
프린세스 프리큐어 완구 : 뮤직 프린세스 팰리스, 프린세스 로드, 프린세스 퍼퓸, 스칼렛 바이올린 지금까지 수집한 프린세스 프리큐어 완구 작동 영상입니다. 초창기에 기록하는 느낌으로 가볍게 영상을 찍어놔서 다소 짧은 영상이 많습니다! 고! 프린세스 프리큐어 뮤직 팰리스 약간 오르골 느낌도 나면서 귀엽고 굉장히 큽니다. 처음에 사이즈 보고 굉장히 놀랐어요. 고! 프린세스 프리큐어 프린세스 로드 구하기가 힘들어서 중고 완구를 구입했더니 도색 까집도 있고 완구 상태가 좋지 않았습니다. 고! 프린세스 프리큐어 프린세스 퍼퓸 변신 아이템 퍼퓸입니다. 특히 마음에 들었던 완구라서 3개 사서 드레스업 키 다르게 다 꽂아놨습니다~ 고! 프린세스 프리큐어 스칼렛 바이올린 별 기대 없이 구매했는데 만족도 굉장히 높았어요~ 여전히 활 부분은 마음에 들지 않지만요. 블링블링!!! 프린세스 프리큐어 완구 포스팅은 여기까지 ..
비즈아트 : 세일러문 3기 마스,머큐리,주피터,비너스 변신스틱 도안 세일러문 3기에 등장하는 세일러 마스, 머큐리, 주피터, 비너스의 변신스틱을 비즈아트 5mm용으로 제작한 도안입니다. 개인적으로만 즐기시고 도용이나 불펌은 하지 말아주세요. 위 영상은 도안을 만드는 모습이니 궁금하신 분들은 한 번씩 확인 부탁드립니다.
BLYTHE 커스텀 : 브라이스 헤드 분해, 안구 교체, 헤드 조각, 메이크업 어릴 때 언니에게 보헤미안 브라이스 인형을 선물 받았었습니다. 지금은 구할 수도 없는 오래된 초판 브라이스인데요. 이 브라이스를 선물 받고 흠집이라도 날까 싶어서 금이야 옥이야 안고 다녔었습니다. 그때는 브라이스 인형이 많이 대중화가 되지 않았던 때라서 오너층이 나름 매니아틱했고 정보도 많지 않았어요. 그래서 혼자 매트 스킨에 안구 교체, 얼굴 조각 커스텀을 해보겠다고 시도했다가 대실패를 했었습니다. 이번에 다시 보헤미안 브라이스를 커스텀해보자 싶어서 바로 커스텀에 들어가려다가 또 실패하면 어쩌나하는 마음에 중국 브라이스 ICY doll로 연습을 해보기로 했습니다. 브라이스 커스텀하는 과정은 헤드 분해, 안구 교체, 헤드 조각, 메이크업 순서대로 확인해 볼 테니 하단의 영상을 확인해주세요. 얼굴 분해하기..
巴拉拉小魔仙 : 파랍랍소마선 완구 "콤팩트, 수정구, 팔레트, 팔찌" 파랍랍소마선(巴拉拉小魔仙)은 중국 마법소녀 애니메이션으로 프리큐어를 표절했다고 논란이 많이된 애니메이션입니다. 이런 오해가 생긴 이유는 완구만 봐도 그 이유를 알 수 있었습니다. 파랍랍소마선 애니메이션의 마법아이템 디자인이 프리큐어 완구랑 비슷한 면이 너무 많더군여! 궁금한 마음에 타오바오에 배대지를 써서 콤팩트, 수정구, 팔레트, 팔찌 완구를 주문해봤습니다. 이것 말고도 파랍랍소마선 완구가 엄청 많았지만 제 통장은 딱 5개만 허락해주더군요... ^ㅁ ^)a 그럼 천천히 하나씩 구동영상과 함께 소개를 시작하도록 하겠습니다. ※ 참고로 완구 이름은 제가 개인적으로 재해석한 부분이 있으니 정확한 이름은 함께 추가해놓은 원제로 확인해주세요! 반딧불 진주 콤팩트 : 海萤珍珠变身器 (저가형) 피치피치핏치의 조개 ..
[다음 스마트워크] 도메인 이메일 주소 연결 (개인도메인으로 메일 사용이 가능한 무료기업메일) 요즘 저처럼 개인 도메인을 메일 주소로 활용하고 싶으신 분들을 많으실 텐데요! 그런 분들에게 도움이 될만한 무료 서비스를 찾아서 공유해보려고 합니다. 바로 다음(DAUM) 스마트워크 인데요 구글이나 네이버에서도 이런 서비스를 제공해주긴 하는데 유료 혹은 유료 예정 서비스라서 저는 다음 스마트워크를 선택했어요! http://mail2.daum.net/hanmailex/domain.html 다음 스마트워크 사이트에 접속해서 신청하기를 진행하던가 다음 메일에 접속해서도 스마트워크 서비스 신청을 할 수 있는데요 하단에 DAUM 스마트워크 버튼을 클릭하면 위와 같은 화면이 뜹니다! 자신에게 맞는 카테고리의 신청하기 버튼을 클릭해주세요~ 그럼 도메인 입력란에 자신이 소유한 도메인을 기입하고 다음 단계로 넘어가 주세..
[웹버튼] 버튼 종류 웹사이트를 제작하다 보면 빼먹을 수 없는 버튼!! 이 웹버튼에도 속성과 공식이 있는데요~ 아래 내용을 보면서 웹 버튼의 종류, 속성, 팁에 대해서 알아볼까 합니다. 먼저 버튼은 3가지 종류로 나눌 수 있습니다 1. positive : 화면의 변화를 주거나 정보를 추가하는 버튼 ("전송" "확인" "더보기" 등) 2. Neutral: 화면의 변화가 없거나 되돌아가는 버튼 ("취소"버튼 등) 3. Negative: 삭제, 리셋, 추가 정보를 차단하는 버튼 positive action button : positive 버튼은 주목성을 높이는 것이 중요합니다. Negative action button : Negative 버튼은 명암 차 등을 이용해서 positive 버튼보다 눈에 덜 띄게 디자인합니다. Neutr..
[해상도] 아이폰 해상도 오늘은 아이폰 해상도에 대해서 알아볼까 합니다. 아래 내용은 iOS Human Interface Guidelines에서 가져온 표입니다. 링크를 타고 들어가야 하는 부분이 있어서 하단에 Launch file or image 만 따로 정리하였습니다. 자세한 내용은 iOS Developer Library 사이트에서 확인 가능합니다. CLICK ▶ For iPhone 6: •750 x 1334 (@2x) for portrait •1334 x 750 (@2x) for landscape For iPhone 6 Plus: •1242 x 2208 (@3x) for portrait •2208 x 1242 (@3x) for landscape For iPhone 5 : •640 x 1136 For iPhone 4s : •..
[나인패치] 앱 제작 시 디자이너에게 유용한 나인패치 앱 제작 시 수많은 디바이스 별로 이미지를 슬라이스 해줘야 하는데요. 이때 유용한 것이 바로 나인패치 입니다. 예를 들어 아이폰의 문자 기능 중에 말풍선 같은 경우에 가로사이즈가 안에 들어가는 텍스트에 따라서 유동적으로 움직여야 합니다. 이럴 때 나인패치를 사용하게 되는데요. 밑에 이미지를 보면서 설명드리겠습니다. 1번의 배경이 투명한 이미지를 등록한다고 했을 때 가로 사이즈가 늘어나면 2번 이미지처럼 늘어나게 됩니다. 이때 3번 이미지처럼 보기 좋게 늘어나도록 고안된 것이 바로 나인 패치 도구라고 할 수 있습니다. 이때 참고하셔야 할 것이 나인패치로 저장된 파일명은 꼭 "파일명.0.png "여야 합니다. 나인패치 툴로 조작하는 것도 좋지만 간단하게 웹에서 변환 가능한 방법이 있어서 소개해 드릴까 합니다..

티스토리툴바