본문 바로가기
카테고리 없음

[티스토리 인테리어] 글 제목 배경 변경하기

by KANG Stroy 2022. 1. 7.

티스토리 스킨에 대한 부분이 변경이 되었습니다. 

이곳 저곳 관련 부분을 배워서 직접 블로그 인터리어를 해 보려고 합니다. 

기본 스킨은 Book club 입니다. 이전 블로그 형태를 유지하고 있어서 입니다. 

 

티스토리 인터리어를 하면서 단점과 장점을 생각해 보았습니다. 

단점은

     시간이 오래 걸리는 것입니다.

 

장점은

     문제가 생기면 언제든 복구 할 수 있습니다. 

     HTML 과 CCS를 배울 수 있습니다. 

 

책도 한권 찾아 보려고 합니다. 그리고 제일 많은 부분은 구글에서 여러 블로그 님들의 글을 참고 하도록 하겠습니다. 

 

오늘 변경 할 부분은 글의 제목 부분을 내가 원하는 방법으로 변경을 해 보려고 합니다. 

 

아래 빨간 부분을 수정하려고 합니다. 

이러 저러 하게 변경을 하기 위해서 >관리자 모드<로 들어가서 "스킨 편집"을 클릭합니다.

HTML 편집을 선택 해서 수정을 하려고 합니다. 

저는 주로 Ctrl 과 C / V 를 주로 이용하려고 합니다. 복사하고 붙여 넣기 그리고 약간의 수정 

 

> post-cover < 를 찾습니다. 

<s_page_rep>
<div class="post-cover">
<div class="inner">
<h1>[티스토리 인테리어] 글 제목 배경 변경하기</h1>
<span class="meta">
<span class="author">by KANG Stroy</span>
<span class="date">2022. 1. 7.</span>
</span>
</div>
</div>
<div class="entry-content">

티스토리 스킨에 대한 부분이 변경이 되었습니다. 

이곳 저곳 관련 부분을 배워서 직접 블로그 인터리어를 해 보려고 합니다. 

기본 스킨은 Book club 입니다. 이전 블로그 형태를 유지하고 있어서 입니다. 

 

티스토리 인터리어를 하면서 단점과 장점을 생각해 보았습니다. 

단점은

     시간이 오래 걸리는 것입니다.

 

장점은

     문제가 생기면 언제든 복구 할 수 있습니다. 

     HTML 과 CCS를 배울 수 있습니다. 

 

책도 한권 찾아 보려고 합니다. 그리고 제일 많은 부분은 구글에서 여러 블로그 님들의 글을 참고 하도록 하겠습니다. 

 

오늘 변경 할 부분은 글의 제목 부분을 내가 원하는 방법으로 변경을 해 보려고 합니다. 

 

아래 빨간 부분을 수정하려고 합니다. 

이러 저러 하게 변경을 하기 위해서 >관리자 모드<로 들어가서 "스킨 편집"을 클릭합니다.

HTML 편집을 선택 해서 수정을 하려고 합니다. 

저는 주로 Ctrl 과 C / V 를 주로 이용하려고 합니다. 복사하고 붙여 넣기 그리고 약간의 수정 

 

> post-cover < 를 찾습니다. 

<s_page_rep>
<div class="post-cover">
<div class="inner">
<h1></h1>
<span class="meta">
<span class="author">by </span>
<span class="date"></span>
</span>
</div>
</div>
<div class="entry-content">

</div>
</s_page_rep>

<s_notice_rep>
<div class="post-cover notice"<s_notice_rep_thumbnail> style="background-image: url();"</s_notice_rep_thumbnail>>
<div class="inner">
<h1><a href=""></a></h1>
<span class="meta">
<span class="date"></span>
</span>
</div>
</div>
<div class="entry-content">

</div>
</s_notice_rep>

<s_list>
<div class="post-header">
<h1><span></span><em></em></h1>
</div>
<s_list_empty>
<div class="not-found">
<ul>
<li>입력하신 단어의 철자가 정확한지 확인해 보세요.</li>
<li>검색어의 단어 수를 줄이거나, 보다 일반적인 단어로 검색해 보세요.</li>
<li>두 단어 이상의 키워드로 검색 하신 경우, 정확하게 띄어쓰기를 한 후 검색해 보세요.</li>
</ul>
<ul class="tag">
<li>선택하신 태그에 해당하는 글이 없습니다.</li>
<li>다른 태그를 선택하시거나, 검색 기능을 활용해 보세요.</li>
</ul>
<ul class="category">
<li>선택하신 카테고리에 해당하는 글이 없습니다.</li>
<li>다른 카테고리를 선택하시거나, 검색 기능을 활용해 보세요.</li>
</ul>
<ul class="archive">
<li>선택하신 기간에 등록된 글이 없습니다.</li>
</ul>
</div>
</s_list_empty>
</s_list>

크기를 변경하기 위해서는 CSS를 주로 편집해야 합니다. 

CSS를 편집하러 갑니다. 

.post-cover {
position: relative;
z-index: 20;
display: table;
width: 100%;
/* height: 340px;*/
padding-top: 10px;/*78px;*/
height: 100px;
background-color: #cbcbcb;
border: 5pt inset #cbcbcb;
background-position: 50% 50%;
background-size: cover;
box-sizing: border-box;
}
.post-cover:before {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.25);
}
.post-cover .inner {
display: table-cell;
position: relative;
z-index: 10;
vertical-align: bottom;
padding-bottom: 10px;/*78px;*/
}
.post-cover .category {
display: block;
max-width: 1080px;
margin: 0 auto 13px;
font-size: 0.875em;
color: #fff;
}
.post-cover h1 {
max-width: 1080px;
margin: 0 auto;
font-weight: 300;
font-size: 2.125em;
line-height: 1.2352;
color: #fff;
}
.post-cover a {
text-decoration: none;
color: #fff;
}
.post-cover .meta {
display: block;
max-width: 1080px;
margin: 34px auto 0;
font-size: 0.875em;
color: rgba(255,255,255,0.6);
}
.post-cover .meta a {
color: rgba(255,255,255,0.6);
}
.post-cover .meta a:before,
.post-cover .meta span:before {
content: "";
display: inline-block;
width: 2px;
height: 2px;
margin: 0 8px 0 4px;
background-color: rgba(255,255,255,0.6);
vertical-align: middle;
}
.post-cover .meta span:first-child:before {
content: none;
}

테두리 속성은 아래 사이트를 참고해 주세요 

https://www.codingfactory.net/10620

 

CSS / border / 테두리 만드는 속성

개요 border는 테두리를 만드는 속성입니다. 위, 오른쪽, 아래, 왼쪽 선을 한 번에 정합니다. 기본값 : medium, none, color 상속 : No 애니메이션 : Yes 버전 : CSS Level 1 문법 border: border-width border-style border-c

www.codingfactory.net

칼라의 색을 참고 하시기 위해서 아래 사이트를 참고해 주세요

https://namu.wiki/w/%ED%97%A5%EC%8A%A4%20%EC%BD%94%EB%93%9C

 


</div>
</s_page_rep>

<s_notice_rep>
<div class="post-cover notice"<s_notice_rep_thumbnail> style="background-image: url();"</s_notice_rep_thumbnail>>
<div class="inner">
<h1><a href=""></a></h1>
<span class="meta">
<span class="date"></span>
</span>
</div>
</div>
<div class="entry-content">

</div>
</s_notice_rep>

<s_list>
<div class="post-header">
<h1><span></span><em></em></h1>
</div>
<s_list_empty>
<div class="not-found">
<ul>
<li>입력하신 단어의 철자가 정확한지 확인해 보세요.</li>
<li>검색어의 단어 수를 줄이거나, 보다 일반적인 단어로 검색해 보세요.</li>
<li>두 단어 이상의 키워드로 검색 하신 경우, 정확하게 띄어쓰기를 한 후 검색해 보세요.</li>
</ul>
<ul class="tag">
<li>선택하신 태그에 해당하는 글이 없습니다.</li>
<li>다른 태그를 선택하시거나, 검색 기능을 활용해 보세요.</li>
</ul>
<ul class="category">
<li>선택하신 카테고리에 해당하는 글이 없습니다.</li>
<li>다른 카테고리를 선택하시거나, 검색 기능을 활용해 보세요.</li>
</ul>
<ul class="archive">
<li>선택하신 기간에 등록된 글이 없습니다.</li>
</ul>
</div>
</s_list_empty>
</s_list>

크기를 변경하기 위해서는 CSS를 주로 편집해야 합니다. 

CSS를 편집하러 갑니다. 

.post-cover {
position: relative;
z-index: 20;
display: table;
width: 100%;
/* height: 340px;*/
padding-top: 10px;/*78px;*/
height: 100px;
background-color: #cbcbcb;
border: 5pt inset #cbcbcb;
background-position: 50% 50%;
background-size: cover;
box-sizing: border-box;
}
.post-cover:before {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.25);
}
.post-cover .inner {
display: table-cell;
position: relative;
z-index: 10;
vertical-align: bottom;
padding-bottom: 10px;/*78px;*/
}
.post-cover .category {
display: block;
max-width: 1080px;
margin: 0 auto 13px;
font-size: 0.875em;
color: #fff;
}
.post-cover h1 {
max-width: 1080px;
margin: 0 auto;
font-weight: 300;
font-size: 2.125em;
line-height: 1.2352;
color: #fff;
}
.post-cover a {
text-decoration: none;
color: #fff;
}
.post-cover .meta {
display: block;
max-width: 1080px;
margin: 34px auto 0;
font-size: 0.875em;
color: rgba(255,255,255,0.6);
}
.post-cover .meta a {
color: rgba(255,255,255,0.6);
}
.post-cover .meta a:before,
.post-cover .meta span:before {
content: "";
display: inline-block;
width: 2px;
height: 2px;
margin: 0 8px 0 4px;
background-color: rgba(255,255,255,0.6);
vertical-align: middle;
}
.post-cover .meta span:first-child:before {
content: none;
}

테두리 속성은 아래 사이트를 참고해 주세요 

https://www.codingfactory.net/10620

 

CSS / border / 테두리 만드는 속성

개요 border는 테두리를 만드는 속성입니다. 위, 오른쪽, 아래, 왼쪽 선을 한 번에 정합니다. 기본값 : medium, none, color 상속 : No 애니메이션 : Yes 버전 : CSS Level 1 문법 border: border-width border-style border-c

www.codingfactory.net

칼라의 색을 참고 하시기 위해서 아래 사이트를 참고해 주세요

https://namu.wiki/w/%ED%97%A5%EC%8A%A4%20%EC%BD%94%EB%93%9C

 

저작자표시 비영리 변경금지

댓글

티스토리툴바