티스토리 블로그 CCZ-CROSS 스킨 footer 부분 꾸미기

오늘은 티스토리 블로그의 반응형 스킨인 티스토리 블로그 CCZ-CROSS 스킨 footer 부분 꾸미기를 해보겠습니다.

footer 부분 꾸미는 것은 생각보다 간단합니다.

스킨의 웹디자인부분은 너무많은 방법이 있기 때문에

본인의 블로그에 적용한 방법으로 설명 드리겠습니다.

이 방법으로 만으로도 충분히 예쁘고 아름다운 블로그 푸터를 꾸밀 수 있을거라고 생각합니다.

CCZ-CROSS 스킨의 소개 정보는

http://webdir.tistory.com/491 에서 확인이 가능합니다.

footer 부분의 구조를 살펴봅시다.

site-footer

#site-footer 는 간단한 푸터 네비게이션과 저작권 정보를 포함한 일반적인 구조이다.


<footer id="site-footer" role="contentinfo">
    <ul id="nav-footer" class="list-unstyled clearfix">
    .....
    </ul>
    <small class="copyright clearfix">
    .....
    </small>
</footer>

첫 번째 footer 오른쪽 하단

SKIN BY COPYCATZ

이부분 .skin 부분의 영역입니다. 간혹 스킨에서 제작자나 라이센스 표기를 무단으로 삭제하고

마치 자기가 만든 스킨인냥 사용하는 분들이 많이 계십니다.

절대로 그런 예의 없는 몰상식한 행동을 해서는 안됩니다.

스킨을 만든 노고를 무시하고 기만하는 행위입니다!!

절대로 라이센스 무단 삭제는 하지말고!! 혹시나 수정이나 부득이 하게 빼야할경우는

원작자님에게 미리 말씀드리고 허락을 구하여야 합니다.

현재 PC 버전에는 보이고 모바일 버전에서는 보이지 않는데

혹시나 모바일 버전에서도 보이고 싶으신 분들은 visible-md visible-lg를 삭제하시면 됩니다.

두 번째 footer 왼쪽 상단

CSS편집에서 #nav-footer a이 부분을 수정 하시면 됩니다

현재는 @media (min-width: 992px)로 설정되어있어 데스크탑 PC화면에서는 아무런 효과도 없지만

모바일에서는 위와 같이 테두리가 나타나게 됩니다!

해당부분에서 스타일을 조정하시면 됩니다.

저부분에 a:hover 효과를 줄수도있습니다.

저는 글꼴 색만 color #9c9578; 로 바꾸었습니다.

스킨을 수정할 때는 티스토리 편집기보다 각 브라우저 크롬,파폭,익플10이상 의 요소 검사 기능을 이용하면 좋습니다. 단축키 :F12

세 번째 footer 왼쪽 하단

COPYRIGHT © 코코소프트, ALL RIGHT RESERVED.　
Total : 6,687,856 Today : 1,533 Yesterday : 3,107　
Powered by TISTORY · DAUM KAKAO CORP.

저는 이부분을 가장 많이 수정 했는데요. 카테고리에 있는 카운터 모듈을 없애고 footer 부분에

새로운 정보들 새로 입력 했습니다.

모바일 화면에서는 3단으로 나오지만 PC 화면에서는 한줄로 나오게 되어있습니다.

<ul> 및 <li>태그를 사용한다면 손쉽게 사용 가능합니다.

직접 스타일을 짜셔도 괜찮지만 이미 스킨에 <UL> 태그의 list-unstyled 클래스 스타일이 있어서 그것을 이용 했습니다.

제가 올린 소스 코드와 비교 해보시면 쉽게 응용 할 수 있을 것이라 생각합니다.


<ul class="list-unstyled">
		<li>
		<span class="copyr">COPYRIGHT &copy; <a href="https://cocosoft.kr/">코코소프트</a>, ALL RIGHT RESERVED.　</span>
			</li>
			<li>
					<span class="copyr">Total :  Today :  Yesterday : 　</span>
			</li>
			<li>
				Powered by <a href="http://tistory.com/" target="_blank"><font color="#CC6400">T</font>istory</a> &middot; <a href="http://daum.net/" target="_blank"><font color="#00A0F3">D</font><font color="#69B319">A</font><font color="#FF7E00">U</font><font color="#FF4419">M</font><b> Kakao Corp.</b></a>
			</li>
		</ul>

더 자세한 <UL> 태그의 강좌는 해당 포스트를 참고하세요.

http://webdir.tistory.com/311 - 본문 : 내용(Content) 요소 - P, BLOCKQUOTE, UL, OL, DL, HR, FIGURE, DIV, PRE

네 번째 footer 배경

배경을 꾸미는 방법이 가장 다양합니다.

저는 CSS에서 code>#site-footer 부분에 background를 패턴 이미지를 사용해서 집어넣었습니다.


    background: url(./images/footer.png) #fff;

해당 이미지를 반복해서 넣은 것 입니다.

그냥 단순하게 색을 넣을 넣거나 투명도를 조절 해줄 수 있고

그라데이션이나 패턴을 직접 코드로 만들어서 넣을 수도 있습니다.


background-color: #f6f6f6;
    background-image: -webkit-linear-gradient(0deg, #cdcccc 0px, #cdcccc 1px, transparent 1px, transparent 99px, transparent 100px), -webkit-linear-gradient(#cdcccc 0px, #cdcccc 1px, transparent 1px, transparent 99px, transparent 100px), -webkit-linear-gradient(#e0e0e0 0px, #e0e0e0 1px, transparent 1px, transparent 99px, transparent 100px), -webkit-linear-gradient(0deg, #e0e0e0 0px, #e0e0e0 1px, transparent 1px, transparent 99px, transparent 100px), -webkit-linear-gradient(transparent 0px, transparent 5px, #f6f6f6 5px, #f6f6f6 95px, transparent 95px, transparent 100px), -webkit-linear-gradient(0deg, #e0e0e0 0px, #e0e0e0 1px, transparent 1px, transparent 99px, #e0e0e0 99px, #e0e0e0 100px), -webkit-linear-gradient(0deg, transparent 0px, transparent 5px, #f6f6f6 5px, #f6f6f6 95px, transparent 95px, transparent 100px), -webkit-linear-gradient(transparent 0px, transparent 1px, #f6f6f6 1px, #f6f6f6 99px, transparent 99px, transparent 100px), -webkit-linear-gradient(#cdcccc, #cdcccc);
    background-image: linear-gradient(90deg, #cdcccc 0px, #cdcccc 1px, transparent 1px, transparent 99px, transparent 100px), linear-gradient(#cdcccc 0px, #cdcccc 1px, transparent 1px, transparent 99px, transparent 100px), linear-gradient(#e0e0e0 0px, #e0e0e0 1px, transparent 1px, transparent 99px, transparent 100px), linear-gradient(90deg, #e0e0e0 0px, #e0e0e0 1px, transparent 1px, transparent 99px, transparent 100px), linear-gradient(transparent 0px, transparent 5px, #f6f6f6 5px, #f6f6f6 95px, transparent 95px, transparent 100px), linear-gradient(90deg, #e0e0e0 0px, #e0e0e0 1px, transparent 1px, transparent 99px, #e0e0e0 99px, #e0e0e0 100px), linear-gradient(90deg, transparent 0px, transparent 5px, #f6f6f6 5px, #f6f6f6 95px, transparent 95px, transparent 100px), linear-gradient(transparent 0px, transparent 1px, #f6f6f6 1px, #f6f6f6 99px, transparent 99px, transparent 100px), linear-gradient(#cdcccc, #cdcccc);
    background-size: 100px 100%, 100% 100px, 100% 10px, 10px 100%, 100% 100px, 100px 100%, 100px 100%, 100px 100px, 100px 100px;

요런식으로 말이죠!

구글링을 통하면 다양한 소스 패턴 코드 또는 무료 패턴 이미지가 오픈 되어 있으니

마음에 드는 방식으로 배경을 꾸미면 될 거 같습니다.!

http://www.patternify.com/ CSS 패턴을 요긴 직접 만들어주는 곳