티스토리의 꾸미기 중에서...

티스토리의 스킨을 만들 때 필요한 기능적인 부분을 일단은 적어놓고 나중에 필요하면 적용을 시켜봐야겠다.

1. 스크롤바의 움직임에 따라 헤드_header 부분이 숨겨지는 기능인데 꼭 헤드부분만 숨겨지는 것이 아니라 원하는 부분_div도 가능하다.

2. 숨겨지는 헤드 바탕에 이미지를 적용해 단순해진 블로그에 작은 감정이라도 느껴지도록 했다.

3. 모바일 화면에서 나타나는 버튼을 클릭하면 레이어_Layer가 나타나는 기능으로 일반적으로 여기다 카테고리를 집어넣어 현재의 블로그처럼 사용하는데 소스가 다르다.

<!DOCTYPE html> <head> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="html, css"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> <meta name="author" content="BongJun Kim"> <meta name="keywords" content="BongJuni"> <meta name="title" content="티스토리의 꾸미기 중에서... :: BJKim.SFAction" /> <meta name="description" Content="보고, 느끼고, 행동하자!" /> <link rel="alternate" type="application/rss+xml" title="BJKim.SFAction" href="https://sfaction.tistory.com/rss" /> <link rel="stylesheet" href="./style.css" media="all"> <link rel="shortcut icon" href="https://sfaction.tistory.com/favicon.ico" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <title>티스토리의 꾸미기 중에서... :: BJKim.SFAction</title>   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>  <style> html.open { overflow:hidden; } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button { margin:0; padding:0; outline:none; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .wrap_skin { position:relative; max-width:1330px; width:100%; height:auto; margin:0 auto; padding:5px; border:1px solid red; } .header { position:fixed; top:0; margin-left:50%; margin:0; z-index:2; background:url(./2016.png) center top no-repeat; max-width:1320px; width:100%; height:245px; padding:5px; background-color:#f7f7f7; border:1px solid rgba(150, 150, 150, 0.2); transition: All 0.5s ease; -webkit-transition: All 0.5s ease; -moz-transition: All 0.5s ease; -o-transition: All 0.5s ease; } .header_area { display:none; position:relative; top:0; margin:0 auto; z-index:2; background:url(./2016.png) center top no-repeat; max-width:1080px; width:100%; height:240px; margin:0 auto; padding-top:50px; border:1px solid #777777; } .content { width:100%; height:750px; margin:0 auto; padding:245px 5px 5px 5px; border:1px solid #999999; } .footer { width:100%; height:80px; border-bottom:1px solid #f2f2f2; border-radius:17px; -webkit-box-shadow:0 10px 7px -7px #f7f7f7; -moz-box-shadow:0 10px 7px -7px #f7f7f7; box-shadow:0 10px 7px -7px #f7f7f7; background-color:#fff; background-color:rgba(255,255,255,.95); } /* ##### menu_navi */ /* 열기 */ .btn_open { /*width:50px; height:50px;*/ /*position:absolute; right:0px; top:0px; z-index:1;*/ position:fixed; left:7px; bottom:-5px; z-index:3; text-align:center; font-size:42px; color:#fff; text-shadow:rgba(0, 0, 0, 0.3) 1px 1px 2px, rgba(0, 0, 0, 0.3) 0 0 10px; /*background-image: url("http://s1.daumcdn.net/cfs.tistory/custom/blog/204/2048858/skin/images/menu.png"); background-size:50%; background-repeat:no-repeat; background-position:center;*/ cursor:pointer; } /* 닫기 */ .btn_close { /*width:50px; height:50px;*/ /*position:absolute; right:0px; top:0px; z-index:1;*/ position:absolute; left:7px; bottom:-5px; z-index:5; text-align:center; font-size:42px; color:#fff; text-shadow:rgba(0, 0, 0, 0.3) 1px 1px 2px, rgba(0, 0, 0, 0.3) 0 0 10px; /*background-image: url("http://s1.daumcdn.net/cfs.tistory/custom/blog/204/2048858/skin/images/close.png"); background-size: 50%; background-repeat: no-repeat; background-position:center;*/ cursor: pointer; } /* 메뉴 */ #menu_navi { width:50%; height:100%; position:fixed; top:0px; left:-50%; z-index:5; border:1px solid #c9c9c9; background-color:white; transition: All 0.2s ease; -webkit-transition: All 0.2s ease; -moz-transition: All 0.2s ease; -o-transition: All 0.2s ease; overflow:auto; overflow-x:hidden; } #menu_navi.open { left:0; } .page_cover.open { display:block; } .page_cover { width:100%; height:100%; position:fixed; top:0; z-index:1; background-color:rgba(0,0,0,0.4); display:none; } .btn_open { display:none; } .Date_Counter { display:none; } /* // menu_navi */ @media only screen and (max-width:820px) { .btn_open { display:block; } /* ##### Date_Counter ##### */ .Date_Counter { display:block; width:100%; margin:0 auto; padding:7px 0; } .Date_Counter h3 { margin:0; padding:3px 0; background-color:#003399; font-family:'Segoe UI',Georgia,"Times New Roman", sans-serif; font-size:20px; color:#FFE400; text-align:center; letter-spacing:1px; } /* ### Pc_Time */ .Pc_Time { width:100%; margin:0; padding:0; text-align:center; } .Pc_Time ul { list-style:none; } .Pc_Time ul li { display:inline-block; margin:0; padding:2px 0; font-size:13px; color:#999; } /* ### Visitor_Counter */ .Visitor_Counter { width:100%; margin:0; padding:0; } .Visitor_Counter ul { list-style:none; padding:0; margin:0; text-align:center; } .Visitor_Counter ul li { display:inline-block; margin:0; padding:0; font-size:12px; color:#999; letter-spacing:1px; } .Visitor_Counter ul li span { font-size:12px; color:#bcbcbc; } /* 카운터_어제, 오늘, 총 */ .yesterday, .today, .total { margin:0; padding:0; } /* 카운터 숫자 */ .Visitor_Counter .num {padding:0; margin:0;} /* // Date_Counter */ } </style> </head> <s_t3> <div class="wrap_skin"> <div class="header"> </div> <div class="content"> <div class="header_area"> </div> <div class="btn_open">≡</div> <div onclick="history.back();" class="page_cover"></div> <div id="menu_navi"> <div onclick="history.back();" class="btn_close">≡</div> <div class="Date_Counter"> <div class="Pc_Time"> <ul> <li> <script type="text/javascript"> //<![CDATA[ var strEngDay = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; var d = new Date(); var sToday = d.getFullYear() + ". " + (d.getMonth() + 1) + ". " + d.getDate(); document.write(sToday + ". " + strEngDay[d.getDay()] + ""); //]]> </script> </li> </ul> </div> <div class="Visitor_Counter"> <ul> <li><i class="fa fa-bar-chart"></i></li> <li class="today"> 오늘: <span class="num">, </span></li> <li class="yesterday">어제: <span class="num">, </span></li> <li class="total">손님: <span class="num"></span></li> </ul> </div> <h3>REMEMBER 20140416</h3> </div> </div> <div class="footer"> </div> </div> </s_t3> <script type="text/javascript" src="sfa_header.js"></script> <script type="text/javascript" src="menu_navi.js"></script>

설명과 지료가 있는 곳이다.

: http://brilliantcoding.xyz/entry/Jquery-%EC%A0%9C%EC%9D%B4%EC%BF%BC%EB%A6%AC%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%B4-%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C-%EB%A9%94%EB%89%B4-%EB%A7%8C%EB%93%A4%EA%B8%B0

적고 보니 무지 내용이 많아 스크롤이 압박이 심하네...

그리고, 점점 이전의 블로그 스타일로 돌아가는 느낌이 든다.

^.^~

'배움터_일반 > TIStory' 카테고리의 다른 글

위로 가는 버튼 (0)	2016.07.13
휴대폰에서 토글버튼 클릭시 나타나는 메뉴. (1)	2016.06.29
반응형 스킨 '#1'의 토글버튼을 바꿨다. (0)	2016.06.24
이미지 캡션(자막) 꾸미기 (0)	2016.06.21
글쓰기에서 공백처리... (0)	2016.06.18

티스토리의 꾸미기 중에서...

'배움터_일반 > TIStory' 카테고리의 다른 글

댓글

티스토리툴바

티스토리의 꾸미기 중에서...

'배움터_일반 > TIStory' 카테고리의 다른 글

관련글

댓글

티스토리툴바