저번 시간에 이어서 상점 탑 로고를 수정하겠습니다. 탑 내비게이션을 최종적으로는 위 이미지처럼 수정하기로 했었습니다. 로고도 변경해야 할 테고, 로고의 위치도 수정해야 할 건데 반응형이기 때문에 저번 시간과 같이 미세하게 다르지만 똑같은 작업을 세 번씩 해야 하기 때문에 끝까지 읽어주시면 좋을 것 같습니다. 스마트 디자인 편집창을 열어 첫 화면을 보면 로고가 보일 것입니다. 마우스 커서를 근처에 가져가면 편집 버튼이 생깁니다. 클릭을 해봅니다. 더보기 로고를 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 이미지, 제목, 요약설명, 보러 가기 글씨를 감싸는 역할 제목ㅣ 카테고리 요약 설명 보러가기> . ...
여러분은 코딩 작업을 하실 때 어떤 프로그램을 사용하시나요? 드림위버도 있고, 나모 웹 에디터도 있고 정말 다양하겠지만, 저는 간단한 코딩이 필요할 경우 코드펜을 사용합니다. 편의성으로 말할 것 같으면, 비싼 금액을 주고 프로그램을 설치할 필요가 없다는 점이 최고의 강점인 것 같습니다. PC와 와이파이만 있다면 어디든 갈 수 있어! 가 아니라 어디에서든 코딩을 짜고 이를 실시간으로 확인할 수 있죠. 처음 들어가시면 이런 형태입니다. 별도의 가입이나 로그인 절차 없이도 즉시 사용이 가능합니다. 좌측 상단의 Start Coding 버튼을 누르시면 바로 코딩창으로 넘어갑니다. 한눈에 html과 css, js를 보면서 실시간으로 적용 예까지 즉시 확인이 가능합니다. 이렇게, 각각의 창에 입력한 코딩은 즉시 반영..