친절한김씨의 공작소

hover효과이기 때문에 모든 스타일 속성(서서히 나타났다 서서히 사라지는 속성)을 hover에 주면 된다고 생각했었습니다. 하지만 마우스가 빠졌을 때에도 부드럽게 사라지도록 만들기 위해서는 기본적인 상태에도 트랜지션을 줘야 한다는 것을 알았습니다. 만약 기본적인 상태의 div에 트랜지션을 주지 않았다면, hover시 서서히 변했을 테지만 마우스를 이미지에서 빼면 갑자기 원래 배경 이미지로 확 변하는 것을 볼 수 있을 겁니다. 이것은 멋도 없고 오래된 방식으로 보기 좋지 않겠지요. See the Pen hover alpha by kindkimyoung (@kindkimyoung) on CodePen. 주석에도 적었지만, div class를 여러개 만들기 싫어서 div에 인라인 스타일로 직접 배경 이미지를..

메뉴 텍스트에 마우스를 over 했을 때 밑줄이 있길 바라는 작업지시서를 받았습니다. hover 밑줄 이펙트는 검색하면 어디에든 많이 나오긴 합니다. 찬찬히 둘러보면서 어느 위치에 어떤 속성을 줄지 찾고 적용해보는 것이 가장 어려운 것 같습니다. 카페 24 솔루션을 사용하기 때문에 기존의 소스에 수정을 가하느라 적절한 위치를 찾는데 오래 걸렸지만 이것을 최대한 간소화 해보니 복잡할것이 없었습니다. 작업 당시에는 a태그 안의 요소들의 크기로만 보이는 밑줄에 여기 저기 속성의 위치를 옮겨보며 허둥댔지만, 카페 24의 불필요한 div들을 간소화하다 보니 확실히 눈에 보이는 것이 있었습니다. 요컨대 복잡하게 div의 위치를 찾을 것이 아니라 밑줄의 가로 크기가 a 태그 안의 요소 크기보다 크거나 작게 정해진 만..

직장에서 사이트 리뉴얼 중 썸네일에 상품이 더 커 보였으면 한다는 내용이 있었습니다. 등록된 상품이 500개도 넘는데, 상품 등록 시 보통은 썸네일이 종류별로 크기가 다른 네 장을 등록하게 되어 있기 때문에 약 2000장의 jpg들을 포토샵으로 액션을 돌려서 준비해야 합니다. 또 상품 등록을 통해 업로드된 썸네일들은 네 개의 경로가 있고, jpg파일명이 전부 암호화됩니다. 다시 처음으로 돌아가서 우선 파일명이 암호화된 jpg를 네 개의 폴더마다 다 다운로드하고, 그 상태에서 포토샵 액션으로 이미지의 여백을 잘라내던, 상품의 크기를 키우던 해서 2000장을 준비하고, 경로마다 ftp로 덮어씌워주면 되겠지만, 이 복잡하고 시간이 드는 업무를 거치느니, 썸네일 div와 img 속성을 손봐야겠다는 생각이 들었습..

이번에 아치형 문을 만들면서 유용하게 사용한 Boolean Modifier를 소개합니다. 포스팅 제목처럼 오브젝트에 구멍을 뚫을 수 있습니다. 먼저 구멍을 뚫을 큐브와 구멍의 모양이 될 실린더를 생성해 반을 잘라놓았습니다. 반으로 자른 실린더를 구멍을 뚫을 대상인 큐브의 원하는 위치에 관통하도록 위치해줍니다. 관통한게 보이시죠? 실린더를 위치했으면 다시 큐브를 선택합니다. 큐브 오브젝트를 선택한 상태로 모디파이어에서 Boolean(불리언)을 선택합니다. 오퍼레이션에서 디프런스를 선택합니다. 오브젝트에서 구멍을 뚫을 모양인 오브젝트. 즉 실린더 오브젝트를 선택합니다. 최종적으로 저런 옵션으로 선택 되어야 합니다. Apply를 누르면 끝입니다. 실린더를 치워보면 이렇게, 실린더 모양대로 큐브에 구멍이 난 모..

보통은 큰 슬라이드 배너를 많이들 만드시지만 용도에 따라 갤러리 형식의 배너를 만들어야 하는 경우도 있습니다. 제가 만들고 싶었던 배너에 몇 가지 조건이 있었습니다. 1. 3*2 구조의 이미지 배너. 2. 브라우저 크기에 따라 배열과 정렬을 유지하며 이미지가 잘리지 않고 자동으로 축소되고 확대될 것. 3. 이미지 위에 마우스 오버시 제목, 요약 설명, 보러 가기 버튼, 이미지 오파시티가 동시에 나타나기. See the Pen xxZZBog by kindkimyoung (@kindkimyoung) on CodePen. 구조는 이렇습니다. outer-div inner-div들을 감싸는 역할 inner-div 이미지, 제목, 요약설명, 보러 가기 글씨를 감싸는 역할 제목ㅣ 카테고리 요약 설명 보러가기> . ...