개인 티스토리 헤더 소스코드

/* 폰트파일 import */

@import url('https://fonts.googleapis.com/css?family=Megrim');

@import url('https://fonts.googleapis.com/css?family=Nanum+Pen+Script');

/* 헤더 */

.wrap_skin{position:relative;min-width:884px;min-height:100%;padding-left:23%;transition:padding-left ease-in-out 0.2s}

.wrap_skin.navi_on {padding-left:960px}

.area_head{position:fixed;left:0;top:0;width:23%;margin-top:171px;min-width:320px;z-index:1000}

.article_skin{width:800px;min-height:858px;margin:0 auto;padding:96px 42px 100px}

#tt-body-index .article_skin { padding-top:70px }

.article_skin .tit_skin{padding-bottom:15px;border-bottom:1px solid #efefef;font-weight:normal;font-size:20px;line-height:26px;color:#5c5c5c}

.article_skin .index_title { display:none }

.area_head .btn_cate{position:absolute;left:35px;top:-141px;width:26px;height:26px;vertical-align:middle}

.area_head .btn_cate .ico_cate{width:26px;height:20px}

.area_navi {display:none;float:left;width:318px}

.area_navi .tt_category {padding:0 40px}

.area_head .area_profile{display:block;text-align:center}

.area_head .area_profile .tit_post{padding:0 25px}

.area_head .area_profile:before{display:block;width:38px;height:2px;margin:0 auto 23px;background-color:#fff;content:''}

.area_head .area_profile .link_post{font-weight:200;font-size:48px;line-height:50px; font-family: 'Nanum Pen Script', cursive;color:#fff; text-overflow: ellipsis;-webkit-line-clamp: 4;-webkit-box-orient: vertical;overflow: hidden;display: -webkit-box}

.area_head .area_profile .link_post:hover{text-decoration:none}

.area_head .area_profile .thumb_profile{display:block;width:51px;height:51px;margin:44px auto 6px;border-radius:51px}

.area_head .area_profile .img_profile{display:block;border-radius:51px;width:100%;height:100%}

.area_head .area_profile .txt_profile{font-size:22px;font-family: 'Megrim';color:#fff;opacity:0.7;filter:alpha(Opacity=70);display:block; padding:0 35px; overflow:hidden; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical}

.wrap_sub{background-image:url(images/820972.png);}

.wrap_sub{display:block;position:fixed;left:0;top:0;z-index:10;width:23%;min-width:320px;height:100%;min-height:100%;background-repeat:no-repeat;background-position:50% 0;background-size:cover;transition:width ease-in-out 0.2s}

.cont_sub{width:100%;height:100%;background:rgba(34,34,34,0.35)}

.cont_sub .inner_sub {position:relative;width:100%;height:100%}

.cont_sub .area_sub{overflow-x:hidden;overflow-y:auto;position:absolute;top:83px;bottom:80px;left:0;right:0;padding-top:15px}

.area_search{position:absolute;right:34px;top:-154px;z-index:10}

.area_search .btn_search{display:block;position:relative;width:23px;height:23px;margin-top:15px}

.area_search .btn_search .ico_search{width:23px;height:23px;margin:0 auto;background-position:-40px 0}

.area_search .frm_search{display:none;position:relative;width:243px;height:22px;padding:11px 0 11px 57px;background-position:0 -50px;margin-top:6px}

.frm_search .tf_search{width:182px;border:0 none;color:#fff;background:transparent}

.frm_search .tf_search::-webkit-input-placeholder { color:#fff }

.wrap_sub .btn_close{display:none;position:absolute;right:30px;top:31px;width:22px;height:22px;background-position:-70px 0}

.search_on .area_search {left:50%;width:243px;margin-left:-150px}

.search_on .btn_search{display:none}

.search_on .frm_search{display:block}

.search_on .area_head .btn_cate { display:none }

.navi_on .area_head .btn_cate{display:none}

.navi_on .area_navi{display:block}

.navi_on .area_head .area_profile{display:none}

.navi_on .cont_sub{background:url(images/bg_side.png) repeat-y 0 0;opacity:1.0;filter:alpha(Opacity=100)}

.navi_on .wrap_sub{width:960px}

.navi_on .area_search{left:856px;top:-151px}

.navi_on.search_on .area_search {width:216px;left:670px;margin-left:0}

.navi_on .btn_search { margin-top:11px}

.navi_on .btn_search .ico_search{background-position:-100px 0}

.navi_on.search_on .frm_search{width:160px;background-position:0 -100px;margin-top:0}

.navi_on .lab_search{color:rgba(255,255,255,.4)}

.navi_on .frm_search .tf_search {width:140px}

.navi_on .wrap_sub .btn_close{display:block}

.tt_category .link_tit {display:block;padding-bottom:8px;font-weight:normal;font-size:18px;color:#fff}

.tt_category li a .c_cnt,

.tt_category li a img { display:none }

.tt_category .category_list .link_item {display:block;padding:7px 0 8px;overflow:hidden;font-size:18px;color:#fff;text-overflow:ellipsis;white-space:nowrap}

.tt_category .sub_category_list {margin:-3px 0 5px}

.tt_category .sub_category_list .link_sub_item {display:block;overflow:hidden;line-height:27px;color:#a7a7a7;text-overflow:ellipsis;white-space:nowrap}

.tt_category .sub_category_list .link_sub_item::before { content:"- ";}

.tt_category .link_tit:hover,

.tt_category .category_list .link_item:hover,

.tt_category .sub_category_list .link_sub_item:hover { color:#FFD2D7;text-decoration:none;}

.link_guestbook { display:none }

.wrap_etc{display:none;float:left}

.navi_on .wrap_etc{display:block}

.wrap_etc .col_aside{float:left;width:249px;padding:0 36px}

.wrap_etc .right_side { padding-right:0 }

.box_aside{position:relative;margin-bottom:39px}

.tit_aside{display:block;margin-bottom:7px;color:#6bacce}

.list_board li{padding:3px 0}

.list_board .link_board{display:block;overflow:hidden;font-size:12px;line-height:19px;color:#a7a7a7;white-space:nowrap;text-overflow:ellipsis}

.box_aside .list_tag{overflow:hidden;padding-top:7px}

.box_aside .list_tag li{float:left}

.box_aside .list_tag .link_tag{display:block;height:27px;margin:0 8px 7px 0;padding:0 10px;border:1px solid #525252;border-radius:15px;font-size:11px;line-height:27px;color:#a7a7a7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:65px}

.box_aside .list_tag .link_tag:hover{text-decoration:none}

.box_aside .link_more{position:absolute;right:6px;top:0;font-size:11px;color:#a7a7a7;text-decoration:underline}

.wrap_etc .month_calendar{width:250px;height:20px;color:#6bacce;text-align:center}

.wrap_etc .month_calendar .btn_prev , .wrap_etc .month_calendar .btn_next{height:17px;padding:0 10px}

.wrap_etc .month_calendar .ico_skin{margin-top:3px;vertical-align:top}

.wrap_etc .month_calendar .ico_prev{width:5px;height:8px;background-position:-130px 0}

.wrap_etc .month_calendar .ico_next{width:5px;height:8px;background-position:-130px -10px}

.wrap_etc .tbl_calendar{border-collapse:collapse;border-spacing:0;width:270px;margin:9px 0 0 -11px}

.wrap_etc .tbl_calendar td{height:26px;vertical-align:middle}

.wrap_etc .col_day{width:14.28%}

.wrap_etc .tit_week{font-weight:normal;font-size:12px;text-align:center;color:#5c5c5c}

.wrap_etc .link_day{display:block;font-size:13px;text-align:center;color:#a7a7a7}

.wrap_etc .day_event{text-decoration:underline}

.wrap_etc .tt-calendar{border-collapse:collapse;border-spacing:0;width:270px !important;margin:0 0 0 -11px}

.wrap_etc .tt-calendar .cal_month { height:20px;text-align:center; margin-bottom:9px }

.wrap_etc .tt-calendar .cal_month a { color:#6bacce; }

.wrap_etc .tt-calendar .cal_month a:first-child,

.wrap_etc .tt-calendar .cal_month a:last-child {display:inline-block;overflow:hidden;font-size:0;line-height:0;background:url(images/ico_skin.png) 0 0 no-repeat;text-indent:-9999px; margin:6px 10px 0;vertical-align:top;width:5px;height:8px;}

.wrap_etc .tt-calendar .cal_month a:first-child { background-position:-130px 0 }

.wrap_etc .tt-calendar .cal_month a:last-child { background-position:-130px -10px }

.wrap_etc .tt-calendar td{height:26px;vertical-align:middle}

.wrap_etc .tt-calendar thead th { width:14.28%; font-weight:normal;font-size:12px;text-align:center;color:#5c5c5c }

.wrap_etc .tt-calendar tbody td {font-size:13px;text-align:center;color:#a7a7a7}

.wrap_etc .tt-calendar tbody td a { color:#a7a7a7; text-decoration:underline }

.list_keep{padding-top:2px}

.list_keep li{padding:3px 0;font-size:12px;color:#a7a7a7}

.list_keep .link_keep{color:#a7a7a7}

.box_visitor { margin-top:-15px }

.list_visitor, .list_total{float:left;color:#a7a7a7}

.list_visitor dt, .list_total dt{float:left;height:20px;margin-right:8px;padding:0 8px;border-radius:10px;font-size:11px;line-height:20px;background-color:rgba(102,102,102,.4)}

.list_visitor dd, .list_total dd{float:left;font-size:12px;line-height:20px;color:#5c5c5c;margin-right:25px}

.list_visitor dd { color:#a7a7a7}

.list_control{position:absolute;left:50%;bottom:19px;width:316px;height:42px;margin-left:-158px;z-index:101}

.navi_on .list_control {left:1px;margin-left:0;opacity:0.5}

.list_control li{float:left}

.list_control .ico_skin {display:block;width:48px;height:40px;margin:0 15px 0 16px}

.list_control .link_write {background-position:0 -160px}

.list_control .link_memo {background-position:-50px -160px}

.list_control .link_rss {background-position:-100px -160px}

.list_control .link_manage {background-position:-150px -160px}