티스토리 북클럽 스킨의 포스트 커버 위치 캡처 이미지입니다. 페이지의 가로폭(width) 전체를 사용합니다.
포스트 커버의 기능을 사용하지 않고 사이드바 옆의 본문 안으로 내용을 이동시킬 수 있습니다.
포스트 커버는 블로거가 등록한 정보 페이지에서 본문 위에 위치한 글의 제목, 글의 작성일, 글의 작성자, 글의 카테고리를 보여 주는 블록입니다.
이 포스트 커버를 본문 위로 이동하면 가로폭을 점유하는 공간이 사라지며, 본문 안으로 해당 내용을 이동시키기 때문에 깨끗하게 글의 내용을 편집할 수 있습니다.
아래 캡처 이미지에 포스트 커버를 이동할 위치를 설명하였습니다. 본문 내용 상단으로 이동합니다. 작업 과정은 다음 순서로 진행하게 됩니다.
※ 정보는 개인적으로 실험한 것이기 때문에 100% 안전은 보장하지 않습니다. 개인의 주관적인 판단으로 수정 작업을 진행합니다. 모든 책임은 사용자의 몫입니다. ㅋ~
작업 과정
1. "skin.html" 원본 파일을 백업합니다.
2. "style.css" 원본 파일을 백업합니다.
3. "skin.html" 파일을 열어서 편집 준비합니다.
4. 포스트 커버 관련 코드를 블록을 씌워서 복사합니다.
- <Ctrl + C>
5. 글에서 설명하는 이동할 위치에 붙여 넣기 합니다.
- <Ctrl + V>
6. 붙여 넣은 코드(5)에서 불필요한 부분을 삭제합니다.
7. 원래 위치(4)의 "포스트 커버 관련 코드"도 불필요합니다. 삭제합니다.
8. 포스트 커버 코드의 모든 기능을 사용하지 않게 됩니다. 글, 색, 형태의 디자인 편집 요소 역시 실행 제외입니다. 작업 후 화면에 출력된 모습이 마음에 들지 않을 수 있습니다. 개별적으로 코드와 출력 화면을 비교하면서 편집해야 합니다. (2)"style.css" 원본을 백업한 이유입니다. 하다가 귀찮으면 백업한 파일로 복구할 수 있습니다. 2개의 파일 모두 원본으로 복구합니다.
포스트 커버 코드의 이동 위치
1. 복사할 코드
- "skin.html" 원본 파일 참조
skin.html의 406~417 라인
<div class="inner">
<span class="category">IT/티스토리</span>
<h1>티스토리 북클럽 스킨의 포스트 커버 기능 정지와 콘텐츠 위치 이동</h1>
<span class="meta">
<span class="author">by 무찌마</span>
<span class="date">2020. 8. 29.</span>
<s_ad_div>
<a href="">수정</a>
<a href="#" onclick="">삭제</a>
</s_ad_div>
</span>
</div>
2. 붙여 넣을 위치
- "skin.html" 원본 파일 참조
skin.html 라인 420
<div class="entry-content">
<!-- 여기에 붙여 넣습니다. -->
티스토리 북클럽 스킨의 포스트 커버 위치 캡처 이미지입니다. 페이지의 가로폭(width) 전체를 사용합니다.
포스트 커버의 기능을 사용하지 않고 사이드바 옆의 본문 안으로 내용을 이동시킬 수 있습니다.
포스트 커버는 블로거가 등록한 정보 페이지에서 본문 위에 위치한 글의 제목, 글의 작성일, 글의 작성자, 글의 카테고리를 보여 주는 블록입니다.
이 포스트 커버를 본문 위로 이동하면 가로폭을 점유하는 공간이 사라지며, 본문 안으로 해당 내용을 이동시키기 때문에 깨끗하게 글의 내용을 편집할 수 있습니다.
아래 캡처 이미지에 포스트 커버를 이동할 위치를 설명하였습니다. 본문 내용 상단으로 이동합니다. 작업 과정은 다음 순서로 진행하게 됩니다.
※ 정보는 개인적으로 실험한 것이기 때문에 100% 안전은 보장하지 않습니다. 개인의 주관적인 판단으로 수정 작업을 진행합니다. 모든 책임은 사용자의 몫입니다. ㅋ~
작업 과정
1. "skin.html" 원본 파일을 백업합니다.
2. "style.css" 원본 파일을 백업합니다.
3. "skin.html" 파일을 열어서 편집 준비합니다.
4. 포스트 커버 관련 코드를 블록을 씌워서 복사합니다.
- <Ctrl + C>
5. 글에서 설명하는 이동할 위치에 붙여 넣기 합니다.
- <Ctrl + V>
6. 붙여 넣은 코드(5)에서 불필요한 부분을 삭제합니다.
7. 원래 위치(4)의 "포스트 커버 관련 코드"도 불필요합니다. 삭제합니다.
8. 포스트 커버 코드의 모든 기능을 사용하지 않게 됩니다. 글, 색, 형태의 디자인 편집 요소 역시 실행 제외입니다. 작업 후 화면에 출력된 모습이 마음에 들지 않을 수 있습니다. 개별적으로 코드와 출력 화면을 비교하면서 편집해야 합니다. (2)"style.css" 원본을 백업한 이유입니다. 하다가 귀찮으면 백업한 파일로 복구할 수 있습니다. 2개의 파일 모두 원본으로 복구합니다.
"skin.html"에서 포스트 커버 관련 코드를 삭제했기 때문에 "style.css"의 포스트 커버 기능과 연결된 코드는 사용하지 않습니다. 그렇다고 "style.css"의 포스트 커버 코드를 삭제하지 마세요. 모든 기능을 점검한 것은 아니기 때문에 약간의 용량을 차지하더라도 남겨 두는 것이 안전합니다.
2. 코드를 정확하게 복사 붙여 넣기 하였습니다. 출력 화면의 폰트 크기가 이상하게 변하였습니다.
위에서 잠깐 설명하였듯이 "skin.html"에서 포스트 커버 코드를 삭제하였기 때문에, "style.css"의 포스트 커버 폰트, 색, 기타 다른 디자인 요소가 기능을 상실하였습니다. 사용자가 개별적으로 지정하여 편집 과정을 거쳐야 합니다.
3. 이 블로그는 포스트 커버의 위치를 이동하지 않았네요.
위의 작업 과정을 모두 실행하고 일정 기간 오류를 점검하였습니다. 그리고 다시 원래의 형태대로 디자인을 복구하였습니다. CSS와 자바스크립트의 기능을 개인적으로 테스트 중이기 때문에 원본의 포스트 커버 기능을 사용해야 합니다.
</div>
3. 삭제할 코드
- "skin.html" 원본 파일 참조
skin.html 405~418 라인
<div class="post-cover"<s_article_rep_thumbnail> style="background-image:url(https://blog.kakaocdn.net/dn/bN75SF/btqHy5Trzes/kJ6qHkw0TyZoE9WMHAbOy0/img.jpg)"</s_article_rep_thumbnail>>
<div class="inner">
<span class="category">IT/티스토리</span>
<h1>티스토리 북클럽 스킨의 포스트 커버 기능 정지와 콘텐츠 위치 이동</h1>
<span class="meta">
<span class="author">by 무찌마</span>
<span class="date">2020. 8. 29.</span>
<s_ad_div>
<a href="">수정</a>
<a href="#" onclick="">삭제</a>
</s_ad_div>
</span>
</div>
</div>
Q&A
1. "style.css" 파일의 포스트 커버 관련 코드를 수정해야 하나요?
"skin.html"에서 포스트 커버 관련 코드를 삭제했기 때문에 "style.css"의 포스트 커버 기능과 연결된 코드는 사용하지 않습니다. 그렇다고 "style.css"의 포스트 커버 코드를 삭제하지 마세요. 모든 기능을 점검한 것은 아니기 때문에 약간의 용량을 차지하더라도 남겨 두는 것이 안전합니다.
2. 코드를 정확하게 복사 붙여 넣기 하였습니다. 출력 화면의 폰트 크기가 이상하게 변하였습니다.
위에서 잠깐 설명하였듯이 "skin.html"에서 포스트 커버 코드를 삭제하였기 때문에, "style.css"의 포스트 커버 폰트, 색, 기타 다른 디자인 요소가 기능을 상실하였습니다. 사용자가 개별적으로 지정하여 편집 과정을 거쳐야 합니다.
3. 이 블로그는 포스트 커버의 위치를 이동하지 않았네요.
위의 작업 과정을 모두 실행하고 일정 기간 오류를 점검하였습니다. 그리고 다시 원래의 형태대로 디자인을 복구하였습니다. CSS와 자바스크립트의 기능을 개인적으로 테스트 중이기 때문에 원본의 포스트 커버 기능을 사용해야 합니다.
댓글