개발일지 📝
티스토리 블로그 이름 스킨 꾸미기 (HTML, CSS 추가)
무네림
2021. 8. 30. 23:40
티스토리를 시작하게 되면서 적용되어 있는 스킨을 꾸미고 싶었는데 미루고 미루다가 드디어 꾸미게 되었습니다.
사실상 어려운(?) 부분은 따로 없습니다..!
구현되어 있는 코드에서 조금만 수정하여 추가하면 됩니다.
먼저, 티스토리 스킨 파일 구조를 살펴보면 다음과 같이 구성되어 있습니다.
SKIN ─┬─ index.xml
├─ skin.html
├─ style.css
├─ preview.gif
├─ preview256.jpg
├─ preview560.jpg
├─ preview1600.jpg
└─ images ─┬─ script.js
├─ background.jpg
├─ background.jpg
└─ background.jpgindex.xml
티스토리 스킨의 설정 정보 값을 담고 있는 파일로 스킨 이름, 설명, 제작자 이름 및 저작권과 같은 기본 정보, 최근 글 개수, 댓글 표시 여부와 같은 설정 옵션 값 등을 수정하여 작성할 수 있습니다. 스킨 정보 파일을 변경하고 싶다면 아래 티스토리 공식 링크를 따라 수정하면 될 것 같습니다!
↓
https://tistory.github.io/document-tistory-skin/common/index.xml.html
skin.html
티스토리 스킨의 메인 템플릿 파일로 이 부분에 코드를 추가하여 스킨의 뼈대를 구성합니다.
style.css
skin.html로 기본 구성을 했다면 style.css 파일에서 스킨을 꾸미는 역할을 합니다. 글꼴, 색깔, 위치, 애니메이션 효과 등 구체적인 CSS 스타일을 정의해서 원하는 스타일의 스킨을 만들 수 있습니다.
티스토리 스킨 편집
처음부터 새로 스킨을 모두 작성하여 꾸밀 수도 있지만 저는 티스토리에서 제공하는 "#2" 스킨에서 블로그 타이틀만 수정했습니다.
1) "스킨 변경"을 눌러 기본 스킨을 선택해 적용을 누릅니다.
2) 티스토리에 들어가 가장 오른쪽 상단에 있는 계정을 누른 뒤 ⚙️ 톱니바퀴를 누르면 아래와 같은 페이지가 열리고 빨간 박스로 표시된 "스킨 편집"을 누릅니다.
아래와 같은 페이지가 열리고 오른쪽 창에서 HTML, CSS, 파일 업로드가 적혀있고, 왼쪽 창에는 기본으로 설정한 스킨이 적용된 것을 확인할 수 있습니다. 따라서 오른쪽 창에서 코드를 수정한 뒤 "적용"을 누르게 되면 왼쪽에서 변경된 스킨을 볼 수 있게 됩니다.
저는 기본으로 설정된 블로그 타이틀이 밋밋하여 해당 부분을 수정하려고 합니다.
정말 너무 쉬운 방법이니 따라 해 보셔도 좋을 것 같습니다!
블로그 이름 바꾸기
아예 처음부터 다 꾸미기에는 시간도 많이 들고, 디자인도 생각하기 어려울 수 있습니다.
따라서, 원하는 디자인 소스코드를 찾아 무료로 사용할 수 있는 사이트를 알려드리겠습니다.
코드펜은 프론트엔드 개발자들이 코드들을 공유하거나 테스트할 때 사용하는 사이트로 코딩에 관심이 있으신 분들이라면 모두 아실 사이트입니다.
CodePen
An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.
codepen.io
코드를 공유하는 사이트로 자유롭게 사용할 수 있지만, 사용하실 때는 출처를 꼭 표기하시는 것을 추천드립니다!
코드펜 사이트에 들어가면 다음과 같은 페이지가 열리고 트렌드에 맞춰 다양한 개발자분들의 코드를 확인할 수 있습니다. 저는 주로 빨간 박스로 표시된 검색창에 토픽을 검색하여 찾습니다.
블로그 이름을 꾸미기 위해서 text를 검색했습니다. 다양한 디자인을 확인하여 마음에 드는 스타일을 찾아 클릭합니다.
[webkit] Animated "text-shadow" pattern
Uses `-webkit-background-clip: text` & `linear-gradient` to simulate striped text shadow....
codepen.io
저는 @carpenumidium 개발자분의 글씨에 섀도우 효과가 움직이는 디자인을 선택했습니다. 저와 같은 디자인을 적용하고 싶으신 분들은 위의 링크를 통해 들어가시면 됩니다.
HTML, CSS, JS 파트로 구분하여 나눠져 있고 코드를 수정하면 아래에 즉각적으로 나타나 확인할 수 있습니다.
해당 디자인은 JS 부분이 따로 없어 HTML, CSS 부분만 수정하면 돼서 간단합니다!
왼쪽 HTML에서 블로그 이름을 작성하여 수정했습니다.
<h1 data-shadow='CodeBug'>CodeBug</h1>처음에는 위의 코드와 같이 이름만 변경해서 실제로 적용시켜보니 기존에 티스토리에서 구현한 방식은 블로그 이름을 눌렀을 때 해당 블로그의 홈으로 돌아가도록 되어있었습니다.
그래서 저는 위의 코드를 아래와 같이 수정했습니다. (아래 코드를 사용해주세요!)
<a href="/" class="link_post" data-shadow='블로그 이름' id ="블로그 이름">블로그 이름</a><a></a> 태그는 하이퍼링크로 블로그 이름을 눌렀을 경우 설정되어 있는 url로 넘어가게 됩니다.
실제로 티스토리 스킨에 html을 적용해보겠습니다.
html 코드 중 어느 부분에 넣어야 할지 잘 모르겠다면 59번째 라인에 위의 코드를 복사해 붙여 넣으면 됩니다!
그 후에 적용 버튼을 누르게 되면 아래와 같은 결과물을 확인할 수 있습니다.
뭐야 적용이 안되었잖아🤯?! 라고 생각하실 수 있습니다.
앞에서 말씀드린 것처럼 html은 뼈대를 만드는 것이기 때문에 블로그 이름만 변경된 것을 확인할 수 있습니다.
이제 원하는 스타일의 배너를 만들기 위해 CSS를 수정해보겠습니다.
CSS 같은 경우에는 각자 원하는 색상과 글꼴이 있고, 위치 또한 다르기 때문에 경우의 수가 많아 모두 설명드리기는 어려울 것 같아 제가 적용한 스타일의 코드를 첨부하겠습니다!
@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Righteous);
/* reset */
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}
fieldset,img{border:0 none}
dl,ul,ol,menu,li {list-style:none}
blockquote, q {quotes: none}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none}
input,select,textarea,button {vertical-align:middle;outline:none}
input::-ms-clear {display:none}
button {border:0 none;background-color:transparent;cursor:pointer}
body {background:#fff;-webkit-text-size-adjust:none}
body,th,td,input,select,textarea,button {font-size:14px;line-height:1.5;font-family:'Spoqa Han Sans', sans-serif;color:#666}
a {color:#333;text-decoration:none}
a:active, a:hover {text-decoration:underline}
a:active {background-color:transparent}z
address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal}
input:checked[type='checkbox']{background-color:#666; -webkit-appearance:checkbox}
input[type='text'],input[type='password'],input[type='submit'],input[type='search'],input[type='tel'],input[type='email'],html input[type='button'],input[type='reset']{-webkit-appearance:none;border-radius:0}
input[type='search']::-webkit-search-cancel-button,textarea{-webkit-appearance:none}
/* global */
#dkIndex {overflow:hidden;position:absolute;left:-9999px;width:0;height:1px;margin:0;padding:0} /* 스킵네비게이션 */
.ir_pm {display:block;overflow:hidden;font-size:0px;line-height:0;text-indent:-9999px} /* 사용된 이미지내 의미있는 텍스트의 대체텍스트를 제공할때 */
.ir_wa {display:block;overflow:hidden;position:relative;z-index:-1;width:100%;height:100%} /* 중요한 이미지 대체텍스트로 이미지off시에도 대체 텍스트를 보여주고자 할때 */
.screen_out {overflow:hidden;position:absolute;width:0;height:0;line-height:0;text-indent:-9999px} /* 대체텍스트가 아닌 접근성을 위한 숨김텍스트를 제공할때 */
.show {display:block}
.hide {display:none}
.ico_focused {outline: 1px dotted #000;outline: -webkit-focus-ring-color auto 5px}
html, body{height:100%;min-height:100%}
/* 공통이미지 */
.ico_skin{display:block;overflow:hidden;font-size:0;line-height:0;background:url(images/ico_skin.png) 0 0 no-repeat;text-indent:-9999px}
.box_search{background:url(images/box_search.png) 0 0 no-repeat}
.txt_bar{display:inline-block;width:1px;height:9px;margin:0 9px;background-color:#ebebeb}
/* 헤더 */
.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:42px;line-height:50px;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:16px;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:/*@background-image*/url(images/header_default.jpg)/*@*/;}
.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:#6bacce;text-decoration:underline }
.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}
/* footer */
.area_foot{height:49px;border-top:1px solid #e8e8e8;line-height:46px;color:#aaa;text-align:center}
.area_foot .info_copyright{min-width:600px;margin:0 auto;font-size:12px}
.area_foot .emph_t{color:#6bacce}
/* 뷰 상단 */
.area_title{margin:0 0 30px;padding-bottom:15px;border-bottom:1px solid #efefef}
.area_title .tit_category a {font-weight:700;font-size:16px;color:#6bacce}
.area_title .tit_post{padding:5px 0 10px;font-weight:normal;font-size:34px;line-height:43px;color:#222}
.area_title .info_post,
.area_title .info_post a {font-size:13px;color:#a7a7a7}
.area_title .info_post .txt_bar { margin:0 9px 0 5px }
.area_view {color:#5c5c5c;word-wrap: break-word;}
.area_view p {font-size:15px;line-height:28px; margin:0 auto 28px; color:#555;}
.area_view code { font-family: Menlo,Consolas,Monaco,monospace; }
.area_view p code { padding:2px 5px; border-radius:3px; background:#efefef; margin:0 2px; border:1px solid #e0e0e0 }
.area_view a {color:#6bacce}
.area_view h1,
.area_view h2,
.area_view h3,
.area_view h4 { line-height:30px; margin:52px auto 28px }
.area_view ul,
.area_view ol { margin: 0 auto 32px; padding: 0 0 0 10px; }
.area_view ul li,
.area_view ol li { margin-left:24px; margin-bottom:10px; }
.area_view ul li { list-style:disc }
.area_view ol li { list-style:decimal }
.area_view blockquote { padding: 10px 20px; margin: 0 auto 28px; border-left:5px solid #eee }
.area_view blockquote,
.area_view blockquote p { font-size:18px; line-height:30px }
.area_view blockquote ol:last-child,
.area_view blockquote ul:last-child,
.area_view blockquote p:last-child { margin-bottom:0 }
.area_view table { max-width:100% }
.area_view pre { color:#555; background-color:#F6F7F8; margin:28px auto; word-wrap: break-word; font-family: Menlo,Consolas,Monaco,monospace; font-size:14px; line-height:20px; overflow-x:auto; }
.area_view pre code.hljs { padding: 16px; }
.area_view iframe { max-width:100%; display:block; margin:0 auto 20px }
.area_view img { max-width:100%; height:auto }
.area_view .imageblock {width:auto !important; height:auto !important}
.area_view .imageblock img { max-width:100%; height:auto }
.area_view .imageblock .cap1 { font-size:0.8em }
.area_view hr { margin: 3em 5em 3em; border: 0; border-bottom: 1px solid #ccc; }
.protected_form { text-align:center; padding: 100px 0 136px; border-bottom:1px solid #efefef }
.protected_form p { margin-bottom:10px; font-size:16px; color:#5c5c5c }
.protected_form input { -webkit-appearance: none; padding:0 15px; border: 1px solid #eee; height:38px; line-height:38px; font-size: 12px; box-sizing: border-box;}
.protected_form button { border-radius: 4px; font-size: 12px; line-height: 38px; background-color: #6bacce; color: #fff; font-weight: bold; padding: 0 16px }
/* 뷰 댓글 */
.area_etc{margin-top:38px}
.area_etc .list_tag {position:relative}
.area_etc .list_tag dt{position:absolute;left:0;top:2px;width:33px;height:17px;margin-right:2px;border-radius:8px;font-size:10px;line-height:17px;color:#fff;background-color:#a7a7a7;text-align:center;padding-right:1px}
.area_etc .list_tag dd{padding-left:40px}
.area_etc a {display:inline-block;font-size:13px;color:#a7a7a7}
/* 관련기사 */
.area_related {position:relative;width:820px;margin-top:54px}
.area_related .tit_related {font-weight:normal;font-size:20px;color:#222}
.list_related {overflow:hidden;margin-top:15px}
.list_related li {position:relative;float:left;margin-right:20px}
.list_related li:last-child { margin-right:0}
.list_related .link_related {display:block;overflow:hidden;position:relative;width:185px;height:200px;margin:0 auto;border:1px solid #e8e8e8;background:#fafafa;font-size:13px;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;color:#fff}
.list_related .thumb_type .link_related {width:185px;height:200px;border:0 none}
.list_related .frame_related {display:none;position:absolute;left:0;top:0;width:100%;height:100%;background:#000;opacity:.4;filter:alpha(Opacity=40)}
.thumb_type .frame_related {display:block}
.list_related .thumb_related {position:absolute;left:0;top:0;width:100%;height:100%}
.list_related .txt_related {display:block;display:-webkit-box;overflow:hidden;position:relative;left:0;top:0;z-index:10;max-height:80px;padding:27px 20px 0;color:#5c5c5c;text-overflow:ellipsis;-webkit-line-clamp:4;-webkit-box-orient:vertical;word-wrap:break-word}
.list_related .link_related:hover .txt_related {text-decoration:underline}
.list_related .date_related {position:absolute;left:0;bottom:20px;z-index:10;width:100%;color:#a7a7a7}
.list_related .thumb_type .txt_related {color:#fff}
.list_related .thumb_type .date_related {color:#fff; opacity:0.7}
.area_related .link_more {position:absolute;right:20px;top:10px;font-size:13px;color:#a7a7a7;border-bottom: 1px solid #a7a7a7;text-decoration:none}
/* 뷰댓글 */
#tt-body-page .area_reply{margin-top:51px}
.area_reply .tit_reply{font-weight:normal;font-size:20px;color:#222;display:block;margin-bottom:14px}
.area_reply .fld_reply{padding:20px;border-top:1px solid #e8e8e8;background-color:#fafafa;position:relative}
.area_reply .writer_info{overflow:hidden;margin-bottom:5px}
.area_reply .writer_info .info_name{float:left;position:relative;margin-right:5px}
.area_reply .writer_info .info_pw{float:left;position:relative}
.area_reply .writer_info .wrap_info{display:block}
.area_reply .writer_info .inp_info{width:171px;height:36px;padding:0 13px;border:1px solid #e8e8e8;background:#fff;font-size:13px;-webkit-box-sizing:border-box;box-sizing:border-box}
.area_reply .reply_write{position:relative;padding:7px 12px;border:1px solid #e8e8e8;background-color:#fff}
.area_reply .lab_write{position:absolute;top:7px;left:12px;font-size:13px;color:#a7a7a7}
.area_reply .tf_reply{width:100%;height:70px;border:1px solid #fff;font-size:13px;resize:none;box-sizing:border-box}
.area_reply .inp_info,
.area_reply .tf_reply { color:#5c5c5c }
.area_reply .writer_check {position:absolute; bottom:21px; right:93px}
.area_reply .writer_check .check_secret{float:left;overflow:hidden;position:relative;height:36px;margin-right:14px;line-height:36px}
.area_reply .writer_check .inp_secret{float:left;width:18px;height:18px;margin:10px 5px 0 0;opacity:0.01;filter: alpha(opacity=1)}
.area_reply .writer_check .lab_secret{float:left;font-size:12px;color:#5c5c5c;cursor:pointer}
.area_reply .writer_check .ico_check{position:absolute;top:10px;left:0;width:19px;height:19px;background-position:-120px -30px}
.area_reply .writer_check .inp_secret:checked + .lab_secret .ico_check{background-position:-120px -50px}
.area_reply .writer_btn{float:right;margin-top:10px}
.area_reply .writer_btn .btn_enter{float:left;width:71px;height:36px;border-radius:18px;font-size:13px;line-height:38px;background-color:#6bacce;color:#fff}
.list_reply .thumb_profile{float:left;width:48px;height:48px;margin-right:20px;border-radius:48px;background-position:-140px -20px;margin-top:2px}
.list_reply .img_profile{display:block;width:100%;height:100%;border-radius:48px;}
.area_reply .list_reply li{position:relative;padding:23px 0 22px 0;border-top:1px solid #efefef; min-height:53px}
#tt-body-page .area_reply .list_reply li.tt_more_preview_comments_wrap { padding:20px; min-height: inherit; border-top:1px solid #efefef }
#tt-body-page .area_reply .list_reply li.tt_more_preview_comments_wrap:hover { background-color:#efefef }
#tt-body-page .area_reply .list_reply .tt_more_preview_comments_text { color:#aaa }
.area_reply .list_reply li:first-child{border-top:0 none}
#tt-body-page .list_reply li:first-child{padding-top:0}
.area_reply .list_reply .re_reply{padding-left:69px}
.area_reply .reply_content{overflow:hidden;display:block}
.area_reply .tit_nickname{float:left;overflow:hidden;max-width:200px;margin-right:10px;color:#222;white-space:nowrap;text-overflow:ellipsis;font-size:16px}
.area_reply .tit_nickname a:hover{text-decoration:none}
.area_reply .txt_date{float:left;margin-top:5px;font-size:12px;color:#a7a7a7}
.area_reply .txt_reply{display:block;padding-top:4px;font-size:13px;line-height:21px;color:#5c5c5c;clear:both}
.area_reply .list_reply li:hover .area_more,
.area_reply .list_reply li:hover .area_more .reply_layer { display:block }
.area_reply .list_reply li:first-child .reply_layer { top:2px }
.area_more .reply_layer { position:absolute; right:0px; top:25px }
.area_more .reply_layer .link_reply { margin:0 2px;font-size:12px;color:#6bacce }
.area_more .reply_layer .link_reply:hover { text-decoration: none}
.area_more{display:none}
/* 리스트 */
.list_content {padding:24px 0 26px;border-bottom:1px solid #efefef }
.list_content::after { content:''; clear:both; display:block }
.list_content .thumbnail_post { float:right; width:150px; height:150px; margin:6px 0 5px 30px }
.list_content .link_post{display:block;overflow:hidden;text-decoration:none}
.list_content .link_post:hover .tit_post {color:#6bacce}
.list_content .tit_post{display:block;font-weight:normal;font-size:24px;line-height:34px}
.list_content .txt_post{display:-webkit-box;display:-ms-flexbox;display:box;overflow:hidden;margin-top:4px;font-size:13px;line-height:23px;color:#5c5c5c;vertical-align:top;word-break:break-all;-webkit-box-orient:vertical;-webkit-line-clamp:4}
.list_content .txt_bar { margin:0 7px }
.list_content .detail_info{margin-top:11px;font-size:12px;color:#aaa}
.list_content .detail_info .link_cate{font-size:13px;text-decoration:none;color:#6bacce}
/* 태그 */
#tt-body-tag .list_tag{overflow:hidden;margin-top:30px}
#tt-body-tag .list_tag li{float:left;margin:0 10px 10px 0}
#tt-body-tag .list_tag .link_tag{display:block;height:34px;padding:0 16px;border:1px solid #6bacce;border-radius:17px;line-height:36px;color:#6bacce;font-size:13px}
#tt-body-tag .list_tag .link_tag:hover{color:#fff;background-color:#6bacce;text-decoration:none}
#tt-body-tag .article_skin,
#tt-body-guestbook .article_skin { padding-top:94px }
/* 게스트 댓글 */
#tt-body-guestbook .list_reply{border-bottom:1px solid #e8e8e8}
#tt-body-guestbook .area_reply .fld_reply{border-top:1px solid #efefef;border-bottom:1px solid #efefef}
#tt-body-guestbook .article_skin .tit_skin { border:0 }
/* 페이징 */
.article_skin .area_paging{height:30px;margin-top:26px;text-align:center}
.area_paging .inner_paging{display:inline-block;overflow:hidden}
.area_paging .ico_skin{width:6px;height:10px}
.area_paging .btn_prev{float:left;margin-right:18px;line-height:30px;color:#5c5c5c}
.area_paging .btn_prev.no-more-prev {color:#a7a7a7; text-decoration: none}
.area_paging .no-more-prev .ico_prev{background-position:-150px -10px}
.area_paging .ico_prev{display:inline-block;margin-right:8px;background-position:-140px -10px}
.area_paging .btn_next{float:left;margin-left:18px;line-height:30px;color:#5c5c5c}
.area_paging .btn_next.no-more-next {color:#a7a7a7; text-decoration: none}
.area_paging .no-more-next .ico_next{background-position:-150px 0}
.area_paging .ico_next{display:inline-block;margin-left:8px;background-position:-140px 0}
.area_paging .link_page span,
.area_paging .interword {float:left;min-width:10px;height:30px;margin:0 4px;padding:0 10px;line-height:30px;color:#5c5c5c}
.area_paging .link_page .selected {border-radius:30px;background-color:#6bacce;color:#fff}
@media
only screen and (max-width:738px){
.ico_skin {background:url(images/m320_ico_skin.png) 0 0 no-repeat}
/* 스킨 */
.wrap_skin {min-width:100%;padding-left:0}
.area_head {width:100%;height:45px;min-width:auto;margin-top:0}
.area_head .area_profile {display:none}
.area_head .btn_cate {left:0;top:0;width:49px;height:45px}
.area_head .btn_cate .ico_cate {width:19px;height:15px;margin:0 auto;background-position:0 0}
.search_on .area_search {top:0;left:0;width:100%;margin-left:0;padding:12px 15px 0;-webkit-box-sizing:border-box;box-sizing:border-box;padding:6px 15px 0;background:#fff}
.area_search .frm_search {width:auto;height:31px;padding:0 15px 0 40px;border:1px solid #ebebeb;border-radius:20px;margin-top:0}
.frm_search .tf_search {width:100%;color:#222;height:19px;margin-top:7px;font-family:applesdgothicneo-light}
.frm_search .tf_search::-webkit-input-placeholder { color:#a7a7a7 }
.frm_search .ico_search {position:absolute;left:14px;top:7px;width:18px;height:18px;background-position:-20px 0}
.wrap_sub {position:relative;width:auto;min-width:auto;display:none}
.cont_sub .inner_sub {padding:0}
.cont_sub .area_sub {height:auto}
.wrap_skin.navi_on {padding-left:0}
.area_search {right:0;top:0}
.area_search .btn_search {width:50px;height:45px;margin-top:0}
.area_search .btn_search .ico_search {width:18px;height:18px;margin-top:0;background-position:-20px 0}
#tt-body-page .area_head { background-color:rgba(255,255,255,0.95) }
#tt-body-page .navi_on .area_head { background-color: inherit }
.navi_on .area_head {height:72px;position:fixed; right:58px; width:auto}
.navi_on .area_head .area_profile {display:block;position:absolute;left:0;right:0;top:0;height:72px;text-align:left}
.navi_on .area_head .area_profile:before {display:none}
.navi_on .area_head .area_profile .tit_post {height:30px;padding:3px 0 0;text-align:left}
.navi_on .area_head .area_profile .link_post {padding-left:73px;font-size:14px;font-weight:normal;-webkit-line-clamp: 1;}
.navi_on .area_head .area_profile .txt_profile {display:inline-block;margin-top:5px;padding-left:73px;font-size:13px;color:#a7a7a7;font-family:applesdgothicneo-ultralight}
.navi_on .area_head .area_profile .thumb_profile {position:absolute;left:20px;top:15px;width:43px;height:43px;margin:0}
.navi_on .area_search {display:none}
.navi_on .wrap_sub {position:absolute;left:0;top:0;z-index:100;width:100%;height:100%;display:block}
.navi_on .cont_sub {background:#222;opacity:0.9;filter:alpha(Opacity=90);position:fixed}
.navi_on .cont_sub .area_sub { top:73px; bottom:0; border-top:1px solid rgba(255,255,255,0.05); }
.navi_on .wrap_sub .btn_close {right:20px;top:28px;width:18px;height:18px;background-position:-110px 0;position:fixed}
.navi_on .area_navi {width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}
.navi_on .area_navi .tt_category { padding:11px 20px 16px; }
.navi_on .wrap_etc {display:none}
.navi_on .tt_category .link_tit {font-size:17px;padding-bottom:7px}
.navi_on .tt_category .category_list .link_item {font-size:17px; padding:8px 0}
.navi_on .tt_category .sub_category_list { padding-top:0; margin-top:-1px; margin-bottom:0 }
.navi_on .tt_category .sub_category_list .link_sub_item {font-size:15px;padding-bottom:7px}
.navi_on .link_guestbook {display:block;padding:25px 20px 27px;font-size:17px;color:#fff;border-top:1px solid rgba(255,255,255,0.05)}
.navi_on .article_skin { display:none }
.list_control {display:none}
.article_skin {width:100%;min-height:100%;padding:45px 0 0 0}
.area_title {padding:0 15px 13px;margin-bottom:18px}
.area_title .tit_category a {font-weight:normal;font-size:14px}
.area_title .tit_post {padding:2px 0 3px;font-size:24px;line-height:30px}
.area_title .info_post {display:block;margin-top:5px;font-size:12px;font-family:applesdgothicneo-ultralight}
.area_title .info_post .txt_bar { margin:0 6px 0 4px}
.area_view { margin:0 15px;font-size:15px;line-height:24px;color:#333;font-family:applesdgothicneo-ultralight }
.area_view p { line-height:23px }
.area_view h1,
.area_view h2,
.area_view h3,
.area_view h4 { font-size:20px; }
.protected_form { padding:15px 0 50px }
.area_etc {margin-top:14px;padding:0 15px}
.area_etc .list_tag dt {width:35px;height:19px;font-size:12px;line-height:19px;border-radius:10px;text-align:center}
.list_share {height:36px;margin-top:29px}
.list_share .ico_skin {width:36px;height:36px;margin:0 3px}
.list_share .link_fb {background-position:0 -20px}
.list_share .link_ks {background-position:-40px -20px}
.list_share .link_tw {background-position:-80px -20px}
.area_related {width:100%;margin-top:47px}
.area_related .tit_related {display:block;padding:0 15px;font-size:14px}
.list_related {padding:0 10px;margin-top:1px}
.list_related li {width:50%;margin:10px 0 0;padding:0 5px;-webkit-box-sizing:border-box;box-sizing:border-box}
.list_related .link_related {width:100%;height:100%;min-width:137px;min-height:150px}
.list_related .thumb_type .link_related {width:100%;height:100%}
.list_related .thumb_related .img_related {width:100%}
.list_related .txt_related {padding:18px 10px 0;font-size:14px;line-height:17px}
.list_related .date_related {font-size:13px;bottom:14px}
.list_related .txt_related { color:#222 }
.list_related .txt_related,
.list_related .date_related { font-family:applesdgothicneo-ultralight }
#tt-body-page .area_reply {margin-top:35px}
.area_related .link_more {right:15px;top:0}
.area_reply .tit_reply {padding:0 15px 8px;font-size:14px;margin:0}
.area_reply .list_reply li {padding:13px 15px 12px;min-height:30px}
.list_reply .thumb_profile{width:33px;height:33px;margin-right:11px;margin-top:2px;background-position:-120px -20px}
.area_reply .reply_content { font-family:applesdgothicneo-light; margin-top:4px }
.area_reply .tit_nickname {max-width:120px;margin-right:5px;font-size:14px}
.area_reply .txt_reply {line-height:19px;padding-top:2px}
.area_reply .txt_date {font-family:applesdgothicneo-ultralight;margin-top:3px}
.area_reply .more_reply {display:block;position:absolute;right:1px;top:0;width:30px;height:45px}
.area_reply .ico_more {display:block;width:3px;height:13px;margin:20px auto 0;background-position:-60px 0}
.area_reply .list_reply li:first-child .ico_more { margin-top:7px }
.area_reply .list_reply .re_reply {padding-left:60px}
.area_reply .list_reply li:last-child { padding-bottom:10px }
.area_reply .fld_reply {padding:15px 15px 14px;border-bottom:1px solid #efefef;font-family:applesdgothicneo-ultralight}
#tt-body-page .area_reply .fld_reply { margin-top:2px }
.area_reply .writer_info .info_name {width:50%;margin-right:0}
.area_reply .writer_info .info_pw {width:50%}
.area_reply .writer_info .inp_info {width:100%;padding:0 11px}
.area_reply .reply_write {margin-top:9px;padding:6px 7px}
.area_reply .reply_write .tf_write { color:#222 }
.area_reply .info_name .wrap_info {padding-right:5px}
.area_reply .info_pw .wrap_info {padding-left:5px}
.area_reply .writer_info .lab_info {font-size:14px}
.area_reply .lab_write {top:8px;left:14px;font-size:14px}
.area_reply .writer_check .lab_secret {font-size:14px;color:#666}
.area_reply .writer_check .ico_check {top:0;width:30px;height:30px;background-position:0 -60px}
.area_reply .writer_check .inp_secret:checked + .lab_secret .ico_check{background-position:-30px -60px}
.area_reply .writer_check .inp_secret:checked + .lab_secret {font-family:applesdgothicneo}
.area_reply .writer_check {right:inherit;left:15px;bottom:15px}
.area_reply .writer_check .check_secret {float:left;height:30px;line-height:29px}
.area_reply .writer_check .inp_secret {width:30px;height:30px;margin:0 4px 0 0}
.area_reply .writer_btn {float:none;overflow:hidden;margin-top:11px}
.area_reply .writer_btn .btn_enter {float:right;width:65px;height:33px;font-size:14px;line-height:33px}
.area_more {display:block}
.area_reply .list_reply li:first-child .reply_layer { top:24px }
.area_more .reply_layer {display:none;position:absolute;right:15px;top:38px;z-index:10;width:95px}
.on_more .reply_layer {display:block}
.reply_layer .inner_reply_layer {padding:10px 0;border:1px solid #dcdcdc;background:#fff}
.reply_layer .inner_reply_layer .link_reply {display:block;font-size:14px;text-align:center;line-height:32px;color:#222}
.article_skin .area_paging {height:18px;margin:20px 0 41px 0;padding:0 15px}
.area_paging .inner_paging {display:block;height:18px}
.area_paging .link_page,
.area_paging .interword {display:none}
.area_paging .ico_skin {width:10px;height:18px}
.area_paging .btn_prev {font-size:15px;line-height:19px;color:#222}
.area_paging .ico_prev {float:left;margin-right:8px;background-position:-90px 0}
.area_paging .no-more-prev .ico_prev {background-position:-70px 0}
.area_paging .btn_next {float:right;margin-right:0;font-size:15px;vertical-align:top;line-height:19px;color:#222}
.area_paging .ico_next {float:right;margin-left:10px;background-position:-100px 0}
.area_paging .no-more-next .ico_next {background-position:-80px 0}
.area_foot .info_copyright {font-size:11px}
/* 리스트 */
.list_content {padding:19px 15px 15px}
.list_content .thumbnail_post { margin-top:1px; margin-left:14px }
.list_content .thumbnail_post,
.list_content .thumbnail_post img { width:80px; height:80px }
.list_content .tit_post {font-size:17px;line-height:21px;color:#222;font-family:applesdgothicneo-light;display: -webkit-box;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis;word-break:break-all;-webkit-box-orient:vertical}
.list_content .txt_post {font-size:14px;line-height:19px;font-family:applesdgothicneo-ultralight;-webkit-line-clamp:2;}
.list_content .detail_info {color:#a7a7a7; font-family:applesdgothicneo-ultralight; margin-top:4px}
.list_content .detail_info .txt_bar { margin:0 2px }
.list_content .detail_info .txt_date { font-size:13px }
#tt-body-page .article_skin { margin-top:40px }
#tt-body-tag .article_skin,
#tt-body-guestbook .article_skin,
#tt-body-index .article_skin { padding-top:46px }
/* 게스트북 */
#tt-body-guestbook .area_reply .fld_reply {border-top:0 none}
/* 태그 */
#tt-body-tag .navi_on .area_head {border-bottom:0 none}
#tt-body-tag .list_tag {margin-bottom:30px;padding:0 15px}
/* 메뉴바 */
#tistorytoolbarid { display:none }
/* 타이틀 */
#tt-body-index .index_title { display:block }
#tt-body-index .index_title .tit_skin,
.list_title .tit_skin,
#tt-body-tag .article_skin .tit_skin,
#tt-body-guestbook .article_skin .tit_skin {position:fixed;left:0;right:0;top:0;height:45px;padding-bottom:0; border-bottom:1px solid #e0e0e0;background-color:rgba(255, 255, 255, 0.95);z-index:1}
.tit_skin .txt_title { display:block; position:absolute; left:50px; right:50px; top:0; height:45px; font-size:15px;line-height:48px; text-align:center; color:#222;font-family:applesdgothicneo-light; overflow:hidden; text-overflow:ellipsis; white-space: nowrap;word-wrap: normal}
.area_foot { height:40px; line-height:38px; }
}
@media
only screen and (max-width:320px){
.area_reply .tit_nickname {max-width:90px;}
}
@media
only screen and (min-width:738px) and (max-width:1262px){
/* 스킨 */
.wrap_skin {min-width:100%;padding-left:0}
.area_head {position:absolute;width:100%;margin-top:0;padding-top:100px}
.area_head .btn_cate {left:0;top:0;width:94px;height:80px}
.area_head .btn_cate .ico_cate {width:26px;height:20px;margin:0 auto;background-position:0 0}
.area_head .area_profile:before {margin:0 auto 30px}
.area_head .area_profile .thumb_profile {margin-top:35px}
.area_head .area_profile .tit_post {margin-top:-6px}
.wrap_sub {position:relative;width:100%;max-height:500px}
.cont_sub {position:static;height:450px}
.cont_sub .inner_sub {padding:0}
.area_search {right:0;top:0;}
.area_search .btn_search {width:90px;height:80px;margin-top:0}
.area_search .btn_search .ico_search {width:22px;height:22px;margin:2px auto 0;background-position:-40px 0}
.search_on .area_search {left:0;top:0;width:100%;margin-left:0;padding:12px 34px 0;-webkit-box-sizing:border-box;box-sizing:border-box}
.area_search .frm_search {width:auto;height:28px;padding:6px 15px 6px 45px;border:1px solid #ebebeb;border-radius:20px;background:none;margin-top:10px}
.frm_search .tf_search {width:100%;height:28px}
.frm_search .lab_search {left:45px;top:8px}
.frm_search .ico_search {position:absolute;left:13px;top:8px;width:22px;height:22px;background-position:-40px 0}
.wrap_skin.navi_on {padding-left:0}
.navi_on .area_head {padding-top:0}
.navi_on .area_search {left:auto;right:92px;top:29px;position:fixed}
.navi_on .area_search .btn_search {width:auto;height:auto}
.navi_on .btn_search .ico_search {background-position:-100px 0}
.navi_on.search_on .area_search {left:0;top:25px;width:50%;height:1px;margin-left:50%;padding:0 75px 0 40px}
.navi_on.search_on .frm_search {width:100%;height:36px;border:1px solid #868686;box-sizing:border-box;-webkit-box-sizing:border-box; margin-top:0}
.navi_on .frm_search .tf_search {width:100%;height:auto}
.navi_on .frm_search .ico_search {left:16px;top:10px;width:14px;height:14px;background-position:-160px 0}
.navi_on .wrap_sub {position:fixed;left:0;top:0;width:100%;z-index:100}
.navi_on .wrap_sub .btn_close {right:41px}
.navi_on .cont_sub {height:100%;background:#222 url(images/bg_side_t.png) repeat-y 50% 0;opacity:0.9;filter:alpha(Opacity=90)}
.navi_on .wrap_etc .col_aside {float:none;width:auto;padding:0 48px}
.navi_on .area_navi {width:50%;-webkit-box-sizing:border-box;box-sizing:border-box}
.navi_on .wrap_etc {width:50%}
.navi_on .list_control {left:42px;width:365px;margin-left:0}
.navi_on .list_control .ico_skin {width:58px}
.navi_on .article_skin { display:none }
.wrap_etc .tt-calendar{width:100% !important}
.list_control {width:274px;bottom:19px;margin-left:-137px}
.list_control .ico_skin {width:48px;height:40px;margin:0 10px}
.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}
.article_skin {width:auto;padding:57px 34px 100px}
#tt-body-index .article_skin { padding-top:27px }
#tt-body-tag .article_skin,
#tt-body-guestbook .article_skin { padding-top: 57px; }
#tt-body-page .article_skin { padding-top:56px }
.list_share {margin-top:47px;height:36px}
.list_share .ico_skin {width:36px;height:36px}
.list_share .link_fb {background-position:0 -120px}
.list_share .link_ks {background-position:-40px -120px}
.list_share .link_tw {background-position:-80px -120px}
.area_related {width:100%;margin-top:54px}
.list_related {margin:15px -10px 0}
.list_related li {width:25%;margin-right:0;padding:0 10px;webikit-box-sizing:border-box;box-sizing:border-box}
.list_related .link_related {width:100%;max-width:183px}
.list_related .thumb_type .link_related {width:100%;max-width:185px}
.area_related .link_more {top:12px;right:0}
.area_reply .tit_nickname {font-size:16px}
.area_reply .txt_date {margin-top:4px}
.area_reply .writer_info .lab_info {font-size:13px}
.area_reply .lab_write {font-size:13px}
/* 메뉴바 */
#tistorytoolbarid { display:none }
}
@media only screen and (-webkit-min-device-pixel-ratio : 1.5) and (max-width :738px),
only screen and (min-device-pixel-ratio : 1.5) and (max-width :738px),
only screen and (min-resolution:2dppx) and (max-width :738px) {
.ico_skin {background-image:url(images/m640_ico_skin.png);-webkit-background-size:160px 100px;background-size:160px 100px}
}
*, *:before, *:after {
margin: 0;
padding: 0;
/* box-sizing: border-box; */
position: relative;
}
#블로그이름 {
display: inline-block;
color: hsla(328, 40%, 50%, 1);
font-family: 'Righteous', serif;
font-size: 70px;
text-shadow: .03em .03em 0 hsla(330, 50%, 29%, 1);
text-decoration:none;
}
#블로그이름:after {
content: attr(data-shadow);
position: absolute;
top: .08em; left: .08em;
z-index: -1;
text-shadow: none;
background-image:
linear-gradient(
45deg,
transparent 45%,
hsla(47, 66%, 92%, 1) 100%,
hsla(48, 73%, 71%, 1) 90%,
transparent 0
);
background-size: .05em .05em;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: shad-anim 15s linear infinite;
}
@keyframes shad-anim {
0% {background-position: 0 0}
0% {background-position: 100% -100%}
}
가장 큰 핵심은 위의 부분을 추가하는 것입니다. CodePen에서 수정한 CSS 코드를 위의 사진과 같이 추가한 뒤에 글꼴, 색상, 애니메이션 등을 적용시킵니다.
이때 중요한 부분이 있는데, html과 css에서 블로그 이름이라고 되어 있는 부분은 되도록 통일해주세요!!!
웹 프로그래밍에 대해 지식이 있으신 분들이라면 html에서 id를 설정하여 css에 적용하는 과정을 알고 계시기에 굳이 통일하지 않아도 괜찮지만, 잘 모르시겠다면 간단함을 위해 통일해주세요!😄
CSS도 동일하게 수정한 코드를 전체 복사(Ctrl + a)를 한 뒤 붙여 넣으면 왼쪽처럼 바뀐 것을 확인할 수 있습니다!
말로 설명하다 보니 다소 복잡하게 느껴졌지만 따라 해 보시면 너무 간단하다고 느끼실 거예요😁😁
제가 적용한 스타일 외에도 더 재밌는 요소들이 많으니 모두 원하시는 대로 변경하시면 좋겠습니다.
다른 게시물도 놀러 와 주세요 :-)
반응형