저번 시간에 이어서 상점 탑 로고를 수정하겠습니다. 탑 내비게이션을 최종적으로는 위 이미지처럼 수정하기로 했었습니다. 로고도 변경해야 할 테고, 로고의 위치도 수정해야 할 건데 반응형이기 때문에 저번 시간과 같이 미세하게 다르지만 똑같은 작업을 세 번씩 해야 하기 때문에 끝까지 읽어주시면 좋을 것 같습니다. 스마트 디자인 편집창을 열어 첫 화면을 보면 로고가 보일 것입니다. 마우스 커서를 근처에 가져가면 편집 버튼이 생깁니다. 클릭을 해봅니다. 더보기 로고를 index.html(첫 화면)에서 클릭으로 편하게 오픈 했지만, 사실은 index.html을 감싼 main.html 안에 있습니다. 바꿔 말하면 메인 레이아웃(main.html)이 index.html 의 내용을 감싸고 있습니다. 쉽게 1행의 부분을 ..
많은 쇼핑몰이 마케팅 정보 수신 동의를 위해 회원정보 수정 이벤트를 진행합니다. 각종 이벤트, 프로모션 등으로 힘들게 모은 회원에게 마케팅 정보를 발송할 수 없다면 아무리 회원수가 많아도 회원이 없는 것과 마찬가지인 결과입니다. 마케팅 정보 수신 동의 이벤트를 진행함으로써 회원들에게 쇼핑몰에 대해 관심을 갖게 하고, 각종 혜택을 주며 활발한 구매가 일어날 수 있습니다. ※마케팅 정보 수신 비동의 회원에게 마케팅 정보를 발송하는 것은 법적으로 분쟁의 소지가 있습니다. 그러므로 마케팅 정보 수신동의 이벤트는 꾸준히 지속적으로 진행하는 것이 쇼핑몰의 마케팅에 유리합니다.회원가입 항목 설정 세팅이 안되어 있을 수도 있으니 이 부분을 반드시 확인하시기 바랍니다. 가입시 필수 항목으로 표시되어있지만 체크하지 않아도..
hover효과이기 때문에 모든 스타일 속성(서서히 나타났다 서서히 사라지는 속성)을 hover에 주면 된다고 생각했었습니다. 하지만 마우스가 빠졌을 때에도 부드럽게 사라지도록 만들기 위해서는 기본적인 상태에도 트랜지션을 줘야 한다는 것을 알았습니다. 만약 기본적인 상태의 div에 트랜지션을 주지 않았다면, hover시 서서히 변했을 테지만 마우스를 이미지에서 빼면 갑자기 원래 배경 이미지로 확 변하는 것을 볼 수 있을 겁니다. 이것은 멋도 없고 오래된 방식으로 보기 좋지 않겠지요. See the Pen hover alpha by kindkimyoung (@kindkimyoung) on CodePen. 주석에도 적었지만, div class를 여러개 만들기 싫어서 div에 인라인 스타일로 직접 배경 이미지를..
직장에서 사이트 리뉴얼 중 썸네일에 상품이 더 커 보였으면 한다는 내용이 있었습니다. 등록된 상품이 500개도 넘는데, 상품 등록 시 보통은 썸네일이 종류별로 크기가 다른 네 장을 등록하게 되어 있기 때문에 약 2000장의 jpg들을 포토샵으로 액션을 돌려서 준비해야 합니다. 또 상품 등록을 통해 업로드된 썸네일들은 네 개의 경로가 있고, jpg파일명이 전부 암호화됩니다. 다시 처음으로 돌아가서 우선 파일명이 암호화된 jpg를 네 개의 폴더마다 다 다운로드하고, 그 상태에서 포토샵 액션으로 이미지의 여백을 잘라내던, 상품의 크기를 키우던 해서 2000장을 준비하고, 경로마다 ftp로 덮어씌워주면 되겠지만, 이 복잡하고 시간이 드는 업무를 거치느니, 썸네일 div와 img 속성을 손봐야겠다는 생각이 들었습..
보통은 큰 슬라이드 배너를 많이들 만드시지만 용도에 따라 갤러리 형식의 배너를 만들어야 하는 경우도 있습니다. 제가 만들고 싶었던 배너에 몇 가지 조건이 있었습니다. 1. 3*2 구조의 이미지 배너. 2. 브라우저 크기에 따라 배열과 정렬을 유지하며 이미지가 잘리지 않고 자동으로 축소되고 확대될 것. 3. 이미지 위에 마우스 오버시 제목, 요약 설명, 보러 가기 버튼, 이미지 오파시티가 동시에 나타나기. See the Pen xxZZBog by kindkimyoung (@kindkimyoung) on CodePen. 구조는 이렇습니다. outer-div inner-div들을 감싸는 역할 inner-div 이미지, 제목, 요약설명, 보러 가기 글씨를 감싸는 역할 제목ㅣ 카테고리 요약 설명 보러가기> . ...