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

티스토리 블로그 스킨 공유: 북클럽 스킨을 블랙 테마로 변환하는 방법

-티스토리 스킨 공유
-티스토리 블로그 스킨 꾸미기
-기본 Book-Club 스킨을 블랙 테마로 변환하는 쉬운 방법

티스토리 스킨을 공유합니다. 티스토리 블로그를 운영하면서 개인적인 스타일에 맞는 블로그를 만들고 싶다면, 스킨을 개성 있게 디자인하는 것이 중요한 포인트입니다. 스킨은 블로그의 첫인상을 결정짓는 중요한 요소이기 때문에, 많은 블로거들이 자신의 개성과 목적에 맞는 스킨을 직접 제작하거나 다른 사람이 만든 스킨을 공유해서 적용합니다.티스토리에서는 블로그를 보다 효과적으로 꾸밀 수 있는 다양한 스킨을 제공하지만, 기본적인 HTML 코딩 지식이 필요한 경우가 많습니다.

하지만 HTML 코딩에 익숙하지 않더라도, 이미 다른 사람들이 제작한 멋진 티스토리 스킨을 찾아 적용하는 방법도 있습니다. 이런 스킨을 활용하면, 코드 수정 없이도 손쉽게 블로그의 디자인을 변화시킬 수 있기 때문에, 많은 블로거들이 이를 활용하고 있습니다.

아래에서는 티스토리에서 기본적으로 제공하는 Book-Club 스킨을 CSS만 수정하여, 기본 화이트 스킨을 블랙 스킨으로 변환한 버전을 공유합니다. 이 스킨은 간단한 CSS 수정으로 색상 변경과 함께 보다 세련되고 깔끔한 디자인을 제공합니다.

티스토리 다크 모드 스킨 공유와 적용 방법

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

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

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

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

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

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

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

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

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

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

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

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

다크 모드 북크럽 스킨 자료

아래 코드는 북클럽 전체 다크 모드 공유 스킨 파일입니다. CSS파일을 다운 받아 적용하시면 됩니다.

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;
	}

	
}

[ 동적 CSS 적용하기 ] 블로그에 다크모드와 라이트모드 버튼 적용하기

블랙 테마의 장점

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

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

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