티스토리 반응형 웹스킨 #1 하단 copyright 수정

티스토리 반응형 웹스킨 #1 하단 copyright 부분에 버튼이나 다른 몇줄의 글을 넣을 경우 컨텐츠 높이에 따라 배경이 늘어나지 않고 높이가 픽스되어 있어서 배경과 내용이 어긋났었습니다.

그래서 지난 글중에 하나인 PC버전과 모바일 버전보기 버튼을 삽입할 경우에 레이아웃이 깨지는 현상이 발생했었습니다.

제가 그 글을 쓰면서도 귀차니즘때문에 디테일하게 글을 쓰지 못했었는데요. 이번 시간에 해당 내용에 대해서 글을 올리도록 하겠습니다.

2016/03/24 - [IT/블로그,티스토리] - 티스토리 반응형 스킨에 PC버전 보기, 모바일버전 보기 버튼 만들기

일단, 기존의 경우 PC버전, 모바일 버전 보기 버튼을 삽입하고 copyright 부분 수정을 하면 아래와 같이 보일것입니다.

아래와 같이 레이아웃이 깨지지 않도록 해봅시다.

관리 -> 꾸미기 -> HTML/CSS편집에서 CSS 탭으로 이동합니다.

CSS에서 130번째 라인을 아래와 같이 수정합니다.

.area_foot{padding:15px 0 15px 0;font-size:12px;line-height:25px;text-align:center;background-color:#f0f0f0;color:#aaa} /* 이부분 전체 수정 - 최하단 copyright부분에 몇줄을 넣어도 레이아웃이 어긋나지 않게 하기 위해 */

CSS에서 345번째 라인을 아래와 같이 수정합니다.

	.area_foot{font-size:11px;line-height:20px;color:#999} /* 모두 수정함 - 모바일 최하단 copyright 부분에 글자 몇줄을 넣든지 레이아웃이 깨지지 않게 하기 위해서 */

CSS에서 350번째 라인을 아래와 같이 수정합니다.

	.area_paging {padding:20px 0 10px; margin:0 0 20px 0;position:static} /* 모두 수정함 - 모바일 최하단 copyright 부분에 글자 몇줄을 넣든지 레이아웃이 깨지지 않게 하기 위해서 */

CSS에서 479번째 라인을 아래와 같이 수정합니다.

	/* .area_foot{margin-top:21px} 이 줄 주석처리함 - 모바일 copyright 부분에 몇줄의 글자를 넣든 레이아웃이 깨지지 않기 위해 */

HTML 탭에서 거의 하단쪽에 <div id="dkFoot" role="contentinfo" class="area_foot"> 부분부터 </div> 안의 내용이 copyright 부분입니다. 해당 부분을 찾아 아래와 같이 수정해봅시다. copyright 부분은 원하는 내용으로 입력하세요.

		<div id="dkFoot" role="contentinfo" class="area_foot">
			<div id="ButtonModeView" class="emph_t" style="padding:4px 0 2px 0; border:1px solid #a0a0a0; background-color:#d0d0d0; color:#707070; width:100px; margin:0 auto;  margin-bottom:7px">PC버전보기</div>
			Blog is powered by
			<em class="emph_t">Tistory</em> / Designed by
			<em class="emph_t">Tistory</em><br/>
			Customized by <em class="emph_t">Sometimes-n</em>
		</div>
	</div>
</s_t3>

이제 블로그에서 해당내용이 제대로 수정되었는지 확인해보세요

잘 안되시면 댓글남겨주세요. 확인해드리겠습니다.

감사합니다. 좋은 하루 되세요.