본문으로 바로가기

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

로딩중..
2016.02.24 17:15

오늘은 티스토리 블로그의 반응형 스킨인 티스토리 블로그 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 왼쪽 하단



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

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

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

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

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


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


<ul class="list-unstyled">
		<li>
		<span class="copyr">COPYRIGHT &copy; <a href="[##_blog_link_##]">[##_title_##]</a>, ALL RIGHT RESERVED. </span>
			</li>
			<li>
					<span class="copyr">Total : [##_count_total_##] Today : [##_count_today_##] Yesterday : [##_count_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 패턴을 요긴 직접 만들어주는 곳


예쁘게 블로그 스킨을 꾸미시길 바라며! 혹시나 수정에 관한 문의 사항은

댓글을 남겨드리면 제가 도와드릴 수 있으면 도와드릴게요!

신고

댓글을 달아 주세요

  1. BlogIcon SONYLOVE 2016.02.24 20:03 신고

    그냥 검은 바탕인줄 알았는데 무늬가 있는 바탕이었네요. 다른 여러곳에서 활용할 수 있을꺼 같아요. ㅎㅎ

  2. sonylove 2016.02.25 15:30 신고

    비회원으로 댓글 달아봅니다. 나중에 지우셔도 됩니다. ㅎㅎ

    • BlogIcon COCOSOFT COCO Media 2016.02.25 15:54 신고

      확인해주셔서 감사합니다.!! ㅎㅎ 쉬엄쉬엄이 정답인것같아요 ㅠ 사실 어제 새벽에도 계속 고침하다보니깐 뭐 트래픽이 초과하였습니다. 이런 티스토리 경고 메세지도 자주봤거든요.. ㅠ_ㅠ 블로그 댓글 중복입력까지 완료햇으니 이제 더이상 고치지 않아도 될 것 같아요!!

티스토리 툴바