티스토리 스킨 만들기! 친효스킨2 (아트북) 개발 일지 - 커버 기능 추가
안녕하십니까! 친절한효자손입니다. 2월까지 끝내려고했던 친효스킨 : 아트북 반응형 스킨의 제작은 또 한달 딜레이 되고 말았습니다. 의외로 잘 모르시는 분들이 계신데 제 성격이 굉장히 게으릅니다. 그래서 이런 결과가 나오는 것입니다. 솔직히 부지런하면 진작에 완성시켰을 스킨입니다. 이미 뼈대는 세팅이 끝났고 친효스킨을 만들어본 경험이 있으니 어디가 어떤 위치인지 파악도 끝났기에 바로 실천만 하면 되는데 이놈의 실천이 문제입니다. 겁나 게을러서... 자꾸 미뤄요. 특히 집에서는 더 안하죠. 그래서 대전에서 HTML 관련 모임도 만들어 운영하고 있습니다.
오늘은 저의 팬(?)분을 만났습니다. 사실 이분도 티스토리 스킨을 제작하고 계셔서 처음에 엄청 반가웠었죠. 그분께서 만드신 스킨이 하나 있는데 너무 마음에 들었습니다. 그래서 오프라인 모임 때 슬쩍 저의 속내를 비췄습니다. 너무 마음에 드는데 혹시 다음 스킨 제작 때 테마를 참고해 응용해도 되겠느냐고 말입니다. 그랬더니 흔쾌히 허락을 해주시는군요. 너무 좋았습니다. 매우매우 감사할 따름입니다. 아무튼 이번 모임때는 푸터 영역의 마무리 및 커버 기능을 추가했습니다.
푸터 영역 CSS 정돈
지난번 푸터 영역에서 좀 더 깔끔하게 다듬었습니다. 최대한 아트북 테마에 손상 없는 디자인을 고려했습니다. 아트북에는 작품 외에는 나머지 오브젝트는 일반 텍스트 느낌으로 표현하고 싶었기에 특수기호라던지 아이폰트같은 특수 이모티콘을 모두 뺐습니다. 나름 괜찮은 결과를 얻은 듯 합니다.
커버 영역 추가
친효스킨에서 사용중인 갤러리 스타일의 커버 기능을 추가했습니다. 일단 기능만 추가했고 조만간 모임 때 CSS 스타일을 다듬는 작업을 진행할 것입니다. 얼마전에 작업했던 3D 카드 컨샙을 커버에 도입할 것입니다.
See the Pen CSS3 : 3D Card by rgy0409 (@rgy0409) on CodePen.
이 스타일이죠. 썸네일을 앞면으로, 글 제목이라던지 작성일, 카테고리, 서두 내용 텍스트는 뒷면에 배치할 것입니다. 진짜 아트북 같은 느낌이 물씬 풍길 것으로 기대합니다.
앞으로 작업해야 할 것들
이번에 커버 기능을 넣으면서 인덱스 페이지의 목록 기능을 새롭게 추가해야함을 알았습니다. 기본 뼈대는 있으니 CSS만 수정하면 이건 금방 작업이 끝날 것 같습니다. 친효스킨 아트북은 3월에 완성해 배포할 수 있도록 노력해 보겠습니다. (아마도?) 끝.
