[square] 본문 위 태그 목록, 본문 아래로 옮기기

찾는 분들이 좀 있어 따로 작성합니다.

현재 square 스킨은 글 작성시 입력한 태그가 본문 상단에 나옵니다.

이렇게요

이걸 본문 하단으로 옮기고, 그에 맞게 스킨을 수정하는 방법을 알려드리겠습니다.

※ 스킨 편집 전 백업은 기본이자 필수입니다.

skin.html 파일 편집

태그와 본문의 위치를 바꾸기 위해 skin.html 파일을 수정해야합니다.

188번째 줄 부터 197번째 줄에 다음 소스가 있습니다.

※ #은 하나씩 더 들어가야 합니다.

				<div class="tag_label">
				<s_tag_label>
					<span>[#_tag_label_rep_#]</span>
					<div class="clear"></div>
				</s_tag_label>
				</div>


				<div class="article">
				[#_article_rep_desc_#]
				</div>

※ #은 하나씩 더 들어가야 합니다.

.tag_label 과 .article 의 위치를 바꿔주세요.

다음 소스처럼요.

※ #은 하나씩 더 들어가야 합니다.

				<div class="article">
				[#_article_rep_desc_#]
				</div>


				<div class="tag_label">
				<s_tag_label>
					<span>[#_tag_label_rep_#]</span>
					<div class="clear"></div>
				</s_tag_label>
				</div>

※ #은 하나씩 더 들어가야 합니다.

이렇게 하면 태그 목록이 본문 하단으로 이동합니다.

하지만 여기서 발생하는 문제가 있는데요, 본문과 작성일이 겹치는 문제와 태그 목록이 우측 정렬 되어있는 문제입니다.

날짜와 본문이 겹침

태그 목록이 우측 정렬됨

우선 본문과 작성일이 겹치는 부분부터 수정해보겠습니다.

style.css 파일 편집

117번째 줄 또는 #body를 검색하고

#body { padding: 20px 15px 18px; background-color: #fff; border: 1px solid #ddd; line-height: 180%; word-break: break-all; }

padding: 20px 15px 18px; 값을 padding: 50px 15px 18px; 로 설정해주세요.

만약 블로그 글씨체를 변경했다면 그에 맞게 50px 값을 조절하면 됩니다.

적용된 내부 여백(padding) 소스에 대해 잠깐 설명을 드리자면, padding: 위px 좌/우px 아래px; 입니다.

다음으로 태그 목록에 대한 소스입니다.

210번째 줄 또는 * tag_label을 검색하면 다음 소스 덩어리가 나옵니다.

/*
 * tag_label
 */
.tag_label { padding: 0 0 10px 70px; min-height: 31px; line-height: 100%; text-align: right; word-break: break-word; }
.tag_label span { font-size: 0; font-size: 0rem; }
.tag_label a { display: inline-block; margin: 0 0 0 10px; font-size: 13px; font-size: 1.3rem; color: #777; }
.tag_label a:before { content: "#"; }
.tag_label a:hover { color: #000; }
.tag_label .locationTag { font-size: 13px; font-size: 1.3rem; }

이렇게 바꿔주세요.

/*
 * tag_label
 */
.tag_label { padding: 0; line-height: 100%; text-align: left; word-break: break-word; }
.tag_label span { font-size: 0; font-size: 0rem; }
.tag_label a { display: inline-block; margin: 0 5px 0; font-size: 13px; font-size: 1.3rem; color: #777; }
.tag_label a:before { content: "#"; }
.tag_label a:hover { color: #000; }
.tag_label .locationTag { font-size: 13px; font-size: 1.3rem; }

어디가 바뀌었냐구요?

.tag_label 에 padding 값을 0 으로 바꿔 내부 여백을 없앴습니다. min-height: 31px; 도 불필요해 없앴구요. text-align: right; 를 left 로 변경해 좌측 정렬 시켰습니다.

.tag_label a 에 margin 값을 0 0 0 10px 에서 0 5px 0 로 변경했습니다.

만약 태그를 가운데 정렬 하고싶다면 text-align: left; 를 center 로 변경하면 됩니다.

이상입니다.