다들 저마다의 이유로 티스토리 블로그를 개설하는데요,
처음에는 티스토리 측에서 기본으로 제공하는 스킨을 설정할 테지만
천편일률적인 UI보다는 블로그에서 다루는 콘텐츠에 따라 레이아웃을 수정하고 싶을 때가 있죠.
이번 글은 티스토리 블로그에 적용할 스킨을 커스터마이징하는 방법에 대해서 다룹니다.
저는 “Magazine(반응형/목록광고지원)”이라 되어있는 기본 스킨을 우선 선택했습니다.
이 스킨의 특징은, 게시물을 열람하는 화면이 본문과 목록으로 구분되어있다는 점입니다.
애드센스를 연동할 경우 본문 사이에 광고가 나타나 짜증을 유발하는 경우가 있는데,
어떤 분들은 이를 목록 광고로만 노출되게 설정합니다.
“Magazine(반응형/목록광고지원)”은 이에 최적화된 스킨이라 할 수 있겠습니다.
그러나 저는 티스토리를 운영하며 어떠한 수익도 일절 내지 않고
오로지 정보 공유만을 추구하므로… (아래 공지사항 참조)
https://ellie0129.tistory.com/notice/5
AI agent ?
본 블로그에 업로드되는 콘텐츠는 모두 운영자가 직접 제작합니다.정보 생성 과정에 있어 AI의 개입에 의한 환각이 일절 없음을 분명히 밝힙니다. 근래 유행하는 ‘AI 자동화를 통한 블로그 수익
ellie0129.tistory.com
불필요한 사이드바를 제거해서 본문이 좀 더 넓게 보이도록 수정하고자 합니다.
우선 [블로그 관리 > 꾸미기 > 스킨편집]으로 들어와주세요.
그리고 우측 상단에 보이는 “html 편집” 버튼을 눌러줍니다.
그러면 아래와 같은 창이 뜨는데요, HTML 코드가 적혀있는 칠판이라 보시면 됩니다.
그 칠판을 클릭해서, Ctrl+A로 전체 선택 후 Ctrl+C로 복사해주세요.
그 다음으로 할 일은 생성형 AI에게 코드를 수정해달라고 부탁하는 것입니다.
코딩과 관련된 업무는 Claude가 제일 잘합니다.
무료로 가입 가능하니, 괜히 Chat GPT를 써서 시간낭비 하지 마세요.
GPT는 코딩을 잘 못하는 편에 속합니다.
저는 프롬프트를 입력할 때 채팅창에 바로 작성하지 않고, 우선 메모장에 따로 써봅니다.
메모장에 원하는 요청사항을 적은 후 줄바꿈을 한 뒤 Ctrl+V를 통해 아까 복사해온 코드를 붙여넣었습니다.
그것을 다시 통째로 Claude에게 업로드하면, 이것을 프롬프트로 인식하죠.
부연 설명을 위해 제 티스토리 블로그 화면을 캡쳐해서 넣었습니다.
이렇게 하면 문제를 더 잘 해결해줍니다.
잠깐 기다리면 금방 코드를 완성해줍니다. 우측 상단의 복사 버튼을 눌러주세요.
다시 티스토리 블로그 스킨 수정 메뉴에서 HTML 칠판을 열겠습니다.
기존에 작성되어있는 코드를 Ctrl+A로 모두 선택 후, 삭제해주세요.
깨끗해진 칠판에 Ctrl+V를 누르면 Claude가 수정해준 코드가 들어갈 것입니다.
우측 상단에 “적용” 버튼을 눌러주면 끝입니다.
이런 메시지가 뜬다면 확인을 눌러주세요.
지금 이 글을 읽고 계시는 화면이 결과물입니다.
사이드바가 감쪽같이 없어졌죠?
여러분들도 자신만의 콘텐츠를 전달하기 위한 최적의 UI를 고려해서
티스토리 기본 스킨을 커스터마이징 해보세요.
AI는 최고의 동반자이고, 코딩은 특히 Cluade가 잘합니다.
필요하실까봐 제가 사용중인 스킨의 HTML 코드를 아래 붙여놓겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>블로그 스킨 커스텀</title>
<meta name="title" content="블로그 스킨 커스텀" />
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<link rel="alternate" type="application/rss+xml" title="블록체인 ｜ 사회학 ｜ 창업" href="https://ellie0129.tistory.com/rss" />
<link rel="stylesheet" href="./images/webfonticon.css" />
<link rel="stylesheet" href="./images/slick.css" />
<link rel="stylesheet" href="./style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script src="./images/slick.js"></script>
<script src="./images/iscroll.js"></script>
<script src="./images/front.js"></script>
<script src="./images/common.js"></script>
<style>
/* 사이드바 제거 후 본문 영역 확장을 위한 CSS */
.wrap_detail_content {
display: flex;
flex-direction: column;
}
#sidebar {
display: none !important;
}
.content.sub_content {
max-width: 100%;
width: 100%;
}
.inner_content {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.detail_area {
max-width: none;
width: 100%;
}
.box_article {
max-width: none;
}
.article_cont {
max-width: none;
}
/* 반응형을 위한 추가 스타일 */
@media (max-width: 768px) {
.inner_content {
padding: 0 15px;
}
}
</style>
</head>
<body id="tt-body-page" class="">
<!-- theme -->
<s_t3>
<div id="container">
<div id="header" class="header">
<div class="inner_header">
<div class="box_header">
<h1 class="logo">
<a href="https://tistory.mow.codes/" title="블록체인 ｜ 사회학 ｜ 창업" class="link_logo">
<s_if_var_logoImage>
<img src="" class="img_logo" alt="로고 이미지">
</s_if_var_logoImage>
<s_not_var_logoImage>
블록체인 ｜ 사회학 ｜ 창업
</s_not_var_logoImage>
</a>
</h1>
<div class="btn_box">
<!-- GNB -->
<button type="button" class="btn_util btn_search" title="검색"><span class="blind">검색</span></button>
<button type="button" class="btn_util btn_menu" title="메뉴"><span class="blind">메뉴</span></button>
</div>
</div>
<!-- fixed menu only detail -->
<div class="box_header box_fix_header">
<h2 class="blind">고정 헤더 영역</h2>
<div class="area_menu">
<a href="#" title="페이지 뒤로가기" class="btn_util link_back">
<span class="box_svg">
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="26" viewBox="0 0 15 26" class="img_svg">
<defs>
<path id="mainSlideArrowLeft" d="M12 20L25 7l1.4 1.4L14.8 20l11.6 11.6L25 33z"></path>
</defs>
<g fill="none" fill-rule="evenodd" transform="translate(-13 -5)">
<path d="M0 0h40v40H0z"></path>
<mask id="mainSlideArrowLeftMask" fill="#fff">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#mainSlideArrowLeft"></use>
</mask>
<g fill="#fff" fill-opacity="1" mask="url(#mainSlideArrowLeftMask)" class="svg_bg">
<path d="M0 0h40v40H0z"></path>
</g>
</g>
</svg>
</span>
</a>
<div class="box_fix_tit">
<span class="blind">글 제목</span>
<p class="txt_fix_tit"></p>
</div>
<button type="button" class="btn_util btn_menu" title="메뉴"><span class="blind">메뉴</span></button>
</div>
<div class="area_util">
<div class="inner_area_util">
<button type="button" class="util_like">
<span class="blind">좋아요</span>
<i class="icon_font icon-favorite-o"></i>
<span class="txt_count">-</span>
</button>
<div class="box_util">
<button type="button" class="util_comment">
<span class="blind">댓글달기</span>
<i class="icon_font icon-chat-o"></i>
<span class="txt_count">-</span>
</button>
<button type="button" class="util_share">
<span class="blind">공유하기</span>
<i class="icon_font icon-share-alt-o"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div> <!-- header close -->
<div class="ly_area nav" style="display:none">
<div class="inner_ly_area">
<div class="ly_header">
<h2 class="blind">메뉴 레이어</h2>
<div class="ly_logo">
<a href="https://tistory.mow.codes/" title="블록체인 ｜ 사회학 ｜ 창업" class="link_logo">
<s_if_var_logoImage>
<img src="" class="img_logo" alt="로고 이미지">
</s_if_var_logoImage>
<s_not_var_logoImage>
블록체인 ｜ 사회학 ｜ 창업
</s_not_var_logoImage>
</a>
</div>
<button type="button" title="레이어 닫기" class="btn_menu_close btn_ly_close">
</button>
</div> <!-- ly_header -->
<h3 class="blind">메뉴 리스트</h3>
<div class="tistory_support_menus">
</div>
<div class="box_home">
</div>
<ul class="list_category">
</ul>
</div>
</div> <!-- nav -->
<div class="ly_area search_area" style="display:none">
<div class="inner_ly_area">
<div class="ly_header">
<h2 class="blind">검색 레이어</h2>
<div class="ly_logo">
<a href="https://tistory.mow.codes/" title="블록체인 ｜ 사회학 ｜ 창업" class="link_logo">
<s_if_var_logoImage>
<!-- logo img -->
<img src="" class="img_logo" alt="로고 이미지">
</s_if_var_logoImage>
<s_not_var_logoImage>
블록체인 ｜ 사회학 ｜ 창업
</s_not_var_logoImage>
</a>
</div>
<button type="button" title="레이어 닫기" class="btn_menu_close btn_ly_close">
<span class="box_svg">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" class="img_svg">
<defs>
<path id="searchCloseSvg"
d="M33.4 8L32 6.6l-12 12-12-12L6.6 8l12 12-12 12L8 33.4l12-12 12 12 1.4-1.4-12-12z" />
</defs>
</svg>
</span>
</button>
</div> <!-- ly_header -->
<h3 class="blind">검색 영역</h3>
<form action="" method="get">
<legend><span class="blind">컨텐츠 검색</span></legend>
<div class="box_form">
<s_search>
<label for="" class="screen_out">블로그 내 검색</label>
<input id="" type="text" name="" title="검색어 입력"
placeholder="검색어 입력.." value="" class="inp_search"
onkeypress="if (event.keyCode == 13) { }">
</s_search>
<button type="button" title="검색어 삭제" class="btn_search_del">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" class="img_svg">
<defs>
<path id="textDelBtnSvg"
d="M20 2C10.059 2 2 10.059 2 20s8.059 18 18 18 18-8.059 18-18S29.941 2 20 2zm8 24.6L26.6 28 20 21.4 13.4 28 12 26.6l6.6-6.6-6.6-6.6 1.4-1.4 6.6 6.6 6.6-6.6 1.4 1.4-6.6 6.6 6.6 6.6z" />
</defs>
<g fill="none" fill-rule="evenodd" transform="translate(-2 -2)">
<path d="M0 0h40v40H0z" />
<mask id="textDelBtnSvgMask" fill="#fff">
<use xlink:href="#textDelBtnSvg" />
</mask>
<g fill="#000" fill-opacity="1" mask="url(#textDelBtnSvgMask)" class="svg_bg">
<path d="M0 0h40v40H0z" />
</g>
</g>
</svg>
</button>
</div>
</form>
</div>
</div> <!-- search_area -->
<div class="wrap_content">
<s_cover_group>
<div id="content_cover_group" class="content">
<div class="inner_content">
<s_cover_rep>
<s_cover name='image_slide'>
<div class="slide_area main_slide">
<div class="inner_main_slide">
<s_cover_item>
<div class="slide_item">
<a href=""
style="background-image:url('<s_cover_item_thumbnail>https://img1.daumcdn.net/thumb/R1600x0.fwebp.q85/?fname=</s_cover_item_thumbnail>')"
class="link_slide">
<div class="inner_link_slide">
<div class="slide_txt">
<p class="txt_tit"></p>
<p class="txt_cont"></p>
</div>
</div>
</a>
</div>
</s_cover_item>
</div>
<div class="box_arrow">
<div class="inner_box_arrow">
<button type="button" class="btn_arrow btn_prev">
<span class="box_svg">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"
class="img_svg">
<defs>
<path id="mainSlideArrowLeft" d="M12 20L25 7l1.4 1.4L14.8 20l11.6 11.6L25 33z" />
</defs>
<g fill="none" fill-rule="evenodd">
<path d="M0 0h40v40H0z" />
<use fill="#fff" fill-rule="nonzero" xlink:href="#mainSlideArrowLeft" />
</g>
</svg>
</span>
</button>
<button type="button" class="btn_arrow btn_next">
<span class="box_svg">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"
class="img_svg">
<defs>
<path id="mainSlideArrowRight" d="M28 20L15 33l-1.4-1.4L25.2 20 13.6 8.4 15 7z" />
</defs>
<g fill="none" fill-rule="evenodd">
<path d="M0 0h40v40H0z" />
<use fill="#fff" fill-rule="nonzero" xlink:href="#mainSlideArrowRight" />
</g>
</svg>
</span>
</button>
</div>
</div> <!-- btn_arrow -->
</div> <!-- main_slide -->
</s_cover>
<s_cover name='webzine'>
<!-- scroll_area -->
<div class="section_area section_type_wide">
<h2 class="tit_section">
<span class="txt_section"></span>
</h2>
<ul class="list_article list_type1 list_type_wide">
<s_cover_item>
<li>
<a href="" class="link_thumb">
<s_cover_item_thumbnail>
<div class="box_thumb thumb_img"
style="background-image: url('">
</div>
</s_cover_item_thumbnail>
<div class="box_thumb no_img">
<!-- 이미지 없거나 에러 일경우 class="box_thumb" 영역에 class="no_img" 추가, 내부에 아이콘 적용 -->
<div class="default_img">
<span class="box_svg">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"
class="img_svg">
<defs>
<path id="errorIconSvg"
d="M18.5 27.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0zM21 11h-2v13h2V11zm-1-9C10.059 2 2 10.059 2 20s8.059 18 18 18 18-8.059 18-18S29.941 2 20 2zm0 34c-8.837 0-16-7.163-16-16S11.163 4 20 4s16 7.163 16 16a16 16 0 0 1-16 16z" />
</defs>
<g fill="none" fill-rule="evenodd">
<path d="M0 0h40v40H0z" />
<use fill="#fff" fill-rule="nonzero" xlink:href="#errorIconSvg" />
</g>
</svg>
</span>
</div>
</div>
<div class="cont_thumb">
<s_cover_item_article_info>
<strong class="txt_category"></strong>
</s_cover_item_article_info>
<p class="txt_thumb"></p>
<p class="txt_summary"></p>
</div>
</a>
</li>
</s_cover_item>
</ul>
</div> <!-- section_area -->
</s_cover>
<s_cover name='gallery'>
<div class="section_area">
<h2 class="tit_section">
<span class="txt_section"></span>
</h2>
<ul class="list_post">
<s_cover_item>
<li class="item_post">
<a href="" class="link_post item-thumbnail"
<s_cover_item_thumbnail>style="background-image:url('')"
</s_cover_item_thumbnail>>
<div class="info">
<strong class="name"></strong>
</div>
</a>
</li>
</s_cover_item>
</ul>
</div> <!-- section_area -->
</s_cover>
<s_cover name='slide_list1'>
<div class="section_area scroll_area category_area">
<h2 class="tit_section"></h2>
<div class="wrap_scroller wrap_category_scroller">
<div class="scroller">
<s_cover_item>
<div class="item_scroller">
<div class="box_item">
<a href="" title="" class="link_item">
<s_cover_item_thumbnail>
<div class="box_thumb thumb_img"
style="background-image:url('')">
</div>
</s_cover_item_thumbnail>
<div class="box_thumb no_img" style="">
<!-- 이미지 없거나 에러 일경우 class="box_thumb" 영역에 class="no_img" 추가, 내부에 아이콘 적용 (동적 또는 리스트에 넣어 놓아도 됩니다.) -->
<div class="default_img">
<span class="box_svg">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"
class="img_svg">
<defs>
<path id="errorIconSvg"
d="M18.5 27.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0zM21 11h-2v13h2V11zm-1-9C10.059 2 2 10.059 2 20s8.059 18 18 18 18-8.059 18-18S29.941 2 20 2zm0 34c-8.837 0-16-7.163-16-16S11.163 4 20 4s16 7.163 16 16a16 16 0 0 1-16 16z" />
</defs>
<g fill="none" fill-rule="evenodd">
<path d="M0 0h40v40H0z" />
<use fill="#fff" fill-rule="nonzero" xlink:href="#errorIconSvg" />
</g>
</svg>
</span>
</div>
</div>
<span class="txt_item"></span>
</a>
</div>
</div>
</s_cover_item>
</div> <!-- scroller -->
<div class="box_arrow">
<button type="button" class="btn_arrow btn_prev">
<span class="box_svg">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"
class="img_svg">
<defs>
<path id="mainCategoryArrowLeft" d="M12 20L25 7l1.4 1.4L14.8 20l11.6 11.6L25 33z" />
</defs>
<g fill="none" fill-rule="evenodd">
<path d="M0 0h40v40H0z" />
<use fill="#000" fill-rule="nonzero" xlink:href="#mainCategoryArrowLeft" />
</g>
</svg>
</span>
</button>
<button type="button" class="btn_arrow btn_next">
<span class="box_svg">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"
class="img_svg">
<defs>
<path id="mainCategoryArrowRight" d="M28 20L15 33l-1.4-1.4L25.2 20 13.6 8.4 15 7z" />
</defs>
<g fill="none" fill-rule="evenodd">
<path d="M0 0h40v40H0z" />
<use fill="#000" fill-rule="nonzero" xlink:href="#mainCategoryArrowRight" />
</g>
</svg>
</span>
</button>
</div> <!-- box_arrow -->
</div>
</div>
</s_cover>
<s_cover name='slide_list2'>
<div class="section_area scroll_area event_area">
<h2 class="tit_section">
<span class="txt_section"></span>
</h2>
<div class="wrap_scroller wrap_event_scroller">
<div class="scroller">
<s_cover_item>
<div class="item_scroller">
<div class="box_item">
<a href="" title="" class="link_item">
<s_cover_item_thumbnail>
<div class="box_thumb thumb_img"
style="background-image:url('')">
</div>
</s_cover_item_thumbnail>
<div class="box_thumb no_img" style="">
<!-- 이미지 없거나 에러 일경우 class="box_thumb" 영역에 class="no_img" 추가, 내부에 아이콘 적용 (동적 또는 리스트에 넣어 놓아도 됩니다.) -->
<div class="default_img">
<span class="box_svg">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"
class="img_svg">
<defs>
<path id="errorIconSvg"
d="M18.5 27.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0zM21 11h-2v13h2V11zm-1-9C10.059 2 2 10.059 2 20s8.059 18 18 18 18-8.059 18-18S29.941 2 20 2zm0 34c-8.837 0-16-7.163-16-16S11.163 4 20 4s16 7.163 16 16a16 16 0 0 1-16 16z" />
</defs>
<g fill="none" fill-rule="evenodd">
<path d="M0 0h40v40H0z" />
<use fill="#fff" fill-rule="nonzero" xlink:href="#errorIconSvg" />
</g>
</svg>
</span>
</div>
</div>
<span class="txt_item"></span>
</a>
</div>
</div>
</s_cover_item>
</div> <!-- scroller -->
<div class="box_arrow">
<button type="button" class="btn_arrow btn_prev">
<span class="box_svg">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"
class="img_svg">
<defs>
<path id="mainEventArrowLeft" d="M12 20L25 7l1.4 1.4L14.8 20l11.6 11.6L25 33z" />
</defs>
<g fill="none" fill-rule="evenodd">
<path d="M0 0h40v40H0z" />
<use fill="#000" fill-rule="nonzero" xlink:href="#mainEventArrowLeft" />
</g>
</svg>
</span>
</button>
<button type="button" class="btn_arrow btn_next">
<span class="box_svg">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"
class="img_svg">
<defs>
<path id="mainEventArrowRight" d="M28 20L15 33l-1.4-1.4L25.2 20 13.6 8.4 15 7z" />
</defs>
<g fill="none" fill-rule="evenodd">
<path d="M0 0h40v40H0z" />
<use fill="#000" fill-rule="nonzero" xlink:href="#mainEventArrowRight" />
</g>
</svg>
</span>
</button>
</div> <!-- btn_arrow -->
</div>
</div> <!-- event_area -->
</s_cover>
<s_cover name='text_list'>
<div class="section_area">
<h2 class="tit_section">
<span class="txt_section"></span>
</h2>
<ul class="list_notice">
<s_cover_item>
<li class="item_notice">
<a href="" class="link_notice">
<span class="thumnail item-thumbnail"
<s_cover_item_thumbnail>style="background-image:url('')"
</s_cover_item_thumbnail>></span>
<div class="info">
<p class="tit_notice"></p>
<p class="text"></p>
<s_cover_item_article_info>
<span class="txt_date"></span>
</s_cover_item_article_info>
</div>
</a>
</li>
</s_cover_item>
</ul>
</div>
</s_cover>
</s_cover_rep>
</div>
</div>
</s_cover_group>
</div>
<s_list>
<div class="wrap_content">
<div id="content_search_list" class="content content_article_rep">
<div class="inner_content">
<div id="content_search" class="content sub_content">
<div class="inner_content">
<div class="section_area">
<h2 class="tit_section">
<span class="txt_section"></span>
</h2>
<ul class="list_article list_sub list_sub_type1">
<s_list_rep>
<li>
<a href="" class="link_thumb">
<!-- s_list 에 이미지가 없는 문제 -->
<s_list_rep_thumbnail>
<div class="box_thumb thumb_img" data-image=""
style="background-image:url('//i1.daumcdn.net/thumb/C300x200.fwebp.q85/?fname=')">
</div>
</s_list_rep_thumbnail>
<div class="box_thumb no_img" style="display:none;"></div>
<div class="cont_thumb">
<p class="txt_thumb"></p>
<p class="thumb_info">
<span class="date"></span>
<span class="name">by </span>
</p>
</div>
</a>
</li>
</s_list_rep>
</ul>
</div>
</div> <!-- inner_content -->
</div> <!-- content close -->
</div>
</div>
</div>
</s_list>
<!-- sub page -->
<div class="wrap_content wrap_detail_content">
<s_article_rep>
<!-- 메인 페이지에서 목록 표현 -->
<s_index_article_rep>
<div id="content_article_rep" class="content_list content_article_rep">
<div class="inner_content">
<a href="/entry/%EB%B8%94%EB%A1%9C%EA%B7%B8-%EC%8A%A4%ED%82%A8-%EC%BB%A4%EC%8A%A4%ED%85%80" class="link_thumb"
data-tiara-action-name="블로그글_클릭"
data-tiara-action-kind="ClickContent"
data-tiara-copy="블로그 스킨 커스텀"
data-tiara-image="https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fw35x0%2FbtsQa2HdH9A%2FAAAAAAAAAAAAAAAAAAAAAMlTgCnr0_n2XHY21kDK7Ye8HbrrH-TJCIFIJXd3RBzD%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1790780399%26allow_ip%3D%26allow_referer%3D%26signature%3Ddu8HdSd7ukLrciHYNOHDKH6iVIU%253D"
data-tiara-click_url="https://tistory.mow.codes//entry/%EB%B8%94%EB%A1%9C%EA%B7%B8-%EC%8A%A4%ED%82%A8-%EC%BB%A4%EC%8A%A4%ED%85%80"
data-tiara-name="블로그 스킨 커스텀"
data-tiara-provider="블록체인 ｜ 사회학 ｜ 창업"
data-tiara-plink="/entry/%EB%B8%94%EB%A1%9C%EA%B7%B8-%EC%8A%A4%ED%82%A8-%EC%BB%A4%EC%8A%A4%ED%85%80"
data-tiara-id="/entry/%EB%B8%94%EB%A1%9C%EA%B7%B8-%EC%8A%A4%ED%82%A8-%EC%BB%A4%EC%8A%A4%ED%85%80"
>
<s_article_rep_thumbnail>
<div class="box_thumb thumb_img"
style="background-image:url('https://i1.daumcdn.net/thumb/R750x0.fwebp.q85/?fname=https://blog.kakaocdn.net/dna/w35x0/btsQa2HdH9A/AAAAAAAAAAAAAAAAAAAAAMlTgCnr0_n2XHY21kDK7Ye8HbrrH-TJCIFIJXd3RBzD/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1790780399&allow_ip=&allow_referer=&signature=du8HdSd7ukLrciHYNOHDKH6iVIU%3D')"></div>
</s_article_rep_thumbnail>
<div class="box_thumb no_img"></div>
<div class="cont_thumb">
<strong class="txt_title">블로그 스킨 커스텀</strong>
<p class="txt_thumb">다들 저마다의 이유로 티스토리 블로그를 개설하는데요, 처음에는 티스토리 측에서 기본으로 제공하는 스킨을 설정할 테지만 천편일률적인 UI보다는 블로그에서 다루는 콘텐츠에 따라 레이아웃을 수정하고 싶을 때가 있죠. 이번 글은 티스토리 블로그에 적용할 스킨을 커스터마이징하는 방법에 대해서 다룹니다. 저는 “Magazine(반응형/목록광고지원)”이라 되어있는 기본 스킨을 우선 선택했습니다. 이 스킨의 특징은, 게시물을 열람하는 화면이 본문과 목록으로 구분되어있다는 점입니다. 애드센스를 연동할 경우 본문 사이에 광고가 나타나 짜증을 유발하는 경우가 있는데, 어떤 분들은 이를 목록 광고로만 노출되게 설정합니다. “Magazine(반응형/목록광고지원)”은 이에 최적화된 스킨이라 할 수 있겠습니다. 그러나 저..</p>
<p class="thumb_info">
<span class="category">창업</span>
<span class="date">2025. 8. 29. 01:35</span>
</p>
</div>
</a>
</div>
</div> <!-- content close -->
</s_index_article_rep>
<!-- // 메인 페이지에서 목록 표현 -->
<!-- 치환자 <s_article_rep> 적용 -->
<s_permalink_article_rep>
<div id="content_permallink_article" class="content sub_content sub_detail">
<div class="inner_content">
<div class="section_area detail_area">
<h2 class="blind">상세 컨텐츠</h2>
<!-- 글제목 -->
<div class="box_article_tit">
<h3 class="blind">본문 제목</h3>
<p class="txt_sub_tit">블로그 스킨 커스텀</p>
<div class="sub_tit_info">
<span class="category"> <span class="txt_style"><a
href="/category/%EC%B0%BD%EC%97%85">창업</a></span></span>
<p class="info_meta">
<span class="name">by <span class="txt_style">basoon</span></span>
<span class="date">2025. 8. 29. 01:35</span>
</p>
</div>
</div>
<!-- //글제목 -->
<!-- 본문 -->
<div class="box_article">
<h3 class="blind">본문</h3>
<div class="article_cont" id="article-view">
<!-- 본문 내용 (치환자 적용 영역) -->
<div class="article_util">
<button type="button" class="util_like">
<span class="blind">좋아요</span>
<i class="icon_font icon-favorite-o"></i>
<!-- 좋아요 클릭 시 쿨래스 변경 빈하트 class="icon-favorite-o", 채움 하트 class="icon-favorite" -->
<span class="txt_count">-</span>
</button>
<div class="box_util">
<!-- 댓글 달기 버튼 링크 이슈 있음 by osh -->
<button type="button" class="util_comment" href="">
<span class="blind">댓글달기</span>
<i class="icon_font icon-chat-o"></i>
<span class="txt_count">10</span>
</button>
</div>
</div>
다들 저마다의 이유로 티스토리 블로그를 개설하는데요,
처음에는 티스토리 측에서 기본으로 제공하는 스킨을 설정할 테지만
천편일률적인 UI보다는 블로그에서 다루는 콘텐츠에 따라 레이아웃을 수정하고 싶을 때가 있죠.
이번 글은 티스토리 블로그에 적용할 스킨을 커스터마이징하는 방법에 대해서 다룹니다.
저는 “Magazine(반응형/목록광고지원)”이라 되어있는 기본 스킨을 우선 선택했습니다.
이 스킨의 특징은, 게시물을 열람하는 화면이 본문과 목록으로 구분되어있다는 점입니다.
애드센스를 연동할 경우 본문 사이에 광고가 나타나 짜증을 유발하는 경우가 있는데,
어떤 분들은 이를 목록 광고로만 노출되게 설정합니다.
“Magazine(반응형/목록광고지원)”은 이에 최적화된 스킨이라 할 수 있겠습니다.
그러나 저는 티스토리를 운영하며 어떠한 수익도 일절 내지 않고
오로지 정보 공유만을 추구하므로… (아래 공지사항 참조)
https://ellie0129.tistory.com/notice/5
AI agent ?
본 블로그에 업로드되는 콘텐츠는 모두 운영자가 직접 제작합니다.정보 생성 과정에 있어 AI의 개입에 의한 환각이 일절 없음을 분명히 밝힙니다. 근래 유행하는 ‘AI 자동화를 통한 블로그 수익
ellie0129.tistory.com
불필요한 사이드바를 제거해서 본문이 좀 더 넓게 보이도록 수정하고자 합니다.
우선 [블로그 관리 > 꾸미기 > 스킨편집]으로 들어와주세요.
그리고 우측 상단에 보이는 “html 편집” 버튼을 눌러줍니다.
그러면 아래와 같은 창이 뜨는데요, HTML 코드가 적혀있는 칠판이라 보시면 됩니다.
그 칠판을 클릭해서, Ctrl+A로 전체 선택 후 Ctrl+C로 복사해주세요.
그 다음으로 할 일은 생성형 AI에게 코드를 수정해달라고 부탁하는 것입니다.
코딩과 관련된 업무는 Claude가 제일 잘합니다.
무료로 가입 가능하니, 괜히 Chat GPT를 써서 시간낭비 하지 마세요.
GPT는 코딩을 잘 못하는 편에 속합니다.
저는 프롬프트를 입력할 때 채팅창에 바로 작성하지 않고, 우선 메모장에 따로 써봅니다.
메모장에 원하는 요청사항을 적은 후 줄바꿈을 한 뒤 Ctrl+V를 통해 아까 복사해온 코드를 붙여넣었습니다.
그것을 다시 통째로 Claude에게 업로드하면, 이것을 프롬프트로 인식하죠.
부연 설명을 위해 제 티스토리 블로그 화면을 캡쳐해서 넣었습니다.
이렇게 하면 문제를 더 잘 해결해줍니다.
잠깐 기다리면 금방 코드를 완성해줍니다. 우측 상단의 복사 버튼을 눌러주세요.
다시 티스토리 블로그 스킨 수정 메뉴에서 HTML 칠판을 열겠습니다.
기존에 작성되어있는 코드를 Ctrl+A로 모두 선택 후, 삭제해주세요.
깨끗해진 칠판에 Ctrl+V를 누르면 Claude가 수정해준 코드가 들어갈 것입니다.
우측 상단에 “적용” 버튼을 눌러주면 끝입니다.
이런 메시지가 뜬다면 확인을 눌러주세요.
지금 이 글을 읽고 계시는 화면이 결과물입니다.
사이드바가 감쪽같이 없어졌죠?
여러분들도 자신만의 콘텐츠를 전달하기 위한 최적의 UI를 고려해서
티스토리 기본 스킨을 커스터마이징 해보세요.
AI는 최고의 동반자이고, 코딩은 특히 Cluade가 잘합니다.
필요하실까봐 제가 사용중인 스킨의 HTML 코드를 아래 붙여놓겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>블로그 스킨 커스텀</title>
<meta name="title" content="블로그 스킨 커스텀" />
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<link rel="alternate" type="application/rss+xml" title="블록체인 ｜ 사회학 ｜ 창업" href="https://ellie0129.tistory.com/rss" />
<link rel="stylesheet" href="./images/webfonticon.css" />
<link rel="stylesheet" href="./images/slick.css" />
<link rel="stylesheet" href="./style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script src="./images/slick.js"></script>
<script src="./images/iscroll.js"></script>
<script src="./images/front.js"></script>
<script src="./images/common.js"></script>
<style>
/* 사이드바 제거 후 본문 영역 확장을 위한 CSS */
.wrap_detail_content {
display: flex;
flex-direction: column;
}
#sidebar {
display: none !important;
}
.content.sub_content {
max-width: 100%;
width: 100%;
}
.inner_content {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.detail_area {
max-width: none;
width: 100%;
}
.box_article {
max-width: none;
}
.article_cont {
max-width: none;
}
/* 반응형을 위한 추가 스타일 */
@media (max-width: 768px) {
.inner_content {
padding: 0 15px;
}
}
</style>
</head>
<body id="tt-body-page" class="">
<!-- theme -->
<s_t3>
<div id="container">
<div id="header" class="header">
<div class="inner_header">
<div class="box_header">
<h1 class="logo">
<a href="https://tistory.mow.codes/" title="블록체인 ｜ 사회학 ｜ 창업" class="link_logo">
<s_if_var_logoImage>
<img src="" class="img_logo" alt="로고 이미지">
</s_if_var_logoImage>
<s_not_var_logoImage>
블록체인 ｜ 사회학 ｜ 창업
</s_not_var_logoImage>
</a>
</h1>
<div class="btn_box">
<!-- GNB -->
<button type="button" class="btn_util btn_search" title="검색"><span class="blind">검색</span></button>
<button type="button" class="btn_util btn_menu" title="메뉴"><span class="blind">메뉴</span></button>
</div>
</div>
<!-- fixed menu only detail -->
<div class="box_header box_fix_header">
<h2 class="blind">고정 헤더 영역</h2>
<div class="area_menu">
<a href="#" title="페이지 뒤로가기" class="btn_util link_back">
<span class="box_svg">
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="26" viewBox="0 0 15 26" class="img_svg">
<defs>
<path id="mainSlideArrowLeft" d="M12 20L25 7l1.4 1.4L14.8 20l11.6 11.6L25 33z"></path>
</defs>
<g fill="none" fill-rule="evenodd" transform="translate(-13 -5)">
<path d="M0 0h40v40H0z"></path>
<mask id="mainSlideArrowLeftMask" fill="#fff">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#mainSlideArrowLeft"></use>
</mask>
<g fill="#fff" fill-opacity="1" mask="url(#mainSlideArrowLeftMask)" class="svg_bg">
<path d="M0 0h40v40H0z"></path>
</g>
</g>
</svg>
</span>
</a>
<div class="box_fix_tit">
<span class="blind">글 제목</span>
<p class="txt_fix_tit"></p>
</div>
<button type="button" class="btn_util btn_menu" title="메뉴"><span class="blind">메뉴</span></button>
</div>
<div class="area_util">
<div class="inner_area_util">
<button type="button" class="util_like">
<span class="blind">좋아요</span>
<i class="icon_font icon-favorite-o"></i>
<span class="txt_count">-</span>
</button>
<div class="box_util">
<button type="button" class="util_comment">
<span class="blind">댓글달기</span>
<i class="icon_font icon-chat-o"></i>
<span class="txt_count">-</span>
</button>
<button type="button" class="util_share">
<span class="blind">공유하기</span>
<i class="icon_font icon-share-alt-o"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div> <!-- header close -->
<div class="ly_area nav" style="display:none">
<div class="inner_ly_area">
<div class="ly_header">
<h2 class="blind">메뉴 레이어</h2>
<div class="ly_logo">
<a href="https://tistory.mow.codes/" title="블록체인 ｜ 사회학 ｜ 창업" class="link_logo">
<s_if_var_logoImage>
<img src="" class="img_logo" alt="로고 이미지">
</s_if_var_logoImage>
<s_not_var_logoImage>
블록체인 ｜ 사회학 ｜ 창업
</s_not_var_logoImage>
</a>
</div>
<button type="button" title="레이어 닫기" class="btn_menu_close btn_ly_close">
</button>
</div> <!-- ly_header -->
<h3 class="blind">메뉴 리스트</h3>
<div class="tistory_support_menus">
</div>
<div class="box_home">
</div>
<ul class="list_category">
</ul>
</div>
</div> <!-- nav -->
<div class="ly_area search_area" style="display:none">
<div class="inner_ly_area">
<div class="ly_header">
<h2 class="blind">검색 레이어</h2>
<div class="ly_logo">
<a href="https://tistory.mow.codes/" title="블록체인 ｜ 사회학 ｜ 창업" class="link_logo">
<s_if_var_logoImage>
<!-- logo img -->
<img src="" class="img_logo" alt="로고 이미지">
</s_if_var_logoImage>
<s_not_var_logoImage>
블록체인 ｜ 사회학 ｜ 창업
</s_not_var_logoImage>
</a>
</div>
<button type="button" title="레이어 닫기" class="btn_menu_close btn_ly_close">
<span class="box_svg">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" class="img_svg">
<defs>
<path id="searchCloseSvg"
d="M33.4 8L32 6.6l-12 12-12-12L6.6 8l12 12-12 12L8 33.4l12-12 12 12 1.4-1.4-12-12z" />
</defs>
</svg>
</span>
</button>
</div> <!-- ly_header -->
<h3 class="blind">검색 영역</h3>
<form action="" method="get">
<legend><span class="blind">컨텐츠 검색</span></legend>
<div class="box_form">
<s_search>
<label for="" class="screen_out">블로그 내 검색</label>
<input id="" type="text" name="" title="검색어 입력"
placeholder="검색어 입력.." value="" class="inp_search"
onkeypress="if (event.keyCode == 13) { }">
</s_search>
<button type="button" title="검색어 삭제" class="btn_search_del">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" class="img_svg">
<defs>
<path id="textDelBtnSvg"
d="M20 2C10.059 2 2 10.059 2 20s8.059 18 18 18 18-8.059 18-18S29.941 2 20 2zm8 24.6L26.6 28 20 21.4 13.4 28 12 26.6l6.6-6.6-6.6-6.6 1.4-1.4 6.6 6.6 6.6-6.6 1.4 1.4-6.6 6.6 6.6 6.6z" />
</defs>
<g fill="none" fill-rule="evenodd" transform="translate(-2 -2)">
<path d="M0 0h40v40H0z" />
<mask id="textDelBtnSvgMask" fill="#fff">
<use xlink:href="#textDelBtnSvg" />
</mask>
<g fill="#000" fill-opacity="1" mask="url(#textDelBtnSvgMask)" class="svg_bg">
<path d="M0 0h40v40H0z" />
</g>
</g>
</svg>
</button>
</div>
</form>
</div>
</div> <!-- search_area -->
<div class="wrap_content">
<s_cover_group>
<div id="content_cover_group" class="content">
<div class="inner_content">
<s_cover_rep>
<s_cover name='image_slide'>
<div class="slide_area main_slide">
<div class="inner_main_slide">
<s_cover_item>
<div class="slide_item">
<a href=""
style="background-image:url('<s_cover_item_thumbnail>https://img1.daumcdn.net/thumb/R1600x0.fwebp.q85/?fname=</s_cover_item_thumbnail>')"
class="link_slide">
<div class="inner_link_slide">
<div class="slide_txt">
<p class="txt_tit"></p>
<p class="txt_cont"></p>
</div>
</div>
</a>
</div>
</s_cover_item>
</div>
<div class="box_arrow">
<div class="inner_box_arrow">
<button type="button" class="btn_arrow btn_prev">
<span class="box_svg">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"
class="img_svg">
<defs>
<path id="mainSlideArrowLeft" d="M12 20L25 7l1.4 1.4L14.8 20l11.6 11.6L25 33z" />
</defs>
<g fill="none" fill-rule="evenodd">
<path d="M0 0h40v40H0z" />
<use fill="#fff" fill-rule="nonzero" xlink:href="#mainSlideArrowLeft" />
</g>
</svg>
</span>
</button>
<button type="button" class="btn_arrow btn_next">
<span class="box_svg">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"
class="img_svg">
<defs>
<path id="mainSlideArrowRight" d="M28 20L15 33l-1.4-1.4L25.2 20 13.6 8.4 15 7z" />
</defs>
<g fill="none" fill-rule="evenodd">
<path d="M0 0h40v40H0z" />
<use fill="#fff" fill-rule="nonzero" xlink:href="#mainSlideArrowRight" />
</g>
</svg>
</span>
</button>
</div>
</div> <!-- btn_arrow -->
</div> <!-- main_slide -->
</s_cover>
<s_cover name='webzine'>
<!-- scroll_area -->
<div class="section_area section_type_wide">
<h2 class="tit_section">
<span class="txt_section"></span>
</h2>
<ul class="list_article list_type1 list_type_wide">
<s_cover_item>
<li>
<a href="" class="link_thumb">
<s_cover_item_thumbnail>
<div class="box_thumb thumb_img"
style="background-image: url('">
</div>
</s_cover_item_thumbnail>
<div class="box_thumb no_img">
<!-- 이미지 없거나 에러 일경우 class="box_thumb" 영역에 class="no_img" 추가, 내부에 아이콘 적용 -->
<div class="default_img">
<span class="box_svg">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"
class="img_svg">
<defs>
<path id="errorIconSvg"
d="M18.5 27.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0zM21 11h-2v13h2V11zm-1-9C10.059 2 2 10.059 2 20s8.059 18 18 18 18-8.059 18-18S29.941 2 20 2zm0 34c-8.837 0-16-7.163-16-16S11.163 4 20 4s16 7.163 16 16a16 16 0 0 1-16 16z" />
</defs>
<g fill="none" fill-rule="evenodd">
<path d="M0 0h40v40H0z" />
<use fill="#fff" fill-rule="nonzero" xlink:href="#errorIconSvg" />
</g>
</svg>
</span>
</div>
</div>
<div class="cont_thumb">
<s_cover_item_article_info>
<strong class="txt_category"></strong>
</s_cover_item_article_info>
<p class="txt_thumb"></p>
<p class="txt_summary"></p>
</div>
</a>
</li>
</s_cover_item>
</ul>
</div> <!-- section_area -->
</s_cover>
<s_cover name='gallery'>
<div class="section_area">
<h2 class="tit_section">
<span class="txt_section"></span>
</h2>
<ul class="list_post">
<s_cover_item>
<li class="item_post">
<a href="" class="link_post item-thumbnail"
<s_cover_item_thumbnail>style="background-image:url('')"
</s_cover_item_thumbnail>>
<div class="info">
<strong class="name"></strong>
</div>
</a>
</li>
</s_cover_item>
</ul>
</div> <!-- section_area -->
</s_cover>
<s_cover name='slide_list1'>
<div class="section_area scroll_area category_area">
<h2 class="tit_section"></h2>
<div class="wrap_scroller wrap_category_scroller">
<div class="scroller">
<s_cover_item>
<div class="item_scroller">
<div class="box_item">
<a href="" title="" class="link_item">
<s_cover_item_thumbnail>
<div class="box_thumb thumb_img"
style="background-image:url('')">
</div>
</s_cover_item_thumbnail>
<div class="box_thumb no_img" style="">
<!-- 이미지 없거나 에러 일경우 class="box_thumb" 영역에 class="no_img" 추가, 내부에 아이콘 적용 (동적 또는 리스트에 넣어 놓아도 됩니다.) -->
<div class="default_img">
<span class="box_svg">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"
class="img_svg">
<defs>
<path id="errorIconSvg"
d="M18.5 27.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0zM21 11h-2v13h2V11zm-1-9C10.059 2 2 10.059 2 20s8.059 18 18 18 18-8.059 18-18S29.941 2 20 2zm0 34c-8.837 0-16-7.163-16-16S11.163 4 20 4s16 7.163 16 16a16 16 0 0 1-16 16z" />
</defs>
<g fill="none" fill-rule="evenodd">
<path d="M0 0h40v40H0z" />
<use fill="#fff" fill-rule="nonzero" xlink:href="#errorIconSvg" />
</g>
</svg>
</span>
</div>
</div>
<span class="txt_item"></span>
</a>
</div>
</div>
</s_cover_item>
</div> <!-- scroller -->
<div class="box_arrow">
<button type="button" class="btn_arrow btn_prev">
<span class="box_svg">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"
class="img_svg">
<defs>
<path id="mainCategoryArrowLeft" d="M12 20L25 7l1.4 1.4L14.8 20l11.6 11.6L25 33z" />
</defs>
<g fill="none" fill-rule="evenodd">
<path d="M0 0h40v40H0z" />
<use fill="#000" fill-rule="nonzero" xlink:href="#mainCategoryArrowLeft" />
</g>
</svg>
</span>
</button>
<button type="button" class="btn_arrow btn_next">
<span class="box_svg">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"
class="img_svg">
<defs>
<path id="mainCategoryArrowRight" d="M28 20L15 33l-1.4-1.4L25.2 20 13.6 8.4 15 7z" />
</defs>
<g fill="none" fill-rule="evenodd">
<path d="M0 0h40v40H0z" />
<use fill="#000" fill-rule="nonzero" xlink:href="#mainCategoryArrowRight" />
</g>
</svg>
</span>
</button>
</div> <!-- box_arrow -->
</div>
</div>
</s_cover>
<s_cover name='slide_list2'>
<div class="section_area scroll_area event_area">
<h2 class="tit_section">
<span class="txt_section"></span>
</h2>
<div class="wrap_scroller wrap_event_scroller">
<div class="scroller">
<s_cover_item>
<div class="item_scroller">
<div class="box_item">
<a href="" title="" class="link_item">
<s_cover_item_thumbnail>
<div class="box_thumb thumb_img"
style="background-image:url('')">
</div>
</s_cover_item_thumbnail>
<div class="box_thumb no_img" style="">
<!-- 이미지 없거나 에러 일경우 class="box_thumb" 영역에 class="no_img" 추가, 내부에 아이콘 적용 (동적 또는 리스트에 넣어 놓아도 됩니다.) -->
<div class="default_img">
<span class="box_svg">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"
class="img_svg">
<defs>
<path id="errorIconSvg"
d="M18.5 27.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0zM21 11h-2v13h2V11zm-1-9C10.059 2 2 10.059 2 20s8.059 18 18 18 18-8.059 18-18S29.941 2 20 2zm0 34c-8.837 0-16-7.163-16-16S11.163 4 20 4s16 7.163 16 16a16 16 0 0 1-16 16z" />
</defs>
<g fill="none" fill-rule="evenodd">
<path d="M0 0h40v40H0z" />
<use fill="#fff" fill-rule="nonzero" xlink:href="#errorIconSvg" />
</g>
</svg>
</span>
</div>
</div>
<span class="txt_item"></span>
</a>
</div>
</div>
</s_cover_item>
</div> <!-- scroller -->
<div class="box_arrow">
<button type="button" class="btn_arrow btn_prev">
<span class="box_svg">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"
class="img_svg">
<defs>
<path id="mainEventArrowLeft" d="M12 20L25 7l1.4 1.4L14.8 20l11.6 11.6L25 33z" />
</defs>
<g fill="none" fill-rule="evenodd">
<path d="M0 0h40v40H0z" />
<use fill="#000" fill-rule="nonzero" xlink:href="#mainEventArrowLeft" />
</g>
</svg>
</span>
</button>
<button type="button" class="btn_arrow btn_next">
<span class="box_svg">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"
class="img_svg">
<defs>
<path id="mainEventArrowRight" d="M28 20L15 33l-1.4-1.4L25.2 20 13.6 8.4 15 7z" />
</defs>
<g fill="none" fill-rule="evenodd">
<path d="M0 0h40v40H0z" />
<use fill="#000" fill-rule="nonzero" xlink:href="#mainEventArrowRight" />
</g>
</svg>
</span>
</button>
</div> <!-- btn_arrow -->
</div>
</div> <!-- event_area -->
</s_cover>
<s_cover name='text_list'>
<div class="section_area">
<h2 class="tit_section">
<span class="txt_section"></span>
</h2>
<ul class="list_notice">
<s_cover_item>
<li class="item_notice">
<a href="" class="link_notice">
<span class="thumnail item-thumbnail"
<s_cover_item_thumbnail>style="background-image:url('')"
</s_cover_item_thumbnail>></span>
<div class="info">
<p class="tit_notice"></p>
<p class="text"></p>
<s_cover_item_article_info>
<span class="txt_date"></span>
</s_cover_item_article_info>
</div>
</a>
</li>
</s_cover_item>
</ul>
</div>
</s_cover>
</s_cover_rep>
</div>
</div>
</s_cover_group>
</div>
<s_list>
<div class="wrap_content">
<div id="content_search_list" class="content content_article_rep">
<div class="inner_content">
<div id="content_search" class="content sub_content">
<div class="inner_content">
<div class="section_area">
<h2 class="tit_section">
<span class="txt_section"></span>
</h2>
<ul class="list_article list_sub list_sub_type1">
<s_list_rep>
<li>
<a href="" class="link_thumb">
<!-- s_list 에 이미지가 없는 문제 -->
<s_list_rep_thumbnail>
<div class="box_thumb thumb_img" data-image=""
style="background-image:url('//i1.daumcdn.net/thumb/C300x200.fwebp.q85/?fname=')">
</div>
</s_list_rep_thumbnail>
<div class="box_thumb no_img" style="display:none;"></div>
<div class="cont_thumb">
<p class="txt_thumb"></p>
<p class="thumb_info">
<span class="date"></span>
<span class="name">by </span>
</p>
</div>
</a>
</li>
</s_list_rep>
</ul>
</div>
</div> <!-- inner_content -->
</div> <!-- content close -->
</div>
</div>
</div>
</s_list>
<!-- sub page -->
<div class="wrap_content wrap_detail_content">
<s_article_rep>
<!-- 메인 페이지에서 목록 표현 -->
<s_index_article_rep>
<div id="content_article_rep" class="content_list content_article_rep">
<div class="inner_content">
<a href="" class="link_thumb"
data-tiara-action-name="블로그글_클릭"
data-tiara-action-kind="ClickContent"
data-tiara-copy=""
data-tiara-image=""
data-tiara-click_url="https://tistory.mow.codes/"
data-tiara-name=""
data-tiara-provider="블록체인 ｜ 사회학 ｜ 창업"
data-tiara-plink=""
data-tiara-id=""
>
<s_article_rep_thumbnail>
<div class="box_thumb thumb_img"
style="background-image:url('https://i1.daumcdn.net/thumb/R750x0.fwebp.q85/?fname=')"></div>
</s_article_rep_thumbnail>
<div class="box_thumb no_img"></div>
<div class="cont_thumb">
<strong class="txt_title"></strong>
<p class="txt_thumb"></p>
<p class="thumb_info">
<span class="category"></span>
<span class="date"></span>
</p>
</div>
</a>
</div>
</div> <!-- content close -->
</s_index_article_rep>
<!-- // 메인 페이지에서 목록 표현 -->
<!-- 치환자 <s_article_rep> 적용 -->
<s_permalink_article_rep>
<div id="content_permallink_article" class="content sub_content sub_detail">
<div class="inner_content">
<div class="section_area detail_area">
<h2 class="blind">상세 컨텐츠</h2>
<!-- 글제목 -->
<div class="box_article_tit">
<h3 class="blind">본문 제목</h3>
<p class="txt_sub_tit"></p>
<div class="sub_tit_info">
<span class="category"> <span class="txt_style"><a
href=""></a></span></span>
<p class="info_meta">
<span class="name">by <span class="txt_style"></span></span>
<span class="date"></span>
</p>
</div>
</div>
<!-- //글제목 -->
<!-- 본문 -->
<div class="box_article">
<h3 class="blind">본문</h3>
<div class="article_cont" id="article-view">
<!-- 본문 내용 (치환자 적용 영역) -->
<div class="article_util">
<button type="button" class="util_like">
<span class="blind">좋아요</span>
<i class="icon_font icon-favorite-o"></i>
<!-- 좋아요 클릭 시 쿨래스 변경 빈하트 class="icon-favorite-o", 채움 하트 class="icon-favorite" -->
<span class="txt_count">-</span>
</button>
<div class="box_util">
<!-- 댓글 달기 버튼 링크 이슈 있음 by osh -->
<button type="button" class="util_comment" href="">
<span class="blind">댓글달기</span>
<i class="icon_font icon-chat-o"></i>
<span class="txt_count"></span>
</button>
</div>
</div>
</div>
</div>
<!-- //본문 -->
<!-- 댓글 -->
<div class="box_comment">
<s_rp>
</s_rp>
</div>
<!-- //댓글 -->
</div>
</div>
</div>
</s_permalink_article_rep>
</s_article_rep>
<!-- page 디자인 -->
<s_page_rep>
<s_permalink_article_rep>
<div id="content_permallink_page" class="content sub_content">
<div class="inner_content">
<div class="section_area detail_area">
<h2 class="blind">상세 컨텐츠</h2>
<!-- 글제목 -->
<div class="box_article_tit">
<h3 class="blind">본문 제목</h3>
<p class="txt_sub_tit"></p>
<div class="sub_tit_info">
<span class="date"></span>
</div>
</div>
<!-- //글제목 -->
<!-- 본문 -->
<div class="box_article">
<h3 class="blind">본문</h3>
<div class="article_cont" id="article-view">
<!-- 본문 내용 (치환자 적용 영역) -->
</div>
</div>
<!-- //본문 -->
</div>
</div>
</div>
</s_permalink_article_rep>
</s_page_rep>
<!-- // page 디자인 -->
<s_article_protected>
<s_index_article_rep>
<div id="content_protected_rep" class="content_list content_protected_rep">
<div class="inner_content">
<a href="" class="link_thumb">
<div class="cont_thumb">
<strong class="txt_title"></strong>
<p class="txt_thumb">보호되어 있는 글입니다.</p>
<p class="thumb_info">
<span class="category">보호글</span>
<span class="date"></span>
</p>
</div>
</a>
</div>
</div> <!-- content close -->
</s_index_article_rep>
<s_permalink_article_rep>
<div id="content_permallink_protected" class="content sub_content sub_detail">
<div class="inner_content">
<div class="section_area detail_area">
<h2 class="blind">상세 컨텐츠</h2>
<!-- 글제목 -->
<div class="box_article_tit">
<h3 class="blind">본문 제목</h3>
<p class="txt_sub_tit"></p>
<div class="sub_tit_info">
<span class="name">by <span class="txt_style"></span></span>
<span class="date"></span>
<span class="category">in <span class="txt_style">보호글</span></span>
</div>
</div>
<!-- //글제목 -->
<!-- 본문 -->
<div class="box_article">
<h3 class="blind">본문</h3>
<div class="article_cont">
<!-- 본문 내용 (치환자 적용 영역) -->
<form class="protected_form" onsubmit="">
<p>보호되어 있는 글입니다. 내용을 보시려면 비밀번호를 입력하세요.</p>
<input type="password" id="" name="" value=""
placeholder="비밀번호" />
<button type="submit">확인</button>
</form>
</div>
</div>
<!-- //본문 -->
</div>
</div>
</div>
</s_permalink_article_rep>
</s_article_protected>
<s_notice_rep>
<s_index_article_rep>
<div id="content_notice_rep" class="content_list content_notice_rep">
<div class="inner_content">
<a href="" class="link_thumb"
data-tiara-action-name="블로그공지_클릭"
data-tiara-action-kind="ClickContent"
data-tiara-copy=""
data-tiara-click_url="https://tistory.mow.codes/"
data-tiara-name=""
data-tiara-provider="블록체인 ｜ 사회학 ｜ 창업"
data-tiara-plink=""
data-tiara-id=""
>
<s_notice_rep_thumbnail>
<div class="box_thumb thumb_img" data-image=""
style="background-image:url('')"></div>
</s_notice_rep_thumbnail>
<div class="cont_thumb">
<strong class="txt_title"></strong>
<p class="txt_thumb"></p>
<p class="thumb_info">
<span class="category">공지사항</span>
<span class="date"></span>
</p>
</div>
</a>
</div>
</div> <!-- content close -->
</s_index_article_rep>
<s_permalink_article_rep>
<div id="content_permallink_notice" class="content sub_content">
<div class="inner_content">
<div class="section_area detail_area">
<h2 class="blind">상세 컨텐츠</h2>
<!-- 글제목 -->
<div class="box_article_tit">
<h3 class="blind">본문 제목</h3>
<p class="txt_sub_tit"></p>
<div class="sub_tit_info">
<span class="date"></span>
</div>
</div>
<!-- //글제목 -->
<!-- 본문 -->
<div class="box_article">
<h3 class="blind">본문</h3>
<div class="article_cont" id="article-view">
<!-- 본문 내용 (치환자 적용 영역) -->
</div>
</div>
<!-- //본문 -->
</div>
</div>
</div>
</s_permalink_article_rep>
</s_notice_rep>
<!-- 사이드바 완전 제거 -->
<!-- <div id="sidebar" class="sidebar">
사이드바 내용 모두 주석 처리됨
</div> -->
</div>
<!-- // sub page // .wrap_detail_content -->
<div class="wrap_content">
<div class="content">
<div class="section_btm_area">
<!-- 태그 magz 디자인 -->
<s_tag>
<div class="box_tag_trail">
<h3 class="tit_box">태그</h3>
<div class="tag_cont">
<!-- 마지막 콤마(,) 를 javascript 로 지워줘야 하나. by osh -->
<s_tag_rep>
<a href="" class=""></a>,
</s_tag_rep>
</div>
</div>
</s_tag>
<!-- //태그 magz 디자인 -->
<!-- log magz 디자인 -->
<s_local>
<section id="localog" class="box_tag_trail row nonEntry main">
<h3 class="tit_box">Local Log</h3>
<s_local_spot_rep>
<div class="spot" style="margin-left: px">
</div>
</s_local_spot_rep>
<s_local_info_rep>
<div class="info" style="margin-left: px">
<a href=""></a>
</div>
</s_local_info_rep>
</section>
</s_local>
<!-- // log magz 디자인 -->
<s_guest>
</s_guest>
</div>
</div>
</div>
<s_paging>
<div class="wrap_content wrap_content_paging ">
<div id="content" class="content sub_content">
<div class="inner_paging">
<!-- section_area -->
<div class="section_paging ">
<h2 class="blind">페이징</h2>
<!-- 페이징 치환자 적용 영역 -->
<div class="paging">
<a class="link_page link_prev ">
<svg width="10" height="18" viewBox="0 0 10 18" class="img_svg">
<path d="M9 18l1-1-8-8 8-8-1-1-9 9"></path>
</svg>
<span class="txt_page">이전</span>
</a>
<div class="paging_num">
<!-- 페이징 치환자 수정 -->
<s_paging_rep>
<a class="link_num"></a>
</s_paging_rep>
</div>
<a class="link_page link_next ">
<span class="txt_page">다음</span>
<svg width="10" height="18" viewBox="0 0 10 18" class="img_svg">
<path d="M1 0L0 1l8 8-8 8 1 1 9-9"></path>
</svg>
</a>
</div>
<!-- //페이징 치환자 적용 영역 -->
</div>
</div>
</div>
</div>
</s_paging>
<!-- sub page -->
<div id="footer" class="footer">
<div class="inner_footer">
<div class="area_select">
<div class="box_select">
<div class="inner_box">
<select class="opt_select">
<option>패밀리사이트</option>
<s_link_rep>
<option value="" data-href="">
</option>
</s_link_rep>
</select>
</div>
</div>
</div>
<div class="area_address">
<div class="info_link">
<s_if_var_footerLink1Name>
<a href="" class="link_info"></a>
</s_if_var_footerLink1Name>
<s_if_var_footerLink2Name>
<a href="" class="link_info"></a>
</s_if_var_footerLink2Name>
<s_if_var_footerLink3Name>
<a href="" class="link_info"></a>
</s_if_var_footerLink3Name>
<s_if_var_footerLink4Name>
<a href="" class="link_info"></a>
</s_if_var_footerLink4Name>
</div>
<address class="box_address">
<s_if_var_logoFooterImage>
<img src="" class="footer_logo" alt="푸터 로고">
</s_if_var_logoFooterImage>
<s_not_var_logoFooterImage>
<span class="txt_flogo">블록체인 ｜ 사회학 ｜ 창업</span>
</s_not_var_logoFooterImage>
<span class="txt_address"></span>
</address>
<div class="area_sns">
<s_if_var_snsFacebook>
<a href="" title="facebook" class="link_sns link_facebook">
<img src="./images/ico_facebook.svg" alt="페이스북">
</a>
</s_if_var_snsFacebook>
<s_if_var_snsTwitter>
<a href="" title="twitter" class="link_sns link_twitter">
<img src="./images/ico_twitter.svg" alt="트위터">
</a>
</s_if_var_snsTwitter>
<s_if_var_snsInstagram>
<a href="" title="instagram" class="link_sns link_instagram">
<img src="./images/ico_instagram.svg" alt="인스타그램">
</a>
</s_if_var_snsInstagram>
<s_if_var_snsYoutube>
<a href="" title="youtube" class="link_sns link_youtube">
<img src="./images/ico_youtube.svg" alt="유투브">
</a>
</s_if_var_snsYoutube>
<s_if_var_email>
<a href="mailto:" title="mail" class="link_sns link_email">
<img src="./images/ico_mail.svg" alt="메일">
</a>
</s_if_var_email>
</div>
</div>
</div> <!-- inner_footer -->
</div> <!-- footer close -->
</div> <!-- container close -->
</div>
</s_t3>
</body>
</html>
본 블로거는 포스팅으로 인한 어떠한 부가적 수익창출도 수행하지 않습니다.
여기에는 블로그 수익화를 위한 애드센스 삽입, 광고성 게시물 업로드 등이 포함됩니다.
본 블로그는 모든 지식 정보의 자유로운 공유를 지향합니다.
방문자 분들께서 본문의 콘텐츠를 필요에 따라 copy&paste, 캡쳐, 인쇄할 때
최대한 깔끔한 형태로 출력될 수 있도록 포스팅하였습니다.
본 콘텐츠의 생성 과정에 있어 어떠한 종류의 AI도 사용되지 않았음을 분명히 밝힙니다.
근래 유행하는 ‘AI 자동화를 통한 블로그 수익화’를 절대적으로 지양하며
항상 양질의 콘텐츠를 공유드리고자 노력을 가하지만,
설령 그렇다 하더라도 콘텐츠의 참조 및 재사용 중에 발생하는
검수의 책임은 모두 방문자 측에 있음을 간곡히 당부드립니다.
</div>
</div>
<!-- //본문 -->
<!-- 댓글 -->
<div class="box_comment">
<s_rp>
</s_rp>
</div>
<!-- //댓글 -->
</div>
</div>
</div>
</s_permalink_article_rep>
</s_article_rep>
<!-- page 디자인 -->
<s_page_rep>
<s_permalink_article_rep>
<div id="content_permallink_page" class="content sub_content">
<div class="inner_content">
<div class="section_area detail_area">
<h2 class="blind">상세 컨텐츠</h2>
<!-- 글제목 -->
<div class="box_article_tit">
<h3 class="blind">본문 제목</h3>
<p class="txt_sub_tit">블로그 스킨 커스텀</p>
<div class="sub_tit_info">
<span class="date">2025. 8. 29. 01:35</span>
</div>
</div>
<!-- //글제목 -->
<!-- 본문 -->
<div class="box_article">
<h3 class="blind">본문</h3>
<div class="article_cont" id="article-view">
<!-- 본문 내용 (치환자 적용 영역) -->
다들 저마다의 이유로 티스토리 블로그를 개설하는데요,
처음에는 티스토리 측에서 기본으로 제공하는 스킨을 설정할 테지만
천편일률적인 UI보다는 블로그에서 다루는 콘텐츠에 따라 레이아웃을 수정하고 싶을 때가 있죠.
이번 글은 티스토리 블로그에 적용할 스킨을 커스터마이징하는 방법에 대해서 다룹니다.
저는 “Magazine(반응형/목록광고지원)”이라 되어있는 기본 스킨을 우선 선택했습니다.
이 스킨의 특징은, 게시물을 열람하는 화면이 본문과 목록으로 구분되어있다는 점입니다.
애드센스를 연동할 경우 본문 사이에 광고가 나타나 짜증을 유발하는 경우가 있는데,
어떤 분들은 이를 목록 광고로만 노출되게 설정합니다.
“Magazine(반응형/목록광고지원)”은 이에 최적화된 스킨이라 할 수 있겠습니다.
그러나 저는 티스토리를 운영하며 어떠한 수익도 일절 내지 않고
오로지 정보 공유만을 추구하므로… (아래 공지사항 참조)
https://ellie0129.tistory.com/notice/5
AI agent ?
본 블로그에 업로드되는 콘텐츠는 모두 운영자가 직접 제작합니다.정보 생성 과정에 있어 AI의 개입에 의한 환각이 일절 없음을 분명히 밝힙니다. 근래 유행하는 ‘AI 자동화를 통한 블로그 수익
ellie0129.tistory.com
불필요한 사이드바를 제거해서 본문이 좀 더 넓게 보이도록 수정하고자 합니다.
우선 [블로그 관리 > 꾸미기 > 스킨편집]으로 들어와주세요.
그리고 우측 상단에 보이는 “html 편집” 버튼을 눌러줍니다.
그러면 아래와 같은 창이 뜨는데요, HTML 코드가 적혀있는 칠판이라 보시면 됩니다.
그 칠판을 클릭해서, Ctrl+A로 전체 선택 후 Ctrl+C로 복사해주세요.
그 다음으로 할 일은 생성형 AI에게 코드를 수정해달라고 부탁하는 것입니다.
코딩과 관련된 업무는 Claude가 제일 잘합니다.
무료로 가입 가능하니, 괜히 Chat GPT를 써서 시간낭비 하지 마세요.
GPT는 코딩을 잘 못하는 편에 속합니다.
저는 프롬프트를 입력할 때 채팅창에 바로 작성하지 않고, 우선 메모장에 따로 써봅니다.
메모장에 원하는 요청사항을 적은 후 줄바꿈을 한 뒤 Ctrl+V를 통해 아까 복사해온 코드를 붙여넣었습니다.
그것을 다시 통째로 Claude에게 업로드하면, 이것을 프롬프트로 인식하죠.
부연 설명을 위해 제 티스토리 블로그 화면을 캡쳐해서 넣었습니다.
이렇게 하면 문제를 더 잘 해결해줍니다.
잠깐 기다리면 금방 코드를 완성해줍니다. 우측 상단의 복사 버튼을 눌러주세요.
다시 티스토리 블로그 스킨 수정 메뉴에서 HTML 칠판을 열겠습니다.
기존에 작성되어있는 코드를 Ctrl+A로 모두 선택 후, 삭제해주세요.
깨끗해진 칠판에 Ctrl+V를 누르면 Claude가 수정해준 코드가 들어갈 것입니다.
우측 상단에 “적용” 버튼을 눌러주면 끝입니다.
이런 메시지가 뜬다면 확인을 눌러주세요.
지금 이 글을 읽고 계시는 화면이 결과물입니다.
사이드바가 감쪽같이 없어졌죠?
여러분들도 자신만의 콘텐츠를 전달하기 위한 최적의 UI를 고려해서
티스토리 기본 스킨을 커스터마이징 해보세요.
AI는 최고의 동반자이고, 코딩은 특히 Cluade가 잘합니다.
필요하실까봐 제가 사용중인 스킨의 HTML 코드를 아래 붙여놓겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>블로그 스킨 커스텀</title>
<meta name="title" content="블로그 스킨 커스텀" />
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<link rel="alternate" type="application/rss+xml" title="블록체인 ｜ 사회학 ｜ 창업" href="https://ellie0129.tistory.com/rss" />
<link rel="stylesheet" href="./images/webfonticon.css" />
<link rel="stylesheet" href="./images/slick.css" />
<link rel="stylesheet" href="./style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script src="./images/slick.js"></script>
<script src="./images/iscroll.js"></script>
<script src="./images/front.js"></script>
<script src="./images/common.js"></script>
<style>
/* 사이드바 제거 후 본문 영역 확장을 위한 CSS */
.wrap_detail_content {
display: flex;
flex-direction: column;
}
#sidebar {
display: none !important;
}
.content.sub_content {
max-width: 100%;
width: 100%;
}
.inner_content {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.detail_area {
max-width: none;
width: 100%;
}
.box_article {
max-width: none;
}
.article_cont {
max-width: none;
}
/* 반응형을 위한 추가 스타일 */
@media (max-width: 768px) {
.inner_content {
padding: 0 15px;
}
}
</style>
</head>
<body id="tt-body-page" class="">
<!-- theme -->
<s_t3>
<div id="container">
<div id="header" class="header">
<div class="inner_header">
<div class="box_header">
<h1 class="logo">
<a href="https://tistory.mow.codes/" title="블록체인 ｜ 사회학 ｜ 창업" class="link_logo">
<s_if_var_logoImage>
<img src="" class="img_logo" alt="로고 이미지">
</s_if_var_logoImage>
<s_not_var_logoImage>
블록체인 ｜ 사회학 ｜ 창업
</s_not_var_logoImage>
</a>
</h1>
<div class="btn_box">
<!-- GNB -->
<button type="button" class="btn_util btn_search" title="검색"><span class="blind">검색</span></button>
<button type="button" class="btn_util btn_menu" title="메뉴"><span class="blind">메뉴</span></button>
</div>
</div>
<!-- fixed menu only detail -->
<div class="box_header box_fix_header">
<h2 class="blind">고정 헤더 영역</h2>
<div class="area_menu">
<a href="#" title="페이지 뒤로가기" class="btn_util link_back">
<span class="box_svg">
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="26" viewBox="0 0 15 26" class="img_svg">
<defs>
<path id="mainSlideArrowLeft" d="M12 20L25 7l1.4 1.4L14.8 20l11.6 11.6L25 33z"></path>
</defs>
<g fill="none" fill-rule="evenodd" transform="translate(-13 -5)">
<path d="M0 0h40v40H0z"></path>
<mask id="mainSlideArrowLeftMask" fill="#fff">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#mainSlideArrowLeft"></use>
</mask>
<g fill="#fff" fill-opacity="1" mask="url(#mainSlideArrowLeftMask)" class="svg_bg">
<path d="M0 0h40v40H0z"></path>
</g>
</g>
</svg>
</span>
</a>
<div class="box_fix_tit">
<span class="blind">글 제목</span>
<p class="txt_fix_tit"></p>
</div>
<button type="button" class="btn_util btn_menu" title="메뉴"><span class="blind">메뉴</span></button>
</div>
<div class="area_util">
<div class="inner_area_util">
<button type="button" class="util_like">
<span class="blind">좋아요</span>
<i class="icon_font icon-favorite-o"></i>
<span class="txt_count">-</span>
</button>
<div class="box_util">
<button type="button" class="util_comment">
<span class="blind">댓글달기</span>
<i class="icon_font icon-chat-o"></i>
<span class="txt_count">-</span>
</button>
<button type="button" class="util_share">
<span class="blind">공유하기</span>
<i class="icon_font icon-share-alt-o"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div> <!-- header close -->
<div class="ly_area nav" style="display:none">
<div class="inner_ly_area">
<div class="ly_header">
<h2 class="blind">메뉴 레이어</h2>
<div class="ly_logo">
<a href="https://tistory.mow.codes/" title="블록체인 ｜ 사회학 ｜ 창업" class="link_logo">
<s_if_var_logoImage>
<img src="" class="img_logo" alt="로고 이미지">
</s_if_var_logoImage>
<s_not_var_logoImage>
블록체인 ｜ 사회학 ｜ 창업
</s_not_var_logoImage>
</a>
</div>
<button type="button" title="레이어 닫기" class="btn_menu_close btn_ly_close">
</button>
</div> <!-- ly_header -->
<h3 class="blind">메뉴 리스트</h3>
<div class="tistory_support_menus">
</div>
<div class="box_home">
</div>
<ul class="list_category">
</ul>
</div>
</div> <!-- nav -->
<div class="ly_area search_area" style="display:none">
<div class="inner_ly_area">
<div class="ly_header">
<h2 class="blind">검색 레이어</h2>
<div class="ly_logo">
<a href="https://tistory.mow.codes/" title="블록체인 ｜ 사회학 ｜ 창업" class="link_logo">
<s_if_var_logoImage>
<!-- logo img -->
<img src="" class="img_logo" alt="로고 이미지">
</s_if_var_logoImage>
<s_not_var_logoImage>
블록체인 ｜ 사회학 ｜ 창업
</s_not_var_logoImage>
</a>
</div>
<button type="button" title="레이어 닫기" class="btn_menu_close btn_ly_close">
<span class="box_svg">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" class="img_svg">
<defs>
<path id="searchCloseSvg"
d="M33.4 8L32 6.6l-12 12-12-12L6.6 8l12 12-12 12L8 33.4l12-12 12 12 1.4-1.4-12-12z" />
</defs>
</svg>
</span>
</button>
</div> <!-- ly_header -->
<h3 class="blind">검색 영역</h3>
<form action="" method="get">
<legend><span class="blind">컨텐츠 검색</span></legend>
<div class="box_form">
<s_search>
<label for="" class="screen_out">블로그 내 검색</label>
<input id="" type="text" name="" title="검색어 입력"
placeholder="검색어 입력.." value="" class="inp_search"
onkeypress="if (event.keyCode == 13) { }">
</s_search>
<button type="button" title="검색어 삭제" class="btn_search_del">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" class="img_svg">
<defs>
<path id="textDelBtnSvg"
d="M20 2C10.059 2 2 10.059 2 20s8.059 18 18 18 18-8.059 18-18S29.941 2 20 2zm8 24.6L26.6 28 20 21.4 13.4 28 12 26.6l6.6-6.6-6.6-6.6 1.4-1.4 6.6 6.6 6.6-6.6 1.4 1.4-6.6 6.6 6.6 6.6z" />
</defs>
<g fill="none" fill-rule="evenodd" transform="translate(-2 -2)">
<path d="M0 0h40v40H0z" />
<mask id="textDelBtnSvgMask" fill="#fff">
<use xlink:href="#textDelBtnSvg" />
</mask>
<g fill="#000" fill-opacity="1" mask="url(#textDelBtnSvgMask)" class="svg_bg">
<path d="M0 0h40v40H0z" />
</g>
</g>
</svg>
</button>
</div>
</form>
</div>
</div> <!-- search_area -->
<div class="wrap_content">
<s_cover_group>
<div id="content_cover_group" class="content">
<div class="inner_content">
<s_cover_rep>
<s_cover name='image_slide'>
<div class="slide_area main_slide">
<div class="inner_main_slide">
<s_cover_item>
<div class="slide_item">
<a href=""
style="background-image:url('<s_cover_item_thumbnail>https://img1.daumcdn.net/thumb/R1600x0.fwebp.q85/?fname=</s_cover_item_thumbnail>')"
class="link_slide">
<div class="inner_link_slide">
<div class="slide_txt">
<p class="txt_tit"></p>
<p class="txt_cont"></p>
</div>
</div>
</a>
</div>
</s_cover_item>
</div>
<div class="box_arrow">
<div class="inner_box_arrow">
<button type="button" class="btn_arrow btn_prev">
<span class="box_svg">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"
class="img_svg">
<defs>
<path id="mainSlideArrowLeft" d="M12 20L25 7l1.4 1.4L14.8 20l11.6 11.6L25 33z" />
</defs>
<g fill="none" fill-rule="evenodd">
<path d="M0 0h40v40H0z" />
<use fill="#fff" fill-rule="nonzero" xlink:href="#mainSlideArrowLeft" />
</g>
</svg>
</span>
</button>
<button type="button" class="btn_arrow btn_next">
<span class="box_svg">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"
class="img_svg">
<defs>
<path id="mainSlideArrowRight" d="M28 20L15 33l-1.4-1.4L25.2 20 13.6 8.4 15 7z" />
</defs>
<g fill="none" fill-rule="evenodd">
<path d="M0 0h40v40H0z" />
<use fill="#fff" fill-rule="nonzero" xlink:href="#mainSlideArrowRight" />
</g>
</svg>
</span>
</button>
</div>
</div> <!-- btn_arrow -->
</div> <!-- main_slide -->
</s_cover>
<s_cover name='webzine'>
<!-- scroll_area -->
<div class="section_area section_type_wide">
<h2 class="tit_section">
<span class="txt_section"></span>
</h2>
<ul class="list_article list_type1 list_type_wide">
<s_cover_item>
<li>
<a href="" class="link_thumb">
<s_cover_item_thumbnail>
<div class="box_thumb thumb_img"
style="background-image: url('">
</div>
</s_cover_item_thumbnail>
<div class="box_thumb no_img">
<!-- 이미지 없거나 에러 일경우 class="box_thumb" 영역에 class="no_img" 추가, 내부에 아이콘 적용 -->
<div class="default_img">
<span class="box_svg">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"
class="img_svg">
<defs>
<path id="errorIconSvg"
d="M18.5 27.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0zM21 11h-2v13h2V11zm-1-9C10.059 2 2 10.059 2 20s8.059 18 18 18 18-8.059 18-18S29.941 2 20 2zm0 34c-8.837 0-16-7.163-16-16S11.163 4 20 4s16 7.163 16 16a16 16 0 0 1-16 16z" />
</defs>
<g fill="none" fill-rule="evenodd">
<path d="M0 0h40v40H0z" />
<use fill="#fff" fill-rule="nonzero" xlink:href="#errorIconSvg" />
</g>
</svg>
</span>
</div>
</div>
<div class="cont_thumb">
<s_cover_item_article_info>
<strong class="txt_category"></strong>
</s_cover_item_article_info>
<p class="txt_thumb"></p>
<p class="txt_summary"></p>
</div>
</a>
</li>
</s_cover_item>
</ul>
</div> <!-- section_area -->
</s_cover>
<s_cover name='gallery'>
<div class="section_area">
<h2 class="tit_section">
<span class="txt_section"></span>
</h2>
<ul class="list_post">
<s_cover_item>
<li class="item_post">
<a href="" class="link_post item-thumbnail"
<s_cover_item_thumbnail>style="background-image:url('')"
</s_cover_item_thumbnail>>
<div class="info">
<strong class="name"></strong>
</div>
</a>
</li>
</s_cover_item>
</ul>
</div> <!-- section_area -->
</s_cover>
<s_cover name='slide_list1'>
<div class="section_area scroll_area category_area">
<h2 class="tit_section"></h2>
<div class="wrap_scroller wrap_category_scroller">
<div class="scroller">
<s_cover_item>
<div class="item_scroller">
<div class="box_item">
<a href="" title="" class="link_item">
<s_cover_item_thumbnail>
<div class="box_thumb thumb_img"
style="background-image:url('')">
</div>
</s_cover_item_thumbnail>
<div class="box_thumb no_img" style="">
<!-- 이미지 없거나 에러 일경우 class="box_thumb" 영역에 class="no_img" 추가, 내부에 아이콘 적용 (동적 또는 리스트에 넣어 놓아도 됩니다.) -->
<div class="default_img">
<span class="box_svg">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"
class="img_svg">
<defs>
<path id="errorIconSvg"
d="M18.5 27.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0zM21 11h-2v13h2V11zm-1-9C10.059 2 2 10.059 2 20s8.059 18 18 18 18-8.059 18-18S29.941 2 20 2zm0 34c-8.837 0-16-7.163-16-16S11.163 4 20 4s16 7.163 16 16a16 16 0 0 1-16 16z" />
</defs>
<g fill="none" fill-rule="evenodd">
<path d="M0 0h40v40H0z" />
<use fill="#fff" fill-rule="nonzero" xlink:href="#errorIconSvg" />
</g>
</svg>
</span>
</div>
</div>
<span class="txt_item"></span>
</a>
</div>
</div>
</s_cover_item>
</div> <!-- scroller -->
<div class="box_arrow">
<button type="button" class="btn_arrow btn_prev">
<span class="box_svg">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"
class="img_svg">
<defs>
<path id="mainCategoryArrowLeft" d="M12 20L25 7l1.4 1.4L14.8 20l11.6 11.6L25 33z" />
</defs>
<g fill="none" fill-rule="evenodd">
<path d="M0 0h40v40H0z" />
<use fill="#000" fill-rule="nonzero" xlink:href="#mainCategoryArrowLeft" />
</g>
</svg>
</span>
</button>
<button type="button" class="btn_arrow btn_next">
<span class="box_svg">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"
class="img_svg">
<defs>
<path id="mainCategoryArrowRight" d="M28 20L15 33l-1.4-1.4L25.2 20 13.6 8.4 15 7z" />
</defs>
<g fill="none" fill-rule="evenodd">
<path d="M0 0h40v40H0z" />
<use fill="#000" fill-rule="nonzero" xlink:href="#mainCategoryArrowRight" />
</g>
</svg>
</span>
</button>
</div> <!-- box_arrow -->
</div>
</div>
</s_cover>
<s_cover name='slide_list2'>
<div class="section_area scroll_area event_area">
<h2 class="tit_section">
<span class="txt_section"></span>
</h2>
<div class="wrap_scroller wrap_event_scroller">
<div class="scroller">
<s_cover_item>
<div class="item_scroller">
<div class="box_item">
<a href="" title="" class="link_item">
<s_cover_item_thumbnail>
<div class="box_thumb thumb_img"
style="background-image:url('')">
</div>
</s_cover_item_thumbnail>
<div class="box_thumb no_img" style="">
<!-- 이미지 없거나 에러 일경우 class="box_thumb" 영역에 class="no_img" 추가, 내부에 아이콘 적용 (동적 또는 리스트에 넣어 놓아도 됩니다.) -->
<div class="default_img">
<span class="box_svg">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"
class="img_svg">
<defs>
<path id="errorIconSvg"
d="M18.5 27.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0zM21 11h-2v13h2V11zm-1-9C10.059 2 2 10.059 2 20s8.059 18 18 18 18-8.059 18-18S29.941 2 20 2zm0 34c-8.837 0-16-7.163-16-16S11.163 4 20 4s16 7.163 16 16a16 16 0 0 1-16 16z" />
</defs>
<g fill="none" fill-rule="evenodd">
<path d="M0 0h40v40H0z" />
<use fill="#fff" fill-rule="nonzero" xlink:href="#errorIconSvg" />
</g>
</svg>
</span>
</div>
</div>
<span class="txt_item"></span>
</a>
</div>
</div>
</s_cover_item>
</div> <!-- scroller -->
<div class="box_arrow">
<button type="button" class="btn_arrow btn_prev">
<span class="box_svg">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"
class="img_svg">
<defs>
<path id="mainEventArrowLeft" d="M12 20L25 7l1.4 1.4L14.8 20l11.6 11.6L25 33z" />
</defs>
<g fill="none" fill-rule="evenodd">
<path d="M0 0h40v40H0z" />
<use fill="#000" fill-rule="nonzero" xlink:href="#mainEventArrowLeft" />
</g>
</svg>
</span>
</button>
<button type="button" class="btn_arrow btn_next">
<span class="box_svg">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"
class="img_svg">
<defs>
<path id="mainEventArrowRight" d="M28 20L15 33l-1.4-1.4L25.2 20 13.6 8.4 15 7z" />
</defs>
<g fill="none" fill-rule="evenodd">
<path d="M0 0h40v40H0z" />
<use fill="#000" fill-rule="nonzero" xlink:href="#mainEventArrowRight" />
</g>
</svg>
</span>
</button>
</div> <!-- btn_arrow -->
</div>
</div> <!-- event_area -->
</s_cover>
<s_cover name='text_list'>
<div class="section_area">
<h2 class="tit_section">
<span class="txt_section"></span>
</h2>
<ul class="list_notice">
<s_cover_item>
<li class="item_notice">
<a href="" class="link_notice">
<span class="thumnail item-thumbnail"
<s_cover_item_thumbnail>style="background-image:url('')"
</s_cover_item_thumbnail>></span>
<div class="info">
<p class="tit_notice"></p>
<p class="text"></p>
<s_cover_item_article_info>
<span class="txt_date"></span>
</s_cover_item_article_info>
</div>
</a>
</li>
</s_cover_item>
</ul>
</div>
</s_cover>
</s_cover_rep>
</div>
</div>
</s_cover_group>
</div>
<s_list>
<div class="wrap_content">
<div id="content_search_list" class="content content_article_rep">
<div class="inner_content">
<div id="content_search" class="content sub_content">
<div class="inner_content">
<div class="section_area">
<h2 class="tit_section">
<span class="txt_section"></span>
</h2>
<ul class="list_article list_sub list_sub_type1">
<s_list_rep>
<li>
<a href="" class="link_thumb">
<!-- s_list 에 이미지가 없는 문제 -->
<s_list_rep_thumbnail>
<div class="box_thumb thumb_img" data-image=""
style="background-image:url('//i1.daumcdn.net/thumb/C300x200.fwebp.q85/?fname=')">
</div>
</s_list_rep_thumbnail>
<div class="box_thumb no_img" style="display:none;"></div>
<div class="cont_thumb">
<p class="txt_thumb"></p>
<p class="thumb_info">
<span class="date"></span>
<span class="name">by </span>
</p>
</div>
</a>
</li>
</s_list_rep>
</ul>
</div>
</div> <!-- inner_content -->
</div> <!-- content close -->
</div>
</div>
</div>
</s_list>
<!-- sub page -->
<div class="wrap_content wrap_detail_content">
<s_article_rep>
<!-- 메인 페이지에서 목록 표현 -->
<s_index_article_rep>
<div id="content_article_rep" class="content_list content_article_rep">
<div class="inner_content">
<a href="" class="link_thumb"
data-tiara-action-name="블로그글_클릭"
data-tiara-action-kind="ClickContent"
data-tiara-copy=""
data-tiara-image=""
data-tiara-click_url="https://tistory.mow.codes/"
data-tiara-name=""
data-tiara-provider="블록체인 ｜ 사회학 ｜ 창업"
data-tiara-plink=""
data-tiara-id=""
>
<s_article_rep_thumbnail>
<div class="box_thumb thumb_img"
style="background-image:url('https://i1.daumcdn.net/thumb/R750x0.fwebp.q85/?fname=')"></div>
</s_article_rep_thumbnail>
<div class="box_thumb no_img"></div>
<div class="cont_thumb">
<strong class="txt_title"></strong>
<p class="txt_thumb"></p>
<p class="thumb_info">
<span class="category"></span>
<span class="date"></span>
</p>
</div>
</a>
</div>
</div> <!-- content close -->
</s_index_article_rep>
<!-- // 메인 페이지에서 목록 표현 -->
<!-- 치환자 <s_article_rep> 적용 -->
<s_permalink_article_rep>
<div id="content_permallink_article" class="content sub_content sub_detail">
<div class="inner_content">
<div class="section_area detail_area">
<h2 class="blind">상세 컨텐츠</h2>
<!-- 글제목 -->
<div class="box_article_tit">
<h3 class="blind">본문 제목</h3>
<p class="txt_sub_tit"></p>
<div class="sub_tit_info">
<span class="category"> <span class="txt_style"><a
href=""></a></span></span>
<p class="info_meta">
<span class="name">by <span class="txt_style"></span></span>
<span class="date"></span>
</p>
</div>
</div>
<!-- //글제목 -->
<!-- 본문 -->
<div class="box_article">
<h3 class="blind">본문</h3>
<div class="article_cont" id="article-view">
<!-- 본문 내용 (치환자 적용 영역) -->
<div class="article_util">
<button type="button" class="util_like">
<span class="blind">좋아요</span>
<i class="icon_font icon-favorite-o"></i>
<!-- 좋아요 클릭 시 쿨래스 변경 빈하트 class="icon-favorite-o", 채움 하트 class="icon-favorite" -->
<span class="txt_count">-</span>
</button>
<div class="box_util">
<!-- 댓글 달기 버튼 링크 이슈 있음 by osh -->
<button type="button" class="util_comment" href="">
<span class="blind">댓글달기</span>
<i class="icon_font icon-chat-o"></i>
<span class="txt_count"></span>
</button>
</div>
</div>
</div>
</div>
<!-- //본문 -->
<!-- 댓글 -->
<div class="box_comment">
<s_rp>
</s_rp>
</div>
<!-- //댓글 -->
</div>
</div>
</div>
</s_permalink_article_rep>
</s_article_rep>
<!-- page 디자인 -->
<s_page_rep>
<s_permalink_article_rep>
<div id="content_permallink_page" class="content sub_content">
<div class="inner_content">
<div class="section_area detail_area">
<h2 class="blind">상세 컨텐츠</h2>
<!-- 글제목 -->
<div class="box_article_tit">
<h3 class="blind">본문 제목</h3>
<p class="txt_sub_tit"></p>
<div class="sub_tit_info">
<span class="date"></span>
</div>
</div>
<!-- //글제목 -->
<!-- 본문 -->
<div class="box_article">
<h3 class="blind">본문</h3>
<div class="article_cont" id="article-view">
<!-- 본문 내용 (치환자 적용 영역) -->
</div>
</div>
<!-- //본문 -->
</div>
</div>
</div>
</s_permalink_article_rep>
</s_page_rep>
<!-- // page 디자인 -->
<s_article_protected>
<s_index_article_rep>
<div id="content_protected_rep" class="content_list content_protected_rep">
<div class="inner_content">
<a href="" class="link_thumb">
<div class="cont_thumb">
<strong class="txt_title"></strong>
<p class="txt_thumb">보호되어 있는 글입니다.</p>
<p class="thumb_info">
<span class="category">보호글</span>
<span class="date"></span>
</p>
</div>
</a>
</div>
</div> <!-- content close -->
</s_index_article_rep>
<s_permalink_article_rep>
<div id="content_permallink_protected" class="content sub_content sub_detail">
<div class="inner_content">
<div class="section_area detail_area">
<h2 class="blind">상세 컨텐츠</h2>
<!-- 글제목 -->
<div class="box_article_tit">
<h3 class="blind">본문 제목</h3>
<p class="txt_sub_tit"></p>
<div class="sub_tit_info">
<span class="name">by <span class="txt_style"></span></span>
<span class="date"></span>
<span class="category">in <span class="txt_style">보호글</span></span>
</div>
</div>
<!-- //글제목 -->
<!-- 본문 -->
<div class="box_article">
<h3 class="blind">본문</h3>
<div class="article_cont">
<!-- 본문 내용 (치환자 적용 영역) -->
<form class="protected_form" onsubmit="">
<p>보호되어 있는 글입니다. 내용을 보시려면 비밀번호를 입력하세요.</p>
<input type="password" id="" name="" value=""
placeholder="비밀번호" />
<button type="submit">확인</button>
</form>
</div>
</div>
<!-- //본문 -->
</div>
</div>
</div>
</s_permalink_article_rep>
</s_article_protected>
<s_notice_rep>
<s_index_article_rep>
<div id="content_notice_rep" class="content_list content_notice_rep">
<div class="inner_content">
<a href="" class="link_thumb"
data-tiara-action-name="블로그공지_클릭"
data-tiara-action-kind="ClickContent"
data-tiara-copy=""
data-tiara-click_url="https://tistory.mow.codes/"
data-tiara-name=""
data-tiara-provider="블록체인 ｜ 사회학 ｜ 창업"
data-tiara-plink=""
data-tiara-id=""
>
<s_notice_rep_thumbnail>
<div class="box_thumb thumb_img" data-image=""
style="background-image:url('')"></div>
</s_notice_rep_thumbnail>
<div class="cont_thumb">
<strong class="txt_title"></strong>
<p class="txt_thumb"></p>
<p class="thumb_info">
<span class="category">공지사항</span>
<span class="date"></span>
</p>
</div>
</a>
</div>
</div> <!-- content close -->
</s_index_article_rep>
<s_permalink_article_rep>
<div id="content_permallink_notice" class="content sub_content">
<div class="inner_content">
<div class="section_area detail_area">
<h2 class="blind">상세 컨텐츠</h2>
<!-- 글제목 -->
<div class="box_article_tit">
<h3 class="blind">본문 제목</h3>
<p class="txt_sub_tit"></p>
<div class="sub_tit_info">
<span class="date"></span>
</div>
</div>
<!-- //글제목 -->
<!-- 본문 -->
<div class="box_article">
<h3 class="blind">본문</h3>
<div class="article_cont" id="article-view">
<!-- 본문 내용 (치환자 적용 영역) -->
</div>
</div>
<!-- //본문 -->
</div>
</div>
</div>
</s_permalink_article_rep>
</s_notice_rep>
<!-- 사이드바 완전 제거 -->
<!-- <div id="sidebar" class="sidebar">
사이드바 내용 모두 주석 처리됨
</div> -->
</div>
<!-- // sub page // .wrap_detail_content -->
<div class="wrap_content">
<div class="content">
<div class="section_btm_area">
<!-- 태그 magz 디자인 -->
<s_tag>
<div class="box_tag_trail">
<h3 class="tit_box">태그</h3>
<div class="tag_cont">
<!-- 마지막 콤마(,) 를 javascript 로 지워줘야 하나. by osh -->
<s_tag_rep>
<a href="" class=""></a>,
</s_tag_rep>
</div>
</div>
</s_tag>
<!-- //태그 magz 디자인 -->
<!-- log magz 디자인 -->
<s_local>
<section id="localog" class="box_tag_trail row nonEntry main">
<h3 class="tit_box">Local Log</h3>
<s_local_spot_rep>
<div class="spot" style="margin-left: px">
</div>
</s_local_spot_rep>
<s_local_info_rep>
<div class="info" style="margin-left: px">
<a href=""></a>
</div>
</s_local_info_rep>
</section>
</s_local>
<!-- // log magz 디자인 -->
<s_guest>
</s_guest>
</div>
</div>
</div>
<s_paging>
<div class="wrap_content wrap_content_paging ">
<div id="content" class="content sub_content">
<div class="inner_paging">
<!-- section_area -->
<div class="section_paging ">
<h2 class="blind">페이징</h2>
<!-- 페이징 치환자 적용 영역 -->
<div class="paging">
<a class="link_page link_prev ">
<svg width="10" height="18" viewBox="0 0 10 18" class="img_svg">
<path d="M9 18l1-1-8-8 8-8-1-1-9 9"></path>
</svg>
<span class="txt_page">이전</span>
</a>
<div class="paging_num">
<!-- 페이징 치환자 수정 -->
<s_paging_rep>
<a class="link_num"></a>
</s_paging_rep>
</div>
<a class="link_page link_next ">
<span class="txt_page">다음</span>
<svg width="10" height="18" viewBox="0 0 10 18" class="img_svg">
<path d="M1 0L0 1l8 8-8 8 1 1 9-9"></path>
</svg>
</a>
</div>
<!-- //페이징 치환자 적용 영역 -->
</div>
</div>
</div>
</div>
</s_paging>
<!-- sub page -->
<div id="footer" class="footer">
<div class="inner_footer">
<div class="area_select">
<div class="box_select">
<div class="inner_box">
<select class="opt_select">
<option>패밀리사이트</option>
<s_link_rep>
<option value="" data-href="">
</option>
</s_link_rep>
</select>
</div>
</div>
</div>
<div class="area_address">
<div class="info_link">
<s_if_var_footerLink1Name>
<a href="" class="link_info"></a>
</s_if_var_footerLink1Name>
<s_if_var_footerLink2Name>
<a href="" class="link_info"></a>
</s_if_var_footerLink2Name>
<s_if_var_footerLink3Name>
<a href="" class="link_info"></a>
</s_if_var_footerLink3Name>
<s_if_var_footerLink4Name>
<a href="" class="link_info"></a>
</s_if_var_footerLink4Name>
</div>
<address class="box_address">
<s_if_var_logoFooterImage>
<img src="" class="footer_logo" alt="푸터 로고">
</s_if_var_logoFooterImage>
<s_not_var_logoFooterImage>
<span class="txt_flogo">블록체인 ｜ 사회학 ｜ 창업</span>
</s_not_var_logoFooterImage>
<span class="txt_address"></span>
</address>
<div class="area_sns">
<s_if_var_snsFacebook>
<a href="" title="facebook" class="link_sns link_facebook">
<img src="./images/ico_facebook.svg" alt="페이스북">
</a>
</s_if_var_snsFacebook>
<s_if_var_snsTwitter>
<a href="" title="twitter" class="link_sns link_twitter">
<img src="./images/ico_twitter.svg" alt="트위터">
</a>
</s_if_var_snsTwitter>
<s_if_var_snsInstagram>
<a href="" title="instagram" class="link_sns link_instagram">
<img src="./images/ico_instagram.svg" alt="인스타그램">
</a>
</s_if_var_snsInstagram>
<s_if_var_snsYoutube>
<a href="" title="youtube" class="link_sns link_youtube">
<img src="./images/ico_youtube.svg" alt="유투브">
</a>
</s_if_var_snsYoutube>
<s_if_var_email>
<a href="mailto:" title="mail" class="link_sns link_email">
<img src="./images/ico_mail.svg" alt="메일">
</a>
</s_if_var_email>
</div>
</div>
</div> <!-- inner_footer -->
</div> <!-- footer close -->
</div> <!-- container close -->
</div>
</s_t3>
</body>
</html>
본 블로거는 포스팅으로 인한 어떠한 부가적 수익창출도 수행하지 않습니다.
여기에는 블로그 수익화를 위한 애드센스 삽입, 광고성 게시물 업로드 등이 포함됩니다.
본 블로그는 모든 지식 정보의 자유로운 공유를 지향합니다.
방문자 분들께서 본문의 콘텐츠를 필요에 따라 copy&paste, 캡쳐, 인쇄할 때
최대한 깔끔한 형태로 출력될 수 있도록 포스팅하였습니다.
본 콘텐츠의 생성 과정에 있어 어떠한 종류의 AI도 사용되지 않았음을 분명히 밝힙니다.
근래 유행하는 ‘AI 자동화를 통한 블로그 수익화’를 절대적으로 지양하며
항상 양질의 콘텐츠를 공유드리고자 노력을 가하지만,
설령 그렇다 하더라도 콘텐츠의 참조 및 재사용 중에 발생하는
검수의 책임은 모두 방문자 측에 있음을 간곡히 당부드립니다.
</div>
</div>
<!-- //본문 -->
</div>
</div>
</div>
</s_permalink_article_rep>
</s_page_rep>
<!-- // page 디자인 -->
<s_article_protected>
<s_index_article_rep>
<div id="content_protected_rep" class="content_list content_protected_rep">
<div class="inner_content">
<a href="/entry/%EB%B8%94%EB%A1%9C%EA%B7%B8-%EC%8A%A4%ED%82%A8-%EC%BB%A4%EC%8A%A4%ED%85%80" class="link_thumb">
<div class="cont_thumb">
<strong class="txt_title">블로그 스킨 커스텀</strong>
<p class="txt_thumb">보호되어 있는 글입니다.</p>
<p class="thumb_info">
<span class="category">보호글</span>
<span class="date">2025. 8. 29. 01:35</span>
</p>
</div>
</a>
</div>
</div> <!-- content close -->
</s_index_article_rep>
<s_permalink_article_rep>
<div id="content_permallink_protected" class="content sub_content sub_detail">
<div class="inner_content">
<div class="section_area detail_area">
<h2 class="blind">상세 컨텐츠</h2>
<!-- 글제목 -->
<div class="box_article_tit">
<h3 class="blind">본문 제목</h3>
<p class="txt_sub_tit">블로그 스킨 커스텀</p>
<div class="sub_tit_info">
<span class="name">by <span class="txt_style">basoon</span></span>
<span class="date">2025. 8. 29. 01:35</span>
<span class="category">in <span class="txt_style">보호글</span></span>
</div>
</div>
<!-- //글제목 -->
<!-- 본문 -->
<div class="box_article">
<h3 class="blind">본문</h3>
<div class="article_cont">
<!-- 본문 내용 (치환자 적용 영역) -->
<form class="protected_form" onsubmit="{reloadEntry(34);return false;}">
<p>보호되어 있는 글입니다. 내용을 보시려면 비밀번호를 입력하세요.</p>
<input type="password" id="entry34password" name="entry34password" value=""
placeholder="비밀번호" />
<button type="submit">확인</button>
</form>
</div>
</div>
<!-- //본문 -->
</div>
</div>
</div>
</s_permalink_article_rep>
</s_article_protected>
<s_notice_rep>
<s_index_article_rep>
<div id="content_notice_rep" class="content_list content_notice_rep">
<div class="inner_content">
<a href="" class="link_thumb"
data-tiara-action-name="블로그공지_클릭"
data-tiara-action-kind="ClickContent"
data-tiara-copy=""
data-tiara-click_url="https://tistory.mow.codes/"
data-tiara-name=""
data-tiara-provider="블록체인 ｜ 사회학 ｜ 창업"
data-tiara-plink=""
data-tiara-id=""
>
<s_notice_rep_thumbnail>
<div class="box_thumb thumb_img" data-image=""
style="background-image:url('')"></div>
</s_notice_rep_thumbnail>
<div class="cont_thumb">
<strong class="txt_title"></strong>
<p class="txt_thumb"></p>
<p class="thumb_info">
<span class="category">공지사항</span>
<span class="date"></span>
</p>
</div>
</a>
</div>
</div> <!-- content close -->
</s_index_article_rep>
<s_permalink_article_rep>
<div id="content_permallink_notice" class="content sub_content">
<div class="inner_content">
<div class="section_area detail_area">
<h2 class="blind">상세 컨텐츠</h2>
<!-- 글제목 -->
<div class="box_article_tit">
<h3 class="blind">본문 제목</h3>
<p class="txt_sub_tit"></p>
<div class="sub_tit_info">
<span class="date"></span>
</div>
</div>
<!-- //글제목 -->
<!-- 본문 -->
<div class="box_article">
<h3 class="blind">본문</h3>
<div class="article_cont" id="article-view">
<!-- 본문 내용 (치환자 적용 영역) -->
</div>
</div>
<!-- //본문 -->
</div>
</div>
</div>
</s_permalink_article_rep>
</s_notice_rep>
<!-- 사이드바 완전 제거 -->
<!-- <div id="sidebar" class="sidebar">
사이드바 내용 모두 주석 처리됨
</div> -->
</div>
<!-- // sub page // .wrap_detail_content -->
<div class="wrap_content">
<div class="content">
<div class="section_btm_area">
<!-- 태그 magz 디자인 -->
<s_tag>
<div class="box_tag_trail">
<h3 class="tit_box">태그</h3>
<div class="tag_cont">
<!-- 마지막 콤마(,) 를 javascript 로 지워줘야 하나. by osh -->
<s_tag_rep>
<a href="" class=""></a>,
</s_tag_rep>
</div>
</div>
</s_tag>
<!-- //태그 magz 디자인 -->
<!-- log magz 디자인 -->
<s_local>
<section id="localog" class="box_tag_trail row nonEntry main">
<h3 class="tit_box">Local Log</h3>
<s_local_spot_rep>
<div class="spot" style="margin-left: px">
</div>
</s_local_spot_rep>
<s_local_info_rep>
<div class="info" style="margin-left: px">
<a href=""></a>
</div>
</s_local_info_rep>
</section>
</s_local>
<!-- // log magz 디자인 -->
<s_guest>
</s_guest>
</div>
</div>
</div>
<s_paging>
<div class="wrap_content wrap_content_paging ">
<div id="content" class="content sub_content">
<div class="inner_paging">
<!-- section_area -->
<div class="section_paging ">
<h2 class="blind">페이징</h2>
<!-- 페이징 치환자 적용 영역 -->
<div class="paging">
<a class="link_page link_prev ">
<svg width="10" height="18" viewBox="0 0 10 18" class="img_svg">
<path d="M9 18l1-1-8-8 8-8-1-1-9 9"></path>
</svg>
<span class="txt_page">이전</span>
</a>
<div class="paging_num">
<!-- 페이징 치환자 수정 -->
<s_paging_rep>
<a class="link_num"></a>
</s_paging_rep>
</div>
<a class="link_page link_next ">
<span class="txt_page">다음</span>
<svg width="10" height="18" viewBox="0 0 10 18" class="img_svg">
<path d="M1 0L0 1l8 8-8 8 1 1 9-9"></path>
</svg>
</a>
</div>
<!-- //페이징 치환자 적용 영역 -->
</div>
</div>
</div>
</div>
</s_paging>
<!-- sub page -->
<div id="footer" class="footer">
<div class="inner_footer">
<div class="area_select">
<div class="box_select">
<div class="inner_box">
<select class="opt_select">
<option>패밀리사이트</option>
<s_link_rep>
<option value="" data-href="">
</option>
</s_link_rep>
</select>
</div>
</div>
</div>
<div class="area_address">
<div class="info_link">
<s_if_var_footerLink1Name>
<a href="" class="link_info"></a>
</s_if_var_footerLink1Name>
<s_if_var_footerLink2Name>
<a href="" class="link_info"></a>
</s_if_var_footerLink2Name>
<s_if_var_footerLink3Name>
<a href="" class="link_info"></a>
</s_if_var_footerLink3Name>
<s_if_var_footerLink4Name>
<a href="" class="link_info"></a>
</s_if_var_footerLink4Name>
</div>
<address class="box_address">
<s_if_var_logoFooterImage>
<img src="" class="footer_logo" alt="푸터 로고">
</s_if_var_logoFooterImage>
<s_not_var_logoFooterImage>
<span class="txt_flogo">블록체인 ｜ 사회학 ｜ 창업</span>
</s_not_var_logoFooterImage>
<span class="txt_address"></span>
</address>
<div class="area_sns">
<s_if_var_snsFacebook>
<a href="" title="facebook" class="link_sns link_facebook">
<img src="./images/ico_facebook.svg" alt="페이스북">
</a>
</s_if_var_snsFacebook>
<s_if_var_snsTwitter>
<a href="" title="twitter" class="link_sns link_twitter">
<img src="./images/ico_twitter.svg" alt="트위터">
</a>
</s_if_var_snsTwitter>
<s_if_var_snsInstagram>
<a href="" title="instagram" class="link_sns link_instagram">
<img src="./images/ico_instagram.svg" alt="인스타그램">
</a>
</s_if_var_snsInstagram>
<s_if_var_snsYoutube>
<a href="" title="youtube" class="link_sns link_youtube">
<img src="./images/ico_youtube.svg" alt="유투브">
</a>
</s_if_var_snsYoutube>
<s_if_var_email>
<a href="mailto:" title="mail" class="link_sns link_email">
<img src="./images/ico_mail.svg" alt="메일">
</a>
</s_if_var_email>
</div>
</div>
</div> <!-- inner_footer -->
</div> <!-- footer close -->
</div> <!-- container close -->
</div>
</s_t3>
</body>
</html>
본 블로거는 포스팅으로 인한 어떠한 부가적 수익창출도 수행하지 않습니다.
여기에는 블로그 수익화를 위한 애드센스 삽입, 광고성 게시물 업로드 등이 포함됩니다.
본 블로그는 모든 지식 정보의 자유로운 공유를 지향합니다.
방문자 분들께서 본문의 콘텐츠를 필요에 따라 copy&paste, 캡쳐, 인쇄할 때
최대한 깔끔한 형태로 출력될 수 있도록 포스팅하였습니다.
본 콘텐츠의 생성 과정에 있어 어떠한 종류의 AI도 사용되지 않았음을 분명히 밝힙니다.
근래 유행하는 ‘AI 자동화를 통한 블로그 수익화’를 절대적으로 지양하며
항상 양질의 콘텐츠를 공유드리고자 노력을 가하지만,
설령 그렇다 하더라도 콘텐츠의 참조 및 재사용 중에 발생하는
검수의 책임은 모두 방문자 측에 있음을 간곡히 당부드립니다.
'창업' 카테고리의 다른 글
| 무료 자동 로샤 채점 프로그램 (1) | 2025.10.31 |
|---|---|
| 네이버TV 실명 노출 문제, 결국 카카오TV로 옮긴 이유와 해결 방법 (23) | 2025.08.13 |