직장에서 사이트 리뉴얼 중 썸네일에 상품이 더 커 보였으면 한다는 내용이 있었습니다. 등록된 상품이 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 이미지, 제목, 요약설명, 보러 가기 글씨를 감싸는 역할 제목ㅣ 카테고리 요약 설명 보러가기> . ...