반응형
HTML
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
<title>[생활IT] 티스토리(Tistory) 설정</title>
<link rel="stylesheet" href="./style.css">
<script src="//t1.daumcdn.net/tistory_admin/lib/jquery/jquery-1.12.4.min.js"></script>
<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=-------------"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-152725149-1');
</script>
<!-- 코드블럭 하이라이트 -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.9/styles/github.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.9/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script>
<!-- 애드센스 -->
<script data-ad-client="---------------" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</head>
<body id="tt-body-page" class="<s_if_var_color-type></s_if_var_color-type><s_if_var_post-type> </s_if_var_post-type><s_if_var_view-more> paging-view-more</s_if_var_view-more>">
<s_t3>
<div id="acc-nav">
<a href="#content">본문 바로가기</a>
</div>
<div id="wrap">
<header id="header">
<h1><a href="https://coding-house.tistory.com/">Keyplayer's CodingHouse</a></h1>
<button type="button" class="mobile-menu"><span>메뉴</span></button>
<div class="menu">
<nav id="gnb">
</nav>
<div class="social-link">
<s_if_var_sns-pinterest><a href="" class="pinterest">Pinterest</a></s_if_var_sns-pinterest>
<s_if_var_sns-facebook><a href="" class="facebook">Facebook</a></s_if_var_sns-facebook>
<s_if_var_sns-twitter><a href="" class="twitter">Twitter</a></s_if_var_sns-twitter>
<s_if_var_sns-instagram><a href="" class="instagram">Instagram</a></s_if_var_sns-instagram>
</div>
<p>POWERED BY TISTORY</p>
</div>
<div class="search">
<s_search>
<input type="text" name="" value="" placeholder="검색내용을 입력하세요." onkeypress="if (event.keyCode == 13) { }">
<button type="submit" onclick="">검색</button>
</s_search>
</div>
</header>
<hr>
<section class="container">
<article id="content">
<s_cover_group>
<s_cover_rep>
<s_cover name='cover-thumbnail-list'>
<div class='cover-thumbnail-list'>
<div class="inner">
<h2></h2>
<ul>
<s_cover_item>
<li>
<a href="">
<span class="thum"><s_cover_item_thumbnail><img src="//i1.daumcdn.net/thumb/C264x200/?fname=" alt=""></s_cover_item_thumbnail></span>
<s_cover_item_article_info>
<span class="category"></span>
</s_cover_item_article_info>
<span class="title"></span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</div>
</s_cover>
<s_cover name='cover-slider'>
<div class="cover-slider">
<ul>
<s_cover_item>
<li<s_cover_item_thumbnail> style="background-image:url();"</s_cover_item_thumbnail>>
<a href="" class="text-box">
<s_cover_item_article_info>
<span class="category"></span>
</s_cover_item_article_info>
<span class="title"></span>
<span class="btn view">더보기</span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</s_cover>
<s_cover name='cover-masonry'>
<div class="cover-masonry">
<div class="inner">
<h2></h2>
<ul>
<s_cover_item>
<li>
<a href="">
<span class="thum"><s_cover_item_thumbnail><img src="//i1.daumcdn.net/thumb/R600x0/?fname=" alt=""></s_cover_item_thumbnail></span>
<s_cover_item_article_info>
<span class="category"></span>
</s_cover_item_article_info>
<span class="title"></span>
<span class="excerpt"></span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</div>
</s_cover>
<s_cover name='cover-list'>
<div class="cover-list">
<div class="inner">
<h2></h2>
<ul>
<s_cover_item>
<li>
<a href="">
<figure>
<s_cover_item_thumbnail><img src="//i1.daumcdn.net/thumb/C600x600/?fname=" alt=""></s_cover_item_thumbnail>
</figure>
<s_cover_item_article_info>
<span class="category"></span>
</s_cover_item_article_info>
<span class="title"></span>
<span class="excerpt"></span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</div>
</s_cover>
<s_cover name='cover-gallery'>
<div class="cover-gallery">
<div class="inner">
<h2></h2>
<ul>
<s_cover_item>
<li>
<a href="">
<figure>
<s_cover_item_thumbnail><img src="//i1.daumcdn.net/thumb/C600x600/?fname=" alt=""></s_cover_item_thumbnail>
</figure>
<span class="title"></span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</div>
</s_cover>
</s_cover_rep>
<div class="cover-footer">
<s_if_var_footer-image>
<div class="image" style="background-image:url();"></div>
</s_if_var_footer-image>
<s_if_var_footer-text>
<p></p>
</s_if_var_footer-text>
<div class="social-link">
<s_if_var_sns-pinterest><a href="" class="pinterest"><span class="">Pinterest</span></a></s_if_var_sns-pinterest>
<s_if_var_sns-facebook><a href="" class="facebook">Facebook</a></s_if_var_sns-facebook>
<s_if_var_sns-twitter><a href="" class="twitter">Twitter</a></s_if_var_sns-twitter>
<s_if_var_sns-instagram><a href="" class="instagram">Instagram</a></s_if_var_sns-instagram>
</div>
<nav class="menu">
</nav>
</div>
</s_cover_group>
<s_page_rep>
<div class="hgroup">
<h1>[생활IT] 티스토리(Tistory) 설정</h1>
</div>
<div class="entry-content">
반응형
HTML
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
<title>[생활IT] 티스토리(Tistory) 설정</title>
<link rel="stylesheet" href="./style.css">
<script src="//t1.daumcdn.net/tistory_admin/lib/jquery/jquery-1.12.4.min.js"></script>
<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=-------------"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-152725149-1');
</script>
<!-- 코드블럭 하이라이트 -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.9/styles/github.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.9/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script>
<!-- 애드센스 -->
<script data-ad-client="---------------" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</head>
<body id="tt-body-page" class="<s_if_var_color-type></s_if_var_color-type><s_if_var_post-type> </s_if_var_post-type><s_if_var_view-more> paging-view-more</s_if_var_view-more>">
<s_t3>
<div id="acc-nav">
<a href="#content">본문 바로가기</a>
</div>
<div id="wrap">
<header id="header">
<h1><a href="https://coding-house.tistory.com/">Keyplayer's CodingHouse</a></h1>
<button type="button" class="mobile-menu"><span>메뉴</span></button>
<div class="menu">
<nav id="gnb">
</nav>
<div class="social-link">
<s_if_var_sns-pinterest><a href="" class="pinterest">Pinterest</a></s_if_var_sns-pinterest>
<s_if_var_sns-facebook><a href="" class="facebook">Facebook</a></s_if_var_sns-facebook>
<s_if_var_sns-twitter><a href="" class="twitter">Twitter</a></s_if_var_sns-twitter>
<s_if_var_sns-instagram><a href="" class="instagram">Instagram</a></s_if_var_sns-instagram>
</div>
<p>POWERED BY TISTORY</p>
</div>
<div class="search">
<s_search>
<input type="text" name="" value="" placeholder="검색내용을 입력하세요." onkeypress="if (event.keyCode == 13) { }">
<button type="submit" onclick="">검색</button>
</s_search>
</div>
</header>
<hr>
<section class="container">
<article id="content">
<s_cover_group>
<s_cover_rep>
<s_cover name='cover-thumbnail-list'>
<div class='cover-thumbnail-list'>
<div class="inner">
<h2></h2>
<ul>
<s_cover_item>
<li>
<a href="">
<span class="thum"><s_cover_item_thumbnail><img src="//i1.daumcdn.net/thumb/C264x200/?fname=" alt=""></s_cover_item_thumbnail></span>
<s_cover_item_article_info>
<span class="category"></span>
</s_cover_item_article_info>
<span class="title"></span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</div>
</s_cover>
<s_cover name='cover-slider'>
<div class="cover-slider">
<ul>
<s_cover_item>
<li<s_cover_item_thumbnail> style="background-image:url();"</s_cover_item_thumbnail>>
<a href="" class="text-box">
<s_cover_item_article_info>
<span class="category"></span>
</s_cover_item_article_info>
<span class="title"></span>
<span class="btn view">더보기</span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</s_cover>
<s_cover name='cover-masonry'>
<div class="cover-masonry">
<div class="inner">
<h2></h2>
<ul>
<s_cover_item>
<li>
<a href="">
<span class="thum"><s_cover_item_thumbnail><img src="//i1.daumcdn.net/thumb/R600x0/?fname=" alt=""></s_cover_item_thumbnail></span>
<s_cover_item_article_info>
<span class="category"></span>
</s_cover_item_article_info>
<span class="title"></span>
<span class="excerpt"></span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</div>
</s_cover>
<s_cover name='cover-list'>
<div class="cover-list">
<div class="inner">
<h2></h2>
<ul>
<s_cover_item>
<li>
<a href="">
<figure>
<s_cover_item_thumbnail><img src="//i1.daumcdn.net/thumb/C600x600/?fname=" alt=""></s_cover_item_thumbnail>
</figure>
<s_cover_item_article_info>
<span class="category"></span>
</s_cover_item_article_info>
<span class="title"></span>
<span class="excerpt"></span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</div>
</s_cover>
<s_cover name='cover-gallery'>
<div class="cover-gallery">
<div class="inner">
<h2></h2>
<ul>
<s_cover_item>
<li>
<a href="">
<figure>
<s_cover_item_thumbnail><img src="//i1.daumcdn.net/thumb/C600x600/?fname=" alt=""></s_cover_item_thumbnail>
</figure>
<span class="title"></span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</div>
</s_cover>
</s_cover_rep>
<div class="cover-footer">
<s_if_var_footer-image>
<div class="image" style="background-image:url();"></div>
</s_if_var_footer-image>
<s_if_var_footer-text>
<p></p>
</s_if_var_footer-text>
<div class="social-link">
<s_if_var_sns-pinterest><a href="" class="pinterest"><span class="">Pinterest</span></a></s_if_var_sns-pinterest>
<s_if_var_sns-facebook><a href="" class="facebook">Facebook</a></s_if_var_sns-facebook>
<s_if_var_sns-twitter><a href="" class="twitter">Twitter</a></s_if_var_sns-twitter>
<s_if_var_sns-instagram><a href="" class="instagram">Instagram</a></s_if_var_sns-instagram>
</div>
<nav class="menu">
</nav>
</div>
</s_cover_group>
<s_page_rep>
<div class="hgroup">
<h1></h1>
</div>
<div class="entry-content">
</div>
</s_page_rep>
<s_notice_rep>
<div class="hgroup">
<h1></h1>
<div class="post-meta">
<span class="author"></span>
<span class="date"></span>
<s_ad_div>
<span><a href="">수정</a></span>
<span><a href="#" onclick="">삭제</a></span>
</s_ad_div>
</div>
</div>
<div class="entry-content">
</div>
</s_notice_rep>
<s_list>
<div class="post-header">
<span><h1></h1></span>
<span style="padding-left: 5px; font-weight: bold;">()</h</span>
<div class="list-type">
<button type="button" class="thum">썸네일형</button>
<button type="button" class="list">리스트형</button>
</div>
</div>
</s_list>
<div class="inner">
<s_article_protected>
<s_index_article_rep>
<div class="post-item">
<a href="">
<span class="thum"></span>
<span class="title"></span>
<span class="excerpt protected">보호되어 있는 글입니다.</span>
</a>
</div>
</s_index_article_rep>
<s_permalink_article_rep>
<div class="hgroup">
<div class="category">보호글</div>
<h1> </h1>
<div class="post-meta">
<span class="author"></span>
<span class="date"></span>
</div>
</div>
<div class="entry-content">
<form class="protected_form" onsubmit="">
<p>보호되어 있는 글입니다.<br>
내용을 보시려면 비밀번호를 입력하세요.</p>
<fieldset>
<input type="password" id="" name="" value="" placeholder="비밀번호" />
<button type="submit" class="btn">입력</button>
</fieldset>
</form>
</div>
</s_permalink_article_rep>
</s_article_protected>
<s_article_rep>
<s_index_article_rep>
<div class="post-item">
<a href="">
<span class="thum">
<s_article_rep_thumbnail>
<img src="//i1.daumcdn.net/thumb/C264x200/?fname=" alt="">
</s_article_rep_thumbnail>
</span>
<span class="title"></span>
<span class="excerpt"></span>
</a>
</div>
</s_index_article_rep>
<s_permalink_article_rep>
<div class="hgroup">
<div class="category"></div>
<h1> </h1>
<div class="post-meta">
<span class="author"></span>
<span class="date"></span>
<s_ad_div>
<span><a href="">수정</a></span>
<span><a href="#" onclick="">삭제</a></span>
</s_ad_div>
</div>
</div>
<div class="entry-content">
</div>
<s_tag_label>
<div class="tags">
<h2>태그</h2>
<div class="items">
</div>
</div>
</s_tag_label>
<s_article_related>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 애드센스 -->
<div align="center">
<!-- 고정 사각형 -->
<ins class="adsbygoogle"
style="display:inline-block;width:336px;height:280px;text-align:center;"
data-ad-client="--------------"
data-ad-slot="5339555420"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 고정 사각형 -->
<ins class="adsbygoogle"
style="display:inline-block;width:336px;height:280px;text-align:center;"
data-ad-client="---------------"
data-ad-slot="5339555420"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 애드센스 -->
<div class="related-articles">
<h2><strong>''</strong> Related Articles</h2>
<ul>
<s_article_related_rep>
<li>
<a href="">
<span class="thum">
<s_article_related_rep_thumbnail>
<img src="//i1.daumcdn.net/thumb/C264x200/?fname=" alt="">
</s_article_related_rep_thumbnail>
</span>
<span class="title"></span>
</a>
</li>
</s_article_related_rep>
</ul>
</div>
</s_article_related>
<s_rp>
<div class="comments">
<s_rp_container>
<div class="comment-list">
<ul>
<s_rp_rep>
<li id="">
<div class="author-meta">
<img src="" class="avatar" alt="">
<span class="nickname"></span>
<span class="date"></span>
</div>
<p></p>
<div class="control">
<a href="">댓글주소</a>
<a href="#" onclick="">수정/삭제</a>
<a href="#" onclick="">댓글쓰기</a>
</div>
<s_rp2_container>
<ul>
<s_rp2_rep>
<li id="">
<div class="author-meta">
<img src="" class="avatar" alt="">
<span class="nickname"></span>
<span class="date"></span>
</div>
<p></p>
<div class="control">
<a href="">댓글주소</a>
<a href="#" onclick="">수정/삭제</a>
</div>
</li>
</s_rp2_rep>
</ul>
</s_rp2_container>
</li>
</s_rp_rep>
</ul>
</div>
</s_rp_container>
<s_rp_input_form>
<div class="comment-form">
<s_rp_member>
<div class="field">
<s_rp_guest>
<input type="text" name="" value="" placeholder="이름">
<input type="password" name="" value="" placeholder="암호">
</s_rp_guest>
<div class="secret">
<input type="checkbox" name="" id="secret">
<label for="secret" tabindex="0">Secret</label>
</div>
</div>
</s_rp_member>
<textarea name="" cols="" rows="4" placeholder="여러분의 소중한 댓글을 입력해주세요."></textarea>
<div class="submit">
<button type="submit" class="btn" onclick="">댓글달기</button>
</div>
<!-- 애드센스 수평 고정 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px;margin:20px 0"
data-ad-client="-----------------"
data-ad-slot="2283476235"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 애드센스 -->
<!-- 애드센스 수평 고정 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px;margin:20px 0"
data-ad-client="-----------------"
data-ad-slot="2283476235"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 애드센스 -->
<!-- 애드센스 수평 고정 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px;margin:20px 0"
data-ad-client="-----------------"
data-ad-slot="2283476235"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 애드센스 -->
<!-- 애드센스 수평 고정 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px;margin:20px 0"
data-ad-client="-------------------"
data-ad-slot="2283476235"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 애드센스 -->
<!-- 애드센스 수평 고정 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px;margin:20px 0"
data-ad-client="-------------------"
data-ad-slot="2283476235"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 애드센스 -->
</div>
</s_rp_input_form>
</div>
</s_rp>
</s_permalink_article_rep>
</s_article_rep>
</div>
<s_tag>
<div class="hgroup">
<h1>태그</h1>
</div>
<div class="tags">
<div class="items">
<s_tag_rep>
<a href=""></a>
</s_tag_rep>
</div>
</div>
</s_tag>
<s_guest>
<div class="guest_inner">
<div class="hgroup">
<h1>방명록</h1>
</div>
<div class="comments">
<s_guest_input_form>
<div class="comment-form">
<s_guest_member>
<div class="field">
<s_guest_form>
<input type="text" name="" value="" placeholder="이름">
<input type="password" name="" value="" placeholder="암호">
</s_guest_form>
</div>
</s_guest_member>
<textarea name="" cols="" rows="4"></textarea>
<div class="submit">
<button type="submit" class="btn" onclick="">안부 남기기</button>
</div>
</div>
</s_guest_input_form>
<s_guest_container>
<div class="comment-list">
<ul>
<s_guest_rep>
<li id="">
<div class="author-meta">
<img src="//t1.daumcdn.net/tistory_admin/static/skin/avatar_default.gif" class="avatar" alt="">
<span class="nickname"></span>
<span class="date"></span>
</div>
<p></p>
<div class="control">
<a href="#" onclick="">수정/삭제</a>
<a href="#" onclick="">댓글쓰기</a>
</div>
<s_guest_reply_container>
<ul>
<s_guest_reply_rep>
<li id="">
<div class="author-meta">
<img src="//t1.daumcdn.net/tistory_admin/static/skin/avatar_default.gif" class="avatar" alt="">
<span class="nickname"></span>
<span class="date"></span>
</div>
<p></p>
<div class="control">
<a href="#" onclick="">수정/삭제</a>
</div>
</li>
</s_guest_reply_rep>
</ul>
</s_guest_reply_container>
</li>
</s_guest_rep>
</ul>
</div>
</s_guest_container>
</div>
</div>
</s_guest>
<s_paging>
<div class="pagination">
<a class="prev ">이전</a>
<s_paging_rep>
<a ></a>
</s_paging_rep>
<a class="next ">다음</a>
</div>
</s_paging>
</article>
</section>
<hr>
<footer id="footer">
<p class="copyright">DESIGN BY <a href="#">TISTORY</a> <a href="https://coding-house.tistory.com/manage" class="admin">관리자</a></p>
</footer>
</div>
<script src="./images/script.js"></script>
</s_t3>
</body>
</html>
CSS
@charset "utf-8";
/*
*
* CSS CONTENTS:
*
* 01. Web Font
* 02. Type Selector Reset
* 03. Accessibility Navigation
* 04. Layout Selector
* 05. Components
* 06. Entry Content
* 07. Comment
* 08. Widget & Template Page
* 09. ETC
* 10. Post Type & Color Type
* 11. Retina Display
* 12. Media Screen - Tablet
* 13. Media Screen - Mobie
*
*/
/* Web Font Load */
@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');
@import url('//fonts.googleapis.com/css?family=Nanum+Myeongjo');
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
/* Type Selector Reset */
body {
font-weight: 400;
font-family: 'Noto Sans KR', sans-serif;
font-size: 1em;
line-height: 1.25;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-size: 100%;
}
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, figure {
margin: 0;
padding: 0;
}
header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption {
display: block;
}
button, input[type=submit], input[type=reset], input[type=button] {
overflow: visible;
cursor: pointer;
}
input[type=text], input[type=email], input[type=password], input[type=submit], textarea {
-webkit-appearance: none;
}
input, select, textarea, button {
font-family: 'Noto Sans KR', sans-serif;
font-size: 100%;
border-radius: 0;
}
button {
overflow: visible;
margin: 0;
padding: 0;
border: 0;
background: transparent;
}
ul li {
list-style: none;
}
img, fieldset {
border: none;
vertical-align: top;
}
hr {
display: none;
}
/* Accessibility Navigation */
#acc-nav {
position: absolute;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
height: 0;
}
#acc-nav a {
display: block;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
width: 1px;
height: 1px;
margin-left: -1px;
margin-bottom: -1px;
text-align: center;
font-weight: bold;
font-size: 0.875em;
color: #000;
white-space: nowrap;
}
#acc-nav a:focus, #acc-nav a:hover, #acc-nav a:active {
width: 100%;
height: auto;
padding: 10px 0;
background: #000;
color: #fff;
z-index: 1000;
}
/* Layout Selector */
#header {
position: relative;
width: 100%;
}
#header h1 {
padding: 28px 0;
text-align: center;
font-size: 1.5em;
line-height: 1;
color: #1a1a1a;
}
#header h1 a {
display: inline-block;
text-decoration: none;
vertical-align: top;
color: #1a1a1a;
}
#header .mobile-menu {
position: absolute;
top: 20px;
left: 33px;
z-index: 500;
width: 40px;
height: 40px;
outline: none;
}
#header .mobile-menu span {
position: absolute;
top: 50%;
left: 50%;
width: 26px;
height: 2px;
margin: -2px 0 0 -13px;
background-color: #000;
text-indent: -999em;
}
#header .mobile-menu:before,
#header .mobile-menu:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 26px;
height: 2px;
margin-left: -13px;
background-color: #000
}
#header .mobile-menu:before {
margin-top: -9px;
}
#header .mobile-menu:after {
margin-top: 5px;
}
#header .mobile-menu.on {
position: fixed;
}
#header .mobile-menu.on span {
display: none;
}
#header .mobile-menu.on:before,
#header .mobile-menu.on:after {
margin-top: -2px;
}
#header .mobile-menu.on:before {
transform: rotate(-45deg);
}
#header .mobile-menu.on:after {
transform: rotate(45deg);
}
#header .menu {
position: fixed;
top: 0;
left: -348px;
z-index: 400;
width: 348px;
height: 100%;
padding: 94px 40px 189px;
background-color: #fff;
box-sizing: border-box;
transition: left .5s ease-in-out;
}
#header .menu .social-link {
position: absolute;
left: 40px;
bottom: 129px;
}
#header .menu p {
position: absolute;
left: 40px;
bottom: 79px;
font-size: 0.75em;
color: #9b9b9b;
}
#header .menu.on {
left: 0;
}
#header .search {
position: absolute;
top: 20px;
right: 19px;
width: 0;
padding-right: 40px;
}
#header .search input {
display: none;
width: 100%;
height: 40px;
padding: 0 10px;
font-size: 1em;
line-height: 40px;
color: #000;
border: 0;
box-sizing: border-box;
background-color: transparent;
}
#header .search button {
display: none;
position: absolute;
top: 0;
right: 0;
z-index: 10;
width: 40px;
height: 40px;
background: url(./images/ico_package.png) no-repeat 0 0;
text-indent: -999em;
outline: none;
}
#header .search:before {
content: "";
position: absolute;
top: 0;
right: 0;
z-index: 20;
width: 40px;
height: 40px;
background: url(./images/ico_package.png) no-repeat 0 0;
text-indent: -999em;
cursor: pointer;
}
#header .search:hover:before {
background-color: #ebebeb;
}
#header .search.on {
width: 322px;
border-bottom: 1px solid #000;
}
#header .search.on input {
display: block;
outline: none;
}
#header .search.on button {
display: block;
}
#header .search.on:before {
display: none;
}
#gnb {
overflow: auto;
height: 100%;
margin-bottom: 8px;
}
#gnb ul li {
margin-bottom: 6px;
font-size: 1.125em;
line-height: 1.5;
}
#gnb ul li a {
display: block;
text-decoration: none;
color: #000;
}
#gnb ul li ul li ul li a.link_sub_item{
color: #333;
}
#gnb ul li a:hover {
text-decoration: underline;
color: #4e2e28;
}
#gnb ul li ul {
margin: 22px 0 0;
}
#gnb ul li ul li {
font-size: 1em;
}
#gnb ul li ul li ul {
margin: 6px 0 13px;
}
#gnb ul li ul li ul li {
margin: 0;
font-size: 0.875rem;
line-height: 1.5625rem;
}
#gnb ul li ul li ul li a:before {
content: "-";
margin-right: 5px;
color: #333;
}
#gnb ul li ul li ul li a {
padding:0 12px;
}
#content .inner {
max-width: 960px;
margin: 0 auto;
}
#content>.inner {
max-width: 860px;
}
#content .inner:after {
content: "";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
#footer {
position: relative;
padding: 29px 0;
border-top: 1px solid #ebebeb;
}
#footer p {
text-align: center;
font-size: 0.75em;
color: #9b9b9b;
}
#footer p a {
text-decoration: none;
color: #9b9b9b;
}
#footer .admin {
color: #666;
}
#footer .admin:before {
content: "";
display: inline-block;
width: 1px;
height: 15px;
margin: 0 9px;
background-color: #b2b2b2;
vertical-align: middle;
}
#tt-body-index #footer {
border-top: 0;
}
/* Components */
.social-link a {
display: inline-block;
width: 18px;
height: 18px;
margin-right: 5px;
text-indent: -999em;
background-image: url(./images/ico_package.png);
background-repeat: no-repeat;
vertical-align: top;
}
.social-link a:hover {
background-position-y: -68px;
}
.social-link .pinterest {
background-position: 0 -50px;
}
.social-link .facebook {
background-position: -50px -50px;
}
.social-link .twitter {
background-position: -100px -50px;
}
.social-link .instagram {
background-position: -150px -50px;
}
.btn, a.btn {
display: inline-block;
width: 158px;
height: 50px;
border: 1px solid #dcdcdc;
font-size: 0.875em;
line-height: 50px;
}
.btn:hover {
border-color: #4d4d4d;
}
.cover-thumbnail-list {
margin: 0 auto -1px;
padding: 40px 0 56px;
border-bottom: 1px solid #ebebeb;
}
.cover-thumbnail-list h2 {
margin-bottom: 26px;
font-size: 1em;
}
.cover-thumbnail-list ul {
width: 100%;
}
.cover-thumbnail-list ul li {
float: left;
width: 24.0625%;
margin: 0 0 32px;
padding-left: 1.25%;
}
.cover-thumbnail-list ul li:nth-child(4n+1){
clear: both;
padding-left: 0;
}
.cover-thumbnail-list ul li a {
display: block;
text-decoration: none;
color: #080808;
}
.cover-thumbnail-list ul li .thum {
display: block;
position: relative;
overflow: hidden;
height: 0;
margin-bottom: 11px;
padding-bottom: 75.757575757575758%;
background-color: #f6f6f6;
}
.cover-thumbnail-list ul li .thum:before {
content: "NO IMAGE";
position: absolute;
top: 50%;
left: 0;
z-index: 0;
width: 100%;
height: 18px;
margin: -9px 0 0 0;
text-align: center;
font-family: 'Arial';
font-weight: bold;
font-size: 0.875em;
color: #cbcbcb;
}
.cover-thumbnail-list ul li .thum img {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
}
.cover-thumbnail-list ul li .category {
display: inline-block;
margin-bottom: 8px;
border-bottom: 1px solid #a3a3a3;
font-family: 'Nanum Myeongjo', serif;
font-size: 0.875em;
color: #808080;
}
.cover-thumbnail-list ul li .title {
display: block;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 2.75em;
padding-right: 10%;
font-weight: 700;
line-height: 1.375em;
}
.cover-thumbnail-list ul li a:hover .title {
text-decoration: underline;
color: #4e2e28;
}
.cover-thumbnail-list ul li .date {
display: block;
font-size: 0.8125em;
color: #999;
}
.cover-slider {
position: relative;
overflow: hidden;
width: 100%;
background-color: #000;
}
.cover-slider ul li {
display: table;
width: 100%;
height: 460px;
text-align: center;
background-position: 50% 50%;
background-size: cover;
}
.cover-slider ul li a {
display: table-cell;
background-color: rgba(0,0,0,0.25);
text-decoration: none;
color: #fff;
vertical-align: middle;
}
.cover-slider ul li .category {
display: inline-block;
margin-bottom: 16px;
border-bottom: 1px solid #fff;
}
.cover-slider ul li .title {
display: block;
max-width: 580px;
margin: 0 auto 28px;
font-size: 2.5em;
line-height: 1.3;
}
.cover-slider ul li .btn {
border-color: #fff;
color: #fff;
}
.cover-slider ul li .btn:hover {
background-color: #fff;
color: #000;
}
.cover-slider .prev,
.cover-slider .next {
position: absolute;
top: 50%;
left: 50%;
z-index: 20;
width: 70px;
height: 70px;
margin: -25px 0 0 0;
background: url(./images/ico_package.png) no-repeat 0 -250px;
text-indent: -999em;
}
.cover-slider .prev {
margin-left: -506px;
background-position: 0 -250px;
}
.cover-slider .next {
margin-left: 436px;
background-position: -100px -250px;
}
.cover-slider .prev:hover,
.cover-slider .next:hover {
background-color: rgba(255,255,255,0.2);
}
.cover-masonry {
margin-bottom: -1px;
padding: 60px 0 49px;
border-bottom: 1px solid #ebebeb;
}
.cover-masonry h2 {
margin-bottom: 30px;
font-size: 1em;
}
.cover-masonry ul {
display: inline-block;
margin-left: -42px;
vertical-align: top;
}
.cover-masonry ul li {
float: left;
width: 33.3333%;
margin: 0 0 37px;
padding-left: 42px;
box-sizing: border-box;
}
.cover-masonry ul li a {
display: block;
text-decoration: none;
color: #080808;
}
.cover-masonry ul li .thum {
display: block;
margin-bottom: 11px;
}
.cover-masonry ul li .thum img {
width: 100%;
height: auto;
}
.cover-masonry ul li .category {
display: inline-block;
margin-bottom: 7px;
border-bottom: 1px solid #a3a3a3;
font-family: 'Nanum Myeongjo', serif;
font-size: 0.875em;
color: #808080;
}
.cover-masonry ul li .title {
display: block;
font-weight: 700;
font-size: 1.125em;
line-height: 1.4444;
}
.cover-masonry ul li a:hover .title {
text-decoration: underline;
color: #4e2e28;
}
.cover-masonry ul li .excerpt {
display: block;
display:-webkit-box;
-webkit-line-clamp:4;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 6.4em;
font-size: 0.9375em;
line-height: 1.6;
color: #666;
}
.cover-list {
margin-bottom: -1px;
padding: 30px 0 60px;
border-bottom: 1px solid #ebebeb;
}
.cover-list h2 {
margin: 30px 0 0 0;
font-size: 1em;
}
.cover-list ul li {
border-top: 1px solid #ebebeb;
}
.cover-list ul li:first-child {
border-top: 0;
}
.cover-list ul li a {
display: block;
min-height: 172px;
padding: 30px 0 30px;
text-decoration: none;
color: #080808;
}
.cover-list ul li figure {
float: right;
position: relative;
width: 172px;
height: 172px;
margin: 0 0 0 80px;
background-color: #f6f6f6;
}
.cover-list ul li figure:before {
content: "NO IMAGE";
position: absolute;
top: 50%;
left: 0;
z-index: 0;
width: 100%;
height: 18px;
margin: -9px 0 0 0;
text-align: center;
font-family: 'Arial';
font-weight: bold;
font-size: 0.875em;
color: #cbcbcb;
}
.cover-list ul li figure img {
position: relative;
z-index: 10;
width: 100%;
height: 100%;
}
.cover-list ul li .category {
display: inline-block;
margin-bottom: 7px;
border-bottom: 1px solid #a3a3a3;
font-family: 'Nanum Myeongjo', serif;
font-size: 0.875em;
color: #808080;
}
.cover-list ul li .title {
display: block;
font-weight: 700;
font-size: 1.125em;
line-height: 1.4444em;
}
.cover-list ul li a:hover .title {
text-decoration: underline;
color: #666;
}
.cover-list ul li .excerpt {
display: block;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 4.8em;
font-size: 0.9375em;
line-height: 1.6;
color: #666;
}
.cover-list ul li .date {
display: block;
font-size: 0.8125em;
color: #999;
}
.cover-gallery {
margin: 0 auto -1px;
padding: 60px 0 75px;
border-bottom: 1px solid #ebebeb;
}
.cover-gallery h2 {
margin-bottom: 30px;
font-size: 1em;
}
.cover-gallery ul {
display: inline-block;
margin-left: -12px;
}
.cover-gallery ul li {
float: left;
width: 25%;
margin: 0 0 12px 0;
padding-left: 12px;
box-sizing: border-box;
}
.cover-gallery ul li a {
display: block;
position: relative;
width: 100%;
background-color: #ebebeb;
}
.cover-gallery ul li .title {
display: block;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
position: absolute;
top: 50%;
left:0;
z-index: 30;
overflow: hidden;
width: 100%;
max-height: 4.2em;
text-align: center;
line-height: 1.4;
padding: 0 20px;
color: #fff;
box-sizing: border-box;
transform: translateY(-50%);
visibility: hidden;
}
.cover-gallery ul li a:hover .title {
visibility: visible;
}
.cover-gallery ul li a:hover:after {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: 20;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
}
.cover-gallery ul li a:before {
content: "NO IMAGE";
position: absolute;
top: 50%;
left: 0;
z-index: 0;
width: 100%;
height: 18px;
margin: -9px 0 0 0;
text-align: center;
font-family: 'Arial';
font-weight: bold;
font-size: 0.875em;
color: #cbcbcb;
}
.cover-gallery ul li figure {
height: 0;
padding-bottom: 100%;
}
.cover-gallery ul li figure img {
position: relative;
width: 100%;
height: auto;
z-index: 10;
}
.cover-footer {
position: relative;
z-index: 10;
text-align: center;
}
.cover-footer .image {
height: 300px;
margin-bottom: 80px;
background-position: 50% 50%;
background-size: cover;
}
.cover-footer p {
margin: -5px 0 20px;
text-align: center;
font-weight: 700;
font-size: 1.25em;
color: #000;
}
.cover-footer .menu ul {
text-align: center;
}
.cover-footer .menu ul li {
display: inline-block;
margin: 40px 0 48px;
padding: 0 14px;
font-size: 0.875em;
}
.cover-footer .menu ul li a {
display: block;
text-decoration: none;
color: #282828;
}
.cover-footer .menu ul li a:hover {
text-decoration: underline;
color: #4e2e28;
}
.cover-footer p:first-child {
margin-top: 76px;
}
.cover-footer .social-link:first-child a {
margin-top: 80px;
}
.post-header {
position: relative;
overflow: hidden;
max-width: 860px;
margin: 0 auto 30px;
padding: 57px 0 15px;
border-bottom: 1px solid #ebebeb;
}
.post-header h1 {
float: left;
font-size: 1em;
}
.post-header .list-type {
float: right;
}
.post-header .list-type button {
float: left;
width: 24px;
height: 24px;
margin-left: 4px;
background-image: url(./images/ico_package.png);
background-repeat: no-repeat;
text-indent: -999em;
outline: none;
}
.post-header .list-type button:hover {
background-color: #ebebeb;
}
.post-header .list-type .list {
background-position: 0 -200px;
}
.post-header .list-type .thum {
background-position: -100px -200px;
}
.post-header .list-type .list.current {
background-position: -50px -200px;
}
.post-header .list-type .thum.current {
background-position: -150px -200px;
}
.post-item {
overflow: hidden;
width: 100%;
border-bottom: 1px solid #ebebeb;
}
.post-item a {
display: block;
min-height: 148px;
padding: 30px 0 30px;
text-decoration: none;
color: #080808;
}
.post-item:first-child a {
padding-top: 0;
}
.post-item a:hover .title {
text-decoration: underline;
color: #4e2e28;
}
.post-item .thum {
float: right;
overflow: hidden;
max-width: 148px;
margin-left: 80px;
}
.post-item .thum img {
width: 195px;
height: 148px;
margin: 0 0 0 -23.5px;
}
.post-item .category {
display: inline-block;
margin-bottom: 16px;
border-bottom: 1px solid #a3a3a3;
font-family: 'Nanum Myeongjo', serif;
font-size: 0.875em;
color: #808080;
}
.post-item .title {
display: block;
margin-bottom: 8px;
display:-webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 2.8em;
font-weight: 700;
font-size: 1.125em;
line-height: 1.4;
}
.post-item .excerpt {
display: block;
display:-webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient:vertical;
overflow:hidden;
font-size: 0.9375em;
line-height: 1.6;
color: #666;
}
.post-item .excerpt.protected:before {
content: "";
display: inline-block;
width: 9px;
height: 13px;
margin-right: 10px;
background: url(./images/ico_package.png) no-repeat -0 -100px;
vertical-align: baseline;
}
.post-item .date {
display: block;
font-size: 0.8125em;
color: #999;
}
.pagination {
max-width: 860px;
margin: 60px auto 160px;
text-align: center;
}
.pagination .current {
display: none;
}
.pagination .view-more {
display: inline-block;
width: 158px;
height: 50px;
border: 1px solid #dcdcdc;
font-size: 0.875em;
line-height: 50px;
color: #000;
}
.pagination .view-more:hover {
border-color: #4d4d4d;
background: none;
}
.pagination a {
display: inline-block;
width: 24px;
height: 24px;
margin: 0 4px;
text-decoration: none;
font-size: 0.9375em;
line-height: 24px;
color: #b2b2b2;
vertical-align: middle;
}
.pagination a:hover {
background-color: #ebebeb;
}
.pagination .selected {
color: #000;
}
.pagination .prev,
.pagination .next {
width: 50px;
height: 50px;
background-image: url(./images/ico_package.png);
background-repeat: no-repeat;
border: 1px solid #dcdcdc;
text-indent: -999em;
vertical-align: middle;
box-sizing: border-box;
}
.pagination .prev {
background-position: -50px 0;
}
.pagination .next {
background-position: -100px 0;
}
.pagination .prev:hover,
.pagination .next:hover {
background-color: transparent;
border-color: #4d4d4d;
}
.pagination .no-more-prev,
.pagination .no-more-next {display: none;}
.hgroup {
max-width: 860px;
margin: 50px auto 60px;
padding: 0 0 20px;
border-bottom: 1px solid #ebebeb;
}
.hgroup .category {
display: inline-block;
margin-bottom: 16px;
padding-top: 5px;
border-bottom: 1px solid #a3a3a3;
font-family: 'Nanum Myeongjo', serif;
font-size: 0.875em;
color: #808080;
}
.hgroup h1 {
display: block;
margin-bottom: 9px;
font-weight: 700;
font-size: 1.6875em;
line-height: 1.4444em;
}
.hgroup .post-meta {
display: block;
font-size: 0.8125em;
color: #808080;
}
.hgroup .post-meta a {
text-decoration: none;
color: #999;
}
.hgroup .post-meta a:hover {
text-decoration: underline;
}
.hgroup .post-meta span:before {
content: "";
display: inline-block;
width: 1px;
height: 10px;
margin: 0 7px 0 10px;
background-color: #ebebeb;
vertical-align: baseline;
}
.hgroup .post-meta span:first-child:before {
content: none;
}
.another_category {
margin: 60px auto 80px;
padding: 0 !important;
border: 0 !important;
}
.another_category h4 {
margin-bottom: 28px;
font-weight: 400;
font-size: 1em !important;
}
.another_category h4 em {
border-bottom: 1px solid #000;
font-style: normal;
}
.another_category table {
width: 100%;
border-collapse: collapse;
border: 0 !important;
font-size: 0.9375em;
color: #666;
}
.another_category table th {
padding: 8px 0 4px;
border: 0 !important;
text-align: left;
font-weight: 400;
}
.another_category table th a {
text-decoration: none;
color: #666;
}
.another_category td {
width: 60px;
padding: 8px 0 4px;
border-left: 0 !important;
border-top: 0 !important;
font-size: 0.8125em;
line-height: 1;
color: #b2b2b2;
}
.tags {
position: relative;
overflow: hidden;
max-width: 860px;
margin: 53px auto;
padding: 27px 0 28px 47px;
border-top: 1px solid #ebebeb;
border-bottom: 1px solid #ebebeb;
color: #999;
box-sizing: border-box;
}
.tags h2 {
float: left;
width: 47px;
margin-left: -47px;
font-weight: 400;
font-size: 1em;
color: #000;
}
.tags .items a {
display:inline-block;
margin-left: 15px;
text-decoration:none;
font-size: 0.8125em;
line-height: 1.5384;
color: #999;
}
.tags .items a:hover {
color: #7a583a;
}
.tags .items a:before {
content: "#";
}
.related-articles {
overflow: hidden;
width: 100%;
margin: 57px 0 69px;
}
.related-articles h2 {
margin-bottom: 28px;
font-weight: 400;
font-size: 1em;
}
.related-articles h2 em {
border-bottom: 1px solid #000;
font-style: normal;
}
.related-articles ul {
}
.related-articles ul li {
float: left;
width: 24.0625%;
padding-left: 1.25%;
}
.related-articles ul li:first-child {
padding-left: 0;
}
.related-articles ul li a {
display: block;
text-decoration: none;
color: #080808;
}
.related-articles ul li a:hover .title {
text-decoration: underline;
color: #4e2e28;
}
.related-articles ul li .thum {
display: block;
position: relative;
overflow: hidden;
height: 0;
margin-bottom: 12px;
padding-bottom: 75.757575757575758%;
background-color: #ebebeb;
}
.related-articles ul li .thum:before {
content: "NO IMAGE";
position: absolute;
top: 50%;
left: 0;
z-index: 0;
width: 100%;
height: 18px;
margin: -9px 0 0 0;
text-align: center;
font-family: 'Arial';
font-weight: bold;
font-size: 0.875em;
color: #cbcbcb;
}
.related-articles ul li .thum img {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
}
.related-articles ul li .category {
display: inline-block;
margin-bottom: 16px;
border-bottom: 1px solid #a3a3a3;
font-family: 'Nanum Myeongjo', serif;
font-size: 0.875em;
color: #808080;
}
.related-articles ul li .title {
display: block;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 2.75em;
margin-bottom: 9px;
font-weight: 700;
line-height: 1.375;
}
.related-articles ul li .date {
display: block;
font-size: 0.8125em;
color: #999;
}
/* Entry Content */
.entry-content h1 {
margin: 60px 0 19px;
font-size: 1.6875em;
}
.entry-content h2 {
margin: 60px 0 19px;
font-size: 1.5em;
}
.entry-content h3 {
margin: 60px 0 19px;
font-weight: 700;
font-size: 1.3125em;
}
.entry-content h4 {
margin: 60px 0 19px;
font-weight: 400;
font-size: 1.125em;
}
.entry-content p {
margin-bottom: 24px;
font-size: 0.9375em;
line-height: 1.6;
color: #666;
}
.entry-content p img {
max-width: 100%;
height: auto;
margin-top: 36px;
}
.entry-content hr {
display: block;
border: 0;
border-bottom: 1px solid #000;
height: 4px !important;
margin: 10px 0px !important;
}
.entry-content pre {
/*
word-break:break-all;
white-space:pre-wrap;
word-wrap:break-word;
*/
background: #f8f8f8;
border: 1px solid #000;
margin: 5px 0px;
padding: 10px;
}
.entry-content pre code {
tab-size: 4;
font-family: 'Open Sans', sans-serif;
overflow-x: auto;
}
.entry-content ul,
.entry-content ol {
margin-bottom: 10px;
}
.entry-content ul {
list-style: disc inside;
}
.entry-content ul li {
position: relative;
padding-left: 22px;
font-size: 0.9375em;
line-height: 1.6;
color: #666;
list-style: inherit;
text-indent: -22px;
}
.entry-content ol {
list-style: inside decimal;
}
.entry-content ol li {
position: relative;
padding-left: 16px;
font-size: 0.9375em;
line-height: 1.6;
color: #666;
text-indent: -15px;
list-style: inherit;
}
.entry-content a {
color: #666;
}
.entry-content img.alignleft {
float: left;
margin: 0 22px 22px 0;
}
.entry-content img.aligncenter {
display: block;
margin: 0 auto 22px;
}
.entry-content img.alignright {
float: right;
margin: 0 0 22px 22px;
}
.entry-content blockquote {
margin-bottom: 60px;
padding: 16px 20px;
border-left: 4px solid #e6e6e6;
}
.entry-content blockquote p {
margin: 22px 0 0;
}
.entry-content blockquote p:first-child {
margin-top: 0;
}
.entry-content table {
width:100%;
margin-bottom: 22px;
border: 1px solid #e6e6e6;
border-collapse: collapse;
text-align: center;
font-size: 0.875em;
line-height: 1.5714;
color: #666;
}
.entry-content table thead th {
padding:7px 0 11px;
border-left: 1px solid #e6e6e6;
}
.entry-content table tbody td {
padding:7px 0 11px;
border-left: 1px solid #e6e6e6;
border-top: 1px solid #e6e6e6;
}
.entry-content input {
display: inline-block;
height: 40px;
padding: 0 10px;
border: 1px solid #e6e6e6;
font-size: 0.875em;
line-height: 1.25;
color: #666;
box-sizing: border-box;
vertical-align: middle;
}
.entry-content .protected_form {
margin-bottom: 40px;
padding: 120px 0 200px;
border-bottom: 1px solid #7a583a;
text-align: center;
}
.entry-content .protected_form p:before {
content: "";
display: block;
width: 64px;
height: 84px;
margin: 0 auto 30px;
background: url(./images/ico_package.png) no-repeat -50px -100px;
}
.entry-content .protected_form input {
width: 220px;
height: 50px;
margin-bottom: 10px;
background-color: transparent;
vertical-align: top;
}
.entry-content .cap1 {
text-align: center;
font-size: 0.875em;
font-style: italic;
}
.entry-content .iframe-wrap {
position: relative;
height: 0;
padding-bottom: 56.25%;
}
.entry-content .iframe-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Comment */
.comments {
max-width: 860px;
margin: 0 auto 60px;
padding-bottom: 30px;
border-bottom: 1px solid #e6e6e6;
}
.comments h2 {
font-weight: 400;
font-size: 1em;
color: #000;
}
.comments .comment-list {
font-size:16px;
margin-bottom: 6px;
overflow:hidden;
}
.comments .comment-list ul li {
padding: 30px 0 25px;
border-top: 1px solid #e6e6e6;
position: relative;
min-height: 48px;
}
.comments .comment-list ul li:first-child {
border: none;
}
.comments .comment-list ul li ul li {
padding: 26px 0 0 60px;
border-top: 0;
border-bottom: 0;
}
.comments .comment-list ul li .author-meta {
position: absolute;
overflow: hidden;
top:30px; height:48px;
left:0; right:0;
padding: 4px 0 0 60px;
}
.comments .comment-list ul li ul li .author-meta {
top:26px;
left:60px;
}
.comments .comment-list ul li .author-meta .avatar {
position: absolute;
left:0; top:0;
width: 48px;
height: 48px;
border-radius: 50%;
}
.comments .comment-list ul li .author-meta span {
display:inline-block;
}
.comments .comment-list ul li .author-meta a {
text-decoration:none;
color: #000;
}
.comments .comment-list ul li .author-meta .nickname {
float:left;
font-size: 0.875em;
line-height: 20px;
}
.comments .comment-list ul li .author-meta .nickname .tistoryProfileLayerTrigger {
margin-bottom: 3px;
margin-right: 0;
vertical-align: bottom;
}
.comments .comment-list ul li .author-meta .date {
float:left;
margin-left: 10px;
font-size: 0.75em;
color: #999;
line-height:20px;
}
.comments .comment-list ul li .author-meta .date:before,
.comments .comment-list ul li .author-meta .date a:before {
content: "";
display: inline-block;
width: 1px;
height: 9px;
margin-right: 10px;
background-color: #b2b2b2;
}
.comments .comment-list ul li .author-meta .date a {
margin-left: 10px;
}
.comments .comment-list ul li .control {
position: absolute;
top: 33px;
right:0;
}
.comments .comment-list ul li ul li .control {
top: 29px;
}
.comments .comment-list ul li .control a {
margin:0 2px;
text-decoration: none;
font-size: 12px;
color: #999;
}
.comments .comment-list ul li p {
position:relative;
margin: 29px 0 0 60px;
font-size: 0.875em;
line-height: 1.5714;
color: #666;
}
.comments .comment-form .field {
position: relative;
overflow: hidden;
width: 100%;
margin-bottom: 8px;
}
.comments .comment-form input[type=text],
.comments .comment-form input[type=password],
.comments .comment-form textarea {
border: 1px solid #e6e6e6;
font-size: 0.9375em;
line-height: 1.25;
color: #666;
background-color: transparent;
}
.comments .comment-form input[type=text],
.comments .comment-form input[type=password] {
width: 140px;
height: 52px;
margin-right: 6px;
padding: 10px;
box-sizing: border-box;
}
.comments .comment-form input::-webkit-input-placeholder,
.comments .comment-form textarea::-webkit-input-placeholder {color: #d6d6d6;}
.comments .comment-form textarea {
display: block;
width: 100%;
margin-bottom: 10px;
padding: 10px;
resize: none;
box-sizing: border-box;
}
.comments .comment-form .field .secret {
display: inline-block;
margin-left: 15px;
vertical-align: middle;
}
.comments .comment-form .field .secret input {
display: none;
}
.comments .comment-form .field .secret label {
font-size: 0.8125em;
line-height: 52px;
color: #666;
outline: none;
cursor: pointer;
}
.comments .comment-form .field .secret label:before {
content: "";
display: inline-block;
width: 19px;
height: 18px;
margin-right: 9px;
border: 1px solid #e1e1e1;
vertical-align: middle;
background-color: #fff;
}
.comments .comment-form .field .secret input[type=checkbox]:checked+label:before {
background-image: url(./images/ico_package.png);
background-repeat: no-repeat;
background-position: -150px -100px;
}
.comments .comment-form .field .submit {
float: right;
}
/* Widget & Template Page */
/* ETC */
#dimmed {
position: fixed;
top: 0;
left: 0;
z-index: 300;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.43);
}
/* Post Type & Color Type */
.post-type-thumbnail .post-item {
float: left;
width: 24.0625%;
margin: 0 0 58px;
padding-left: 1.25%;
border: 0;
}
.post-type-thumbnail .post-item:nth-child(4n+1) {
padding-left: 0;
}
.post-type-thumbnail .post-item a {
padding: 0;
}
.post-type-thumbnail .post-item .thum {
display: block;
position: relative;
overflow: hidden;
width: 100%;
max-width: none;
height: 0;
margin: 0 0 9px 0;
padding-bottom: 75.757575757575758%;
background-color: #ebebeb;
}
.post-type-thumbnail .post-item .thum:before {
content: "NO IMAGE";
position: absolute;
top: 50%;
left: 0;
z-index: 0;
width: 100%;
height: 18px;
margin: -9px 0 0 0;
text-align: center;
font-family: 'Arial';
font-weight: bold;
font-size: 0.875em;
color: #cbcbcb;
}
.post-type-thumbnail .post-item .thum img {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
margin: 0;
}
.post-type-thumbnail .post-item .title {
display: block;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
width: 100%;
height: 2.75em;
font-weight: 700;
font-size: 1em;
line-height: 1.375em;
}
.post-type-thumbnail .post-item .excerpt {
display: none;
}
.post-type-thumbnail .pagination {
margin-top: 0;
}
/* Color Type */
.color-chocolate,
.color-chocolate .cover-footer,
.color-chocolate #footer {
background-color: #f4f2f1;
}
.color-chocolate #header h1 a,
.color-chocolate #gnb ul li a,
.color-chocolate #footer .admin,
.color-chocolate .cover-thumbnail-list ul li a,
.color-chocolate .cover-masonry ul li a,
.color-chocolate .cover-list ul li a,
.color-chocolate .cover-footer p,
.color-chocolate .cover-footer .menu ul li a,
.color-chocolate .post-item a,
.color-chocolate .hgroup h1,
.color-chocolate .hgroup .post-meta a,
.color-chocolate .entry-content h1,
.color-chocolate .entry-content h2,
.color-chocolate .entry-content h3,
.color-chocolate .entry-content h4,
.color-chocolate .entry-content a,
.color-chocolate .related-articles ul li a,
.color-chocolate .comments .comment-list ul li .author-meta span,
.color-chocolate .comments .comment-list ul li .author-meta .date a,
.color-chocolate .pagination .selected {
color: #4e2e28;
}
.color-chocolate #header .menu p,
.color-chocolate #footer p,
.color-chocolate .cover-thumbnail-list ul li .date,
.color-chocolate .cover-masonry ul li .excerpt,
.color-chocolate .cover-list ul li .excerpt,
.color-chocolate .cover-list ul li .date,
.color-chocolate .post-item .excerpt,
.color-chocolate .post-item .date,
.color-chocolate .hgroup .post-meta,
.color-chocolate .another-category td,
.color-chocolate .tags .items a,
.color-chocolate .related-articles ul li .date,
.color-chocolate .comments .comment-list ul li .author-meta .date,
.color-chocolate .comments .comment-list ul li .author-meta .control a {
color: #a69693;
}
.color-chocolate .cover-thumbnail-list ul li .category,
.color-chocolate .cover-masonry ul li .category,
.color-chocolate .hgroup .category {
color: #94817e;
}
.color-chocolate .entry-content p,
.color-chocolate .entry-content table,
.color-chocolate .entry-content ul li,
.color-chocolate .entry-content ol li,
.color-chocolate .another-category table,
.color-chocolate .another-category table th a,
.color-chocolate .comments .comment-list ul li p {
color: #836c68;
}
.color-chocolate #gnb ul li a:hover,
.color-chocolate .cover-footer .menu ul li a:hover,
.color-chocolate .cover-thumbnail-list ul li a:hover .title,
.color-chocolate .cover-masonry ul li a:hover .title,
.color-chocolate .cover-list ul li a:hover .title,
.color-chocolate .post-item a:hover .title,
.color-chocolate .related-articles ul li a:hover .title {
color: #2d140f;
}
.color-chocolate .cover-thumbnail-list ul li .category,
.color-chocolate .cover-masonry ul li .category,
.color-chocolate .hgroup .category {
border-color: #a69693;
}
.color-chocolate .entry-content ul li:before {
background-color: #a69693;
}
.color-chocolate #header .mobile-menu:before,
.color-chocolate #header .mobile-menu:after,
.color-chocolate #header .mobile-menu span {
background-color: #4e2e28;
}
.color-chocolate .pagination a:hover,
.color-chocolate #header .search:hover:before {
background-color: #e7e2e1;
}
.color-chocolate .btn,
.color-chocolate .cover-thumbnail-list
.color-chocolate .cover-masonry
.color-chocolate .cover-list
.color-chocolate .cover-gallery,
.color-chocolate .cover-list ul li,
.color-chocolate .post-item,
.color-chocolate .hgroup,
.color-chocolate .entry-content table,
.color-chocolate .entry-content table thead th,
.color-chocolate .entry-content table tbody td,
.color-chocolate .entry-content blockquote,
.color-chocolate .comments,
.color-chocolate .comments .comment-list ul li,
.color-chocolate .comments .comment-form input[type=text],
.color-chocolate .comments .comment-form input[type=password],
.color-chocolate .comments .comment-form textarea,
.color-chocolate .comments .comment-form .field .secret label:before,
.color-chocolate .pagination .prev,
.color-chocolate .pagination .next,
.color-chocolate .pagination a {
border-color: #e7e2e1;
}
.color-chocolate .social-link a,
.color-chocolate #header .search button,
.color-chocolate #header .search:before,
.color-chocolate .cover-thumbnail-list ul li .thum:before,
.color-chocolate .cover-gallery ul li a:before,
.color-chocolate .post-header .list-type button,
.color-chocolate .related-articles ul li .thum:before {
background-image: url(./images/ico_package_chocolate.png);
}
.color-chocolate .btn:hover,
.color-chocolate .pagination .prev:hover,
.color-chocolate .pagination .next:hover {
border-color: #4d4d4d;
}
.color-chocolate #header .search.on {
border-color: #4e2e28;
}
/* Retina Display */
@media only screen and (-webkit-min-device-pixel-ratio:1.5) {
#header .search button,
#header .search:before,
.social-link a,
.cover-slider .prev,
.cover-slider .next,
.cover-gallery ul li a:before,
.post-header .list-type button,
.pagination .prev,
.pagination .next,
.comments .comment-form .field .secret input[type=checkbox]:checked+label:before {
background-image: url(./images/ico_package_2x.png);
background-size: 200px auto;
}
.color-chocolate .social-link a,
.color-chocolate #header .search button,
.color-chocolate .cover-gallery ul li a:before,
.color-chocolate .post-header .list-type button {
background-image: url(./images/ico_package_chocolate_2x.png);
background-size: 200px auto;
}
}
/* Media Screen - Tablet */
@media screen and (max-width:1023px) {
#header .search.on {
width: 180px;
}
#content .guest_inner,
#content>.inner {
padding: 0 40px;
}
.post-header {
padding: 40px;
}
.cover-thumbnail-list {
padding: 40px 40px 65px;
}
.cover-slider ul li .title {
max-width: none;
padding: 0 98px
}
.cover-slider .prev {
left: 14px;
margin-left: 0;
}
.cover-slider .next {
left: auto;
right: 14px;
margin-left: 0;
}
.cover-masonry {
padding: 60px 40px 81px;
}
.cover-list {
padding: 30px 40px 85px;
}
.cover-gallery {
padding: 60px 40px 130px;
}
}
/* Media Screen - Mobie */
@media screen and (max-width:767px) {
#header .mobile-menu {
top: 10px;
left: 11px;
}
#header .menu {
padding: 84px 20px 189px;
}
#header .menu .social-link,
#header .menu p {
left: 20px;
}
#header h1 {
padding: 15px 62px;
line-height: 1.25;
}
#header h1 a {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#header .search {
top: 10px;
right: 1px;
}
#header .search.on {
position: absolute;
top: 60px;
left: 0;
right: auto;
z-index: 100;
width: 100%;
padding: 10px 18px 10px 17px;
border: 0;
background-color: #fff;
box-sizing: border-box;
}
#header .search.on input {
border-bottom: 1px solid #000;
}
#header .search.on button {
top: -50px;
right: 1px;
}
#content .guest_inner,
#content>.inner {
padding: 0 18px;
}
.post-header {
padding: 20px 18px;
}
.cover-thumbnail-list {
padding: 40px 18px 65px;
}
.cover-thumbnail-list ul li,
.related-articles ul li {
width: 48.591549295774648%;
padding-left: 2.816901408450704%;
}
.cover-thumbnail-list ul li:nth-child(odd),
.related-articles ul li:nth-child(odd) {
clear: both;
padding-left: 0;
}
.cover-slider ul li {
width: 100%;
box-sizing: border-box;
}
.cover-slider ul li .title {
display:-webkit-box;
-webkit-line-clamp:4;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 5.2em;
padding: 0 18px;
font-size: 2.125em;
}
.cover-slider .prev {
top: auto;
bottom: 0;
left: 0;
}
.cover-slider .next {
top: auto;
right: 0;
bottom: 0;
}
.cover-masonry {
padding: 60px 18px 81px;
}
.cover-masonry ul li {
float: none;
width: 100%;
}
.cover-masonry ul li .category,
.cover-list ul li .category {
margin-bottom: 8px;
}
.cover-thumbnail-list ul li .title,
.related-articles ul li .title,
.cover-list ul li .title {
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 4.2em;
line-height: 1.4;
}
.cover-list {
padding: 30px 18px 80px;
}
.cover-list h2{
margin: 30px 0 0 0;
}
.cover-list ul li a {
min-height: 98px;
}
.cover-list ul li figure {
width: 113px;
height: 113px;
margin: 0 0 0 18px;
}
.cover-list ul li .title {
-webkit-line-clamp: 2;
margin-bottom: 3px;
padding-top: 6px;
font-size: 1em;
}
.cover-list ul li .category {
display: none;
}
.cover-list ul li .excerpt {
-webkit-line-clamp: 2;
font-size: 0.8125em;
line-height: 1.5;
}
.cover-gallery {
padding: 60px 18px 130px;
}
.cover-gallery ul li {
width: 50%;
}
.post-item a {
min-height: 100px;
}
.post-item .thum {
max-width: 113px;
margin-left: 18px;
}
.post-item .thum img {
width: auto;
height: 113px;
margin: 0 0 0 -16.5px;
}
.post-item .title {
line-height: 1.2;
}
.post-item .excerpt {
-webkit-line-clamp: 2;
}
.post-type-thumbnail .post-item {
width: 48.591549295774648%;
margin-bottom: 26px;
padding-left: 2.816901408450704%;
}
.post-type-thumbnail .post-item:nth-child(4n+1) {
padding-left: 2.816901408450704%;
}
.post-type-thumbnail .post-item:nth-child(2n+1) {
clear: both;
padding-left: 0%;
}
.post-type-thumbnail .post-item .title {
-webkit-line-clamp: 3;
height: auto;
max-height: 4.125em;
}
.entry-content .table-wrap {
overflow: auto;
width: 100%;
}
.entry-content table {
width: 680px;
table-layout: fixed;
}
.entry-content .protected_form input {
display: block;
width: 160px;
margin: 0 auto 10px;
}
.pagination {
padding: 0 18px;
}
.pagination a {
display: none;
}
.pagination .current {
display: block;
font-size: 0.875em;
line-height: 50px;
}
.pagination .prev {
display: block;
float: left;
margin: 0;
}
.pagination .next {
display: block;
float: right;
margin: 0;
}
.another-category table th {
display: block;
padding: 0;
}
.another-category table td {
display: block;
margin-bottom: 19px;
}
.comments .comment-list {
margin-bottom:10px;
margin-top:10px;
border-top: 1px solid #e6e6e6;
}
.comments .comment-list ul li {
padding-bottom:0;
}
.comments .comment-list ul li ul {
border-top: 1px solid #e6e6e6;
}
.comments .comment-list ul li ul li {
padding:20px 0 0 48px;
}
.comments .comment-list ul li ul li:before {
content: "";
position: absolute;
top: 34px;
left:18px;
width: 12px;
height: 12px;
background: url(./images/ico_package.png) no-repeat 0 -150px;
}
.comments .comment-list ul li .author-meta,
.comments .comment-list ul li ul li .author-meta {
position:relative;
top:0;
left:0;
}
.comments .comment-list ul li .author-meta img {
position: absolute;
top: 0;
left: 0;
}
.comments .comment-list ul li .author-meta .nickname,
.comments .comment-list ul li .author-meta .date {
display: block;
float: none;
line-height: 1.5;
}
.comments .comment-list ul li .author-meta .nickname .tistoryProfileLayerTrigger {
margin-bottom:4px;
}
.comments .comment-list ul li .author-meta .date {
margin-left: 0;
margin-top: 2px;
}
.comments .comment-list ul li .author-meta .date::before {
display: none;
}
.comments .comment-list ul li p {
margin: 14px 0 0;
}
.comments .comment-list ul li .control {
position: relative;
top: auto;
right: auto;
display: block;
margin: 9px 0 18px -2px;
}
.comments .comment-list ul li ul li .control {
top: auto;
}
.comments .comment-form input[type=text],
.comments .comment-form input[type=password] {
width: 100px;
}
.comments .comment-form .field .secret {
margin-left: 0;
}
.comments .comment-form .field .secret label:before {
margin-right: 5px;
}
.comments .comment-form .field .submit {
display: block;
float: none;
margin: 60px auto 0;
}
}
반응형
</div>
</s_page_rep>
<s_notice_rep>
<div class="hgroup">
<h1></h1>
<div class="post-meta">
<span class="author"></span>
<span class="date"></span>
<s_ad_div>
<span><a href="">수정</a></span>
<span><a href="#" onclick="">삭제</a></span>
</s_ad_div>
</div>
</div>
<div class="entry-content">
</div>
</s_notice_rep>
<s_list>
<div class="post-header">
<span><h1></h1></span>
<span style="padding-left: 5px; font-weight: bold;">()</h</span>
<div class="list-type">
<button type="button" class="thum">썸네일형</button>
<button type="button" class="list">리스트형</button>
</div>
</div>
</s_list>
<div class="inner">
<s_article_protected>
<s_index_article_rep>
<div class="post-item">
<a href="/17">
<span class="thum"></span>
<span class="title">[생활IT] 티스토리(Tistory) 설정</span>
<span class="excerpt protected">보호되어 있는 글입니다.</span>
</a>
</div>
</s_index_article_rep>
<s_permalink_article_rep>
<div class="hgroup">
<div class="category">보호글</div>
<h1>[생활IT] 티스토리(Tistory) 설정 </h1>
<div class="post-meta">
<span class="author">키플레이어</span>
<span class="date">2019. 11. 4. 10:54</span>
</div>
</div>
<div class="entry-content">
반응형
HTML
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
<title>[생활IT] 티스토리(Tistory) 설정</title>
<link rel="stylesheet" href="./style.css">
<script src="//t1.daumcdn.net/tistory_admin/lib/jquery/jquery-1.12.4.min.js"></script>
<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=-------------"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-152725149-1');
</script>
<!-- 코드블럭 하이라이트 -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.9/styles/github.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.9/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script>
<!-- 애드센스 -->
<script data-ad-client="---------------" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</head>
<body id="tt-body-page" class="<s_if_var_color-type></s_if_var_color-type><s_if_var_post-type> </s_if_var_post-type><s_if_var_view-more> paging-view-more</s_if_var_view-more>">
<s_t3>
<div id="acc-nav">
<a href="#content">본문 바로가기</a>
</div>
<div id="wrap">
<header id="header">
<h1><a href="https://coding-house.tistory.com/">Keyplayer's CodingHouse</a></h1>
<button type="button" class="mobile-menu"><span>메뉴</span></button>
<div class="menu">
<nav id="gnb">
</nav>
<div class="social-link">
<s_if_var_sns-pinterest><a href="" class="pinterest">Pinterest</a></s_if_var_sns-pinterest>
<s_if_var_sns-facebook><a href="" class="facebook">Facebook</a></s_if_var_sns-facebook>
<s_if_var_sns-twitter><a href="" class="twitter">Twitter</a></s_if_var_sns-twitter>
<s_if_var_sns-instagram><a href="" class="instagram">Instagram</a></s_if_var_sns-instagram>
</div>
<p>POWERED BY TISTORY</p>
</div>
<div class="search">
<s_search>
<input type="text" name="" value="" placeholder="검색내용을 입력하세요." onkeypress="if (event.keyCode == 13) { }">
<button type="submit" onclick="">검색</button>
</s_search>
</div>
</header>
<hr>
<section class="container">
<article id="content">
<s_cover_group>
<s_cover_rep>
<s_cover name='cover-thumbnail-list'>
<div class='cover-thumbnail-list'>
<div class="inner">
<h2></h2>
<ul>
<s_cover_item>
<li>
<a href="">
<span class="thum"><s_cover_item_thumbnail><img src="//i1.daumcdn.net/thumb/C264x200/?fname=" alt=""></s_cover_item_thumbnail></span>
<s_cover_item_article_info>
<span class="category"></span>
</s_cover_item_article_info>
<span class="title"></span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</div>
</s_cover>
<s_cover name='cover-slider'>
<div class="cover-slider">
<ul>
<s_cover_item>
<li<s_cover_item_thumbnail> style="background-image:url();"</s_cover_item_thumbnail>>
<a href="" class="text-box">
<s_cover_item_article_info>
<span class="category"></span>
</s_cover_item_article_info>
<span class="title"></span>
<span class="btn view">더보기</span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</s_cover>
<s_cover name='cover-masonry'>
<div class="cover-masonry">
<div class="inner">
<h2></h2>
<ul>
<s_cover_item>
<li>
<a href="">
<span class="thum"><s_cover_item_thumbnail><img src="//i1.daumcdn.net/thumb/R600x0/?fname=" alt=""></s_cover_item_thumbnail></span>
<s_cover_item_article_info>
<span class="category"></span>
</s_cover_item_article_info>
<span class="title"></span>
<span class="excerpt"></span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</div>
</s_cover>
<s_cover name='cover-list'>
<div class="cover-list">
<div class="inner">
<h2></h2>
<ul>
<s_cover_item>
<li>
<a href="">
<figure>
<s_cover_item_thumbnail><img src="//i1.daumcdn.net/thumb/C600x600/?fname=" alt=""></s_cover_item_thumbnail>
</figure>
<s_cover_item_article_info>
<span class="category"></span>
</s_cover_item_article_info>
<span class="title"></span>
<span class="excerpt"></span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</div>
</s_cover>
<s_cover name='cover-gallery'>
<div class="cover-gallery">
<div class="inner">
<h2></h2>
<ul>
<s_cover_item>
<li>
<a href="">
<figure>
<s_cover_item_thumbnail><img src="//i1.daumcdn.net/thumb/C600x600/?fname=" alt=""></s_cover_item_thumbnail>
</figure>
<span class="title"></span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</div>
</s_cover>
</s_cover_rep>
<div class="cover-footer">
<s_if_var_footer-image>
<div class="image" style="background-image:url();"></div>
</s_if_var_footer-image>
<s_if_var_footer-text>
<p></p>
</s_if_var_footer-text>
<div class="social-link">
<s_if_var_sns-pinterest><a href="" class="pinterest"><span class="">Pinterest</span></a></s_if_var_sns-pinterest>
<s_if_var_sns-facebook><a href="" class="facebook">Facebook</a></s_if_var_sns-facebook>
<s_if_var_sns-twitter><a href="" class="twitter">Twitter</a></s_if_var_sns-twitter>
<s_if_var_sns-instagram><a href="" class="instagram">Instagram</a></s_if_var_sns-instagram>
</div>
<nav class="menu">
</nav>
</div>
</s_cover_group>
<s_page_rep>
<div class="hgroup">
<h1></h1>
</div>
<div class="entry-content">
</div>
</s_page_rep>
<s_notice_rep>
<div class="hgroup">
<h1></h1>
<div class="post-meta">
<span class="author"></span>
<span class="date"></span>
<s_ad_div>
<span><a href="">수정</a></span>
<span><a href="#" onclick="">삭제</a></span>
</s_ad_div>
</div>
</div>
<div class="entry-content">
</div>
</s_notice_rep>
<s_list>
<div class="post-header">
<span><h1></h1></span>
<span style="padding-left: 5px; font-weight: bold;">()</h</span>
<div class="list-type">
<button type="button" class="thum">썸네일형</button>
<button type="button" class="list">리스트형</button>
</div>
</div>
</s_list>
<div class="inner">
<s_article_protected>
<s_index_article_rep>
<div class="post-item">
<a href="">
<span class="thum"></span>
<span class="title"></span>
<span class="excerpt protected">보호되어 있는 글입니다.</span>
</a>
</div>
</s_index_article_rep>
<s_permalink_article_rep>
<div class="hgroup">
<div class="category">보호글</div>
<h1> </h1>
<div class="post-meta">
<span class="author"></span>
<span class="date"></span>
</div>
</div>
<div class="entry-content">
<form class="protected_form" onsubmit="">
<p>보호되어 있는 글입니다.<br>
내용을 보시려면 비밀번호를 입력하세요.</p>
<fieldset>
<input type="password" id="" name="" value="" placeholder="비밀번호" />
<button type="submit" class="btn">입력</button>
</fieldset>
</form>
</div>
</s_permalink_article_rep>
</s_article_protected>
<s_article_rep>
<s_index_article_rep>
<div class="post-item">
<a href="">
<span class="thum">
<s_article_rep_thumbnail>
<img src="//i1.daumcdn.net/thumb/C264x200/?fname=" alt="">
</s_article_rep_thumbnail>
</span>
<span class="title"></span>
<span class="excerpt"></span>
</a>
</div>
</s_index_article_rep>
<s_permalink_article_rep>
<div class="hgroup">
<div class="category"></div>
<h1> </h1>
<div class="post-meta">
<span class="author"></span>
<span class="date"></span>
<s_ad_div>
<span><a href="">수정</a></span>
<span><a href="#" onclick="">삭제</a></span>
</s_ad_div>
</div>
</div>
<div class="entry-content">
</div>
<s_tag_label>
<div class="tags">
<h2>태그</h2>
<div class="items">
</div>
</div>
</s_tag_label>
<s_article_related>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 애드센스 -->
<div align="center">
<!-- 고정 사각형 -->
<ins class="adsbygoogle"
style="display:inline-block;width:336px;height:280px;text-align:center;"
data-ad-client="--------------"
data-ad-slot="5339555420"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 고정 사각형 -->
<ins class="adsbygoogle"
style="display:inline-block;width:336px;height:280px;text-align:center;"
data-ad-client="---------------"
data-ad-slot="5339555420"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 애드센스 -->
<div class="related-articles">
<h2><strong>''</strong> Related Articles</h2>
<ul>
<s_article_related_rep>
<li>
<a href="">
<span class="thum">
<s_article_related_rep_thumbnail>
<img src="//i1.daumcdn.net/thumb/C264x200/?fname=" alt="">
</s_article_related_rep_thumbnail>
</span>
<span class="title"></span>
</a>
</li>
</s_article_related_rep>
</ul>
</div>
</s_article_related>
<s_rp>
<div class="comments">
<s_rp_container>
<div class="comment-list">
<ul>
<s_rp_rep>
<li id="">
<div class="author-meta">
<img src="" class="avatar" alt="">
<span class="nickname"></span>
<span class="date"></span>
</div>
<p></p>
<div class="control">
<a href="">댓글주소</a>
<a href="#" onclick="">수정/삭제</a>
<a href="#" onclick="">댓글쓰기</a>
</div>
<s_rp2_container>
<ul>
<s_rp2_rep>
<li id="">
<div class="author-meta">
<img src="" class="avatar" alt="">
<span class="nickname"></span>
<span class="date"></span>
</div>
<p></p>
<div class="control">
<a href="">댓글주소</a>
<a href="#" onclick="">수정/삭제</a>
</div>
</li>
</s_rp2_rep>
</ul>
</s_rp2_container>
</li>
</s_rp_rep>
</ul>
</div>
</s_rp_container>
<s_rp_input_form>
<div class="comment-form">
<s_rp_member>
<div class="field">
<s_rp_guest>
<input type="text" name="" value="" placeholder="이름">
<input type="password" name="" value="" placeholder="암호">
</s_rp_guest>
<div class="secret">
<input type="checkbox" name="" id="secret">
<label for="secret" tabindex="0">Secret</label>
</div>
</div>
</s_rp_member>
<textarea name="" cols="" rows="4" placeholder="여러분의 소중한 댓글을 입력해주세요."></textarea>
<div class="submit">
<button type="submit" class="btn" onclick="">댓글달기</button>
</div>
<!-- 애드센스 수평 고정 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px;margin:20px 0"
data-ad-client="-----------------"
data-ad-slot="2283476235"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 애드센스 -->
<!-- 애드센스 수평 고정 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px;margin:20px 0"
data-ad-client="-----------------"
data-ad-slot="2283476235"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 애드센스 -->
<!-- 애드센스 수평 고정 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px;margin:20px 0"
data-ad-client="-----------------"
data-ad-slot="2283476235"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 애드센스 -->
<!-- 애드센스 수평 고정 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px;margin:20px 0"
data-ad-client="-------------------"
data-ad-slot="2283476235"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 애드센스 -->
<!-- 애드센스 수평 고정 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px;margin:20px 0"
data-ad-client="-------------------"
data-ad-slot="2283476235"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 애드센스 -->
</div>
</s_rp_input_form>
</div>
</s_rp>
</s_permalink_article_rep>
</s_article_rep>
</div>
<s_tag>
<div class="hgroup">
<h1>태그</h1>
</div>
<div class="tags">
<div class="items">
<s_tag_rep>
<a href=""></a>
</s_tag_rep>
</div>
</div>
</s_tag>
<s_guest>
<div class="guest_inner">
<div class="hgroup">
<h1>방명록</h1>
</div>
<div class="comments">
<s_guest_input_form>
<div class="comment-form">
<s_guest_member>
<div class="field">
<s_guest_form>
<input type="text" name="" value="" placeholder="이름">
<input type="password" name="" value="" placeholder="암호">
</s_guest_form>
</div>
</s_guest_member>
<textarea name="" cols="" rows="4"></textarea>
<div class="submit">
<button type="submit" class="btn" onclick="">안부 남기기</button>
</div>
</div>
</s_guest_input_form>
<s_guest_container>
<div class="comment-list">
<ul>
<s_guest_rep>
<li id="">
<div class="author-meta">
<img src="//t1.daumcdn.net/tistory_admin/static/skin/avatar_default.gif" class="avatar" alt="">
<span class="nickname"></span>
<span class="date"></span>
</div>
<p></p>
<div class="control">
<a href="#" onclick="">수정/삭제</a>
<a href="#" onclick="">댓글쓰기</a>
</div>
<s_guest_reply_container>
<ul>
<s_guest_reply_rep>
<li id="">
<div class="author-meta">
<img src="//t1.daumcdn.net/tistory_admin/static/skin/avatar_default.gif" class="avatar" alt="">
<span class="nickname"></span>
<span class="date"></span>
</div>
<p></p>
<div class="control">
<a href="#" onclick="">수정/삭제</a>
</div>
</li>
</s_guest_reply_rep>
</ul>
</s_guest_reply_container>
</li>
</s_guest_rep>
</ul>
</div>
</s_guest_container>
</div>
</div>
</s_guest>
<s_paging>
<div class="pagination">
<a class="prev ">이전</a>
<s_paging_rep>
<a ></a>
</s_paging_rep>
<a class="next ">다음</a>
</div>
</s_paging>
</article>
</section>
<hr>
<footer id="footer">
<p class="copyright">DESIGN BY <a href="#">TISTORY</a> <a href="https://coding-house.tistory.com/manage" class="admin">관리자</a></p>
</footer>
</div>
<script src="./images/script.js"></script>
</s_t3>
</body>
</html>
CSS
@charset "utf-8";
/*
*
* CSS CONTENTS:
*
* 01. Web Font
* 02. Type Selector Reset
* 03. Accessibility Navigation
* 04. Layout Selector
* 05. Components
* 06. Entry Content
* 07. Comment
* 08. Widget & Template Page
* 09. ETC
* 10. Post Type & Color Type
* 11. Retina Display
* 12. Media Screen - Tablet
* 13. Media Screen - Mobie
*
*/
/* Web Font Load */
@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');
@import url('//fonts.googleapis.com/css?family=Nanum+Myeongjo');
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
/* Type Selector Reset */
body {
font-weight: 400;
font-family: 'Noto Sans KR', sans-serif;
font-size: 1em;
line-height: 1.25;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-size: 100%;
}
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, figure {
margin: 0;
padding: 0;
}
header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption {
display: block;
}
button, input[type=submit], input[type=reset], input[type=button] {
overflow: visible;
cursor: pointer;
}
input[type=text], input[type=email], input[type=password], input[type=submit], textarea {
-webkit-appearance: none;
}
input, select, textarea, button {
font-family: 'Noto Sans KR', sans-serif;
font-size: 100%;
border-radius: 0;
}
button {
overflow: visible;
margin: 0;
padding: 0;
border: 0;
background: transparent;
}
ul li {
list-style: none;
}
img, fieldset {
border: none;
vertical-align: top;
}
hr {
display: none;
}
/* Accessibility Navigation */
#acc-nav {
position: absolute;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
height: 0;
}
#acc-nav a {
display: block;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
width: 1px;
height: 1px;
margin-left: -1px;
margin-bottom: -1px;
text-align: center;
font-weight: bold;
font-size: 0.875em;
color: #000;
white-space: nowrap;
}
#acc-nav a:focus, #acc-nav a:hover, #acc-nav a:active {
width: 100%;
height: auto;
padding: 10px 0;
background: #000;
color: #fff;
z-index: 1000;
}
/* Layout Selector */
#header {
position: relative;
width: 100%;
}
#header h1 {
padding: 28px 0;
text-align: center;
font-size: 1.5em;
line-height: 1;
color: #1a1a1a;
}
#header h1 a {
display: inline-block;
text-decoration: none;
vertical-align: top;
color: #1a1a1a;
}
#header .mobile-menu {
position: absolute;
top: 20px;
left: 33px;
z-index: 500;
width: 40px;
height: 40px;
outline: none;
}
#header .mobile-menu span {
position: absolute;
top: 50%;
left: 50%;
width: 26px;
height: 2px;
margin: -2px 0 0 -13px;
background-color: #000;
text-indent: -999em;
}
#header .mobile-menu:before,
#header .mobile-menu:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 26px;
height: 2px;
margin-left: -13px;
background-color: #000
}
#header .mobile-menu:before {
margin-top: -9px;
}
#header .mobile-menu:after {
margin-top: 5px;
}
#header .mobile-menu.on {
position: fixed;
}
#header .mobile-menu.on span {
display: none;
}
#header .mobile-menu.on:before,
#header .mobile-menu.on:after {
margin-top: -2px;
}
#header .mobile-menu.on:before {
transform: rotate(-45deg);
}
#header .mobile-menu.on:after {
transform: rotate(45deg);
}
#header .menu {
position: fixed;
top: 0;
left: -348px;
z-index: 400;
width: 348px;
height: 100%;
padding: 94px 40px 189px;
background-color: #fff;
box-sizing: border-box;
transition: left .5s ease-in-out;
}
#header .menu .social-link {
position: absolute;
left: 40px;
bottom: 129px;
}
#header .menu p {
position: absolute;
left: 40px;
bottom: 79px;
font-size: 0.75em;
color: #9b9b9b;
}
#header .menu.on {
left: 0;
}
#header .search {
position: absolute;
top: 20px;
right: 19px;
width: 0;
padding-right: 40px;
}
#header .search input {
display: none;
width: 100%;
height: 40px;
padding: 0 10px;
font-size: 1em;
line-height: 40px;
color: #000;
border: 0;
box-sizing: border-box;
background-color: transparent;
}
#header .search button {
display: none;
position: absolute;
top: 0;
right: 0;
z-index: 10;
width: 40px;
height: 40px;
background: url(./images/ico_package.png) no-repeat 0 0;
text-indent: -999em;
outline: none;
}
#header .search:before {
content: "";
position: absolute;
top: 0;
right: 0;
z-index: 20;
width: 40px;
height: 40px;
background: url(./images/ico_package.png) no-repeat 0 0;
text-indent: -999em;
cursor: pointer;
}
#header .search:hover:before {
background-color: #ebebeb;
}
#header .search.on {
width: 322px;
border-bottom: 1px solid #000;
}
#header .search.on input {
display: block;
outline: none;
}
#header .search.on button {
display: block;
}
#header .search.on:before {
display: none;
}
#gnb {
overflow: auto;
height: 100%;
margin-bottom: 8px;
}
#gnb ul li {
margin-bottom: 6px;
font-size: 1.125em;
line-height: 1.5;
}
#gnb ul li a {
display: block;
text-decoration: none;
color: #000;
}
#gnb ul li ul li ul li a.link_sub_item{
color: #333;
}
#gnb ul li a:hover {
text-decoration: underline;
color: #4e2e28;
}
#gnb ul li ul {
margin: 22px 0 0;
}
#gnb ul li ul li {
font-size: 1em;
}
#gnb ul li ul li ul {
margin: 6px 0 13px;
}
#gnb ul li ul li ul li {
margin: 0;
font-size: 0.875rem;
line-height: 1.5625rem;
}
#gnb ul li ul li ul li a:before {
content: "-";
margin-right: 5px;
color: #333;
}
#gnb ul li ul li ul li a {
padding:0 12px;
}
#content .inner {
max-width: 960px;
margin: 0 auto;
}
#content>.inner {
max-width: 860px;
}
#content .inner:after {
content: "";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
#footer {
position: relative;
padding: 29px 0;
border-top: 1px solid #ebebeb;
}
#footer p {
text-align: center;
font-size: 0.75em;
color: #9b9b9b;
}
#footer p a {
text-decoration: none;
color: #9b9b9b;
}
#footer .admin {
color: #666;
}
#footer .admin:before {
content: "";
display: inline-block;
width: 1px;
height: 15px;
margin: 0 9px;
background-color: #b2b2b2;
vertical-align: middle;
}
#tt-body-index #footer {
border-top: 0;
}
/* Components */
.social-link a {
display: inline-block;
width: 18px;
height: 18px;
margin-right: 5px;
text-indent: -999em;
background-image: url(./images/ico_package.png);
background-repeat: no-repeat;
vertical-align: top;
}
.social-link a:hover {
background-position-y: -68px;
}
.social-link .pinterest {
background-position: 0 -50px;
}
.social-link .facebook {
background-position: -50px -50px;
}
.social-link .twitter {
background-position: -100px -50px;
}
.social-link .instagram {
background-position: -150px -50px;
}
.btn, a.btn {
display: inline-block;
width: 158px;
height: 50px;
border: 1px solid #dcdcdc;
font-size: 0.875em;
line-height: 50px;
}
.btn:hover {
border-color: #4d4d4d;
}
.cover-thumbnail-list {
margin: 0 auto -1px;
padding: 40px 0 56px;
border-bottom: 1px solid #ebebeb;
}
.cover-thumbnail-list h2 {
margin-bottom: 26px;
font-size: 1em;
}
.cover-thumbnail-list ul {
width: 100%;
}
.cover-thumbnail-list ul li {
float: left;
width: 24.0625%;
margin: 0 0 32px;
padding-left: 1.25%;
}
.cover-thumbnail-list ul li:nth-child(4n+1){
clear: both;
padding-left: 0;
}
.cover-thumbnail-list ul li a {
display: block;
text-decoration: none;
color: #080808;
}
.cover-thumbnail-list ul li .thum {
display: block;
position: relative;
overflow: hidden;
height: 0;
margin-bottom: 11px;
padding-bottom: 75.757575757575758%;
background-color: #f6f6f6;
}
.cover-thumbnail-list ul li .thum:before {
content: "NO IMAGE";
position: absolute;
top: 50%;
left: 0;
z-index: 0;
width: 100%;
height: 18px;
margin: -9px 0 0 0;
text-align: center;
font-family: 'Arial';
font-weight: bold;
font-size: 0.875em;
color: #cbcbcb;
}
.cover-thumbnail-list ul li .thum img {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
}
.cover-thumbnail-list ul li .category {
display: inline-block;
margin-bottom: 8px;
border-bottom: 1px solid #a3a3a3;
font-family: 'Nanum Myeongjo', serif;
font-size: 0.875em;
color: #808080;
}
.cover-thumbnail-list ul li .title {
display: block;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 2.75em;
padding-right: 10%;
font-weight: 700;
line-height: 1.375em;
}
.cover-thumbnail-list ul li a:hover .title {
text-decoration: underline;
color: #4e2e28;
}
.cover-thumbnail-list ul li .date {
display: block;
font-size: 0.8125em;
color: #999;
}
.cover-slider {
position: relative;
overflow: hidden;
width: 100%;
background-color: #000;
}
.cover-slider ul li {
display: table;
width: 100%;
height: 460px;
text-align: center;
background-position: 50% 50%;
background-size: cover;
}
.cover-slider ul li a {
display: table-cell;
background-color: rgba(0,0,0,0.25);
text-decoration: none;
color: #fff;
vertical-align: middle;
}
.cover-slider ul li .category {
display: inline-block;
margin-bottom: 16px;
border-bottom: 1px solid #fff;
}
.cover-slider ul li .title {
display: block;
max-width: 580px;
margin: 0 auto 28px;
font-size: 2.5em;
line-height: 1.3;
}
.cover-slider ul li .btn {
border-color: #fff;
color: #fff;
}
.cover-slider ul li .btn:hover {
background-color: #fff;
color: #000;
}
.cover-slider .prev,
.cover-slider .next {
position: absolute;
top: 50%;
left: 50%;
z-index: 20;
width: 70px;
height: 70px;
margin: -25px 0 0 0;
background: url(./images/ico_package.png) no-repeat 0 -250px;
text-indent: -999em;
}
.cover-slider .prev {
margin-left: -506px;
background-position: 0 -250px;
}
.cover-slider .next {
margin-left: 436px;
background-position: -100px -250px;
}
.cover-slider .prev:hover,
.cover-slider .next:hover {
background-color: rgba(255,255,255,0.2);
}
.cover-masonry {
margin-bottom: -1px;
padding: 60px 0 49px;
border-bottom: 1px solid #ebebeb;
}
.cover-masonry h2 {
margin-bottom: 30px;
font-size: 1em;
}
.cover-masonry ul {
display: inline-block;
margin-left: -42px;
vertical-align: top;
}
.cover-masonry ul li {
float: left;
width: 33.3333%;
margin: 0 0 37px;
padding-left: 42px;
box-sizing: border-box;
}
.cover-masonry ul li a {
display: block;
text-decoration: none;
color: #080808;
}
.cover-masonry ul li .thum {
display: block;
margin-bottom: 11px;
}
.cover-masonry ul li .thum img {
width: 100%;
height: auto;
}
.cover-masonry ul li .category {
display: inline-block;
margin-bottom: 7px;
border-bottom: 1px solid #a3a3a3;
font-family: 'Nanum Myeongjo', serif;
font-size: 0.875em;
color: #808080;
}
.cover-masonry ul li .title {
display: block;
font-weight: 700;
font-size: 1.125em;
line-height: 1.4444;
}
.cover-masonry ul li a:hover .title {
text-decoration: underline;
color: #4e2e28;
}
.cover-masonry ul li .excerpt {
display: block;
display:-webkit-box;
-webkit-line-clamp:4;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 6.4em;
font-size: 0.9375em;
line-height: 1.6;
color: #666;
}
.cover-list {
margin-bottom: -1px;
padding: 30px 0 60px;
border-bottom: 1px solid #ebebeb;
}
.cover-list h2 {
margin: 30px 0 0 0;
font-size: 1em;
}
.cover-list ul li {
border-top: 1px solid #ebebeb;
}
.cover-list ul li:first-child {
border-top: 0;
}
.cover-list ul li a {
display: block;
min-height: 172px;
padding: 30px 0 30px;
text-decoration: none;
color: #080808;
}
.cover-list ul li figure {
float: right;
position: relative;
width: 172px;
height: 172px;
margin: 0 0 0 80px;
background-color: #f6f6f6;
}
.cover-list ul li figure:before {
content: "NO IMAGE";
position: absolute;
top: 50%;
left: 0;
z-index: 0;
width: 100%;
height: 18px;
margin: -9px 0 0 0;
text-align: center;
font-family: 'Arial';
font-weight: bold;
font-size: 0.875em;
color: #cbcbcb;
}
.cover-list ul li figure img {
position: relative;
z-index: 10;
width: 100%;
height: 100%;
}
.cover-list ul li .category {
display: inline-block;
margin-bottom: 7px;
border-bottom: 1px solid #a3a3a3;
font-family: 'Nanum Myeongjo', serif;
font-size: 0.875em;
color: #808080;
}
.cover-list ul li .title {
display: block;
font-weight: 700;
font-size: 1.125em;
line-height: 1.4444em;
}
.cover-list ul li a:hover .title {
text-decoration: underline;
color: #666;
}
.cover-list ul li .excerpt {
display: block;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 4.8em;
font-size: 0.9375em;
line-height: 1.6;
color: #666;
}
.cover-list ul li .date {
display: block;
font-size: 0.8125em;
color: #999;
}
.cover-gallery {
margin: 0 auto -1px;
padding: 60px 0 75px;
border-bottom: 1px solid #ebebeb;
}
.cover-gallery h2 {
margin-bottom: 30px;
font-size: 1em;
}
.cover-gallery ul {
display: inline-block;
margin-left: -12px;
}
.cover-gallery ul li {
float: left;
width: 25%;
margin: 0 0 12px 0;
padding-left: 12px;
box-sizing: border-box;
}
.cover-gallery ul li a {
display: block;
position: relative;
width: 100%;
background-color: #ebebeb;
}
.cover-gallery ul li .title {
display: block;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
position: absolute;
top: 50%;
left:0;
z-index: 30;
overflow: hidden;
width: 100%;
max-height: 4.2em;
text-align: center;
line-height: 1.4;
padding: 0 20px;
color: #fff;
box-sizing: border-box;
transform: translateY(-50%);
visibility: hidden;
}
.cover-gallery ul li a:hover .title {
visibility: visible;
}
.cover-gallery ul li a:hover:after {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: 20;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
}
.cover-gallery ul li a:before {
content: "NO IMAGE";
position: absolute;
top: 50%;
left: 0;
z-index: 0;
width: 100%;
height: 18px;
margin: -9px 0 0 0;
text-align: center;
font-family: 'Arial';
font-weight: bold;
font-size: 0.875em;
color: #cbcbcb;
}
.cover-gallery ul li figure {
height: 0;
padding-bottom: 100%;
}
.cover-gallery ul li figure img {
position: relative;
width: 100%;
height: auto;
z-index: 10;
}
.cover-footer {
position: relative;
z-index: 10;
text-align: center;
}
.cover-footer .image {
height: 300px;
margin-bottom: 80px;
background-position: 50% 50%;
background-size: cover;
}
.cover-footer p {
margin: -5px 0 20px;
text-align: center;
font-weight: 700;
font-size: 1.25em;
color: #000;
}
.cover-footer .menu ul {
text-align: center;
}
.cover-footer .menu ul li {
display: inline-block;
margin: 40px 0 48px;
padding: 0 14px;
font-size: 0.875em;
}
.cover-footer .menu ul li a {
display: block;
text-decoration: none;
color: #282828;
}
.cover-footer .menu ul li a:hover {
text-decoration: underline;
color: #4e2e28;
}
.cover-footer p:first-child {
margin-top: 76px;
}
.cover-footer .social-link:first-child a {
margin-top: 80px;
}
.post-header {
position: relative;
overflow: hidden;
max-width: 860px;
margin: 0 auto 30px;
padding: 57px 0 15px;
border-bottom: 1px solid #ebebeb;
}
.post-header h1 {
float: left;
font-size: 1em;
}
.post-header .list-type {
float: right;
}
.post-header .list-type button {
float: left;
width: 24px;
height: 24px;
margin-left: 4px;
background-image: url(./images/ico_package.png);
background-repeat: no-repeat;
text-indent: -999em;
outline: none;
}
.post-header .list-type button:hover {
background-color: #ebebeb;
}
.post-header .list-type .list {
background-position: 0 -200px;
}
.post-header .list-type .thum {
background-position: -100px -200px;
}
.post-header .list-type .list.current {
background-position: -50px -200px;
}
.post-header .list-type .thum.current {
background-position: -150px -200px;
}
.post-item {
overflow: hidden;
width: 100%;
border-bottom: 1px solid #ebebeb;
}
.post-item a {
display: block;
min-height: 148px;
padding: 30px 0 30px;
text-decoration: none;
color: #080808;
}
.post-item:first-child a {
padding-top: 0;
}
.post-item a:hover .title {
text-decoration: underline;
color: #4e2e28;
}
.post-item .thum {
float: right;
overflow: hidden;
max-width: 148px;
margin-left: 80px;
}
.post-item .thum img {
width: 195px;
height: 148px;
margin: 0 0 0 -23.5px;
}
.post-item .category {
display: inline-block;
margin-bottom: 16px;
border-bottom: 1px solid #a3a3a3;
font-family: 'Nanum Myeongjo', serif;
font-size: 0.875em;
color: #808080;
}
.post-item .title {
display: block;
margin-bottom: 8px;
display:-webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 2.8em;
font-weight: 700;
font-size: 1.125em;
line-height: 1.4;
}
.post-item .excerpt {
display: block;
display:-webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient:vertical;
overflow:hidden;
font-size: 0.9375em;
line-height: 1.6;
color: #666;
}
.post-item .excerpt.protected:before {
content: "";
display: inline-block;
width: 9px;
height: 13px;
margin-right: 10px;
background: url(./images/ico_package.png) no-repeat -0 -100px;
vertical-align: baseline;
}
.post-item .date {
display: block;
font-size: 0.8125em;
color: #999;
}
.pagination {
max-width: 860px;
margin: 60px auto 160px;
text-align: center;
}
.pagination .current {
display: none;
}
.pagination .view-more {
display: inline-block;
width: 158px;
height: 50px;
border: 1px solid #dcdcdc;
font-size: 0.875em;
line-height: 50px;
color: #000;
}
.pagination .view-more:hover {
border-color: #4d4d4d;
background: none;
}
.pagination a {
display: inline-block;
width: 24px;
height: 24px;
margin: 0 4px;
text-decoration: none;
font-size: 0.9375em;
line-height: 24px;
color: #b2b2b2;
vertical-align: middle;
}
.pagination a:hover {
background-color: #ebebeb;
}
.pagination .selected {
color: #000;
}
.pagination .prev,
.pagination .next {
width: 50px;
height: 50px;
background-image: url(./images/ico_package.png);
background-repeat: no-repeat;
border: 1px solid #dcdcdc;
text-indent: -999em;
vertical-align: middle;
box-sizing: border-box;
}
.pagination .prev {
background-position: -50px 0;
}
.pagination .next {
background-position: -100px 0;
}
.pagination .prev:hover,
.pagination .next:hover {
background-color: transparent;
border-color: #4d4d4d;
}
.pagination .no-more-prev,
.pagination .no-more-next {display: none;}
.hgroup {
max-width: 860px;
margin: 50px auto 60px;
padding: 0 0 20px;
border-bottom: 1px solid #ebebeb;
}
.hgroup .category {
display: inline-block;
margin-bottom: 16px;
padding-top: 5px;
border-bottom: 1px solid #a3a3a3;
font-family: 'Nanum Myeongjo', serif;
font-size: 0.875em;
color: #808080;
}
.hgroup h1 {
display: block;
margin-bottom: 9px;
font-weight: 700;
font-size: 1.6875em;
line-height: 1.4444em;
}
.hgroup .post-meta {
display: block;
font-size: 0.8125em;
color: #808080;
}
.hgroup .post-meta a {
text-decoration: none;
color: #999;
}
.hgroup .post-meta a:hover {
text-decoration: underline;
}
.hgroup .post-meta span:before {
content: "";
display: inline-block;
width: 1px;
height: 10px;
margin: 0 7px 0 10px;
background-color: #ebebeb;
vertical-align: baseline;
}
.hgroup .post-meta span:first-child:before {
content: none;
}
.another_category {
margin: 60px auto 80px;
padding: 0 !important;
border: 0 !important;
}
.another_category h4 {
margin-bottom: 28px;
font-weight: 400;
font-size: 1em !important;
}
.another_category h4 em {
border-bottom: 1px solid #000;
font-style: normal;
}
.another_category table {
width: 100%;
border-collapse: collapse;
border: 0 !important;
font-size: 0.9375em;
color: #666;
}
.another_category table th {
padding: 8px 0 4px;
border: 0 !important;
text-align: left;
font-weight: 400;
}
.another_category table th a {
text-decoration: none;
color: #666;
}
.another_category td {
width: 60px;
padding: 8px 0 4px;
border-left: 0 !important;
border-top: 0 !important;
font-size: 0.8125em;
line-height: 1;
color: #b2b2b2;
}
.tags {
position: relative;
overflow: hidden;
max-width: 860px;
margin: 53px auto;
padding: 27px 0 28px 47px;
border-top: 1px solid #ebebeb;
border-bottom: 1px solid #ebebeb;
color: #999;
box-sizing: border-box;
}
.tags h2 {
float: left;
width: 47px;
margin-left: -47px;
font-weight: 400;
font-size: 1em;
color: #000;
}
.tags .items a {
display:inline-block;
margin-left: 15px;
text-decoration:none;
font-size: 0.8125em;
line-height: 1.5384;
color: #999;
}
.tags .items a:hover {
color: #7a583a;
}
.tags .items a:before {
content: "#";
}
.related-articles {
overflow: hidden;
width: 100%;
margin: 57px 0 69px;
}
.related-articles h2 {
margin-bottom: 28px;
font-weight: 400;
font-size: 1em;
}
.related-articles h2 em {
border-bottom: 1px solid #000;
font-style: normal;
}
.related-articles ul {
}
.related-articles ul li {
float: left;
width: 24.0625%;
padding-left: 1.25%;
}
.related-articles ul li:first-child {
padding-left: 0;
}
.related-articles ul li a {
display: block;
text-decoration: none;
color: #080808;
}
.related-articles ul li a:hover .title {
text-decoration: underline;
color: #4e2e28;
}
.related-articles ul li .thum {
display: block;
position: relative;
overflow: hidden;
height: 0;
margin-bottom: 12px;
padding-bottom: 75.757575757575758%;
background-color: #ebebeb;
}
.related-articles ul li .thum:before {
content: "NO IMAGE";
position: absolute;
top: 50%;
left: 0;
z-index: 0;
width: 100%;
height: 18px;
margin: -9px 0 0 0;
text-align: center;
font-family: 'Arial';
font-weight: bold;
font-size: 0.875em;
color: #cbcbcb;
}
.related-articles ul li .thum img {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
}
.related-articles ul li .category {
display: inline-block;
margin-bottom: 16px;
border-bottom: 1px solid #a3a3a3;
font-family: 'Nanum Myeongjo', serif;
font-size: 0.875em;
color: #808080;
}
.related-articles ul li .title {
display: block;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 2.75em;
margin-bottom: 9px;
font-weight: 700;
line-height: 1.375;
}
.related-articles ul li .date {
display: block;
font-size: 0.8125em;
color: #999;
}
/* Entry Content */
.entry-content h1 {
margin: 60px 0 19px;
font-size: 1.6875em;
}
.entry-content h2 {
margin: 60px 0 19px;
font-size: 1.5em;
}
.entry-content h3 {
margin: 60px 0 19px;
font-weight: 700;
font-size: 1.3125em;
}
.entry-content h4 {
margin: 60px 0 19px;
font-weight: 400;
font-size: 1.125em;
}
.entry-content p {
margin-bottom: 24px;
font-size: 0.9375em;
line-height: 1.6;
color: #666;
}
.entry-content p img {
max-width: 100%;
height: auto;
margin-top: 36px;
}
.entry-content hr {
display: block;
border: 0;
border-bottom: 1px solid #000;
height: 4px !important;
margin: 10px 0px !important;
}
.entry-content pre {
/*
word-break:break-all;
white-space:pre-wrap;
word-wrap:break-word;
*/
background: #f8f8f8;
border: 1px solid #000;
margin: 5px 0px;
padding: 10px;
}
.entry-content pre code {
tab-size: 4;
font-family: 'Open Sans', sans-serif;
overflow-x: auto;
}
.entry-content ul,
.entry-content ol {
margin-bottom: 10px;
}
.entry-content ul {
list-style: disc inside;
}
.entry-content ul li {
position: relative;
padding-left: 22px;
font-size: 0.9375em;
line-height: 1.6;
color: #666;
list-style: inherit;
text-indent: -22px;
}
.entry-content ol {
list-style: inside decimal;
}
.entry-content ol li {
position: relative;
padding-left: 16px;
font-size: 0.9375em;
line-height: 1.6;
color: #666;
text-indent: -15px;
list-style: inherit;
}
.entry-content a {
color: #666;
}
.entry-content img.alignleft {
float: left;
margin: 0 22px 22px 0;
}
.entry-content img.aligncenter {
display: block;
margin: 0 auto 22px;
}
.entry-content img.alignright {
float: right;
margin: 0 0 22px 22px;
}
.entry-content blockquote {
margin-bottom: 60px;
padding: 16px 20px;
border-left: 4px solid #e6e6e6;
}
.entry-content blockquote p {
margin: 22px 0 0;
}
.entry-content blockquote p:first-child {
margin-top: 0;
}
.entry-content table {
width:100%;
margin-bottom: 22px;
border: 1px solid #e6e6e6;
border-collapse: collapse;
text-align: center;
font-size: 0.875em;
line-height: 1.5714;
color: #666;
}
.entry-content table thead th {
padding:7px 0 11px;
border-left: 1px solid #e6e6e6;
}
.entry-content table tbody td {
padding:7px 0 11px;
border-left: 1px solid #e6e6e6;
border-top: 1px solid #e6e6e6;
}
.entry-content input {
display: inline-block;
height: 40px;
padding: 0 10px;
border: 1px solid #e6e6e6;
font-size: 0.875em;
line-height: 1.25;
color: #666;
box-sizing: border-box;
vertical-align: middle;
}
.entry-content .protected_form {
margin-bottom: 40px;
padding: 120px 0 200px;
border-bottom: 1px solid #7a583a;
text-align: center;
}
.entry-content .protected_form p:before {
content: "";
display: block;
width: 64px;
height: 84px;
margin: 0 auto 30px;
background: url(./images/ico_package.png) no-repeat -50px -100px;
}
.entry-content .protected_form input {
width: 220px;
height: 50px;
margin-bottom: 10px;
background-color: transparent;
vertical-align: top;
}
.entry-content .cap1 {
text-align: center;
font-size: 0.875em;
font-style: italic;
}
.entry-content .iframe-wrap {
position: relative;
height: 0;
padding-bottom: 56.25%;
}
.entry-content .iframe-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Comment */
.comments {
max-width: 860px;
margin: 0 auto 60px;
padding-bottom: 30px;
border-bottom: 1px solid #e6e6e6;
}
.comments h2 {
font-weight: 400;
font-size: 1em;
color: #000;
}
.comments .comment-list {
font-size:16px;
margin-bottom: 6px;
overflow:hidden;
}
.comments .comment-list ul li {
padding: 30px 0 25px;
border-top: 1px solid #e6e6e6;
position: relative;
min-height: 48px;
}
.comments .comment-list ul li:first-child {
border: none;
}
.comments .comment-list ul li ul li {
padding: 26px 0 0 60px;
border-top: 0;
border-bottom: 0;
}
.comments .comment-list ul li .author-meta {
position: absolute;
overflow: hidden;
top:30px; height:48px;
left:0; right:0;
padding: 4px 0 0 60px;
}
.comments .comment-list ul li ul li .author-meta {
top:26px;
left:60px;
}
.comments .comment-list ul li .author-meta .avatar {
position: absolute;
left:0; top:0;
width: 48px;
height: 48px;
border-radius: 50%;
}
.comments .comment-list ul li .author-meta span {
display:inline-block;
}
.comments .comment-list ul li .author-meta a {
text-decoration:none;
color: #000;
}
.comments .comment-list ul li .author-meta .nickname {
float:left;
font-size: 0.875em;
line-height: 20px;
}
.comments .comment-list ul li .author-meta .nickname .tistoryProfileLayerTrigger {
margin-bottom: 3px;
margin-right: 0;
vertical-align: bottom;
}
.comments .comment-list ul li .author-meta .date {
float:left;
margin-left: 10px;
font-size: 0.75em;
color: #999;
line-height:20px;
}
.comments .comment-list ul li .author-meta .date:before,
.comments .comment-list ul li .author-meta .date a:before {
content: "";
display: inline-block;
width: 1px;
height: 9px;
margin-right: 10px;
background-color: #b2b2b2;
}
.comments .comment-list ul li .author-meta .date a {
margin-left: 10px;
}
.comments .comment-list ul li .control {
position: absolute;
top: 33px;
right:0;
}
.comments .comment-list ul li ul li .control {
top: 29px;
}
.comments .comment-list ul li .control a {
margin:0 2px;
text-decoration: none;
font-size: 12px;
color: #999;
}
.comments .comment-list ul li p {
position:relative;
margin: 29px 0 0 60px;
font-size: 0.875em;
line-height: 1.5714;
color: #666;
}
.comments .comment-form .field {
position: relative;
overflow: hidden;
width: 100%;
margin-bottom: 8px;
}
.comments .comment-form input[type=text],
.comments .comment-form input[type=password],
.comments .comment-form textarea {
border: 1px solid #e6e6e6;
font-size: 0.9375em;
line-height: 1.25;
color: #666;
background-color: transparent;
}
.comments .comment-form input[type=text],
.comments .comment-form input[type=password] {
width: 140px;
height: 52px;
margin-right: 6px;
padding: 10px;
box-sizing: border-box;
}
.comments .comment-form input::-webkit-input-placeholder,
.comments .comment-form textarea::-webkit-input-placeholder {color: #d6d6d6;}
.comments .comment-form textarea {
display: block;
width: 100%;
margin-bottom: 10px;
padding: 10px;
resize: none;
box-sizing: border-box;
}
.comments .comment-form .field .secret {
display: inline-block;
margin-left: 15px;
vertical-align: middle;
}
.comments .comment-form .field .secret input {
display: none;
}
.comments .comment-form .field .secret label {
font-size: 0.8125em;
line-height: 52px;
color: #666;
outline: none;
cursor: pointer;
}
.comments .comment-form .field .secret label:before {
content: "";
display: inline-block;
width: 19px;
height: 18px;
margin-right: 9px;
border: 1px solid #e1e1e1;
vertical-align: middle;
background-color: #fff;
}
.comments .comment-form .field .secret input[type=checkbox]:checked+label:before {
background-image: url(./images/ico_package.png);
background-repeat: no-repeat;
background-position: -150px -100px;
}
.comments .comment-form .field .submit {
float: right;
}
/* Widget & Template Page */
/* ETC */
#dimmed {
position: fixed;
top: 0;
left: 0;
z-index: 300;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.43);
}
/* Post Type & Color Type */
.post-type-thumbnail .post-item {
float: left;
width: 24.0625%;
margin: 0 0 58px;
padding-left: 1.25%;
border: 0;
}
.post-type-thumbnail .post-item:nth-child(4n+1) {
padding-left: 0;
}
.post-type-thumbnail .post-item a {
padding: 0;
}
.post-type-thumbnail .post-item .thum {
display: block;
position: relative;
overflow: hidden;
width: 100%;
max-width: none;
height: 0;
margin: 0 0 9px 0;
padding-bottom: 75.757575757575758%;
background-color: #ebebeb;
}
.post-type-thumbnail .post-item .thum:before {
content: "NO IMAGE";
position: absolute;
top: 50%;
left: 0;
z-index: 0;
width: 100%;
height: 18px;
margin: -9px 0 0 0;
text-align: center;
font-family: 'Arial';
font-weight: bold;
font-size: 0.875em;
color: #cbcbcb;
}
.post-type-thumbnail .post-item .thum img {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
margin: 0;
}
.post-type-thumbnail .post-item .title {
display: block;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
width: 100%;
height: 2.75em;
font-weight: 700;
font-size: 1em;
line-height: 1.375em;
}
.post-type-thumbnail .post-item .excerpt {
display: none;
}
.post-type-thumbnail .pagination {
margin-top: 0;
}
/* Color Type */
.color-chocolate,
.color-chocolate .cover-footer,
.color-chocolate #footer {
background-color: #f4f2f1;
}
.color-chocolate #header h1 a,
.color-chocolate #gnb ul li a,
.color-chocolate #footer .admin,
.color-chocolate .cover-thumbnail-list ul li a,
.color-chocolate .cover-masonry ul li a,
.color-chocolate .cover-list ul li a,
.color-chocolate .cover-footer p,
.color-chocolate .cover-footer .menu ul li a,
.color-chocolate .post-item a,
.color-chocolate .hgroup h1,
.color-chocolate .hgroup .post-meta a,
.color-chocolate .entry-content h1,
.color-chocolate .entry-content h2,
.color-chocolate .entry-content h3,
.color-chocolate .entry-content h4,
.color-chocolate .entry-content a,
.color-chocolate .related-articles ul li a,
.color-chocolate .comments .comment-list ul li .author-meta span,
.color-chocolate .comments .comment-list ul li .author-meta .date a,
.color-chocolate .pagination .selected {
color: #4e2e28;
}
.color-chocolate #header .menu p,
.color-chocolate #footer p,
.color-chocolate .cover-thumbnail-list ul li .date,
.color-chocolate .cover-masonry ul li .excerpt,
.color-chocolate .cover-list ul li .excerpt,
.color-chocolate .cover-list ul li .date,
.color-chocolate .post-item .excerpt,
.color-chocolate .post-item .date,
.color-chocolate .hgroup .post-meta,
.color-chocolate .another-category td,
.color-chocolate .tags .items a,
.color-chocolate .related-articles ul li .date,
.color-chocolate .comments .comment-list ul li .author-meta .date,
.color-chocolate .comments .comment-list ul li .author-meta .control a {
color: #a69693;
}
.color-chocolate .cover-thumbnail-list ul li .category,
.color-chocolate .cover-masonry ul li .category,
.color-chocolate .hgroup .category {
color: #94817e;
}
.color-chocolate .entry-content p,
.color-chocolate .entry-content table,
.color-chocolate .entry-content ul li,
.color-chocolate .entry-content ol li,
.color-chocolate .another-category table,
.color-chocolate .another-category table th a,
.color-chocolate .comments .comment-list ul li p {
color: #836c68;
}
.color-chocolate #gnb ul li a:hover,
.color-chocolate .cover-footer .menu ul li a:hover,
.color-chocolate .cover-thumbnail-list ul li a:hover .title,
.color-chocolate .cover-masonry ul li a:hover .title,
.color-chocolate .cover-list ul li a:hover .title,
.color-chocolate .post-item a:hover .title,
.color-chocolate .related-articles ul li a:hover .title {
color: #2d140f;
}
.color-chocolate .cover-thumbnail-list ul li .category,
.color-chocolate .cover-masonry ul li .category,
.color-chocolate .hgroup .category {
border-color: #a69693;
}
.color-chocolate .entry-content ul li:before {
background-color: #a69693;
}
.color-chocolate #header .mobile-menu:before,
.color-chocolate #header .mobile-menu:after,
.color-chocolate #header .mobile-menu span {
background-color: #4e2e28;
}
.color-chocolate .pagination a:hover,
.color-chocolate #header .search:hover:before {
background-color: #e7e2e1;
}
.color-chocolate .btn,
.color-chocolate .cover-thumbnail-list
.color-chocolate .cover-masonry
.color-chocolate .cover-list
.color-chocolate .cover-gallery,
.color-chocolate .cover-list ul li,
.color-chocolate .post-item,
.color-chocolate .hgroup,
.color-chocolate .entry-content table,
.color-chocolate .entry-content table thead th,
.color-chocolate .entry-content table tbody td,
.color-chocolate .entry-content blockquote,
.color-chocolate .comments,
.color-chocolate .comments .comment-list ul li,
.color-chocolate .comments .comment-form input[type=text],
.color-chocolate .comments .comment-form input[type=password],
.color-chocolate .comments .comment-form textarea,
.color-chocolate .comments .comment-form .field .secret label:before,
.color-chocolate .pagination .prev,
.color-chocolate .pagination .next,
.color-chocolate .pagination a {
border-color: #e7e2e1;
}
.color-chocolate .social-link a,
.color-chocolate #header .search button,
.color-chocolate #header .search:before,
.color-chocolate .cover-thumbnail-list ul li .thum:before,
.color-chocolate .cover-gallery ul li a:before,
.color-chocolate .post-header .list-type button,
.color-chocolate .related-articles ul li .thum:before {
background-image: url(./images/ico_package_chocolate.png);
}
.color-chocolate .btn:hover,
.color-chocolate .pagination .prev:hover,
.color-chocolate .pagination .next:hover {
border-color: #4d4d4d;
}
.color-chocolate #header .search.on {
border-color: #4e2e28;
}
/* Retina Display */
@media only screen and (-webkit-min-device-pixel-ratio:1.5) {
#header .search button,
#header .search:before,
.social-link a,
.cover-slider .prev,
.cover-slider .next,
.cover-gallery ul li a:before,
.post-header .list-type button,
.pagination .prev,
.pagination .next,
.comments .comment-form .field .secret input[type=checkbox]:checked+label:before {
background-image: url(./images/ico_package_2x.png);
background-size: 200px auto;
}
.color-chocolate .social-link a,
.color-chocolate #header .search button,
.color-chocolate .cover-gallery ul li a:before,
.color-chocolate .post-header .list-type button {
background-image: url(./images/ico_package_chocolate_2x.png);
background-size: 200px auto;
}
}
/* Media Screen - Tablet */
@media screen and (max-width:1023px) {
#header .search.on {
width: 180px;
}
#content .guest_inner,
#content>.inner {
padding: 0 40px;
}
.post-header {
padding: 40px;
}
.cover-thumbnail-list {
padding: 40px 40px 65px;
}
.cover-slider ul li .title {
max-width: none;
padding: 0 98px
}
.cover-slider .prev {
left: 14px;
margin-left: 0;
}
.cover-slider .next {
left: auto;
right: 14px;
margin-left: 0;
}
.cover-masonry {
padding: 60px 40px 81px;
}
.cover-list {
padding: 30px 40px 85px;
}
.cover-gallery {
padding: 60px 40px 130px;
}
}
/* Media Screen - Mobie */
@media screen and (max-width:767px) {
#header .mobile-menu {
top: 10px;
left: 11px;
}
#header .menu {
padding: 84px 20px 189px;
}
#header .menu .social-link,
#header .menu p {
left: 20px;
}
#header h1 {
padding: 15px 62px;
line-height: 1.25;
}
#header h1 a {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#header .search {
top: 10px;
right: 1px;
}
#header .search.on {
position: absolute;
top: 60px;
left: 0;
right: auto;
z-index: 100;
width: 100%;
padding: 10px 18px 10px 17px;
border: 0;
background-color: #fff;
box-sizing: border-box;
}
#header .search.on input {
border-bottom: 1px solid #000;
}
#header .search.on button {
top: -50px;
right: 1px;
}
#content .guest_inner,
#content>.inner {
padding: 0 18px;
}
.post-header {
padding: 20px 18px;
}
.cover-thumbnail-list {
padding: 40px 18px 65px;
}
.cover-thumbnail-list ul li,
.related-articles ul li {
width: 48.591549295774648%;
padding-left: 2.816901408450704%;
}
.cover-thumbnail-list ul li:nth-child(odd),
.related-articles ul li:nth-child(odd) {
clear: both;
padding-left: 0;
}
.cover-slider ul li {
width: 100%;
box-sizing: border-box;
}
.cover-slider ul li .title {
display:-webkit-box;
-webkit-line-clamp:4;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 5.2em;
padding: 0 18px;
font-size: 2.125em;
}
.cover-slider .prev {
top: auto;
bottom: 0;
left: 0;
}
.cover-slider .next {
top: auto;
right: 0;
bottom: 0;
}
.cover-masonry {
padding: 60px 18px 81px;
}
.cover-masonry ul li {
float: none;
width: 100%;
}
.cover-masonry ul li .category,
.cover-list ul li .category {
margin-bottom: 8px;
}
.cover-thumbnail-list ul li .title,
.related-articles ul li .title,
.cover-list ul li .title {
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 4.2em;
line-height: 1.4;
}
.cover-list {
padding: 30px 18px 80px;
}
.cover-list h2{
margin: 30px 0 0 0;
}
.cover-list ul li a {
min-height: 98px;
}
.cover-list ul li figure {
width: 113px;
height: 113px;
margin: 0 0 0 18px;
}
.cover-list ul li .title {
-webkit-line-clamp: 2;
margin-bottom: 3px;
padding-top: 6px;
font-size: 1em;
}
.cover-list ul li .category {
display: none;
}
.cover-list ul li .excerpt {
-webkit-line-clamp: 2;
font-size: 0.8125em;
line-height: 1.5;
}
.cover-gallery {
padding: 60px 18px 130px;
}
.cover-gallery ul li {
width: 50%;
}
.post-item a {
min-height: 100px;
}
.post-item .thum {
max-width: 113px;
margin-left: 18px;
}
.post-item .thum img {
width: auto;
height: 113px;
margin: 0 0 0 -16.5px;
}
.post-item .title {
line-height: 1.2;
}
.post-item .excerpt {
-webkit-line-clamp: 2;
}
.post-type-thumbnail .post-item {
width: 48.591549295774648%;
margin-bottom: 26px;
padding-left: 2.816901408450704%;
}
.post-type-thumbnail .post-item:nth-child(4n+1) {
padding-left: 2.816901408450704%;
}
.post-type-thumbnail .post-item:nth-child(2n+1) {
clear: both;
padding-left: 0%;
}
.post-type-thumbnail .post-item .title {
-webkit-line-clamp: 3;
height: auto;
max-height: 4.125em;
}
.entry-content .table-wrap {
overflow: auto;
width: 100%;
}
.entry-content table {
width: 680px;
table-layout: fixed;
}
.entry-content .protected_form input {
display: block;
width: 160px;
margin: 0 auto 10px;
}
.pagination {
padding: 0 18px;
}
.pagination a {
display: none;
}
.pagination .current {
display: block;
font-size: 0.875em;
line-height: 50px;
}
.pagination .prev {
display: block;
float: left;
margin: 0;
}
.pagination .next {
display: block;
float: right;
margin: 0;
}
.another-category table th {
display: block;
padding: 0;
}
.another-category table td {
display: block;
margin-bottom: 19px;
}
.comments .comment-list {
margin-bottom:10px;
margin-top:10px;
border-top: 1px solid #e6e6e6;
}
.comments .comment-list ul li {
padding-bottom:0;
}
.comments .comment-list ul li ul {
border-top: 1px solid #e6e6e6;
}
.comments .comment-list ul li ul li {
padding:20px 0 0 48px;
}
.comments .comment-list ul li ul li:before {
content: "";
position: absolute;
top: 34px;
left:18px;
width: 12px;
height: 12px;
background: url(./images/ico_package.png) no-repeat 0 -150px;
}
.comments .comment-list ul li .author-meta,
.comments .comment-list ul li ul li .author-meta {
position:relative;
top:0;
left:0;
}
.comments .comment-list ul li .author-meta img {
position: absolute;
top: 0;
left: 0;
}
.comments .comment-list ul li .author-meta .nickname,
.comments .comment-list ul li .author-meta .date {
display: block;
float: none;
line-height: 1.5;
}
.comments .comment-list ul li .author-meta .nickname .tistoryProfileLayerTrigger {
margin-bottom:4px;
}
.comments .comment-list ul li .author-meta .date {
margin-left: 0;
margin-top: 2px;
}
.comments .comment-list ul li .author-meta .date::before {
display: none;
}
.comments .comment-list ul li p {
margin: 14px 0 0;
}
.comments .comment-list ul li .control {
position: relative;
top: auto;
right: auto;
display: block;
margin: 9px 0 18px -2px;
}
.comments .comment-list ul li ul li .control {
top: auto;
}
.comments .comment-form input[type=text],
.comments .comment-form input[type=password] {
width: 100px;
}
.comments .comment-form .field .secret {
margin-left: 0;
}
.comments .comment-form .field .secret label:before {
margin-right: 5px;
}
.comments .comment-form .field .submit {
display: block;
float: none;
margin: 60px auto 0;
}
}
반응형
<form class="protected_form" onsubmit="{reloadEntry(17);return false;}">
<p>보호되어 있는 글입니다.<br>
내용을 보시려면 비밀번호를 입력하세요.</p>
<fieldset>
<input type="password" id="entry17password" name="entry17password" value="" placeholder="비밀번호" />
<button type="submit" class="btn">입력</button>
</fieldset>
</form>
</div>
</s_permalink_article_rep>
</s_article_protected>
<s_article_rep>
<s_index_article_rep>
<div class="post-item">
<a href="/17">
<span class="thum">
<s_article_rep_thumbnail>
<img src="//i1.daumcdn.net/thumb/C264x200/?fname=" alt="">
</s_article_rep_thumbnail>
</span>
<span class="title">[생활IT] 티스토리(Tistory) 설정</span>
<span class="excerpt">HTML 본문 바로가기 메뉴 Pinterest Facebook Twitter Instagram POWERED BY TISTORY 검색 더보기 Pinterest Facebook Twitter Instagram 수정 삭제 () '' Related Articles 댓글주소 수정/삭제 댓글쓰기 댓글주소 수정/삭제 Secret 댓글달기 태그 방명록 안부 남기기 수정/삭제 댓글쓰기 수정/삭제 이전 다음 DESIGN BY TISTORY 관리자 CSS @charset "utf-8"; /* * * CSS CONTENTS: * * 01. Web Font * 02. Type Selector Reset * 03. Accessibility Navigation * 04. Layout Selector * 05. Components..</span>
</a>
</div>
</s_index_article_rep>
<s_permalink_article_rep>
<div class="hgroup">
<div class="category">IT TMI/생활 IT</div>
<h1>[생활IT] 티스토리(Tistory) 설정 </h1>
<div class="post-meta">
<span class="author">키플레이어</span>
<span class="date">2019. 11. 4. 10:54</span>
<s_ad_div>
<span><a href="">수정</a></span>
<span><a href="#" onclick="">삭제</a></span>
</s_ad_div>
</div>
</div>
<div class="entry-content">
반응형
HTML
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
<title>[생활IT] 티스토리(Tistory) 설정</title>
<link rel="stylesheet" href="./style.css">
<script src="//t1.daumcdn.net/tistory_admin/lib/jquery/jquery-1.12.4.min.js"></script>
<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=-------------"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-152725149-1');
</script>
<!-- 코드블럭 하이라이트 -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.9/styles/github.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.9/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script>
<!-- 애드센스 -->
<script data-ad-client="---------------" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</head>
<body id="tt-body-page" class="<s_if_var_color-type></s_if_var_color-type><s_if_var_post-type> </s_if_var_post-type><s_if_var_view-more> paging-view-more</s_if_var_view-more>">
<s_t3>
<div id="acc-nav">
<a href="#content">본문 바로가기</a>
</div>
<div id="wrap">
<header id="header">
<h1><a href="https://coding-house.tistory.com/">Keyplayer's CodingHouse</a></h1>
<button type="button" class="mobile-menu"><span>메뉴</span></button>
<div class="menu">
<nav id="gnb">
</nav>
<div class="social-link">
<s_if_var_sns-pinterest><a href="" class="pinterest">Pinterest</a></s_if_var_sns-pinterest>
<s_if_var_sns-facebook><a href="" class="facebook">Facebook</a></s_if_var_sns-facebook>
<s_if_var_sns-twitter><a href="" class="twitter">Twitter</a></s_if_var_sns-twitter>
<s_if_var_sns-instagram><a href="" class="instagram">Instagram</a></s_if_var_sns-instagram>
</div>
<p>POWERED BY TISTORY</p>
</div>
<div class="search">
<s_search>
<input type="text" name="" value="" placeholder="검색내용을 입력하세요." onkeypress="if (event.keyCode == 13) { }">
<button type="submit" onclick="">검색</button>
</s_search>
</div>
</header>
<hr>
<section class="container">
<article id="content">
<s_cover_group>
<s_cover_rep>
<s_cover name='cover-thumbnail-list'>
<div class='cover-thumbnail-list'>
<div class="inner">
<h2></h2>
<ul>
<s_cover_item>
<li>
<a href="">
<span class="thum"><s_cover_item_thumbnail><img src="//i1.daumcdn.net/thumb/C264x200/?fname=" alt=""></s_cover_item_thumbnail></span>
<s_cover_item_article_info>
<span class="category"></span>
</s_cover_item_article_info>
<span class="title"></span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</div>
</s_cover>
<s_cover name='cover-slider'>
<div class="cover-slider">
<ul>
<s_cover_item>
<li<s_cover_item_thumbnail> style="background-image:url();"</s_cover_item_thumbnail>>
<a href="" class="text-box">
<s_cover_item_article_info>
<span class="category"></span>
</s_cover_item_article_info>
<span class="title"></span>
<span class="btn view">더보기</span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</s_cover>
<s_cover name='cover-masonry'>
<div class="cover-masonry">
<div class="inner">
<h2></h2>
<ul>
<s_cover_item>
<li>
<a href="">
<span class="thum"><s_cover_item_thumbnail><img src="//i1.daumcdn.net/thumb/R600x0/?fname=" alt=""></s_cover_item_thumbnail></span>
<s_cover_item_article_info>
<span class="category"></span>
</s_cover_item_article_info>
<span class="title"></span>
<span class="excerpt"></span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</div>
</s_cover>
<s_cover name='cover-list'>
<div class="cover-list">
<div class="inner">
<h2></h2>
<ul>
<s_cover_item>
<li>
<a href="">
<figure>
<s_cover_item_thumbnail><img src="//i1.daumcdn.net/thumb/C600x600/?fname=" alt=""></s_cover_item_thumbnail>
</figure>
<s_cover_item_article_info>
<span class="category"></span>
</s_cover_item_article_info>
<span class="title"></span>
<span class="excerpt"></span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</div>
</s_cover>
<s_cover name='cover-gallery'>
<div class="cover-gallery">
<div class="inner">
<h2></h2>
<ul>
<s_cover_item>
<li>
<a href="">
<figure>
<s_cover_item_thumbnail><img src="//i1.daumcdn.net/thumb/C600x600/?fname=" alt=""></s_cover_item_thumbnail>
</figure>
<span class="title"></span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</div>
</s_cover>
</s_cover_rep>
<div class="cover-footer">
<s_if_var_footer-image>
<div class="image" style="background-image:url();"></div>
</s_if_var_footer-image>
<s_if_var_footer-text>
<p></p>
</s_if_var_footer-text>
<div class="social-link">
<s_if_var_sns-pinterest><a href="" class="pinterest"><span class="">Pinterest</span></a></s_if_var_sns-pinterest>
<s_if_var_sns-facebook><a href="" class="facebook">Facebook</a></s_if_var_sns-facebook>
<s_if_var_sns-twitter><a href="" class="twitter">Twitter</a></s_if_var_sns-twitter>
<s_if_var_sns-instagram><a href="" class="instagram">Instagram</a></s_if_var_sns-instagram>
</div>
<nav class="menu">
</nav>
</div>
</s_cover_group>
<s_page_rep>
<div class="hgroup">
<h1></h1>
</div>
<div class="entry-content">
</div>
</s_page_rep>
<s_notice_rep>
<div class="hgroup">
<h1></h1>
<div class="post-meta">
<span class="author"></span>
<span class="date"></span>
<s_ad_div>
<span><a href="">수정</a></span>
<span><a href="#" onclick="">삭제</a></span>
</s_ad_div>
</div>
</div>
<div class="entry-content">
</div>
</s_notice_rep>
<s_list>
<div class="post-header">
<span><h1></h1></span>
<span style="padding-left: 5px; font-weight: bold;">()</h</span>
<div class="list-type">
<button type="button" class="thum">썸네일형</button>
<button type="button" class="list">리스트형</button>
</div>
</div>
</s_list>
<div class="inner">
<s_article_protected>
<s_index_article_rep>
<div class="post-item">
<a href="">
<span class="thum"></span>
<span class="title"></span>
<span class="excerpt protected">보호되어 있는 글입니다.</span>
</a>
</div>
</s_index_article_rep>
<s_permalink_article_rep>
<div class="hgroup">
<div class="category">보호글</div>
<h1> </h1>
<div class="post-meta">
<span class="author"></span>
<span class="date"></span>
</div>
</div>
<div class="entry-content">
<form class="protected_form" onsubmit="">
<p>보호되어 있는 글입니다.<br>
내용을 보시려면 비밀번호를 입력하세요.</p>
<fieldset>
<input type="password" id="" name="" value="" placeholder="비밀번호" />
<button type="submit" class="btn">입력</button>
</fieldset>
</form>
</div>
</s_permalink_article_rep>
</s_article_protected>
<s_article_rep>
<s_index_article_rep>
<div class="post-item">
<a href="">
<span class="thum">
<s_article_rep_thumbnail>
<img src="//i1.daumcdn.net/thumb/C264x200/?fname=" alt="">
</s_article_rep_thumbnail>
</span>
<span class="title"></span>
<span class="excerpt"></span>
</a>
</div>
</s_index_article_rep>
<s_permalink_article_rep>
<div class="hgroup">
<div class="category"></div>
<h1> </h1>
<div class="post-meta">
<span class="author"></span>
<span class="date"></span>
<s_ad_div>
<span><a href="">수정</a></span>
<span><a href="#" onclick="">삭제</a></span>
</s_ad_div>
</div>
</div>
<div class="entry-content">
</div>
<s_tag_label>
<div class="tags">
<h2>태그</h2>
<div class="items">
</div>
</div>
</s_tag_label>
<s_article_related>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 애드센스 -->
<div align="center">
<!-- 고정 사각형 -->
<ins class="adsbygoogle"
style="display:inline-block;width:336px;height:280px;text-align:center;"
data-ad-client="--------------"
data-ad-slot="5339555420"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 고정 사각형 -->
<ins class="adsbygoogle"
style="display:inline-block;width:336px;height:280px;text-align:center;"
data-ad-client="---------------"
data-ad-slot="5339555420"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 애드센스 -->
<div class="related-articles">
<h2><strong>''</strong> Related Articles</h2>
<ul>
<s_article_related_rep>
<li>
<a href="">
<span class="thum">
<s_article_related_rep_thumbnail>
<img src="//i1.daumcdn.net/thumb/C264x200/?fname=" alt="">
</s_article_related_rep_thumbnail>
</span>
<span class="title"></span>
</a>
</li>
</s_article_related_rep>
</ul>
</div>
</s_article_related>
<s_rp>
<div class="comments">
<s_rp_container>
<div class="comment-list">
<ul>
<s_rp_rep>
<li id="">
<div class="author-meta">
<img src="" class="avatar" alt="">
<span class="nickname"></span>
<span class="date"></span>
</div>
<p></p>
<div class="control">
<a href="">댓글주소</a>
<a href="#" onclick="">수정/삭제</a>
<a href="#" onclick="">댓글쓰기</a>
</div>
<s_rp2_container>
<ul>
<s_rp2_rep>
<li id="">
<div class="author-meta">
<img src="" class="avatar" alt="">
<span class="nickname"></span>
<span class="date"></span>
</div>
<p></p>
<div class="control">
<a href="">댓글주소</a>
<a href="#" onclick="">수정/삭제</a>
</div>
</li>
</s_rp2_rep>
</ul>
</s_rp2_container>
</li>
</s_rp_rep>
</ul>
</div>
</s_rp_container>
<s_rp_input_form>
<div class="comment-form">
<s_rp_member>
<div class="field">
<s_rp_guest>
<input type="text" name="" value="" placeholder="이름">
<input type="password" name="" value="" placeholder="암호">
</s_rp_guest>
<div class="secret">
<input type="checkbox" name="" id="secret">
<label for="secret" tabindex="0">Secret</label>
</div>
</div>
</s_rp_member>
<textarea name="" cols="" rows="4" placeholder="여러분의 소중한 댓글을 입력해주세요."></textarea>
<div class="submit">
<button type="submit" class="btn" onclick="">댓글달기</button>
</div>
<!-- 애드센스 수평 고정 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px;margin:20px 0"
data-ad-client="-----------------"
data-ad-slot="2283476235"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 애드센스 -->
<!-- 애드센스 수평 고정 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px;margin:20px 0"
data-ad-client="-----------------"
data-ad-slot="2283476235"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 애드센스 -->
<!-- 애드센스 수평 고정 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px;margin:20px 0"
data-ad-client="-----------------"
data-ad-slot="2283476235"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 애드센스 -->
<!-- 애드센스 수평 고정 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px;margin:20px 0"
data-ad-client="-------------------"
data-ad-slot="2283476235"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 애드센스 -->
<!-- 애드센스 수평 고정 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px;margin:20px 0"
data-ad-client="-------------------"
data-ad-slot="2283476235"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 애드센스 -->
</div>
</s_rp_input_form>
</div>
</s_rp>
</s_permalink_article_rep>
</s_article_rep>
</div>
<s_tag>
<div class="hgroup">
<h1>태그</h1>
</div>
<div class="tags">
<div class="items">
<s_tag_rep>
<a href=""></a>
</s_tag_rep>
</div>
</div>
</s_tag>
<s_guest>
<div class="guest_inner">
<div class="hgroup">
<h1>방명록</h1>
</div>
<div class="comments">
<s_guest_input_form>
<div class="comment-form">
<s_guest_member>
<div class="field">
<s_guest_form>
<input type="text" name="" value="" placeholder="이름">
<input type="password" name="" value="" placeholder="암호">
</s_guest_form>
</div>
</s_guest_member>
<textarea name="" cols="" rows="4"></textarea>
<div class="submit">
<button type="submit" class="btn" onclick="">안부 남기기</button>
</div>
</div>
</s_guest_input_form>
<s_guest_container>
<div class="comment-list">
<ul>
<s_guest_rep>
<li id="">
<div class="author-meta">
<img src="//t1.daumcdn.net/tistory_admin/static/skin/avatar_default.gif" class="avatar" alt="">
<span class="nickname"></span>
<span class="date"></span>
</div>
<p></p>
<div class="control">
<a href="#" onclick="">수정/삭제</a>
<a href="#" onclick="">댓글쓰기</a>
</div>
<s_guest_reply_container>
<ul>
<s_guest_reply_rep>
<li id="">
<div class="author-meta">
<img src="//t1.daumcdn.net/tistory_admin/static/skin/avatar_default.gif" class="avatar" alt="">
<span class="nickname"></span>
<span class="date"></span>
</div>
<p></p>
<div class="control">
<a href="#" onclick="">수정/삭제</a>
</div>
</li>
</s_guest_reply_rep>
</ul>
</s_guest_reply_container>
</li>
</s_guest_rep>
</ul>
</div>
</s_guest_container>
</div>
</div>
</s_guest>
<s_paging>
<div class="pagination">
<a class="prev ">이전</a>
<s_paging_rep>
<a ></a>
</s_paging_rep>
<a class="next ">다음</a>
</div>
</s_paging>
</article>
</section>
<hr>
<footer id="footer">
<p class="copyright">DESIGN BY <a href="#">TISTORY</a> <a href="https://coding-house.tistory.com/manage" class="admin">관리자</a></p>
</footer>
</div>
<script src="./images/script.js"></script>
</s_t3>
</body>
</html>
CSS
@charset "utf-8";
/*
*
* CSS CONTENTS:
*
* 01. Web Font
* 02. Type Selector Reset
* 03. Accessibility Navigation
* 04. Layout Selector
* 05. Components
* 06. Entry Content
* 07. Comment
* 08. Widget & Template Page
* 09. ETC
* 10. Post Type & Color Type
* 11. Retina Display
* 12. Media Screen - Tablet
* 13. Media Screen - Mobie
*
*/
/* Web Font Load */
@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');
@import url('//fonts.googleapis.com/css?family=Nanum+Myeongjo');
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
/* Type Selector Reset */
body {
font-weight: 400;
font-family: 'Noto Sans KR', sans-serif;
font-size: 1em;
line-height: 1.25;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-size: 100%;
}
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, figure {
margin: 0;
padding: 0;
}
header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption {
display: block;
}
button, input[type=submit], input[type=reset], input[type=button] {
overflow: visible;
cursor: pointer;
}
input[type=text], input[type=email], input[type=password], input[type=submit], textarea {
-webkit-appearance: none;
}
input, select, textarea, button {
font-family: 'Noto Sans KR', sans-serif;
font-size: 100%;
border-radius: 0;
}
button {
overflow: visible;
margin: 0;
padding: 0;
border: 0;
background: transparent;
}
ul li {
list-style: none;
}
img, fieldset {
border: none;
vertical-align: top;
}
hr {
display: none;
}
/* Accessibility Navigation */
#acc-nav {
position: absolute;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
height: 0;
}
#acc-nav a {
display: block;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
width: 1px;
height: 1px;
margin-left: -1px;
margin-bottom: -1px;
text-align: center;
font-weight: bold;
font-size: 0.875em;
color: #000;
white-space: nowrap;
}
#acc-nav a:focus, #acc-nav a:hover, #acc-nav a:active {
width: 100%;
height: auto;
padding: 10px 0;
background: #000;
color: #fff;
z-index: 1000;
}
/* Layout Selector */
#header {
position: relative;
width: 100%;
}
#header h1 {
padding: 28px 0;
text-align: center;
font-size: 1.5em;
line-height: 1;
color: #1a1a1a;
}
#header h1 a {
display: inline-block;
text-decoration: none;
vertical-align: top;
color: #1a1a1a;
}
#header .mobile-menu {
position: absolute;
top: 20px;
left: 33px;
z-index: 500;
width: 40px;
height: 40px;
outline: none;
}
#header .mobile-menu span {
position: absolute;
top: 50%;
left: 50%;
width: 26px;
height: 2px;
margin: -2px 0 0 -13px;
background-color: #000;
text-indent: -999em;
}
#header .mobile-menu:before,
#header .mobile-menu:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 26px;
height: 2px;
margin-left: -13px;
background-color: #000
}
#header .mobile-menu:before {
margin-top: -9px;
}
#header .mobile-menu:after {
margin-top: 5px;
}
#header .mobile-menu.on {
position: fixed;
}
#header .mobile-menu.on span {
display: none;
}
#header .mobile-menu.on:before,
#header .mobile-menu.on:after {
margin-top: -2px;
}
#header .mobile-menu.on:before {
transform: rotate(-45deg);
}
#header .mobile-menu.on:after {
transform: rotate(45deg);
}
#header .menu {
position: fixed;
top: 0;
left: -348px;
z-index: 400;
width: 348px;
height: 100%;
padding: 94px 40px 189px;
background-color: #fff;
box-sizing: border-box;
transition: left .5s ease-in-out;
}
#header .menu .social-link {
position: absolute;
left: 40px;
bottom: 129px;
}
#header .menu p {
position: absolute;
left: 40px;
bottom: 79px;
font-size: 0.75em;
color: #9b9b9b;
}
#header .menu.on {
left: 0;
}
#header .search {
position: absolute;
top: 20px;
right: 19px;
width: 0;
padding-right: 40px;
}
#header .search input {
display: none;
width: 100%;
height: 40px;
padding: 0 10px;
font-size: 1em;
line-height: 40px;
color: #000;
border: 0;
box-sizing: border-box;
background-color: transparent;
}
#header .search button {
display: none;
position: absolute;
top: 0;
right: 0;
z-index: 10;
width: 40px;
height: 40px;
background: url(./images/ico_package.png) no-repeat 0 0;
text-indent: -999em;
outline: none;
}
#header .search:before {
content: "";
position: absolute;
top: 0;
right: 0;
z-index: 20;
width: 40px;
height: 40px;
background: url(./images/ico_package.png) no-repeat 0 0;
text-indent: -999em;
cursor: pointer;
}
#header .search:hover:before {
background-color: #ebebeb;
}
#header .search.on {
width: 322px;
border-bottom: 1px solid #000;
}
#header .search.on input {
display: block;
outline: none;
}
#header .search.on button {
display: block;
}
#header .search.on:before {
display: none;
}
#gnb {
overflow: auto;
height: 100%;
margin-bottom: 8px;
}
#gnb ul li {
margin-bottom: 6px;
font-size: 1.125em;
line-height: 1.5;
}
#gnb ul li a {
display: block;
text-decoration: none;
color: #000;
}
#gnb ul li ul li ul li a.link_sub_item{
color: #333;
}
#gnb ul li a:hover {
text-decoration: underline;
color: #4e2e28;
}
#gnb ul li ul {
margin: 22px 0 0;
}
#gnb ul li ul li {
font-size: 1em;
}
#gnb ul li ul li ul {
margin: 6px 0 13px;
}
#gnb ul li ul li ul li {
margin: 0;
font-size: 0.875rem;
line-height: 1.5625rem;
}
#gnb ul li ul li ul li a:before {
content: "-";
margin-right: 5px;
color: #333;
}
#gnb ul li ul li ul li a {
padding:0 12px;
}
#content .inner {
max-width: 960px;
margin: 0 auto;
}
#content>.inner {
max-width: 860px;
}
#content .inner:after {
content: "";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
#footer {
position: relative;
padding: 29px 0;
border-top: 1px solid #ebebeb;
}
#footer p {
text-align: center;
font-size: 0.75em;
color: #9b9b9b;
}
#footer p a {
text-decoration: none;
color: #9b9b9b;
}
#footer .admin {
color: #666;
}
#footer .admin:before {
content: "";
display: inline-block;
width: 1px;
height: 15px;
margin: 0 9px;
background-color: #b2b2b2;
vertical-align: middle;
}
#tt-body-index #footer {
border-top: 0;
}
/* Components */
.social-link a {
display: inline-block;
width: 18px;
height: 18px;
margin-right: 5px;
text-indent: -999em;
background-image: url(./images/ico_package.png);
background-repeat: no-repeat;
vertical-align: top;
}
.social-link a:hover {
background-position-y: -68px;
}
.social-link .pinterest {
background-position: 0 -50px;
}
.social-link .facebook {
background-position: -50px -50px;
}
.social-link .twitter {
background-position: -100px -50px;
}
.social-link .instagram {
background-position: -150px -50px;
}
.btn, a.btn {
display: inline-block;
width: 158px;
height: 50px;
border: 1px solid #dcdcdc;
font-size: 0.875em;
line-height: 50px;
}
.btn:hover {
border-color: #4d4d4d;
}
.cover-thumbnail-list {
margin: 0 auto -1px;
padding: 40px 0 56px;
border-bottom: 1px solid #ebebeb;
}
.cover-thumbnail-list h2 {
margin-bottom: 26px;
font-size: 1em;
}
.cover-thumbnail-list ul {
width: 100%;
}
.cover-thumbnail-list ul li {
float: left;
width: 24.0625%;
margin: 0 0 32px;
padding-left: 1.25%;
}
.cover-thumbnail-list ul li:nth-child(4n+1){
clear: both;
padding-left: 0;
}
.cover-thumbnail-list ul li a {
display: block;
text-decoration: none;
color: #080808;
}
.cover-thumbnail-list ul li .thum {
display: block;
position: relative;
overflow: hidden;
height: 0;
margin-bottom: 11px;
padding-bottom: 75.757575757575758%;
background-color: #f6f6f6;
}
.cover-thumbnail-list ul li .thum:before {
content: "NO IMAGE";
position: absolute;
top: 50%;
left: 0;
z-index: 0;
width: 100%;
height: 18px;
margin: -9px 0 0 0;
text-align: center;
font-family: 'Arial';
font-weight: bold;
font-size: 0.875em;
color: #cbcbcb;
}
.cover-thumbnail-list ul li .thum img {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
}
.cover-thumbnail-list ul li .category {
display: inline-block;
margin-bottom: 8px;
border-bottom: 1px solid #a3a3a3;
font-family: 'Nanum Myeongjo', serif;
font-size: 0.875em;
color: #808080;
}
.cover-thumbnail-list ul li .title {
display: block;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 2.75em;
padding-right: 10%;
font-weight: 700;
line-height: 1.375em;
}
.cover-thumbnail-list ul li a:hover .title {
text-decoration: underline;
color: #4e2e28;
}
.cover-thumbnail-list ul li .date {
display: block;
font-size: 0.8125em;
color: #999;
}
.cover-slider {
position: relative;
overflow: hidden;
width: 100%;
background-color: #000;
}
.cover-slider ul li {
display: table;
width: 100%;
height: 460px;
text-align: center;
background-position: 50% 50%;
background-size: cover;
}
.cover-slider ul li a {
display: table-cell;
background-color: rgba(0,0,0,0.25);
text-decoration: none;
color: #fff;
vertical-align: middle;
}
.cover-slider ul li .category {
display: inline-block;
margin-bottom: 16px;
border-bottom: 1px solid #fff;
}
.cover-slider ul li .title {
display: block;
max-width: 580px;
margin: 0 auto 28px;
font-size: 2.5em;
line-height: 1.3;
}
.cover-slider ul li .btn {
border-color: #fff;
color: #fff;
}
.cover-slider ul li .btn:hover {
background-color: #fff;
color: #000;
}
.cover-slider .prev,
.cover-slider .next {
position: absolute;
top: 50%;
left: 50%;
z-index: 20;
width: 70px;
height: 70px;
margin: -25px 0 0 0;
background: url(./images/ico_package.png) no-repeat 0 -250px;
text-indent: -999em;
}
.cover-slider .prev {
margin-left: -506px;
background-position: 0 -250px;
}
.cover-slider .next {
margin-left: 436px;
background-position: -100px -250px;
}
.cover-slider .prev:hover,
.cover-slider .next:hover {
background-color: rgba(255,255,255,0.2);
}
.cover-masonry {
margin-bottom: -1px;
padding: 60px 0 49px;
border-bottom: 1px solid #ebebeb;
}
.cover-masonry h2 {
margin-bottom: 30px;
font-size: 1em;
}
.cover-masonry ul {
display: inline-block;
margin-left: -42px;
vertical-align: top;
}
.cover-masonry ul li {
float: left;
width: 33.3333%;
margin: 0 0 37px;
padding-left: 42px;
box-sizing: border-box;
}
.cover-masonry ul li a {
display: block;
text-decoration: none;
color: #080808;
}
.cover-masonry ul li .thum {
display: block;
margin-bottom: 11px;
}
.cover-masonry ul li .thum img {
width: 100%;
height: auto;
}
.cover-masonry ul li .category {
display: inline-block;
margin-bottom: 7px;
border-bottom: 1px solid #a3a3a3;
font-family: 'Nanum Myeongjo', serif;
font-size: 0.875em;
color: #808080;
}
.cover-masonry ul li .title {
display: block;
font-weight: 700;
font-size: 1.125em;
line-height: 1.4444;
}
.cover-masonry ul li a:hover .title {
text-decoration: underline;
color: #4e2e28;
}
.cover-masonry ul li .excerpt {
display: block;
display:-webkit-box;
-webkit-line-clamp:4;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 6.4em;
font-size: 0.9375em;
line-height: 1.6;
color: #666;
}
.cover-list {
margin-bottom: -1px;
padding: 30px 0 60px;
border-bottom: 1px solid #ebebeb;
}
.cover-list h2 {
margin: 30px 0 0 0;
font-size: 1em;
}
.cover-list ul li {
border-top: 1px solid #ebebeb;
}
.cover-list ul li:first-child {
border-top: 0;
}
.cover-list ul li a {
display: block;
min-height: 172px;
padding: 30px 0 30px;
text-decoration: none;
color: #080808;
}
.cover-list ul li figure {
float: right;
position: relative;
width: 172px;
height: 172px;
margin: 0 0 0 80px;
background-color: #f6f6f6;
}
.cover-list ul li figure:before {
content: "NO IMAGE";
position: absolute;
top: 50%;
left: 0;
z-index: 0;
width: 100%;
height: 18px;
margin: -9px 0 0 0;
text-align: center;
font-family: 'Arial';
font-weight: bold;
font-size: 0.875em;
color: #cbcbcb;
}
.cover-list ul li figure img {
position: relative;
z-index: 10;
width: 100%;
height: 100%;
}
.cover-list ul li .category {
display: inline-block;
margin-bottom: 7px;
border-bottom: 1px solid #a3a3a3;
font-family: 'Nanum Myeongjo', serif;
font-size: 0.875em;
color: #808080;
}
.cover-list ul li .title {
display: block;
font-weight: 700;
font-size: 1.125em;
line-height: 1.4444em;
}
.cover-list ul li a:hover .title {
text-decoration: underline;
color: #666;
}
.cover-list ul li .excerpt {
display: block;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 4.8em;
font-size: 0.9375em;
line-height: 1.6;
color: #666;
}
.cover-list ul li .date {
display: block;
font-size: 0.8125em;
color: #999;
}
.cover-gallery {
margin: 0 auto -1px;
padding: 60px 0 75px;
border-bottom: 1px solid #ebebeb;
}
.cover-gallery h2 {
margin-bottom: 30px;
font-size: 1em;
}
.cover-gallery ul {
display: inline-block;
margin-left: -12px;
}
.cover-gallery ul li {
float: left;
width: 25%;
margin: 0 0 12px 0;
padding-left: 12px;
box-sizing: border-box;
}
.cover-gallery ul li a {
display: block;
position: relative;
width: 100%;
background-color: #ebebeb;
}
.cover-gallery ul li .title {
display: block;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
position: absolute;
top: 50%;
left:0;
z-index: 30;
overflow: hidden;
width: 100%;
max-height: 4.2em;
text-align: center;
line-height: 1.4;
padding: 0 20px;
color: #fff;
box-sizing: border-box;
transform: translateY(-50%);
visibility: hidden;
}
.cover-gallery ul li a:hover .title {
visibility: visible;
}
.cover-gallery ul li a:hover:after {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: 20;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
}
.cover-gallery ul li a:before {
content: "NO IMAGE";
position: absolute;
top: 50%;
left: 0;
z-index: 0;
width: 100%;
height: 18px;
margin: -9px 0 0 0;
text-align: center;
font-family: 'Arial';
font-weight: bold;
font-size: 0.875em;
color: #cbcbcb;
}
.cover-gallery ul li figure {
height: 0;
padding-bottom: 100%;
}
.cover-gallery ul li figure img {
position: relative;
width: 100%;
height: auto;
z-index: 10;
}
.cover-footer {
position: relative;
z-index: 10;
text-align: center;
}
.cover-footer .image {
height: 300px;
margin-bottom: 80px;
background-position: 50% 50%;
background-size: cover;
}
.cover-footer p {
margin: -5px 0 20px;
text-align: center;
font-weight: 700;
font-size: 1.25em;
color: #000;
}
.cover-footer .menu ul {
text-align: center;
}
.cover-footer .menu ul li {
display: inline-block;
margin: 40px 0 48px;
padding: 0 14px;
font-size: 0.875em;
}
.cover-footer .menu ul li a {
display: block;
text-decoration: none;
color: #282828;
}
.cover-footer .menu ul li a:hover {
text-decoration: underline;
color: #4e2e28;
}
.cover-footer p:first-child {
margin-top: 76px;
}
.cover-footer .social-link:first-child a {
margin-top: 80px;
}
.post-header {
position: relative;
overflow: hidden;
max-width: 860px;
margin: 0 auto 30px;
padding: 57px 0 15px;
border-bottom: 1px solid #ebebeb;
}
.post-header h1 {
float: left;
font-size: 1em;
}
.post-header .list-type {
float: right;
}
.post-header .list-type button {
float: left;
width: 24px;
height: 24px;
margin-left: 4px;
background-image: url(./images/ico_package.png);
background-repeat: no-repeat;
text-indent: -999em;
outline: none;
}
.post-header .list-type button:hover {
background-color: #ebebeb;
}
.post-header .list-type .list {
background-position: 0 -200px;
}
.post-header .list-type .thum {
background-position: -100px -200px;
}
.post-header .list-type .list.current {
background-position: -50px -200px;
}
.post-header .list-type .thum.current {
background-position: -150px -200px;
}
.post-item {
overflow: hidden;
width: 100%;
border-bottom: 1px solid #ebebeb;
}
.post-item a {
display: block;
min-height: 148px;
padding: 30px 0 30px;
text-decoration: none;
color: #080808;
}
.post-item:first-child a {
padding-top: 0;
}
.post-item a:hover .title {
text-decoration: underline;
color: #4e2e28;
}
.post-item .thum {
float: right;
overflow: hidden;
max-width: 148px;
margin-left: 80px;
}
.post-item .thum img {
width: 195px;
height: 148px;
margin: 0 0 0 -23.5px;
}
.post-item .category {
display: inline-block;
margin-bottom: 16px;
border-bottom: 1px solid #a3a3a3;
font-family: 'Nanum Myeongjo', serif;
font-size: 0.875em;
color: #808080;
}
.post-item .title {
display: block;
margin-bottom: 8px;
display:-webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 2.8em;
font-weight: 700;
font-size: 1.125em;
line-height: 1.4;
}
.post-item .excerpt {
display: block;
display:-webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient:vertical;
overflow:hidden;
font-size: 0.9375em;
line-height: 1.6;
color: #666;
}
.post-item .excerpt.protected:before {
content: "";
display: inline-block;
width: 9px;
height: 13px;
margin-right: 10px;
background: url(./images/ico_package.png) no-repeat -0 -100px;
vertical-align: baseline;
}
.post-item .date {
display: block;
font-size: 0.8125em;
color: #999;
}
.pagination {
max-width: 860px;
margin: 60px auto 160px;
text-align: center;
}
.pagination .current {
display: none;
}
.pagination .view-more {
display: inline-block;
width: 158px;
height: 50px;
border: 1px solid #dcdcdc;
font-size: 0.875em;
line-height: 50px;
color: #000;
}
.pagination .view-more:hover {
border-color: #4d4d4d;
background: none;
}
.pagination a {
display: inline-block;
width: 24px;
height: 24px;
margin: 0 4px;
text-decoration: none;
font-size: 0.9375em;
line-height: 24px;
color: #b2b2b2;
vertical-align: middle;
}
.pagination a:hover {
background-color: #ebebeb;
}
.pagination .selected {
color: #000;
}
.pagination .prev,
.pagination .next {
width: 50px;
height: 50px;
background-image: url(./images/ico_package.png);
background-repeat: no-repeat;
border: 1px solid #dcdcdc;
text-indent: -999em;
vertical-align: middle;
box-sizing: border-box;
}
.pagination .prev {
background-position: -50px 0;
}
.pagination .next {
background-position: -100px 0;
}
.pagination .prev:hover,
.pagination .next:hover {
background-color: transparent;
border-color: #4d4d4d;
}
.pagination .no-more-prev,
.pagination .no-more-next {display: none;}
.hgroup {
max-width: 860px;
margin: 50px auto 60px;
padding: 0 0 20px;
border-bottom: 1px solid #ebebeb;
}
.hgroup .category {
display: inline-block;
margin-bottom: 16px;
padding-top: 5px;
border-bottom: 1px solid #a3a3a3;
font-family: 'Nanum Myeongjo', serif;
font-size: 0.875em;
color: #808080;
}
.hgroup h1 {
display: block;
margin-bottom: 9px;
font-weight: 700;
font-size: 1.6875em;
line-height: 1.4444em;
}
.hgroup .post-meta {
display: block;
font-size: 0.8125em;
color: #808080;
}
.hgroup .post-meta a {
text-decoration: none;
color: #999;
}
.hgroup .post-meta a:hover {
text-decoration: underline;
}
.hgroup .post-meta span:before {
content: "";
display: inline-block;
width: 1px;
height: 10px;
margin: 0 7px 0 10px;
background-color: #ebebeb;
vertical-align: baseline;
}
.hgroup .post-meta span:first-child:before {
content: none;
}
.another_category {
margin: 60px auto 80px;
padding: 0 !important;
border: 0 !important;
}
.another_category h4 {
margin-bottom: 28px;
font-weight: 400;
font-size: 1em !important;
}
.another_category h4 em {
border-bottom: 1px solid #000;
font-style: normal;
}
.another_category table {
width: 100%;
border-collapse: collapse;
border: 0 !important;
font-size: 0.9375em;
color: #666;
}
.another_category table th {
padding: 8px 0 4px;
border: 0 !important;
text-align: left;
font-weight: 400;
}
.another_category table th a {
text-decoration: none;
color: #666;
}
.another_category td {
width: 60px;
padding: 8px 0 4px;
border-left: 0 !important;
border-top: 0 !important;
font-size: 0.8125em;
line-height: 1;
color: #b2b2b2;
}
.tags {
position: relative;
overflow: hidden;
max-width: 860px;
margin: 53px auto;
padding: 27px 0 28px 47px;
border-top: 1px solid #ebebeb;
border-bottom: 1px solid #ebebeb;
color: #999;
box-sizing: border-box;
}
.tags h2 {
float: left;
width: 47px;
margin-left: -47px;
font-weight: 400;
font-size: 1em;
color: #000;
}
.tags .items a {
display:inline-block;
margin-left: 15px;
text-decoration:none;
font-size: 0.8125em;
line-height: 1.5384;
color: #999;
}
.tags .items a:hover {
color: #7a583a;
}
.tags .items a:before {
content: "#";
}
.related-articles {
overflow: hidden;
width: 100%;
margin: 57px 0 69px;
}
.related-articles h2 {
margin-bottom: 28px;
font-weight: 400;
font-size: 1em;
}
.related-articles h2 em {
border-bottom: 1px solid #000;
font-style: normal;
}
.related-articles ul {
}
.related-articles ul li {
float: left;
width: 24.0625%;
padding-left: 1.25%;
}
.related-articles ul li:first-child {
padding-left: 0;
}
.related-articles ul li a {
display: block;
text-decoration: none;
color: #080808;
}
.related-articles ul li a:hover .title {
text-decoration: underline;
color: #4e2e28;
}
.related-articles ul li .thum {
display: block;
position: relative;
overflow: hidden;
height: 0;
margin-bottom: 12px;
padding-bottom: 75.757575757575758%;
background-color: #ebebeb;
}
.related-articles ul li .thum:before {
content: "NO IMAGE";
position: absolute;
top: 50%;
left: 0;
z-index: 0;
width: 100%;
height: 18px;
margin: -9px 0 0 0;
text-align: center;
font-family: 'Arial';
font-weight: bold;
font-size: 0.875em;
color: #cbcbcb;
}
.related-articles ul li .thum img {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
}
.related-articles ul li .category {
display: inline-block;
margin-bottom: 16px;
border-bottom: 1px solid #a3a3a3;
font-family: 'Nanum Myeongjo', serif;
font-size: 0.875em;
color: #808080;
}
.related-articles ul li .title {
display: block;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 2.75em;
margin-bottom: 9px;
font-weight: 700;
line-height: 1.375;
}
.related-articles ul li .date {
display: block;
font-size: 0.8125em;
color: #999;
}
/* Entry Content */
.entry-content h1 {
margin: 60px 0 19px;
font-size: 1.6875em;
}
.entry-content h2 {
margin: 60px 0 19px;
font-size: 1.5em;
}
.entry-content h3 {
margin: 60px 0 19px;
font-weight: 700;
font-size: 1.3125em;
}
.entry-content h4 {
margin: 60px 0 19px;
font-weight: 400;
font-size: 1.125em;
}
.entry-content p {
margin-bottom: 24px;
font-size: 0.9375em;
line-height: 1.6;
color: #666;
}
.entry-content p img {
max-width: 100%;
height: auto;
margin-top: 36px;
}
.entry-content hr {
display: block;
border: 0;
border-bottom: 1px solid #000;
height: 4px !important;
margin: 10px 0px !important;
}
.entry-content pre {
/*
word-break:break-all;
white-space:pre-wrap;
word-wrap:break-word;
*/
background: #f8f8f8;
border: 1px solid #000;
margin: 5px 0px;
padding: 10px;
}
.entry-content pre code {
tab-size: 4;
font-family: 'Open Sans', sans-serif;
overflow-x: auto;
}
.entry-content ul,
.entry-content ol {
margin-bottom: 10px;
}
.entry-content ul {
list-style: disc inside;
}
.entry-content ul li {
position: relative;
padding-left: 22px;
font-size: 0.9375em;
line-height: 1.6;
color: #666;
list-style: inherit;
text-indent: -22px;
}
.entry-content ol {
list-style: inside decimal;
}
.entry-content ol li {
position: relative;
padding-left: 16px;
font-size: 0.9375em;
line-height: 1.6;
color: #666;
text-indent: -15px;
list-style: inherit;
}
.entry-content a {
color: #666;
}
.entry-content img.alignleft {
float: left;
margin: 0 22px 22px 0;
}
.entry-content img.aligncenter {
display: block;
margin: 0 auto 22px;
}
.entry-content img.alignright {
float: right;
margin: 0 0 22px 22px;
}
.entry-content blockquote {
margin-bottom: 60px;
padding: 16px 20px;
border-left: 4px solid #e6e6e6;
}
.entry-content blockquote p {
margin: 22px 0 0;
}
.entry-content blockquote p:first-child {
margin-top: 0;
}
.entry-content table {
width:100%;
margin-bottom: 22px;
border: 1px solid #e6e6e6;
border-collapse: collapse;
text-align: center;
font-size: 0.875em;
line-height: 1.5714;
color: #666;
}
.entry-content table thead th {
padding:7px 0 11px;
border-left: 1px solid #e6e6e6;
}
.entry-content table tbody td {
padding:7px 0 11px;
border-left: 1px solid #e6e6e6;
border-top: 1px solid #e6e6e6;
}
.entry-content input {
display: inline-block;
height: 40px;
padding: 0 10px;
border: 1px solid #e6e6e6;
font-size: 0.875em;
line-height: 1.25;
color: #666;
box-sizing: border-box;
vertical-align: middle;
}
.entry-content .protected_form {
margin-bottom: 40px;
padding: 120px 0 200px;
border-bottom: 1px solid #7a583a;
text-align: center;
}
.entry-content .protected_form p:before {
content: "";
display: block;
width: 64px;
height: 84px;
margin: 0 auto 30px;
background: url(./images/ico_package.png) no-repeat -50px -100px;
}
.entry-content .protected_form input {
width: 220px;
height: 50px;
margin-bottom: 10px;
background-color: transparent;
vertical-align: top;
}
.entry-content .cap1 {
text-align: center;
font-size: 0.875em;
font-style: italic;
}
.entry-content .iframe-wrap {
position: relative;
height: 0;
padding-bottom: 56.25%;
}
.entry-content .iframe-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Comment */
.comments {
max-width: 860px;
margin: 0 auto 60px;
padding-bottom: 30px;
border-bottom: 1px solid #e6e6e6;
}
.comments h2 {
font-weight: 400;
font-size: 1em;
color: #000;
}
.comments .comment-list {
font-size:16px;
margin-bottom: 6px;
overflow:hidden;
}
.comments .comment-list ul li {
padding: 30px 0 25px;
border-top: 1px solid #e6e6e6;
position: relative;
min-height: 48px;
}
.comments .comment-list ul li:first-child {
border: none;
}
.comments .comment-list ul li ul li {
padding: 26px 0 0 60px;
border-top: 0;
border-bottom: 0;
}
.comments .comment-list ul li .author-meta {
position: absolute;
overflow: hidden;
top:30px; height:48px;
left:0; right:0;
padding: 4px 0 0 60px;
}
.comments .comment-list ul li ul li .author-meta {
top:26px;
left:60px;
}
.comments .comment-list ul li .author-meta .avatar {
position: absolute;
left:0; top:0;
width: 48px;
height: 48px;
border-radius: 50%;
}
.comments .comment-list ul li .author-meta span {
display:inline-block;
}
.comments .comment-list ul li .author-meta a {
text-decoration:none;
color: #000;
}
.comments .comment-list ul li .author-meta .nickname {
float:left;
font-size: 0.875em;
line-height: 20px;
}
.comments .comment-list ul li .author-meta .nickname .tistoryProfileLayerTrigger {
margin-bottom: 3px;
margin-right: 0;
vertical-align: bottom;
}
.comments .comment-list ul li .author-meta .date {
float:left;
margin-left: 10px;
font-size: 0.75em;
color: #999;
line-height:20px;
}
.comments .comment-list ul li .author-meta .date:before,
.comments .comment-list ul li .author-meta .date a:before {
content: "";
display: inline-block;
width: 1px;
height: 9px;
margin-right: 10px;
background-color: #b2b2b2;
}
.comments .comment-list ul li .author-meta .date a {
margin-left: 10px;
}
.comments .comment-list ul li .control {
position: absolute;
top: 33px;
right:0;
}
.comments .comment-list ul li ul li .control {
top: 29px;
}
.comments .comment-list ul li .control a {
margin:0 2px;
text-decoration: none;
font-size: 12px;
color: #999;
}
.comments .comment-list ul li p {
position:relative;
margin: 29px 0 0 60px;
font-size: 0.875em;
line-height: 1.5714;
color: #666;
}
.comments .comment-form .field {
position: relative;
overflow: hidden;
width: 100%;
margin-bottom: 8px;
}
.comments .comment-form input[type=text],
.comments .comment-form input[type=password],
.comments .comment-form textarea {
border: 1px solid #e6e6e6;
font-size: 0.9375em;
line-height: 1.25;
color: #666;
background-color: transparent;
}
.comments .comment-form input[type=text],
.comments .comment-form input[type=password] {
width: 140px;
height: 52px;
margin-right: 6px;
padding: 10px;
box-sizing: border-box;
}
.comments .comment-form input::-webkit-input-placeholder,
.comments .comment-form textarea::-webkit-input-placeholder {color: #d6d6d6;}
.comments .comment-form textarea {
display: block;
width: 100%;
margin-bottom: 10px;
padding: 10px;
resize: none;
box-sizing: border-box;
}
.comments .comment-form .field .secret {
display: inline-block;
margin-left: 15px;
vertical-align: middle;
}
.comments .comment-form .field .secret input {
display: none;
}
.comments .comment-form .field .secret label {
font-size: 0.8125em;
line-height: 52px;
color: #666;
outline: none;
cursor: pointer;
}
.comments .comment-form .field .secret label:before {
content: "";
display: inline-block;
width: 19px;
height: 18px;
margin-right: 9px;
border: 1px solid #e1e1e1;
vertical-align: middle;
background-color: #fff;
}
.comments .comment-form .field .secret input[type=checkbox]:checked+label:before {
background-image: url(./images/ico_package.png);
background-repeat: no-repeat;
background-position: -150px -100px;
}
.comments .comment-form .field .submit {
float: right;
}
/* Widget & Template Page */
/* ETC */
#dimmed {
position: fixed;
top: 0;
left: 0;
z-index: 300;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.43);
}
/* Post Type & Color Type */
.post-type-thumbnail .post-item {
float: left;
width: 24.0625%;
margin: 0 0 58px;
padding-left: 1.25%;
border: 0;
}
.post-type-thumbnail .post-item:nth-child(4n+1) {
padding-left: 0;
}
.post-type-thumbnail .post-item a {
padding: 0;
}
.post-type-thumbnail .post-item .thum {
display: block;
position: relative;
overflow: hidden;
width: 100%;
max-width: none;
height: 0;
margin: 0 0 9px 0;
padding-bottom: 75.757575757575758%;
background-color: #ebebeb;
}
.post-type-thumbnail .post-item .thum:before {
content: "NO IMAGE";
position: absolute;
top: 50%;
left: 0;
z-index: 0;
width: 100%;
height: 18px;
margin: -9px 0 0 0;
text-align: center;
font-family: 'Arial';
font-weight: bold;
font-size: 0.875em;
color: #cbcbcb;
}
.post-type-thumbnail .post-item .thum img {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
margin: 0;
}
.post-type-thumbnail .post-item .title {
display: block;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
width: 100%;
height: 2.75em;
font-weight: 700;
font-size: 1em;
line-height: 1.375em;
}
.post-type-thumbnail .post-item .excerpt {
display: none;
}
.post-type-thumbnail .pagination {
margin-top: 0;
}
/* Color Type */
.color-chocolate,
.color-chocolate .cover-footer,
.color-chocolate #footer {
background-color: #f4f2f1;
}
.color-chocolate #header h1 a,
.color-chocolate #gnb ul li a,
.color-chocolate #footer .admin,
.color-chocolate .cover-thumbnail-list ul li a,
.color-chocolate .cover-masonry ul li a,
.color-chocolate .cover-list ul li a,
.color-chocolate .cover-footer p,
.color-chocolate .cover-footer .menu ul li a,
.color-chocolate .post-item a,
.color-chocolate .hgroup h1,
.color-chocolate .hgroup .post-meta a,
.color-chocolate .entry-content h1,
.color-chocolate .entry-content h2,
.color-chocolate .entry-content h3,
.color-chocolate .entry-content h4,
.color-chocolate .entry-content a,
.color-chocolate .related-articles ul li a,
.color-chocolate .comments .comment-list ul li .author-meta span,
.color-chocolate .comments .comment-list ul li .author-meta .date a,
.color-chocolate .pagination .selected {
color: #4e2e28;
}
.color-chocolate #header .menu p,
.color-chocolate #footer p,
.color-chocolate .cover-thumbnail-list ul li .date,
.color-chocolate .cover-masonry ul li .excerpt,
.color-chocolate .cover-list ul li .excerpt,
.color-chocolate .cover-list ul li .date,
.color-chocolate .post-item .excerpt,
.color-chocolate .post-item .date,
.color-chocolate .hgroup .post-meta,
.color-chocolate .another-category td,
.color-chocolate .tags .items a,
.color-chocolate .related-articles ul li .date,
.color-chocolate .comments .comment-list ul li .author-meta .date,
.color-chocolate .comments .comment-list ul li .author-meta .control a {
color: #a69693;
}
.color-chocolate .cover-thumbnail-list ul li .category,
.color-chocolate .cover-masonry ul li .category,
.color-chocolate .hgroup .category {
color: #94817e;
}
.color-chocolate .entry-content p,
.color-chocolate .entry-content table,
.color-chocolate .entry-content ul li,
.color-chocolate .entry-content ol li,
.color-chocolate .another-category table,
.color-chocolate .another-category table th a,
.color-chocolate .comments .comment-list ul li p {
color: #836c68;
}
.color-chocolate #gnb ul li a:hover,
.color-chocolate .cover-footer .menu ul li a:hover,
.color-chocolate .cover-thumbnail-list ul li a:hover .title,
.color-chocolate .cover-masonry ul li a:hover .title,
.color-chocolate .cover-list ul li a:hover .title,
.color-chocolate .post-item a:hover .title,
.color-chocolate .related-articles ul li a:hover .title {
color: #2d140f;
}
.color-chocolate .cover-thumbnail-list ul li .category,
.color-chocolate .cover-masonry ul li .category,
.color-chocolate .hgroup .category {
border-color: #a69693;
}
.color-chocolate .entry-content ul li:before {
background-color: #a69693;
}
.color-chocolate #header .mobile-menu:before,
.color-chocolate #header .mobile-menu:after,
.color-chocolate #header .mobile-menu span {
background-color: #4e2e28;
}
.color-chocolate .pagination a:hover,
.color-chocolate #header .search:hover:before {
background-color: #e7e2e1;
}
.color-chocolate .btn,
.color-chocolate .cover-thumbnail-list
.color-chocolate .cover-masonry
.color-chocolate .cover-list
.color-chocolate .cover-gallery,
.color-chocolate .cover-list ul li,
.color-chocolate .post-item,
.color-chocolate .hgroup,
.color-chocolate .entry-content table,
.color-chocolate .entry-content table thead th,
.color-chocolate .entry-content table tbody td,
.color-chocolate .entry-content blockquote,
.color-chocolate .comments,
.color-chocolate .comments .comment-list ul li,
.color-chocolate .comments .comment-form input[type=text],
.color-chocolate .comments .comment-form input[type=password],
.color-chocolate .comments .comment-form textarea,
.color-chocolate .comments .comment-form .field .secret label:before,
.color-chocolate .pagination .prev,
.color-chocolate .pagination .next,
.color-chocolate .pagination a {
border-color: #e7e2e1;
}
.color-chocolate .social-link a,
.color-chocolate #header .search button,
.color-chocolate #header .search:before,
.color-chocolate .cover-thumbnail-list ul li .thum:before,
.color-chocolate .cover-gallery ul li a:before,
.color-chocolate .post-header .list-type button,
.color-chocolate .related-articles ul li .thum:before {
background-image: url(./images/ico_package_chocolate.png);
}
.color-chocolate .btn:hover,
.color-chocolate .pagination .prev:hover,
.color-chocolate .pagination .next:hover {
border-color: #4d4d4d;
}
.color-chocolate #header .search.on {
border-color: #4e2e28;
}
/* Retina Display */
@media only screen and (-webkit-min-device-pixel-ratio:1.5) {
#header .search button,
#header .search:before,
.social-link a,
.cover-slider .prev,
.cover-slider .next,
.cover-gallery ul li a:before,
.post-header .list-type button,
.pagination .prev,
.pagination .next,
.comments .comment-form .field .secret input[type=checkbox]:checked+label:before {
background-image: url(./images/ico_package_2x.png);
background-size: 200px auto;
}
.color-chocolate .social-link a,
.color-chocolate #header .search button,
.color-chocolate .cover-gallery ul li a:before,
.color-chocolate .post-header .list-type button {
background-image: url(./images/ico_package_chocolate_2x.png);
background-size: 200px auto;
}
}
/* Media Screen - Tablet */
@media screen and (max-width:1023px) {
#header .search.on {
width: 180px;
}
#content .guest_inner,
#content>.inner {
padding: 0 40px;
}
.post-header {
padding: 40px;
}
.cover-thumbnail-list {
padding: 40px 40px 65px;
}
.cover-slider ul li .title {
max-width: none;
padding: 0 98px
}
.cover-slider .prev {
left: 14px;
margin-left: 0;
}
.cover-slider .next {
left: auto;
right: 14px;
margin-left: 0;
}
.cover-masonry {
padding: 60px 40px 81px;
}
.cover-list {
padding: 30px 40px 85px;
}
.cover-gallery {
padding: 60px 40px 130px;
}
}
/* Media Screen - Mobie */
@media screen and (max-width:767px) {
#header .mobile-menu {
top: 10px;
left: 11px;
}
#header .menu {
padding: 84px 20px 189px;
}
#header .menu .social-link,
#header .menu p {
left: 20px;
}
#header h1 {
padding: 15px 62px;
line-height: 1.25;
}
#header h1 a {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#header .search {
top: 10px;
right: 1px;
}
#header .search.on {
position: absolute;
top: 60px;
left: 0;
right: auto;
z-index: 100;
width: 100%;
padding: 10px 18px 10px 17px;
border: 0;
background-color: #fff;
box-sizing: border-box;
}
#header .search.on input {
border-bottom: 1px solid #000;
}
#header .search.on button {
top: -50px;
right: 1px;
}
#content .guest_inner,
#content>.inner {
padding: 0 18px;
}
.post-header {
padding: 20px 18px;
}
.cover-thumbnail-list {
padding: 40px 18px 65px;
}
.cover-thumbnail-list ul li,
.related-articles ul li {
width: 48.591549295774648%;
padding-left: 2.816901408450704%;
}
.cover-thumbnail-list ul li:nth-child(odd),
.related-articles ul li:nth-child(odd) {
clear: both;
padding-left: 0;
}
.cover-slider ul li {
width: 100%;
box-sizing: border-box;
}
.cover-slider ul li .title {
display:-webkit-box;
-webkit-line-clamp:4;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 5.2em;
padding: 0 18px;
font-size: 2.125em;
}
.cover-slider .prev {
top: auto;
bottom: 0;
left: 0;
}
.cover-slider .next {
top: auto;
right: 0;
bottom: 0;
}
.cover-masonry {
padding: 60px 18px 81px;
}
.cover-masonry ul li {
float: none;
width: 100%;
}
.cover-masonry ul li .category,
.cover-list ul li .category {
margin-bottom: 8px;
}
.cover-thumbnail-list ul li .title,
.related-articles ul li .title,
.cover-list ul li .title {
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 4.2em;
line-height: 1.4;
}
.cover-list {
padding: 30px 18px 80px;
}
.cover-list h2{
margin: 30px 0 0 0;
}
.cover-list ul li a {
min-height: 98px;
}
.cover-list ul li figure {
width: 113px;
height: 113px;
margin: 0 0 0 18px;
}
.cover-list ul li .title {
-webkit-line-clamp: 2;
margin-bottom: 3px;
padding-top: 6px;
font-size: 1em;
}
.cover-list ul li .category {
display: none;
}
.cover-list ul li .excerpt {
-webkit-line-clamp: 2;
font-size: 0.8125em;
line-height: 1.5;
}
.cover-gallery {
padding: 60px 18px 130px;
}
.cover-gallery ul li {
width: 50%;
}
.post-item a {
min-height: 100px;
}
.post-item .thum {
max-width: 113px;
margin-left: 18px;
}
.post-item .thum img {
width: auto;
height: 113px;
margin: 0 0 0 -16.5px;
}
.post-item .title {
line-height: 1.2;
}
.post-item .excerpt {
-webkit-line-clamp: 2;
}
.post-type-thumbnail .post-item {
width: 48.591549295774648%;
margin-bottom: 26px;
padding-left: 2.816901408450704%;
}
.post-type-thumbnail .post-item:nth-child(4n+1) {
padding-left: 2.816901408450704%;
}
.post-type-thumbnail .post-item:nth-child(2n+1) {
clear: both;
padding-left: 0%;
}
.post-type-thumbnail .post-item .title {
-webkit-line-clamp: 3;
height: auto;
max-height: 4.125em;
}
.entry-content .table-wrap {
overflow: auto;
width: 100%;
}
.entry-content table {
width: 680px;
table-layout: fixed;
}
.entry-content .protected_form input {
display: block;
width: 160px;
margin: 0 auto 10px;
}
.pagination {
padding: 0 18px;
}
.pagination a {
display: none;
}
.pagination .current {
display: block;
font-size: 0.875em;
line-height: 50px;
}
.pagination .prev {
display: block;
float: left;
margin: 0;
}
.pagination .next {
display: block;
float: right;
margin: 0;
}
.another-category table th {
display: block;
padding: 0;
}
.another-category table td {
display: block;
margin-bottom: 19px;
}
.comments .comment-list {
margin-bottom:10px;
margin-top:10px;
border-top: 1px solid #e6e6e6;
}
.comments .comment-list ul li {
padding-bottom:0;
}
.comments .comment-list ul li ul {
border-top: 1px solid #e6e6e6;
}
.comments .comment-list ul li ul li {
padding:20px 0 0 48px;
}
.comments .comment-list ul li ul li:before {
content: "";
position: absolute;
top: 34px;
left:18px;
width: 12px;
height: 12px;
background: url(./images/ico_package.png) no-repeat 0 -150px;
}
.comments .comment-list ul li .author-meta,
.comments .comment-list ul li ul li .author-meta {
position:relative;
top:0;
left:0;
}
.comments .comment-list ul li .author-meta img {
position: absolute;
top: 0;
left: 0;
}
.comments .comment-list ul li .author-meta .nickname,
.comments .comment-list ul li .author-meta .date {
display: block;
float: none;
line-height: 1.5;
}
.comments .comment-list ul li .author-meta .nickname .tistoryProfileLayerTrigger {
margin-bottom:4px;
}
.comments .comment-list ul li .author-meta .date {
margin-left: 0;
margin-top: 2px;
}
.comments .comment-list ul li .author-meta .date::before {
display: none;
}
.comments .comment-list ul li p {
margin: 14px 0 0;
}
.comments .comment-list ul li .control {
position: relative;
top: auto;
right: auto;
display: block;
margin: 9px 0 18px -2px;
}
.comments .comment-list ul li ul li .control {
top: auto;
}
.comments .comment-form input[type=text],
.comments .comment-form input[type=password] {
width: 100px;
}
.comments .comment-form .field .secret {
margin-left: 0;
}
.comments .comment-form .field .secret label:before {
margin-right: 5px;
}
.comments .comment-form .field .submit {
display: block;
float: none;
margin: 60px auto 0;
}
}
반응형
</div>
<s_tag_label>
<div class="tags">
<h2>태그</h2>
<div class="items">
</div>
</div>
</s_tag_label>
<s_article_related>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 애드센스 -->
<div align="center">
<!-- 고정 사각형 -->
<ins class="adsbygoogle"
style="display:inline-block;width:336px;height:280px;text-align:center;"
data-ad-client="--------------"
data-ad-slot="5339555420"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 고정 사각형 -->
<ins class="adsbygoogle"
style="display:inline-block;width:336px;height:280px;text-align:center;"
data-ad-client="---------------"
data-ad-slot="5339555420"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 애드센스 -->
<div class="related-articles">
<h2><strong>'IT TMI/생활 IT'</strong> Related Articles</h2>
<ul>
<s_article_related_rep>
<li>
<a href="">
<span class="thum">
<s_article_related_rep_thumbnail>
<img src="//i1.daumcdn.net/thumb/C264x200/?fname=" alt="">
</s_article_related_rep_thumbnail>
</span>
<span class="title"></span>
</a>
</li>
</s_article_related_rep>
</ul>
</div>
</s_article_related>
<s_rp>
<div class="comments">
<s_rp_container>
<div class="comment-list">
<ul>
<s_rp_rep>
<li id="">
<div class="author-meta">
<img src="" class="avatar" alt="">
<span class="nickname"></span>
<span class="date"></span>
</div>
<p></p>
<div class="control">
<a href="">댓글주소</a>
<a href="#" onclick="">수정/삭제</a>
<a href="#" onclick="">댓글쓰기</a>
</div>
<s_rp2_container>
<ul>
<s_rp2_rep>
<li id="">
<div class="author-meta">
<img src="" class="avatar" alt="">
<span class="nickname"></span>
<span class="date"></span>
</div>
<p></p>
<div class="control">
<a href="">댓글주소</a>
<a href="#" onclick="">수정/삭제</a>
</div>
</li>
</s_rp2_rep>
</ul>
</s_rp2_container>
</li>
</s_rp_rep>
</ul>
</div>
</s_rp_container>
<s_rp_input_form>
<div class="comment-form">
<s_rp_member>
<div class="field">
<s_rp_guest>
<input type="text" name="" value="" placeholder="이름">
<input type="password" name="" value="" placeholder="암호">
</s_rp_guest>
<div class="secret">
<input type="checkbox" name="" id="secret">
<label for="secret" tabindex="0">Secret</label>
</div>
</div>
</s_rp_member>
<textarea name="" cols="" rows="4" placeholder="여러분의 소중한 댓글을 입력해주세요."></textarea>
<div class="submit">
<button type="submit" class="btn" onclick="">댓글달기</button>
</div>
<!-- 애드센스 수평 고정 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px;margin:20px 0"
data-ad-client="-----------------"
data-ad-slot="2283476235"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 애드센스 -->
<!-- 애드센스 수평 고정 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px;margin:20px 0"
data-ad-client="-----------------"
data-ad-slot="2283476235"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 애드센스 -->
<!-- 애드센스 수평 고정 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px;margin:20px 0"
data-ad-client="-----------------"
data-ad-slot="2283476235"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 애드센스 -->
<!-- 애드센스 수평 고정 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px;margin:20px 0"
data-ad-client="-------------------"
data-ad-slot="2283476235"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 애드센스 -->
<!-- 애드센스 수평 고정 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px;margin:20px 0"
data-ad-client="-------------------"
data-ad-slot="2283476235"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 애드센스 -->
</div>
</s_rp_input_form>
</div>
</s_rp>
</s_permalink_article_rep>
</s_article_rep>
</div>
<s_tag>
<div class="hgroup">
<h1>태그</h1>
</div>
<div class="tags">
<div class="items">
<s_tag_rep>
<a href=""></a>
</s_tag_rep>
</div>
</div>
</s_tag>
<s_guest>
<div class="guest_inner">
<div class="hgroup">
<h1>방명록</h1>
</div>
<div class="comments">
<s_guest_input_form>
<div class="comment-form">
<s_guest_member>
<div class="field">
<s_guest_form>
<input type="text" name="" value="" placeholder="이름">
<input type="password" name="" value="" placeholder="암호">
</s_guest_form>
</div>
</s_guest_member>
<textarea name="" cols="" rows="4"></textarea>
<div class="submit">
<button type="submit" class="btn" onclick="">안부 남기기</button>
</div>
</div>
</s_guest_input_form>
<s_guest_container>
<div class="comment-list">
<ul>
<s_guest_rep>
<li id="">
<div class="author-meta">
<img src="//t1.daumcdn.net/tistory_admin/static/skin/avatar_default.gif" class="avatar" alt="">
<span class="nickname"></span>
<span class="date"></span>
</div>
<p></p>
<div class="control">
<a href="#" onclick="">수정/삭제</a>
<a href="#" onclick="">댓글쓰기</a>
</div>
<s_guest_reply_container>
<ul>
<s_guest_reply_rep>
<li id="">
<div class="author-meta">
<img src="//t1.daumcdn.net/tistory_admin/static/skin/avatar_default.gif" class="avatar" alt="">
<span class="nickname"></span>
<span class="date"></span>
</div>
<p></p>
<div class="control">
<a href="#" onclick="">수정/삭제</a>
</div>
</li>
</s_guest_reply_rep>
</ul>
</s_guest_reply_container>
</li>
</s_guest_rep>
</ul>
</div>
</s_guest_container>
</div>
</div>
</s_guest>
<s_paging>
<div class="pagination">
<a class="prev ">이전</a>
<s_paging_rep>
<a ></a>
</s_paging_rep>
<a class="next ">다음</a>
</div>
</s_paging>
</article>
</section>
<hr>
<footer id="footer">
<p class="copyright">DESIGN BY <a href="#">TISTORY</a> <a href="https://coding-house.tistory.com/manage" class="admin">관리자</a></p>
</footer>
</div>
<script src="./images/script.js"></script>
</s_t3>
</body>
</html>
CSS
@charset "utf-8";
/*
*
* CSS CONTENTS:
*
* 01. Web Font
* 02. Type Selector Reset
* 03. Accessibility Navigation
* 04. Layout Selector
* 05. Components
* 06. Entry Content
* 07. Comment
* 08. Widget & Template Page
* 09. ETC
* 10. Post Type & Color Type
* 11. Retina Display
* 12. Media Screen - Tablet
* 13. Media Screen - Mobie
*
*/
/* Web Font Load */
@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');
@import url('//fonts.googleapis.com/css?family=Nanum+Myeongjo');
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
/* Type Selector Reset */
body {
font-weight: 400;
font-family: 'Noto Sans KR', sans-serif;
font-size: 1em;
line-height: 1.25;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-size: 100%;
}
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, figure {
margin: 0;
padding: 0;
}
header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption {
display: block;
}
button, input[type=submit], input[type=reset], input[type=button] {
overflow: visible;
cursor: pointer;
}
input[type=text], input[type=email], input[type=password], input[type=submit], textarea {
-webkit-appearance: none;
}
input, select, textarea, button {
font-family: 'Noto Sans KR', sans-serif;
font-size: 100%;
border-radius: 0;
}
button {
overflow: visible;
margin: 0;
padding: 0;
border: 0;
background: transparent;
}
ul li {
list-style: none;
}
img, fieldset {
border: none;
vertical-align: top;
}
hr {
display: none;
}
/* Accessibility Navigation */
#acc-nav {
position: absolute;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
height: 0;
}
#acc-nav a {
display: block;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
width: 1px;
height: 1px;
margin-left: -1px;
margin-bottom: -1px;
text-align: center;
font-weight: bold;
font-size: 0.875em;
color: #000;
white-space: nowrap;
}
#acc-nav a:focus, #acc-nav a:hover, #acc-nav a:active {
width: 100%;
height: auto;
padding: 10px 0;
background: #000;
color: #fff;
z-index: 1000;
}
/* Layout Selector */
#header {
position: relative;
width: 100%;
}
#header h1 {
padding: 28px 0;
text-align: center;
font-size: 1.5em;
line-height: 1;
color: #1a1a1a;
}
#header h1 a {
display: inline-block;
text-decoration: none;
vertical-align: top;
color: #1a1a1a;
}
#header .mobile-menu {
position: absolute;
top: 20px;
left: 33px;
z-index: 500;
width: 40px;
height: 40px;
outline: none;
}
#header .mobile-menu span {
position: absolute;
top: 50%;
left: 50%;
width: 26px;
height: 2px;
margin: -2px 0 0 -13px;
background-color: #000;
text-indent: -999em;
}
#header .mobile-menu:before,
#header .mobile-menu:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 26px;
height: 2px;
margin-left: -13px;
background-color: #000
}
#header .mobile-menu:before {
margin-top: -9px;
}
#header .mobile-menu:after {
margin-top: 5px;
}
#header .mobile-menu.on {
position: fixed;
}
#header .mobile-menu.on span {
display: none;
}
#header .mobile-menu.on:before,
#header .mobile-menu.on:after {
margin-top: -2px;
}
#header .mobile-menu.on:before {
transform: rotate(-45deg);
}
#header .mobile-menu.on:after {
transform: rotate(45deg);
}
#header .menu {
position: fixed;
top: 0;
left: -348px;
z-index: 400;
width: 348px;
height: 100%;
padding: 94px 40px 189px;
background-color: #fff;
box-sizing: border-box;
transition: left .5s ease-in-out;
}
#header .menu .social-link {
position: absolute;
left: 40px;
bottom: 129px;
}
#header .menu p {
position: absolute;
left: 40px;
bottom: 79px;
font-size: 0.75em;
color: #9b9b9b;
}
#header .menu.on {
left: 0;
}
#header .search {
position: absolute;
top: 20px;
right: 19px;
width: 0;
padding-right: 40px;
}
#header .search input {
display: none;
width: 100%;
height: 40px;
padding: 0 10px;
font-size: 1em;
line-height: 40px;
color: #000;
border: 0;
box-sizing: border-box;
background-color: transparent;
}
#header .search button {
display: none;
position: absolute;
top: 0;
right: 0;
z-index: 10;
width: 40px;
height: 40px;
background: url(./images/ico_package.png) no-repeat 0 0;
text-indent: -999em;
outline: none;
}
#header .search:before {
content: "";
position: absolute;
top: 0;
right: 0;
z-index: 20;
width: 40px;
height: 40px;
background: url(./images/ico_package.png) no-repeat 0 0;
text-indent: -999em;
cursor: pointer;
}
#header .search:hover:before {
background-color: #ebebeb;
}
#header .search.on {
width: 322px;
border-bottom: 1px solid #000;
}
#header .search.on input {
display: block;
outline: none;
}
#header .search.on button {
display: block;
}
#header .search.on:before {
display: none;
}
#gnb {
overflow: auto;
height: 100%;
margin-bottom: 8px;
}
#gnb ul li {
margin-bottom: 6px;
font-size: 1.125em;
line-height: 1.5;
}
#gnb ul li a {
display: block;
text-decoration: none;
color: #000;
}
#gnb ul li ul li ul li a.link_sub_item{
color: #333;
}
#gnb ul li a:hover {
text-decoration: underline;
color: #4e2e28;
}
#gnb ul li ul {
margin: 22px 0 0;
}
#gnb ul li ul li {
font-size: 1em;
}
#gnb ul li ul li ul {
margin: 6px 0 13px;
}
#gnb ul li ul li ul li {
margin: 0;
font-size: 0.875rem;
line-height: 1.5625rem;
}
#gnb ul li ul li ul li a:before {
content: "-";
margin-right: 5px;
color: #333;
}
#gnb ul li ul li ul li a {
padding:0 12px;
}
#content .inner {
max-width: 960px;
margin: 0 auto;
}
#content>.inner {
max-width: 860px;
}
#content .inner:after {
content: "";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
#footer {
position: relative;
padding: 29px 0;
border-top: 1px solid #ebebeb;
}
#footer p {
text-align: center;
font-size: 0.75em;
color: #9b9b9b;
}
#footer p a {
text-decoration: none;
color: #9b9b9b;
}
#footer .admin {
color: #666;
}
#footer .admin:before {
content: "";
display: inline-block;
width: 1px;
height: 15px;
margin: 0 9px;
background-color: #b2b2b2;
vertical-align: middle;
}
#tt-body-index #footer {
border-top: 0;
}
/* Components */
.social-link a {
display: inline-block;
width: 18px;
height: 18px;
margin-right: 5px;
text-indent: -999em;
background-image: url(./images/ico_package.png);
background-repeat: no-repeat;
vertical-align: top;
}
.social-link a:hover {
background-position-y: -68px;
}
.social-link .pinterest {
background-position: 0 -50px;
}
.social-link .facebook {
background-position: -50px -50px;
}
.social-link .twitter {
background-position: -100px -50px;
}
.social-link .instagram {
background-position: -150px -50px;
}
.btn, a.btn {
display: inline-block;
width: 158px;
height: 50px;
border: 1px solid #dcdcdc;
font-size: 0.875em;
line-height: 50px;
}
.btn:hover {
border-color: #4d4d4d;
}
.cover-thumbnail-list {
margin: 0 auto -1px;
padding: 40px 0 56px;
border-bottom: 1px solid #ebebeb;
}
.cover-thumbnail-list h2 {
margin-bottom: 26px;
font-size: 1em;
}
.cover-thumbnail-list ul {
width: 100%;
}
.cover-thumbnail-list ul li {
float: left;
width: 24.0625%;
margin: 0 0 32px;
padding-left: 1.25%;
}
.cover-thumbnail-list ul li:nth-child(4n+1){
clear: both;
padding-left: 0;
}
.cover-thumbnail-list ul li a {
display: block;
text-decoration: none;
color: #080808;
}
.cover-thumbnail-list ul li .thum {
display: block;
position: relative;
overflow: hidden;
height: 0;
margin-bottom: 11px;
padding-bottom: 75.757575757575758%;
background-color: #f6f6f6;
}
.cover-thumbnail-list ul li .thum:before {
content: "NO IMAGE";
position: absolute;
top: 50%;
left: 0;
z-index: 0;
width: 100%;
height: 18px;
margin: -9px 0 0 0;
text-align: center;
font-family: 'Arial';
font-weight: bold;
font-size: 0.875em;
color: #cbcbcb;
}
.cover-thumbnail-list ul li .thum img {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
}
.cover-thumbnail-list ul li .category {
display: inline-block;
margin-bottom: 8px;
border-bottom: 1px solid #a3a3a3;
font-family: 'Nanum Myeongjo', serif;
font-size: 0.875em;
color: #808080;
}
.cover-thumbnail-list ul li .title {
display: block;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 2.75em;
padding-right: 10%;
font-weight: 700;
line-height: 1.375em;
}
.cover-thumbnail-list ul li a:hover .title {
text-decoration: underline;
color: #4e2e28;
}
.cover-thumbnail-list ul li .date {
display: block;
font-size: 0.8125em;
color: #999;
}
.cover-slider {
position: relative;
overflow: hidden;
width: 100%;
background-color: #000;
}
.cover-slider ul li {
display: table;
width: 100%;
height: 460px;
text-align: center;
background-position: 50% 50%;
background-size: cover;
}
.cover-slider ul li a {
display: table-cell;
background-color: rgba(0,0,0,0.25);
text-decoration: none;
color: #fff;
vertical-align: middle;
}
.cover-slider ul li .category {
display: inline-block;
margin-bottom: 16px;
border-bottom: 1px solid #fff;
}
.cover-slider ul li .title {
display: block;
max-width: 580px;
margin: 0 auto 28px;
font-size: 2.5em;
line-height: 1.3;
}
.cover-slider ul li .btn {
border-color: #fff;
color: #fff;
}
.cover-slider ul li .btn:hover {
background-color: #fff;
color: #000;
}
.cover-slider .prev,
.cover-slider .next {
position: absolute;
top: 50%;
left: 50%;
z-index: 20;
width: 70px;
height: 70px;
margin: -25px 0 0 0;
background: url(./images/ico_package.png) no-repeat 0 -250px;
text-indent: -999em;
}
.cover-slider .prev {
margin-left: -506px;
background-position: 0 -250px;
}
.cover-slider .next {
margin-left: 436px;
background-position: -100px -250px;
}
.cover-slider .prev:hover,
.cover-slider .next:hover {
background-color: rgba(255,255,255,0.2);
}
.cover-masonry {
margin-bottom: -1px;
padding: 60px 0 49px;
border-bottom: 1px solid #ebebeb;
}
.cover-masonry h2 {
margin-bottom: 30px;
font-size: 1em;
}
.cover-masonry ul {
display: inline-block;
margin-left: -42px;
vertical-align: top;
}
.cover-masonry ul li {
float: left;
width: 33.3333%;
margin: 0 0 37px;
padding-left: 42px;
box-sizing: border-box;
}
.cover-masonry ul li a {
display: block;
text-decoration: none;
color: #080808;
}
.cover-masonry ul li .thum {
display: block;
margin-bottom: 11px;
}
.cover-masonry ul li .thum img {
width: 100%;
height: auto;
}
.cover-masonry ul li .category {
display: inline-block;
margin-bottom: 7px;
border-bottom: 1px solid #a3a3a3;
font-family: 'Nanum Myeongjo', serif;
font-size: 0.875em;
color: #808080;
}
.cover-masonry ul li .title {
display: block;
font-weight: 700;
font-size: 1.125em;
line-height: 1.4444;
}
.cover-masonry ul li a:hover .title {
text-decoration: underline;
color: #4e2e28;
}
.cover-masonry ul li .excerpt {
display: block;
display:-webkit-box;
-webkit-line-clamp:4;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 6.4em;
font-size: 0.9375em;
line-height: 1.6;
color: #666;
}
.cover-list {
margin-bottom: -1px;
padding: 30px 0 60px;
border-bottom: 1px solid #ebebeb;
}
.cover-list h2 {
margin: 30px 0 0 0;
font-size: 1em;
}
.cover-list ul li {
border-top: 1px solid #ebebeb;
}
.cover-list ul li:first-child {
border-top: 0;
}
.cover-list ul li a {
display: block;
min-height: 172px;
padding: 30px 0 30px;
text-decoration: none;
color: #080808;
}
.cover-list ul li figure {
float: right;
position: relative;
width: 172px;
height: 172px;
margin: 0 0 0 80px;
background-color: #f6f6f6;
}
.cover-list ul li figure:before {
content: "NO IMAGE";
position: absolute;
top: 50%;
left: 0;
z-index: 0;
width: 100%;
height: 18px;
margin: -9px 0 0 0;
text-align: center;
font-family: 'Arial';
font-weight: bold;
font-size: 0.875em;
color: #cbcbcb;
}
.cover-list ul li figure img {
position: relative;
z-index: 10;
width: 100%;
height: 100%;
}
.cover-list ul li .category {
display: inline-block;
margin-bottom: 7px;
border-bottom: 1px solid #a3a3a3;
font-family: 'Nanum Myeongjo', serif;
font-size: 0.875em;
color: #808080;
}
.cover-list ul li .title {
display: block;
font-weight: 700;
font-size: 1.125em;
line-height: 1.4444em;
}
.cover-list ul li a:hover .title {
text-decoration: underline;
color: #666;
}
.cover-list ul li .excerpt {
display: block;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 4.8em;
font-size: 0.9375em;
line-height: 1.6;
color: #666;
}
.cover-list ul li .date {
display: block;
font-size: 0.8125em;
color: #999;
}
.cover-gallery {
margin: 0 auto -1px;
padding: 60px 0 75px;
border-bottom: 1px solid #ebebeb;
}
.cover-gallery h2 {
margin-bottom: 30px;
font-size: 1em;
}
.cover-gallery ul {
display: inline-block;
margin-left: -12px;
}
.cover-gallery ul li {
float: left;
width: 25%;
margin: 0 0 12px 0;
padding-left: 12px;
box-sizing: border-box;
}
.cover-gallery ul li a {
display: block;
position: relative;
width: 100%;
background-color: #ebebeb;
}
.cover-gallery ul li .title {
display: block;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
position: absolute;
top: 50%;
left:0;
z-index: 30;
overflow: hidden;
width: 100%;
max-height: 4.2em;
text-align: center;
line-height: 1.4;
padding: 0 20px;
color: #fff;
box-sizing: border-box;
transform: translateY(-50%);
visibility: hidden;
}
.cover-gallery ul li a:hover .title {
visibility: visible;
}
.cover-gallery ul li a:hover:after {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: 20;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
}
.cover-gallery ul li a:before {
content: "NO IMAGE";
position: absolute;
top: 50%;
left: 0;
z-index: 0;
width: 100%;
height: 18px;
margin: -9px 0 0 0;
text-align: center;
font-family: 'Arial';
font-weight: bold;
font-size: 0.875em;
color: #cbcbcb;
}
.cover-gallery ul li figure {
height: 0;
padding-bottom: 100%;
}
.cover-gallery ul li figure img {
position: relative;
width: 100%;
height: auto;
z-index: 10;
}
.cover-footer {
position: relative;
z-index: 10;
text-align: center;
}
.cover-footer .image {
height: 300px;
margin-bottom: 80px;
background-position: 50% 50%;
background-size: cover;
}
.cover-footer p {
margin: -5px 0 20px;
text-align: center;
font-weight: 700;
font-size: 1.25em;
color: #000;
}
.cover-footer .menu ul {
text-align: center;
}
.cover-footer .menu ul li {
display: inline-block;
margin: 40px 0 48px;
padding: 0 14px;
font-size: 0.875em;
}
.cover-footer .menu ul li a {
display: block;
text-decoration: none;
color: #282828;
}
.cover-footer .menu ul li a:hover {
text-decoration: underline;
color: #4e2e28;
}
.cover-footer p:first-child {
margin-top: 76px;
}
.cover-footer .social-link:first-child a {
margin-top: 80px;
}
.post-header {
position: relative;
overflow: hidden;
max-width: 860px;
margin: 0 auto 30px;
padding: 57px 0 15px;
border-bottom: 1px solid #ebebeb;
}
.post-header h1 {
float: left;
font-size: 1em;
}
.post-header .list-type {
float: right;
}
.post-header .list-type button {
float: left;
width: 24px;
height: 24px;
margin-left: 4px;
background-image: url(./images/ico_package.png);
background-repeat: no-repeat;
text-indent: -999em;
outline: none;
}
.post-header .list-type button:hover {
background-color: #ebebeb;
}
.post-header .list-type .list {
background-position: 0 -200px;
}
.post-header .list-type .thum {
background-position: -100px -200px;
}
.post-header .list-type .list.current {
background-position: -50px -200px;
}
.post-header .list-type .thum.current {
background-position: -150px -200px;
}
.post-item {
overflow: hidden;
width: 100%;
border-bottom: 1px solid #ebebeb;
}
.post-item a {
display: block;
min-height: 148px;
padding: 30px 0 30px;
text-decoration: none;
color: #080808;
}
.post-item:first-child a {
padding-top: 0;
}
.post-item a:hover .title {
text-decoration: underline;
color: #4e2e28;
}
.post-item .thum {
float: right;
overflow: hidden;
max-width: 148px;
margin-left: 80px;
}
.post-item .thum img {
width: 195px;
height: 148px;
margin: 0 0 0 -23.5px;
}
.post-item .category {
display: inline-block;
margin-bottom: 16px;
border-bottom: 1px solid #a3a3a3;
font-family: 'Nanum Myeongjo', serif;
font-size: 0.875em;
color: #808080;
}
.post-item .title {
display: block;
margin-bottom: 8px;
display:-webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 2.8em;
font-weight: 700;
font-size: 1.125em;
line-height: 1.4;
}
.post-item .excerpt {
display: block;
display:-webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient:vertical;
overflow:hidden;
font-size: 0.9375em;
line-height: 1.6;
color: #666;
}
.post-item .excerpt.protected:before {
content: "";
display: inline-block;
width: 9px;
height: 13px;
margin-right: 10px;
background: url(./images/ico_package.png) no-repeat -0 -100px;
vertical-align: baseline;
}
.post-item .date {
display: block;
font-size: 0.8125em;
color: #999;
}
.pagination {
max-width: 860px;
margin: 60px auto 160px;
text-align: center;
}
.pagination .current {
display: none;
}
.pagination .view-more {
display: inline-block;
width: 158px;
height: 50px;
border: 1px solid #dcdcdc;
font-size: 0.875em;
line-height: 50px;
color: #000;
}
.pagination .view-more:hover {
border-color: #4d4d4d;
background: none;
}
.pagination a {
display: inline-block;
width: 24px;
height: 24px;
margin: 0 4px;
text-decoration: none;
font-size: 0.9375em;
line-height: 24px;
color: #b2b2b2;
vertical-align: middle;
}
.pagination a:hover {
background-color: #ebebeb;
}
.pagination .selected {
color: #000;
}
.pagination .prev,
.pagination .next {
width: 50px;
height: 50px;
background-image: url(./images/ico_package.png);
background-repeat: no-repeat;
border: 1px solid #dcdcdc;
text-indent: -999em;
vertical-align: middle;
box-sizing: border-box;
}
.pagination .prev {
background-position: -50px 0;
}
.pagination .next {
background-position: -100px 0;
}
.pagination .prev:hover,
.pagination .next:hover {
background-color: transparent;
border-color: #4d4d4d;
}
.pagination .no-more-prev,
.pagination .no-more-next {display: none;}
.hgroup {
max-width: 860px;
margin: 50px auto 60px;
padding: 0 0 20px;
border-bottom: 1px solid #ebebeb;
}
.hgroup .category {
display: inline-block;
margin-bottom: 16px;
padding-top: 5px;
border-bottom: 1px solid #a3a3a3;
font-family: 'Nanum Myeongjo', serif;
font-size: 0.875em;
color: #808080;
}
.hgroup h1 {
display: block;
margin-bottom: 9px;
font-weight: 700;
font-size: 1.6875em;
line-height: 1.4444em;
}
.hgroup .post-meta {
display: block;
font-size: 0.8125em;
color: #808080;
}
.hgroup .post-meta a {
text-decoration: none;
color: #999;
}
.hgroup .post-meta a:hover {
text-decoration: underline;
}
.hgroup .post-meta span:before {
content: "";
display: inline-block;
width: 1px;
height: 10px;
margin: 0 7px 0 10px;
background-color: #ebebeb;
vertical-align: baseline;
}
.hgroup .post-meta span:first-child:before {
content: none;
}
.another_category {
margin: 60px auto 80px;
padding: 0 !important;
border: 0 !important;
}
.another_category h4 {
margin-bottom: 28px;
font-weight: 400;
font-size: 1em !important;
}
.another_category h4 em {
border-bottom: 1px solid #000;
font-style: normal;
}
.another_category table {
width: 100%;
border-collapse: collapse;
border: 0 !important;
font-size: 0.9375em;
color: #666;
}
.another_category table th {
padding: 8px 0 4px;
border: 0 !important;
text-align: left;
font-weight: 400;
}
.another_category table th a {
text-decoration: none;
color: #666;
}
.another_category td {
width: 60px;
padding: 8px 0 4px;
border-left: 0 !important;
border-top: 0 !important;
font-size: 0.8125em;
line-height: 1;
color: #b2b2b2;
}
.tags {
position: relative;
overflow: hidden;
max-width: 860px;
margin: 53px auto;
padding: 27px 0 28px 47px;
border-top: 1px solid #ebebeb;
border-bottom: 1px solid #ebebeb;
color: #999;
box-sizing: border-box;
}
.tags h2 {
float: left;
width: 47px;
margin-left: -47px;
font-weight: 400;
font-size: 1em;
color: #000;
}
.tags .items a {
display:inline-block;
margin-left: 15px;
text-decoration:none;
font-size: 0.8125em;
line-height: 1.5384;
color: #999;
}
.tags .items a:hover {
color: #7a583a;
}
.tags .items a:before {
content: "#";
}
.related-articles {
overflow: hidden;
width: 100%;
margin: 57px 0 69px;
}
.related-articles h2 {
margin-bottom: 28px;
font-weight: 400;
font-size: 1em;
}
.related-articles h2 em {
border-bottom: 1px solid #000;
font-style: normal;
}
.related-articles ul {
}
.related-articles ul li {
float: left;
width: 24.0625%;
padding-left: 1.25%;
}
.related-articles ul li:first-child {
padding-left: 0;
}
.related-articles ul li a {
display: block;
text-decoration: none;
color: #080808;
}
.related-articles ul li a:hover .title {
text-decoration: underline;
color: #4e2e28;
}
.related-articles ul li .thum {
display: block;
position: relative;
overflow: hidden;
height: 0;
margin-bottom: 12px;
padding-bottom: 75.757575757575758%;
background-color: #ebebeb;
}
.related-articles ul li .thum:before {
content: "NO IMAGE";
position: absolute;
top: 50%;
left: 0;
z-index: 0;
width: 100%;
height: 18px;
margin: -9px 0 0 0;
text-align: center;
font-family: 'Arial';
font-weight: bold;
font-size: 0.875em;
color: #cbcbcb;
}
.related-articles ul li .thum img {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
}
.related-articles ul li .category {
display: inline-block;
margin-bottom: 16px;
border-bottom: 1px solid #a3a3a3;
font-family: 'Nanum Myeongjo', serif;
font-size: 0.875em;
color: #808080;
}
.related-articles ul li .title {
display: block;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 2.75em;
margin-bottom: 9px;
font-weight: 700;
line-height: 1.375;
}
.related-articles ul li .date {
display: block;
font-size: 0.8125em;
color: #999;
}
/* Entry Content */
.entry-content h1 {
margin: 60px 0 19px;
font-size: 1.6875em;
}
.entry-content h2 {
margin: 60px 0 19px;
font-size: 1.5em;
}
.entry-content h3 {
margin: 60px 0 19px;
font-weight: 700;
font-size: 1.3125em;
}
.entry-content h4 {
margin: 60px 0 19px;
font-weight: 400;
font-size: 1.125em;
}
.entry-content p {
margin-bottom: 24px;
font-size: 0.9375em;
line-height: 1.6;
color: #666;
}
.entry-content p img {
max-width: 100%;
height: auto;
margin-top: 36px;
}
.entry-content hr {
display: block;
border: 0;
border-bottom: 1px solid #000;
height: 4px !important;
margin: 10px 0px !important;
}
.entry-content pre {
/*
word-break:break-all;
white-space:pre-wrap;
word-wrap:break-word;
*/
background: #f8f8f8;
border: 1px solid #000;
margin: 5px 0px;
padding: 10px;
}
.entry-content pre code {
tab-size: 4;
font-family: 'Open Sans', sans-serif;
overflow-x: auto;
}
.entry-content ul,
.entry-content ol {
margin-bottom: 10px;
}
.entry-content ul {
list-style: disc inside;
}
.entry-content ul li {
position: relative;
padding-left: 22px;
font-size: 0.9375em;
line-height: 1.6;
color: #666;
list-style: inherit;
text-indent: -22px;
}
.entry-content ol {
list-style: inside decimal;
}
.entry-content ol li {
position: relative;
padding-left: 16px;
font-size: 0.9375em;
line-height: 1.6;
color: #666;
text-indent: -15px;
list-style: inherit;
}
.entry-content a {
color: #666;
}
.entry-content img.alignleft {
float: left;
margin: 0 22px 22px 0;
}
.entry-content img.aligncenter {
display: block;
margin: 0 auto 22px;
}
.entry-content img.alignright {
float: right;
margin: 0 0 22px 22px;
}
.entry-content blockquote {
margin-bottom: 60px;
padding: 16px 20px;
border-left: 4px solid #e6e6e6;
}
.entry-content blockquote p {
margin: 22px 0 0;
}
.entry-content blockquote p:first-child {
margin-top: 0;
}
.entry-content table {
width:100%;
margin-bottom: 22px;
border: 1px solid #e6e6e6;
border-collapse: collapse;
text-align: center;
font-size: 0.875em;
line-height: 1.5714;
color: #666;
}
.entry-content table thead th {
padding:7px 0 11px;
border-left: 1px solid #e6e6e6;
}
.entry-content table tbody td {
padding:7px 0 11px;
border-left: 1px solid #e6e6e6;
border-top: 1px solid #e6e6e6;
}
.entry-content input {
display: inline-block;
height: 40px;
padding: 0 10px;
border: 1px solid #e6e6e6;
font-size: 0.875em;
line-height: 1.25;
color: #666;
box-sizing: border-box;
vertical-align: middle;
}
.entry-content .protected_form {
margin-bottom: 40px;
padding: 120px 0 200px;
border-bottom: 1px solid #7a583a;
text-align: center;
}
.entry-content .protected_form p:before {
content: "";
display: block;
width: 64px;
height: 84px;
margin: 0 auto 30px;
background: url(./images/ico_package.png) no-repeat -50px -100px;
}
.entry-content .protected_form input {
width: 220px;
height: 50px;
margin-bottom: 10px;
background-color: transparent;
vertical-align: top;
}
.entry-content .cap1 {
text-align: center;
font-size: 0.875em;
font-style: italic;
}
.entry-content .iframe-wrap {
position: relative;
height: 0;
padding-bottom: 56.25%;
}
.entry-content .iframe-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Comment */
.comments {
max-width: 860px;
margin: 0 auto 60px;
padding-bottom: 30px;
border-bottom: 1px solid #e6e6e6;
}
.comments h2 {
font-weight: 400;
font-size: 1em;
color: #000;
}
.comments .comment-list {
font-size:16px;
margin-bottom: 6px;
overflow:hidden;
}
.comments .comment-list ul li {
padding: 30px 0 25px;
border-top: 1px solid #e6e6e6;
position: relative;
min-height: 48px;
}
.comments .comment-list ul li:first-child {
border: none;
}
.comments .comment-list ul li ul li {
padding: 26px 0 0 60px;
border-top: 0;
border-bottom: 0;
}
.comments .comment-list ul li .author-meta {
position: absolute;
overflow: hidden;
top:30px; height:48px;
left:0; right:0;
padding: 4px 0 0 60px;
}
.comments .comment-list ul li ul li .author-meta {
top:26px;
left:60px;
}
.comments .comment-list ul li .author-meta .avatar {
position: absolute;
left:0; top:0;
width: 48px;
height: 48px;
border-radius: 50%;
}
.comments .comment-list ul li .author-meta span {
display:inline-block;
}
.comments .comment-list ul li .author-meta a {
text-decoration:none;
color: #000;
}
.comments .comment-list ul li .author-meta .nickname {
float:left;
font-size: 0.875em;
line-height: 20px;
}
.comments .comment-list ul li .author-meta .nickname .tistoryProfileLayerTrigger {
margin-bottom: 3px;
margin-right: 0;
vertical-align: bottom;
}
.comments .comment-list ul li .author-meta .date {
float:left;
margin-left: 10px;
font-size: 0.75em;
color: #999;
line-height:20px;
}
.comments .comment-list ul li .author-meta .date:before,
.comments .comment-list ul li .author-meta .date a:before {
content: "";
display: inline-block;
width: 1px;
height: 9px;
margin-right: 10px;
background-color: #b2b2b2;
}
.comments .comment-list ul li .author-meta .date a {
margin-left: 10px;
}
.comments .comment-list ul li .control {
position: absolute;
top: 33px;
right:0;
}
.comments .comment-list ul li ul li .control {
top: 29px;
}
.comments .comment-list ul li .control a {
margin:0 2px;
text-decoration: none;
font-size: 12px;
color: #999;
}
.comments .comment-list ul li p {
position:relative;
margin: 29px 0 0 60px;
font-size: 0.875em;
line-height: 1.5714;
color: #666;
}
.comments .comment-form .field {
position: relative;
overflow: hidden;
width: 100%;
margin-bottom: 8px;
}
.comments .comment-form input[type=text],
.comments .comment-form input[type=password],
.comments .comment-form textarea {
border: 1px solid #e6e6e6;
font-size: 0.9375em;
line-height: 1.25;
color: #666;
background-color: transparent;
}
.comments .comment-form input[type=text],
.comments .comment-form input[type=password] {
width: 140px;
height: 52px;
margin-right: 6px;
padding: 10px;
box-sizing: border-box;
}
.comments .comment-form input::-webkit-input-placeholder,
.comments .comment-form textarea::-webkit-input-placeholder {color: #d6d6d6;}
.comments .comment-form textarea {
display: block;
width: 100%;
margin-bottom: 10px;
padding: 10px;
resize: none;
box-sizing: border-box;
}
.comments .comment-form .field .secret {
display: inline-block;
margin-left: 15px;
vertical-align: middle;
}
.comments .comment-form .field .secret input {
display: none;
}
.comments .comment-form .field .secret label {
font-size: 0.8125em;
line-height: 52px;
color: #666;
outline: none;
cursor: pointer;
}
.comments .comment-form .field .secret label:before {
content: "";
display: inline-block;
width: 19px;
height: 18px;
margin-right: 9px;
border: 1px solid #e1e1e1;
vertical-align: middle;
background-color: #fff;
}
.comments .comment-form .field .secret input[type=checkbox]:checked+label:before {
background-image: url(./images/ico_package.png);
background-repeat: no-repeat;
background-position: -150px -100px;
}
.comments .comment-form .field .submit {
float: right;
}
/* Widget & Template Page */
/* ETC */
#dimmed {
position: fixed;
top: 0;
left: 0;
z-index: 300;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.43);
}
/* Post Type & Color Type */
.post-type-thumbnail .post-item {
float: left;
width: 24.0625%;
margin: 0 0 58px;
padding-left: 1.25%;
border: 0;
}
.post-type-thumbnail .post-item:nth-child(4n+1) {
padding-left: 0;
}
.post-type-thumbnail .post-item a {
padding: 0;
}
.post-type-thumbnail .post-item .thum {
display: block;
position: relative;
overflow: hidden;
width: 100%;
max-width: none;
height: 0;
margin: 0 0 9px 0;
padding-bottom: 75.757575757575758%;
background-color: #ebebeb;
}
.post-type-thumbnail .post-item .thum:before {
content: "NO IMAGE";
position: absolute;
top: 50%;
left: 0;
z-index: 0;
width: 100%;
height: 18px;
margin: -9px 0 0 0;
text-align: center;
font-family: 'Arial';
font-weight: bold;
font-size: 0.875em;
color: #cbcbcb;
}
.post-type-thumbnail .post-item .thum img {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
margin: 0;
}
.post-type-thumbnail .post-item .title {
display: block;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
width: 100%;
height: 2.75em;
font-weight: 700;
font-size: 1em;
line-height: 1.375em;
}
.post-type-thumbnail .post-item .excerpt {
display: none;
}
.post-type-thumbnail .pagination {
margin-top: 0;
}
/* Color Type */
.color-chocolate,
.color-chocolate .cover-footer,
.color-chocolate #footer {
background-color: #f4f2f1;
}
.color-chocolate #header h1 a,
.color-chocolate #gnb ul li a,
.color-chocolate #footer .admin,
.color-chocolate .cover-thumbnail-list ul li a,
.color-chocolate .cover-masonry ul li a,
.color-chocolate .cover-list ul li a,
.color-chocolate .cover-footer p,
.color-chocolate .cover-footer .menu ul li a,
.color-chocolate .post-item a,
.color-chocolate .hgroup h1,
.color-chocolate .hgroup .post-meta a,
.color-chocolate .entry-content h1,
.color-chocolate .entry-content h2,
.color-chocolate .entry-content h3,
.color-chocolate .entry-content h4,
.color-chocolate .entry-content a,
.color-chocolate .related-articles ul li a,
.color-chocolate .comments .comment-list ul li .author-meta span,
.color-chocolate .comments .comment-list ul li .author-meta .date a,
.color-chocolate .pagination .selected {
color: #4e2e28;
}
.color-chocolate #header .menu p,
.color-chocolate #footer p,
.color-chocolate .cover-thumbnail-list ul li .date,
.color-chocolate .cover-masonry ul li .excerpt,
.color-chocolate .cover-list ul li .excerpt,
.color-chocolate .cover-list ul li .date,
.color-chocolate .post-item .excerpt,
.color-chocolate .post-item .date,
.color-chocolate .hgroup .post-meta,
.color-chocolate .another-category td,
.color-chocolate .tags .items a,
.color-chocolate .related-articles ul li .date,
.color-chocolate .comments .comment-list ul li .author-meta .date,
.color-chocolate .comments .comment-list ul li .author-meta .control a {
color: #a69693;
}
.color-chocolate .cover-thumbnail-list ul li .category,
.color-chocolate .cover-masonry ul li .category,
.color-chocolate .hgroup .category {
color: #94817e;
}
.color-chocolate .entry-content p,
.color-chocolate .entry-content table,
.color-chocolate .entry-content ul li,
.color-chocolate .entry-content ol li,
.color-chocolate .another-category table,
.color-chocolate .another-category table th a,
.color-chocolate .comments .comment-list ul li p {
color: #836c68;
}
.color-chocolate #gnb ul li a:hover,
.color-chocolate .cover-footer .menu ul li a:hover,
.color-chocolate .cover-thumbnail-list ul li a:hover .title,
.color-chocolate .cover-masonry ul li a:hover .title,
.color-chocolate .cover-list ul li a:hover .title,
.color-chocolate .post-item a:hover .title,
.color-chocolate .related-articles ul li a:hover .title {
color: #2d140f;
}
.color-chocolate .cover-thumbnail-list ul li .category,
.color-chocolate .cover-masonry ul li .category,
.color-chocolate .hgroup .category {
border-color: #a69693;
}
.color-chocolate .entry-content ul li:before {
background-color: #a69693;
}
.color-chocolate #header .mobile-menu:before,
.color-chocolate #header .mobile-menu:after,
.color-chocolate #header .mobile-menu span {
background-color: #4e2e28;
}
.color-chocolate .pagination a:hover,
.color-chocolate #header .search:hover:before {
background-color: #e7e2e1;
}
.color-chocolate .btn,
.color-chocolate .cover-thumbnail-list
.color-chocolate .cover-masonry
.color-chocolate .cover-list
.color-chocolate .cover-gallery,
.color-chocolate .cover-list ul li,
.color-chocolate .post-item,
.color-chocolate .hgroup,
.color-chocolate .entry-content table,
.color-chocolate .entry-content table thead th,
.color-chocolate .entry-content table tbody td,
.color-chocolate .entry-content blockquote,
.color-chocolate .comments,
.color-chocolate .comments .comment-list ul li,
.color-chocolate .comments .comment-form input[type=text],
.color-chocolate .comments .comment-form input[type=password],
.color-chocolate .comments .comment-form textarea,
.color-chocolate .comments .comment-form .field .secret label:before,
.color-chocolate .pagination .prev,
.color-chocolate .pagination .next,
.color-chocolate .pagination a {
border-color: #e7e2e1;
}
.color-chocolate .social-link a,
.color-chocolate #header .search button,
.color-chocolate #header .search:before,
.color-chocolate .cover-thumbnail-list ul li .thum:before,
.color-chocolate .cover-gallery ul li a:before,
.color-chocolate .post-header .list-type button,
.color-chocolate .related-articles ul li .thum:before {
background-image: url(./images/ico_package_chocolate.png);
}
.color-chocolate .btn:hover,
.color-chocolate .pagination .prev:hover,
.color-chocolate .pagination .next:hover {
border-color: #4d4d4d;
}
.color-chocolate #header .search.on {
border-color: #4e2e28;
}
/* Retina Display */
@media only screen and (-webkit-min-device-pixel-ratio:1.5) {
#header .search button,
#header .search:before,
.social-link a,
.cover-slider .prev,
.cover-slider .next,
.cover-gallery ul li a:before,
.post-header .list-type button,
.pagination .prev,
.pagination .next,
.comments .comment-form .field .secret input[type=checkbox]:checked+label:before {
background-image: url(./images/ico_package_2x.png);
background-size: 200px auto;
}
.color-chocolate .social-link a,
.color-chocolate #header .search button,
.color-chocolate .cover-gallery ul li a:before,
.color-chocolate .post-header .list-type button {
background-image: url(./images/ico_package_chocolate_2x.png);
background-size: 200px auto;
}
}
/* Media Screen - Tablet */
@media screen and (max-width:1023px) {
#header .search.on {
width: 180px;
}
#content .guest_inner,
#content>.inner {
padding: 0 40px;
}
.post-header {
padding: 40px;
}
.cover-thumbnail-list {
padding: 40px 40px 65px;
}
.cover-slider ul li .title {
max-width: none;
padding: 0 98px
}
.cover-slider .prev {
left: 14px;
margin-left: 0;
}
.cover-slider .next {
left: auto;
right: 14px;
margin-left: 0;
}
.cover-masonry {
padding: 60px 40px 81px;
}
.cover-list {
padding: 30px 40px 85px;
}
.cover-gallery {
padding: 60px 40px 130px;
}
}
/* Media Screen - Mobie */
@media screen and (max-width:767px) {
#header .mobile-menu {
top: 10px;
left: 11px;
}
#header .menu {
padding: 84px 20px 189px;
}
#header .menu .social-link,
#header .menu p {
left: 20px;
}
#header h1 {
padding: 15px 62px;
line-height: 1.25;
}
#header h1 a {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#header .search {
top: 10px;
right: 1px;
}
#header .search.on {
position: absolute;
top: 60px;
left: 0;
right: auto;
z-index: 100;
width: 100%;
padding: 10px 18px 10px 17px;
border: 0;
background-color: #fff;
box-sizing: border-box;
}
#header .search.on input {
border-bottom: 1px solid #000;
}
#header .search.on button {
top: -50px;
right: 1px;
}
#content .guest_inner,
#content>.inner {
padding: 0 18px;
}
.post-header {
padding: 20px 18px;
}
.cover-thumbnail-list {
padding: 40px 18px 65px;
}
.cover-thumbnail-list ul li,
.related-articles ul li {
width: 48.591549295774648%;
padding-left: 2.816901408450704%;
}
.cover-thumbnail-list ul li:nth-child(odd),
.related-articles ul li:nth-child(odd) {
clear: both;
padding-left: 0;
}
.cover-slider ul li {
width: 100%;
box-sizing: border-box;
}
.cover-slider ul li .title {
display:-webkit-box;
-webkit-line-clamp:4;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 5.2em;
padding: 0 18px;
font-size: 2.125em;
}
.cover-slider .prev {
top: auto;
bottom: 0;
left: 0;
}
.cover-slider .next {
top: auto;
right: 0;
bottom: 0;
}
.cover-masonry {
padding: 60px 18px 81px;
}
.cover-masonry ul li {
float: none;
width: 100%;
}
.cover-masonry ul li .category,
.cover-list ul li .category {
margin-bottom: 8px;
}
.cover-thumbnail-list ul li .title,
.related-articles ul li .title,
.cover-list ul li .title {
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 4.2em;
line-height: 1.4;
}
.cover-list {
padding: 30px 18px 80px;
}
.cover-list h2{
margin: 30px 0 0 0;
}
.cover-list ul li a {
min-height: 98px;
}
.cover-list ul li figure {
width: 113px;
height: 113px;
margin: 0 0 0 18px;
}
.cover-list ul li .title {
-webkit-line-clamp: 2;
margin-bottom: 3px;
padding-top: 6px;
font-size: 1em;
}
.cover-list ul li .category {
display: none;
}
.cover-list ul li .excerpt {
-webkit-line-clamp: 2;
font-size: 0.8125em;
line-height: 1.5;
}
.cover-gallery {
padding: 60px 18px 130px;
}
.cover-gallery ul li {
width: 50%;
}
.post-item a {
min-height: 100px;
}
.post-item .thum {
max-width: 113px;
margin-left: 18px;
}
.post-item .thum img {
width: auto;
height: 113px;
margin: 0 0 0 -16.5px;
}
.post-item .title {
line-height: 1.2;
}
.post-item .excerpt {
-webkit-line-clamp: 2;
}
.post-type-thumbnail .post-item {
width: 48.591549295774648%;
margin-bottom: 26px;
padding-left: 2.816901408450704%;
}
.post-type-thumbnail .post-item:nth-child(4n+1) {
padding-left: 2.816901408450704%;
}
.post-type-thumbnail .post-item:nth-child(2n+1) {
clear: both;
padding-left: 0%;
}
.post-type-thumbnail .post-item .title {
-webkit-line-clamp: 3;
height: auto;
max-height: 4.125em;
}
.entry-content .table-wrap {
overflow: auto;
width: 100%;
}
.entry-content table {
width: 680px;
table-layout: fixed;
}
.entry-content .protected_form input {
display: block;
width: 160px;
margin: 0 auto 10px;
}
.pagination {
padding: 0 18px;
}
.pagination a {
display: none;
}
.pagination .current {
display: block;
font-size: 0.875em;
line-height: 50px;
}
.pagination .prev {
display: block;
float: left;
margin: 0;
}
.pagination .next {
display: block;
float: right;
margin: 0;
}
.another-category table th {
display: block;
padding: 0;
}
.another-category table td {
display: block;
margin-bottom: 19px;
}
.comments .comment-list {
margin-bottom:10px;
margin-top:10px;
border-top: 1px solid #e6e6e6;
}
.comments .comment-list ul li {
padding-bottom:0;
}
.comments .comment-list ul li ul {
border-top: 1px solid #e6e6e6;
}
.comments .comment-list ul li ul li {
padding:20px 0 0 48px;
}
.comments .comment-list ul li ul li:before {
content: "";
position: absolute;
top: 34px;
left:18px;
width: 12px;
height: 12px;
background: url(./images/ico_package.png) no-repeat 0 -150px;
}
.comments .comment-list ul li .author-meta,
.comments .comment-list ul li ul li .author-meta {
position:relative;
top:0;
left:0;
}
.comments .comment-list ul li .author-meta img {
position: absolute;
top: 0;
left: 0;
}
.comments .comment-list ul li .author-meta .nickname,
.comments .comment-list ul li .author-meta .date {
display: block;
float: none;
line-height: 1.5;
}
.comments .comment-list ul li .author-meta .nickname .tistoryProfileLayerTrigger {
margin-bottom:4px;
}
.comments .comment-list ul li .author-meta .date {
margin-left: 0;
margin-top: 2px;
}
.comments .comment-list ul li .author-meta .date::before {
display: none;
}
.comments .comment-list ul li p {
margin: 14px 0 0;
}
.comments .comment-list ul li .control {
position: relative;
top: auto;
right: auto;
display: block;
margin: 9px 0 18px -2px;
}
.comments .comment-list ul li ul li .control {
top: auto;
}
.comments .comment-form input[type=text],
.comments .comment-form input[type=password] {
width: 100px;
}
.comments .comment-form .field .secret {
margin-left: 0;
}
.comments .comment-form .field .secret label:before {
margin-right: 5px;
}
.comments .comment-form .field .submit {
display: block;
float: none;
margin: 60px auto 0;
}
}반응형
'IT TMI > 생활 IT' 카테고리의 다른 글
| [생활 IT] 컴퓨터 사양 확인 (0) | 2019.11.14 |
|---|---|
| [생활 IT] 윈도우탐색기(바로가기) 기본폴더 시작위치 변경 (0) | 2019.11.14 |
| [생활 IT] 아웃룩 다른PC에서 설정/아웃룩 동기화/아웃룩 백업 (0) | 2019.11.13 |
| [생활 IT] 윈도우 7 설치후 인터넷&시스템 글 깨짐현상 (0) | 2019.11.13 |
| [생활 IT] 컴퓨터(PC) 시스템 타입 32bit(86x) 64bit(64x) 확인 (0) | 2019.11.08 |
