본문으로 바로가기

안녕하세요. 오늘은 티스토리 하단 부분에 출처 이미지를 넣어 보겠습니다!!



요런식으로요!

이게 간단해 보이지만

자그마치 3개의 코드 기술이 합쳐진 컴비네이션.


아니고.. 누구나 손쉽게 따라 할 수 있게 해보겠습니다!


크게 하단 부분에 이미지를 넣는 방식은 2개가 있습니다.


1). 직접 <img> 태그를 사용해서 넣는 방식

2). <div>태그를 사용해서 박스를 만들고 backgroud CSS 속성으로 넣는 방식

(jQuery를 사용하는 방식도 있긴한데 나중에 갤러리효과를 소개할 때 따로 설명하고)


두개의 방식이 비슷 하긴 하지만 아래와 같은 차이가 있습니다.

하는 이미지로 인식을 하고 다른 하나는 그냥 페이지로 인식을 하고


하나는 이미지파일이 직접 노출되며 하나는 배경으로 들어가서 숨겨지게 되죠.

간혹 서식을 저장해놓고 글 작성할 때마다 일일히 본문 하단에 사진이나 코드를 삽입하시는 분들이 있는데 ㅠ_ㅠ

비 추천 하는 방식입니다. 혹시나 해당 이미지를 삭제 또는 수정 해야 할 때 뒷골 땡깁니다.


본격적으로 시작 해보자! 준비물 - 출처로 사용할 이미지

우선 본인이 사용할 출처 이미지 파일이 필요하겠죠?

각자 자신의 파일을 출처 이미지 파일을 [본인의 스킨] 파일업로드를 해줍니다.

저는 아래 이미지를 사용 하겠습니다.


foot-source.gif


<img>태그로 직접 이미지를 넣는 방식-[HTML] 부분에 추가


[##_article_rep_desc_##]
<!-- 위 스킨 치환자 아래에 집어 넣어주세요 -->
	<div class="foot-source" style="text-align: center";>	
			<img src="./images/foot-source.gif" style="max-width: 100%;height: auto;"   class="img-responsive">
	</div>	

[##_article_rep_desc_##] 코드는 본문 영역을 나타내는 티스토리 스킨 치환자 입니다.

우리는 본문이 끝나고 소스 출처를 집어 넣기 위해서 해당 코드를 검색해 아래 부분에 붙혀넣기 해줍니다.


<div> 태그를 지정 해준 것은 가운데 정렬을 위해서도 있지만, 순서 변경을 위해서도 필요하니

꼭 임의의 클래스 네임("foot-source")을 생성해줍니다. 아래 자세히 소개하겠습니다.

CSS의 정렬 강좌는 해당 링크에 더 자세히 소개 되어 있습니다.


max-width:100%;height: auto; 코드는 반응형웹을 위해 해상도가 바뀌면 이미지 사이즈도 자동으로 반응하기 위함이고

부트스트랩 기반의 블로그 스킨이면 img-responsive값만 클래스를 지정 해줘도 반응형 이미지가 됩니다.


완성 형태 입니다. 어때요? 쉽죠?! 하지만!!!!


티스토리는 자체 제공하는 플러그인들의 순서가 정해져 있습니다.


[발행글:주제]로 작성시 나타나는 공감 버튼 플러그인 그리고 SNS소셜 공유 플러그인

각 플러그인들의 순서가 고정 되어 있습니다.


저는 본문이 끝나고 바로 출처 이미지가 나타나고

그다음 공감 버튼이 나오게 만들고 싶은데 말이죠.


그래서 소스를 추가해서 순서를 정해줍니다!

티스토리 하단 추천 위젯 플러그인 순서 정리 코드-[HTML] 부분에 추가


<!-- 아래 하단 부분 소스 출처 GIF 위치 순서 -->
<script type="text/javascript">$(".daum_like_wrapper").before($(".foot-source"));</script>
</body>

</body> 위에 붙혀넣기를 해주시면 됩니다.

다음 공감 버튼 플러그인의 클래스 네임은 .daum_like_wrapper입니다.

크롬브라우져로 해당버튼 부분을 우클릭 후 검사를 진행하면 클래스 네임을 쉽게 알 수 있습니다. 단, 가장 최상위 클래스 네임을 찾아야 합니다.

아까 위에서 임의로 설정한 .foot-source 클래스가 다음 공감 버튼 앞에 나오게 하는 스크립트 소스입니다.

만약 후에 나오고 싶다면 beforeafter로 바꿔 주면 되겠죠?


최종적으로 완성된 모습!



자그럼 이번엔


<div>태그로 backgroud에 이미지를 넣는 방식-[HTML] 부분에 추가


[##_article_rep_desc_##]
						<!-- 위 치환자 아래 부분에 붙혀넣기 해줍니다. -->
			<div class="foot-source" ></div>

더 짧죠?

backgroud CSS 값을 줘서 <div> 박스 코드 박스 안에 배경에 이미지를 넣을 것이기 때문입니다.


[CSS] 에 backgroud 속성 값 설정하기-[CCS] 부분에 추가


.foot-source{
	padding-top: 20.07%;  
  *height:auto;
	background: url(./images/foot-source.gif) no-repeat center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

여기서 중요합니다!! padding-top:을 잘못 주면 이미지가 나오지 않습니다.

꼭 꼼꼼히 잘 읽고 따라 와주세요. 


<div> 박스의 크기를 단순히 widthheight 값으로 조정하면 반응형 해상도에 따라

이미지가 변하지 않고 고정되게 됩니다. 크기가 줄어들지 않고 커진상태로 튀어나가게 되죠.


제가 사용하려고 하는 이미지의 가로 세로 크기는

foot-source.gif

857px X 172px 입니다.


이걸 세로를 가로로 나눠주면 172 / 857 = 0.2007.... *100% = 20.07%

이렇게 padding-top 값을 주면 가로 세로 이미지가 해상도가 달라져도 딱 맞게 출력이 됩니다.


단.. 이방법을 한방에 하기 위해서

본문 영역의 content 가로 크기와 이미지 파일의 가로 크기동일하면 더 쉽게 할 수 있습니다.


만약 출처 이미지의 이미지 크기가 본문 사이즈와 다를 경우 <div> 박스를 하나 더 만들어서

크기를 맞추고 정렬해서 응용 할 수 있겠지만.. 귀찮아서 처음 이 방법을 하시는 분들은 그냥 한방에 하는 게 편하기 때문에

본문 콘텐츠 영역과 픽셀을 맞추는 것이 좋습니다. 뒷 배경을 투명으로 해서요!!


그래서 제가 출처 소스 이미지 파일을 만들때!!!!!!!!!!!!!!!!!


일부로 가로 길이를 857px로 만들었던 것입니다.


위 content 값은 각자의 블로그 마다 달라 질 수 있습니다.

( 가장 높은 해상도에서 영역을 확인 해야합니다.)


그리고 background-size: cover; 속성을 주어서 높이나 높이 중 큰 값을 이미지 비중으로 맞추게 설정을 해주고

접두어를 주어서 각각의 브라우저에서도 호환 할 수 있게 설정해주면 마무리가 됩니다.


여기 부분은 조금만 이해가 필요한 부분이기도 하지만

한번 습득 하게 되면!! 블로그의 모든 이미지나 배경 그리고

제 사이드바에 위치한 로고 등등을 backgroud 이미지로 넣을 수 있게 할 수 있죠!!


물론 크롬 브라우저의 요소 검사 같은 기능을 이용하면 배경에 삽입된 이미지 파일을 확인을 할 수 있지만

평소에는 이미지 파일 클릭이나 다운이 안되게 할 수 있습니다.!ㅎㅎ

<img> 태그와 backgroud [CSS] 속성의 차이

직접 <img> 태그를 사용 했을 때와 backgroud 속성으로 표현 했을 때 차이입니다.


암튼 블로그의 이미지 넣는 방식만 잘 사용 하셔도!! 웹디자인을 할때 매우 큰 도움이 된답니다.

저렇게 하는 게 가장 한방에 쉽게 하는 방법인 것 같아요 개인적인생각으로는 ㅠ_ㅠ

그럼 다들 블로그 출처 소스나 로그 등등 이미지 넣을 때 유용하게 사용하길 바라겠습니다!

신고

댓글을 달아 주세요

  1. BlogIcon 설랭 2016.02.11 00:47 신고

    잘 보고 갑니다. 감사합니다~!!

  2. 2016.02.15 23:33

    비밀댓글입니다

    • BlogIcon COCOSOFT COCO Media 2016.02.16 01:52 신고

      크롬브라우저에서 사용하는 요서검사라는 기능입니다. 요즘은 마우스 우클릭 해보면 검사라고 뜨더라구요.
      확인하고 싶은부분에서 마우스 우클릭을해서 검사를 선택하시거나,
      단축키는 F12 또는 컨트롤+쉬프트+i를 누르면 확인이 가능합니다.

      파이어폭스도 제공하는 기능이에요^^

      여기서 수정을하면 미리보기가 바로 지원이 되고 코드입력(입력가능한 코드를 알려줌 빠른입력지원도되고)을 지원해주기때문에 저는 여기서 먼저 스킨을 수정한다음 편집기로 들어가서 수정을 합니다!

      티스토리 편집기가 새로운방식으로 바꼈지만 매번 새로고침을 누르기 귀찮아서.. ㅠ_ㅠ 이걸로 하면 정말 편해요!

  3. 2016.03.30 11:30

    비밀댓글입니다

    • BlogIcon COCOSOFT COCO Media 2016.03.30 14:55 신고

      div 적용시킨 id나 class명을 알 수있을가요? ㅠ 지금 혹시 설치가 가능하신가요?! 이미지를 넣으시고 문의주시면 확인이 더빠르게 가능할 것 같아요!!

    • BlogIcon Team. G.D.S. 2016.03.30 14:56 신고

      코코님 블로그의 코드 그대로 써보기도 하고 고쳐도 보고 했는데... 공감 위로 올라가라는 이미지는 바닥에 있고...
      지우고 고치고 하면서 뭘 잘못 건드렸는지 공감버튼이 본문에 겹치네요 ㅠㅠㅠ ㅋ
      복구 해 보겠다고 일단 다시 다 뺐어요

    • BlogIcon COCOSOFT COCO Media 2016.03.30 14:58 신고

      지금 지금 잠시만 넣어보시면 한 번 확인을 해보겠습니다!!

    • 2016.03.30 15:28

      비밀댓글입니다

    • BlogIcon COCOSOFT COCO Media 2016.03.30 15:41 신고

      음.. 제가 동일스킨으로 테스트를 해보니 정상적으로 나타나는데

      <div class="article">
      [샵샵_article_rep_desc_샵샵]
      </div><!-- close article -->

      <div class="foot-source" style="text-align: center">
      <img src="http://cfile5.uf.tistory.com/image/2218D44856F5810711D207" style="max-width: 100%;height: auto;" class="img-responsive">
      </div>



      <script type="text/javascript">$(".daum_like_wrapper").before($(".foot-source"));</script>


      이런식으로 한번 넣어보시겠어요?!!

    • 2016.03.30 15:43

      비밀댓글입니다

    • BlogIcon COCOSOFT COCO Media 2016.03.30 15:46 신고

      그러네요 ㅠ 왜 스크립트 작동이 안되는지 다시 한번 확인해보겠습니다. ㅠ

    • 2016.03.30 15:48

      비밀댓글입니다

    • BlogIcon COCOSOFT COCO Media 2016.03.30 20:18 신고

      <!--[if lt IE 9]>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <![endif]-->
      <!--[if gte IE 9]><!-->
      <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.3.min.js"></script>
      <!--<![endif]-->
      <script type="text/javascript">$(".daum_like_wrapper").before($(".foot-source"));</script>

      이렇게 넣어보세요 jQuery가 없어서 발생하는 문제인 것 같아요!

  4. BlogIcon 슈나우저 2016.06.19 12:15 신고

    신고버튼 위치 변경 때문에 다음 공감 바로 아래에 신고가 붙어있네요 ㅠ ㅠ
    변경할 수는 없겠죠?

  5. BlogIcon 작은설탕-Sugar 2016.07.23 10:42 신고

    티스토리 구글 애드센스 반응형 플러그인으로 집어넣은 하단 광고는 위치 바꿀 수 없나요? ㅠㅠ

티스토리 툴바