진행하기에 앞서 필자는 리터칭 디자이너(포토 에디터)이고 실무를 하며 본업이 아닌 분야에 독학을 하고 있기 때문에 완벽하지 않고 모르는 것도 많은, 아마도 이 글을 검색해서 읽고 있는 여러분보다 모르거나 혹은 비슷한 수준일 것입니다. 부족할 순 있으나 여러분께 조금이라도 도움이 되었으면 하는 마음으로 작성합니다. 혹시나 잘못된 부분은 상냥하게 댓글로 알려주세요. 또 궁금하신 점도 댓글을 남겨주세요. 가능한 부분은 함께 고민해드리겠습니다. 카페24 무료 디자인을 살펴보던 중 꽤 괜찮은 반응형 무료 디자인을 발견했습니다. (22년 01월 기준) 카페24가 PC버전, 모바일 버전, 반응형, 에디봇 모드, 스마트 디자인 등 원래 다양한 무료 디자인을 공개했었으나 이번 무료 디자인은 정말 쇼핑몰에서 보편적으로 사..
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 태그 안의 요소 크기보다 크거나 작게 정해진 만..
보통은 큰 슬라이드 배너를 많이들 만드시지만 용도에 따라 갤러리 형식의 배너를 만들어야 하는 경우도 있습니다. 제가 만들고 싶었던 배너에 몇 가지 조건이 있었습니다. 1. 3*2 구조의 이미지 배너. 2. 브라우저 크기에 따라 배열과 정렬을 유지하며 이미지가 잘리지 않고 자동으로 축소되고 확대될 것. 3. 이미지 위에 마우스 오버시 제목, 요약 설명, 보러 가기 버튼, 이미지 오파시티가 동시에 나타나기. See the Pen xxZZBog by kindkimyoung (@kindkimyoung) on CodePen. 구조는 이렇습니다. outer-div inner-div들을 감싸는 역할 inner-div 이미지, 제목, 요약설명, 보러 가기 글씨를 감싸는 역할 제목ㅣ 카테고리 요약 설명 보러가기> . ...