[ 티스토리 블로그 스킨 제작하기 ] 티스토리 블로그 북클럽 블랙 다크모드 스킨 공유

개성 있는 티스토리 블로그 스킨 제작하기

티스토리 블로그 기본 스킨은 화이트 스킨이지만 기본적인 설정을 블랙 스킨으로 수정한것입니다.

티스토리 블로그 북클럽 다크모드 스킨 코드 공유

티스토리 블로그를 운영하다 보면 스킨을 개성에 맞게 제작해서 사용하게 됩니다. 대부분 티스토리 블로그를 수정하려면 기본적인 HTML 코딩 지식이 필요합니다. 하지만 기본적인 코딩 지식이 없어도 다른 사람이 제작한 블로그 스킨을 찾아 사용하기도 합니다.

아래는 티스토리에서 기본적으로 제공하는 Book-Club 스킨을 CSS만 수정한 버전입니다. 기본 스킨은 화이트 스킨이지만, 블랙 스킨으로 수정한 것입니다.

티스토리 블로그 스킨 제작

티스토리 블로그는 개인의 취향에 따라 자유롭게 디자인과 구성을 변경할 수 있는 유연함이 큰 장점입니다. 특히 티스토리 블로그 스킨을 직접 제작하거나 수정해 사용하는 경우가 많습니다. 이번 글에서는 티스토리 블로그의 기본 스킨 중 하나인 북클럽(Book-Club) 스킨을 블랙 테마로 스킨을 수정하는 방법을 살펴보겠습니다.

티스토리 블로그 스킨은 HTML, CSS, JavaScript 코드로 구성됩니다.

1. 개성 표현: 자신의 블로그를 다른 블로그와 차별화할 수 있음.
2. 기능 확장: 기본 스킨에 부족한 기능을 추가하여 더 나은 사용자 경험 제공.
3. 디자인 수정 : 블로그 운영자가 제공하는 콘텐츠에 맞는 디자인을 구축 가능합니다.

북클럽(Book-Club) 스킨의 특징

북클럽 스킨은 티스토리에서 제공하는 기본 스킨 중 하나로, 깔끔하고 단순하며 가장 기본에 충실한 디자인을 특징으로 합니다. 특히 콘텐츠 중심의 배치가 돋보이며, 다음과 같은 장점이 있습니다:

• 테마 기본 : 기본 사이트에 적합한 심플함.
• 사용자 정의 가능: HTML과 CSS를 약간만 수정해도 디자인을 바꿀 수 있음.
• 반응형 디자인: 모바일, 태블릿, PC 화면에 동적디자인.

북클럽 스킨을 블랙 테마로 변경

요즘 많은 사용자가 다크 모드를 선호함에 따라 북클럽 스킨을 블랙 테마로 수정하는 사례가 늘고 있습니다. 기본적으로 티스토리 스킨은 화이트 테마로 설정되어 있지만, 아래 방법을 통해 블랙 테마로 쉽게 전환할 수 있습니다.

코딩 지식 없이 스킨 수정하는 방법

HTML과 CSS에 익숙하지 않은 경우에도 아래 방법을 통해 블로그를 꾸밀 수 있습니다:

1. 스킨 다운로드: 이미 제작된 무료 또는 유료 스킨을 다운로드.
2. 스킨 설정 메뉴 활용: 티스토리의 사용자 인터페이스에서 제공하는 스킨 옵션 조정.
3. 커뮤니티 활용: 티스토리 관련 포럼이나 블로그에서 제공하는 가이드 참고.

다크 모드 북크럽 스킨 자료

Book-Club-Black.css

0.08MB

테스트 사이트

nanda

1. CSS 수정하기

CSS는 블로그의 시각적 요소를 제어하는 핵심 코드입니다. 아래 코드를 추가하거나 수정하여 북클럽 스킨을 블랙 테마로 변경할 수 있습니다.

2. 티스토리 편집 화면에서 코드 적용하는 방법

1. 티스토리 관리 페이지로 이동합니다.
2. 관리페이지 > 스킨 편집 메뉴로 진입합니다.
3. CSS 파일을 열고 위 코드를 기본코드를 대체 시킵니다.
4. 저장 후 블로그를 새로고침하여 변경된 모습을 확인합니다.

3. 기본 HTML 사용

블로그를 좀 더 심도 있게 수정하려면 기본적인 HTML 지식이 필요합니다. html 코드는 기본 코드를 그대로 사용해도 됩니다. 수정하거나 변경된 스킨인 경우는 CSS코드를 수정할수 있는 경우도 발생할수 있습니다. 기본 HTML 코드와 상관없이 적용가능하기 때문에 기존 스킨에 익숙한 테마를 그대로 사용할수 있습니다.

티스토리 블로그 스킨 다크모드 북스킨

4 .기본 다크모드

아래 코드를 css에 삽입하면 됩니다.

/* new added for dark mode */
@media (prefers-color-scheme: dark) {
	.layer_post .btn_mark {
		color: #333 !important;
	}

	@media screen and (max-width: 767px) {
		#header h1 {
			background-color: #444 !important;
		}
	}
	
	footer, #header, .mobile-menu #aside, #aside .profile::before {
		background-color: #666 !important;
	}

	#header {
		border-bottom: 1px solid #000 !important;
	}

	body, .comment-list ul li ul {
		background-color: #222 !important;
	}
	
	table, select{
		color: #ddd !important;
	}
	
	.pagination a, p, ul, li, p span {
		color: #aaa !important;
	}

	ul, li, ol, div {
		color: #eee !important;
	}
	
	.comments h2 .count, .og-title, .comments h2, .cover-event ul li .title, a, h2, h3{
		color: #eee !important;
	}

	.cover-event ul li .more {
		color: #000 !important;
	}
	
	h4, h5 {
		color: #ccc !important;
	}

	.og-text {
		background-color: #555 !important;
	}
	
	.cover-list, .cover-thumbnail-3, .cover-thumbnail-2, .cover-thumbnail-4, .cover-event, .comment-list ul li ul {
		border-top: none !important;
	}

	.cover-list h2, .cover-thumbnail-2 h2 {
		border-bottom: 1px solid #000 !important;
	}

	#gnb ul li .current a:after {
		background-color: #eee !important;
	}

	#header .util .profile button, #aside .close, .sidebar .social-channel ul li a, #header .util .menu, .tags a, .cover-thumbnail-3 button {
		background-color: transparent !important;
		border: 1px solid #333 !important;
	}
	#header .util .search::before {
		background-color: #444 !important;
		border: 1px solid #333 !important;
	}
	.pagination .prev, .pagination .next, .pagination .selected, .cover-thumbnail-4 .next {
		color: #fff !important;
		border: 1px solid #333 !important;
	}

	figure[data-ke-type='opengraph'] a, #tt-body-page figure[data-ke-type='opengraph'] a {
		border: 1px soiid #000 !important;
	}
	figure[data-ke-type='opengraph'] div.og-image {
		border-right: 1px solid #000 !important;
	}
	
	/* sidebar */
	.box_header .link_logo {
		color: #eee !important;
	}

	
	.area_sidebar .tt_category {
		color: #333 !important;
	}

	.area_sidebar .inner_sidebar {
		background: #333 !important;
	}
	
	.area_sidebar .link_item{
		color: #aaa !important;
	}
	
	.area_sidebar .link_item .c_cnt{
		color: #aaa !important;
	}
	
	.area_sidebar .link_sub_item{
		color: #888 !important;
		font-weight: 500;
	}
	
	.area_sidebar .sub_category_list {
		border-left: 3px solid #888 !important;
	}
		
	.area_sidebar .t_menu_home a,
	.area_sidebar .t_menu_tag a,
	.area_sidebar .t_menu_guestbook a
	{
		color: #ccc !important;
	}
	
	.area_sidebar .link_tool {
		color: #ccc !important;
	}
	.area_sidebar .link_add {
		color: #ccc !important;
	}
	
	.area_sidebar .btn_close {
		color: #ccc !important;
	}
	
	/*sidebar search*/
	.area_popup {
		background: #333 !important;
	}
	
	.area_popup .area_search .btn_close {
		color: #ccc !important;
	}
	
	.area_popup .link_logo {
		color: #eee !important;
	}
	
	.tag_zone a {
		border: solid 1px #999 !important;
		color: #eee !important;
	}
	
	.area_popup .box_form {
  	border-bottom: 1px solid #ccc !important; 
	}
	

	
	textarea, #wf-form, #container .wf-form {
		background-color: #333 !important;
		border: 1px solid #000 !important;
	}

	footer {
		border-top: 1px solid #000 !important;
	}
	
	#footer address{
		color: #bbb !important;
	}
	
	#footer .link_footer {
		color: #bbb !important;
	}
	#footer .page-top {
		background-color: #555 !important;
		border-color: #444 !important;
	}

	#footer .page-top:hover {
		background-color: #bbb !important;
	}
		
	.box_header .btn_menu, .box_header .btn_search {
		background-image: url(./images/ico_menu.svg) !important;
	}
	
	.box_header .btn_search {
		background-image: url(./images/ico_search.svg) !important;
	}
	
	.info_profile {
		background-color: #555 !important;
	}

	.list_toolbar {
		background-color: #555 !important;
	}

	.wrap_list {
		background-color: #555 !important;
	}

	
}

블랙 테마의 장점

블랙 테마는 단순한 색상 변경 이상의 의미를 가집니다. 다음은 블랙 테마가 제공하는 몇 가지 이점입니다:

• 눈의 피로 감소: 어두운 배경은 긴 시간 동안 글을 읽을 때 눈의 피로를 줄여줍니다.
• 세련된 이미지: 블랙 테마는 고급스럽고 세련된 분위기를 제공합니다.
• 집중도: 좀더 콘텐츠를 집중해서 읽을수 있습니다.

티스토리 블로그의 스킨을 수정하는 과정은 초보자에게는 약간의 어려움이 있을 수 있지만, 기본적인 HTML과 CSS 지식을 익히면 누구나 쉽게 블로그를 개성 있게 꾸밀 수 있습니다. 특히 북클럽 스킨처럼 심플한 스킨을 기반으로 다크 테마로 변경하면 블로그의 분위기를 새롭게 바꿀 수 있습니다.