#12. 티스토리 본문 하단 바 만들기 (HTML/CSS)

지난 포스팅까지는 상단바를 완성하였다. 이제는 본문 하단을 꾸며보고자 한다. 사실 원래 의도는 본문 하단에 카테고리를 비롯한 모든 메뉴를 다 집합시킬 생각이었으나.. 너무 스크롤만 길어지고, 심플하다는 컨셉과 멀어지는 듯하여 새로이 꾸며보았다. 스킨을 테스트하는 블로그는 아래와 같다.

doony-skin.tistory.com

티스토리 본문 하단 바 만들기

일단 모든 기획은 피피티부터 시작한다. 러프하게 꾸민 본문하단 바의 모습을 보도록 하자.

정말 심플 그자체로 꾸미기로 하였다. 단순한 바탕색을 가지고, 안에 Doony World 라는 문구만 써넣기로 결정. 그리고 두니월드에 커서를 가져다대면, 색이 무지개색으로 자연스럽게 변하는 코드로 구현해보고자 한다.

일단은 html 상에서 본문 하단 영역, 즉 본문 아래 영역에 해당 코드를 집어넣어야한다.

FOOTER라는 코드 아래, FOOTER라는 클래스로 정의된 DIV안에다가 그냥 슝 넣는 것이다. 참고로, 넣을 때는 본문이 들어가있는 DIV 말고, 그것보다 아래에 삽입하면 도니다. 이제 CSS를 살펴보도록 하자. 글씨색을 변하게 해야하는데, 해당 코드는 아래와 같다. (출처: http://egloos.zum.com/mkjo/v/3050246)

FOOTER 클래스에 대한 정의부분이다. 여기서 원하는 폰트 크기, 색, 패딩(여백), 배경 색, 그리고 가운데 정렬 등 다양한 코드를 적용시킨 모습이다.

여이 코드는 글씨색을 변환하는 코드이다. 보다시피 %에 따라 색이 자연스럽게 변하도록 설정되어 있고, 웹킷을 사용하기 때문에 일부 브라우져에서는 안보일 수도 있다고 한다. 아래 있는 a:hover 코드의 경우, 5s 라는 부분이 시간을 나타낸다. 즉, 5초가 100%가 되게 설정한 것인데, 만약 더 길게 무지개 효과를 끌고 싶으면 시간을 늘리면 된다.

바로 적용시켜서 잘 되는지 확인해보았다.

정확히 원하는대로 구현이 된 모습이다. 너무 심플한 것 같은데....... 상세한 수정은 차차 하기로 하고 일단은 원하는 위치에, 원하는 효과를 넣었다는 점에 의의를 둔다.. 정말 안예쁘다. 디자이너가 상세안을 주면 더 예쁘게 꾸밀 수 있을 것 같은데, 거기까지는 아직인가보다. 휴..... 너무 안예뻐서 다다음 포스팅쯤에 다시 꾸며보기로 하자. 부트스트랩 홈페이지처럼 그냥 깔끔하게 다시 만들어보도록....

아무튼 일단은 진도를 나가야하니, 다음 포스팅에서는 댓글쓰는 창을 구현해보도록 하자.