티스토리 뷰

티스토리 반응형 웹스킨 #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>

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


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


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

댓글
  • 비밀댓글입니다 2016.05.03 17:18
  • 토마토.. 아 지난주에 상중이였고...지금은 아닙니다 ^^
    댓글감사합니다. 좋은하루되세요
    2016.05.03 17:26 신고
  • 토마토.. 잉...에이드폼님 블로그 하단 카피라이트 확인해봤더니 그대로 올리셨네요..맘껏 다른걸로 수정하셔도 됩니다 ㅠㅠ
    낯 뜨거워요ㅡ.ㅡ
    2016.05.03 17:34 신고
  • 비밀댓글입니다 2016.05.03 23:45
  • 비밀댓글입니다 2016.05.04 12:35
  • 토마토.. 티스토리 반응형 웹스킨 #1에서 디자인으로는 거의 손보지 않았어요.
    보잘것 없는 제 블로그의 스킨을 적용하신다니 영광입니다.
    스킨 소스 공유가 전혀 무리한 부탁이나 꺼리는것은 아니며, 단지 똑같이 수정하기보다 본인의 취향에 맞게 적용하라는 의미에서 기능별로 포스팅을 했습니다.
    jollyjolly 님께서 요청하신 내용대로 스킨 공유에 대한 포스팅해놨습니다.
    참고하셔서 적용하시고 안되시거나 궁금하신것이 있으시면 언제든지 댓글 남겨주세요.
    감사합니다. ^^
    2016.05.05 08:01 신고
  • 냥투 호 ㅠㅠㅠ 쉽게 설명해주셔서 감사합니다 ㅎㅎㅎ 2016.06.28 14:28 신고
  • limjah 감사합니다 많은 도움이 되었습니다! 2016.09.26 23:26 신고
  • 나루와호도 토미토님 너무나도 감사드려요!
    블로그 꾸미는 거 너무 어려워서 손도 못대고 있었는데
    덕분에 오늘 한두곳 손볼 수 있었어요.
    html 수정 판만 열어봐도 눈이 핑글핑글했는데
    깔끔하게 정리해 주셔서 어려움 없이 적용할 수 있었어요.
    또 배우러 올게요!
    감사합니다.
    2016.11.20 01:37 신고
  • 코코넛냠냠 푸터 div의 높이 설정 때문에 내용이 div 밖으로 넘치는 문제가 있어서 css에서 그 부분을 찾아 수정한다는 말인데...

    어쩐지 모니터 너머로 토마토님의 분노가 전해져 오는 것 같은 기분을 느낍니다.

    몇 줄의 글자를 넣든지 레이아웃이 깨지지 않게 하기 위해서!!!!

    ㅋㅋㅋㅋㅋㅋ

    죄송합니다.

    #1 스킨 수정하는 중인데 덕분에 많이 도움 받았어요. 잘 정리된 글을 올려 주셔서 감사합니다.
    2017.05.22 00:16 신고
  • BYE_ONG 감사합니다~~ 2018.03.12 16:16 신고
  • Cacka IMae 모바일버전 반응형 예를들리면 https://roachsblog.tistory.com/ - 이블로그 들어가시면
    @media screen and (max-width: 768px)
    -
    -
    -
    바퀴의 블로그
    Software
    Hardware
    Game
    Technology
    질문 & 답변
    질문/답변 & 방명록

    2020.08.27 09:41 신고
댓글쓰기 폼
공지사항
Total
897,554
Today
39
Yesterday
337
링크
«   2021/01   »
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            
글 보관함