안녕하세요. 오늘은 티스토리 하단 부분에 출처 이미지를 넣어 보겠습니다!!
요런식으로요!
이게 간단해 보이지만
자그마치 3개의 코드 기술이 합쳐진 컴비네이션.
아니고.. 누구나 손쉽게 따라 할 수 있게 해보겠습니다!
크게 하단 부분에 이미지를 넣는 방식은 2개가 있습니다.
1). 직접 <img> 태그를 사용해서 넣는 방식
2). <div>태그를 사용해서 박스를 만들고 backgroud CSS 속성으로 넣는 방식
(jQuery를 사용하는 방식도 있긴한데 나중에 갤러리효과를 소개할 때 따로 설명하고)
두개의 방식이 비슷 하긴 하지만 아래와 같은 차이가 있습니다.
하는 이미지로 인식을 하고 다른 하나는 그냥 페이지로 인식을 하고
하나는 이미지파일이 직접 노출되며 하나는 배경으로 들어가서 숨겨지게 되죠.
간혹 서식을 저장해놓고 글 작성할 때마다 일일히 본문 하단에 사진이나 코드를 삽입하시는 분들이 있는데 ㅠ_ㅠ
비 추천 하는 방식입니다. 혹시나 해당 이미지를 삭제 또는 수정 해야 할 때 뒷골 땡깁니다.
본격적으로 시작 해보자! 준비물 - 출처로 사용할 이미지
우선 본인이 사용할 출처 이미지 파일이 필요하겠죠?
각자 자신의 파일을 출처 이미지 파일을 [본인의 스킨]에 파일업로드를 해줍니다.
저는 아래 이미지를 사용 하겠습니다.
<img>태그로 직접 이미지를 넣는 방식-[HTML] 부분에 추가
안녕하세요. 오늘은 티스토리 하단 부분에 출처 이미지를 넣어 보겠습니다!!
요런식으로요!
이게 간단해 보이지만
자그마치 3개의 코드 기술이 합쳐진 컴비네이션.
아니고.. 누구나 손쉽게 따라 할 수 있게 해보겠습니다!
크게 하단 부분에 이미지를 넣는 방식은 2개가 있습니다.
1). 직접 <img> 태그를 사용해서 넣는 방식
2). <div>태그를 사용해서 박스를 만들고 backgroud CSS 속성으로 넣는 방식
(jQuery를 사용하는 방식도 있긴한데 나중에 갤러리효과를 소개할 때 따로 설명하고)
두개의 방식이 비슷 하긴 하지만 아래와 같은 차이가 있습니다.
하는 이미지로 인식을 하고 다른 하나는 그냥 페이지로 인식을 하고
하나는 이미지파일이 직접 노출되며 하나는 배경으로 들어가서 숨겨지게 되죠.
간혹 서식을 저장해놓고 글 작성할 때마다 일일히 본문 하단에 사진이나 코드를 삽입하시는 분들이 있는데 ㅠ_ㅠ
비 추천 하는 방식입니다. 혹시나 해당 이미지를 삭제 또는 수정 해야 할 때 뒷골 땡깁니다.
본격적으로 시작 해보자! 준비물 - 출처로 사용할 이미지
우선 본인이 사용할 출처 이미지 파일이 필요하겠죠?
각자 자신의 파일을 출처 이미지 파일을 [본인의 스킨]에 파일업로드를 해줍니다.
저는 아래 이미지를 사용 하겠습니다.
<img>태그로 직접 이미지를 넣는 방식-[HTML] 부분에 추가
<!-- 위 스킨 치환자 아래에 집어 넣어주세요 -->
<div class="foot-source" style="text-align: center";>
<img src="./images/foot-source.gif" style="max-width: 100%;height: auto;" class="img-responsive">
</div>
코드는 본문 영역을 나타내는 티스토리 스킨 치환자 입니다.
우리는 본문이 끝나고 소스 출처를 집어 넣기 위해서 해당 코드를 검색해 아래 부분에 붙혀넣기 해줍니다.
<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 클래스가 다음 공감 버튼 앞에 나오게 하는 스크립트 소스입니다.
만약 후에 나오고 싶다면 before를 after로 바꿔 주면 되겠죠?
최종적으로 완성된 모습!
자그럼 이번엔
<div>태그로 backgroud에 이미지를 넣는 방식-[HTML] 부분에 추가
<!-- 위 치환자 아래 부분에 붙혀넣기 해줍니다. -->
<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> 박스의 크기를 단순히 width 및 height 값으로 조정하면 반응형 해상도에 따라
이미지가 변하지 않고 고정되게 됩니다. 크기가 줄어들지 않고 커진상태로 튀어나가게 되죠.
제가 사용하려고 하는 이미지의 가로 세로 크기는
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 속성으로 표현 했을 때 차이입니다.
암튼 블로그의 이미지 넣는 방식만 잘 사용 하셔도!! 웹디자인을 할때 매우 큰 도움이 된답니다.
저렇게 하는 게 가장 한방에 쉽게 하는 방법인 것 같아요 개인적인생각으로는 ㅠ_ㅠ
그럼 다들 블로그 출처 소스나 로그 등등 이미지 넣을 때 유용하게 사용하길 바라겠습니다!
<!-- 위 스킨 치환자 아래에 집어 넣어주세요 -->
<div class="foot-source" style="text-align: center";>
<img src="./images/foot-source.gif" style="max-width: 100%;height: auto;" class="img-responsive">
</div>
안녕하세요. 오늘은 티스토리 하단 부분에 출처 이미지를 넣어 보겠습니다!! 요런식으로요! 이게 간단해 보이지만 자그마치 3개의 코드 기술이 합쳐진 컴비네이션. 아니고.. 누구나 손쉽게 따라 할 수 있게 해보겠습니다! 크게 하단 부분에 이미지를 넣는 방식은 2개가 있습니다. 1). 직접 2). (jQuery를 사용하는 방식도 있긴한데 나중에 갤러리효과를 소개할 때 따로 설명하고) 두개의 방식이 비슷 하긴 하지만 아래와 같은 차이가 있습니다. 하는 이미지로 인식을 하고 다른 하나는 그냥 페이지로 인식을 하고 하나는 이미지파일이 직접 노출되며 하나는 배경으로 들어가서 숨겨지게 되죠. 간혹 서식을 저장해놓고 글 작성할 때마다 일일히 본문 하단에 사진이나 코드를 삽입하시는 분들이 있는데 ㅠ_ㅠ 비 추천 하는 방식입니다. 혹시나 해당 이미지를 삭제 또는 수정 해야 할 때 뒷골 땡깁니다. 우선 본인이 사용할 출처 이미지 파일이 필요하겠죠? 각자 자신의 파일을 출처 이미지 파일을 [본인의 스킨]에 파일업로드를 해줍니다. 저는 아래 이미지를 사용 하겠습니다. 코드는 본문 영역을 나타내는 티스토리 스킨 치환자 입니다. 우리는 본문이 끝나고 소스 출처를 집어 넣기 위해서 해당 코드를 검색해 아래 부분에 붙혀넣기 해줍니다. 꼭 임의의 클래스 네임("foot-source")을 생성해줍니다. 아래 자세히 소개하겠습니다. CSS의 정렬 강좌는 해당 링크에 더 자세히 소개 되어 있습니다. 부트스트랩 기반의 블로그 스킨이면 완성 형태 입니다. 어때요? 쉽죠?! 하지만!!!! 티스토리는 자체 제공하는 플러그인들의 순서가 정해져 있습니다. [발행글:주제]로 작성시 나타나는 공감 버튼 플러그인 그리고 SNS소셜 공유 플러그인 각 플러그인들의 순서가 고정 되어 있습니다. 저는 본문이 끝나고 바로 출처 이미지가 나타나고 그다음 공감 버튼이 나오게 만들고 싶은데 말이죠. 그래서 소스를 추가해서 순서를 정해줍니다! 다음 공감 버튼 플러그인의 클래스 네임은 크롬브라우져로 해당버튼 부분을 우클릭 후 검사를 진행하면 클래스 네임을 쉽게 알 수 있습니다. 단, 가장 최상위 클래스 네임을 찾아야 합니다. 아까 위에서 임의로 설정한 만약 후에 나오고 싶다면 최종적으로 완성된 모습! 자그럼 이번엔 더 짧죠? 여기서 중요합니다!! 꼭 꼼꼼히 잘 읽고 따라 와주세요. 이미지가 변하지 않고 고정되게 됩니다. 크기가 줄어들지 않고 커진상태로 튀어나가게 되죠. 제가 사용하려고 하는 이미지의 가로 세로 크기는 857px X 172px 입니다. 이걸 세로를 가로로 나눠주면 172 / 857 = 0.2007.... *100% = 20.07% 이렇게 단.. 이방법을 한방에 하기 위해서는 본문 영역의 만약 출처 이미지의 이미지 크기가 본문 사이즈와 다를 경우 크기를 맞추고 정렬해서 응용 할 수 있겠지만.. 귀찮아서 처음 이 방법을 하시는 분들은 그냥 한방에 하는 게 편하기 때문에 본문 콘텐츠 영역과 픽셀을 맞추는 것이 좋습니다. 뒷 배경을 투명으로 해서요!! 그래서 제가 출처 소스 이미지 파일을 만들때!!!!!!!!!!!!!!!!! 일부로 가로 길이를 857px로 만들었던 것입니다. 위 content 값은 각자의 블로그 마다 달라 질 수 있습니다. ( 가장 높은 해상도에서 영역을 확인 해야합니다.) 그리고 접두어를 주어서 각각의 브라우저에서도 호환 할 수 있게 설정해주면 마무리가 됩니다. 여기 부분은 조금만 이해가 필요한 부분이기도 하지만 한번 습득 하게 되면!! 블로그의 모든 이미지나 배경 그리고 제 사이드바에 위치한 로고 등등을 물론 크롬 브라우저의 요소 검사 같은 기능을 이용하면 배경에 삽입된 이미지 파일을 확인을 할 수 있지만 평소에는 이미지 파일 클릭이나 다운이 안되게 할 수 있습니다.!ㅎㅎ 직접 <img> 태그를 사용 했을 때와 backgroud 속성으로 표현 했을 때 차이입니다. 암튼 블로그의 이미지 넣는 방식만 잘 사용 하셔도!! 웹디자인을 할때 매우 큰 도움이 된답니다. 저렇게 하는 게 가장 한방에 쉽게 하는 방법인 것 같아요 개인적인생각으로는 ㅠ_ㅠ 그럼 다들 블로그 출처 소스나 로그 등등 이미지 넣을 때 유용하게 사용하길 바라겠습니다!<img> 태그를 사용해서 넣는 방식<div>태그를 사용해서 박스를 만들고 backgroud CSS 속성으로 넣는 방식본격적으로 시작 해보자! 준비물 - 출처로 사용할 이미지
<img>태그로 직접 이미지를 넣는 방식-[HTML] 부분에 추가
<!-- 위 스킨 치환자 아래에 집어 넣어주세요 -->
<div class="foot-source" style="text-align: center";>
<img src="./images/foot-source.gif" style="max-width: 100%;height: auto;" class="img-responsive">
</div>
<div> 태그를 지정 해준 것은 가운데 정렬을 위해서도 있지만, 순서 변경을 위해서도 필요하니
max-width:100%;와 height: auto; 코드는 반응형웹을 위해 해상도가 바뀌면 이미지 사이즈도 자동으로 반응하기 위함이고img-responsive값만 클래스를 지정 해줘도 반응형 이미지가 됩니다.티스토리 하단 추천 위젯 플러그인 순서 정리 코드-[HTML] 부분에 추가
<!-- 아래 하단 부분 소스 출처 GIF 위치 순서 -->
<script type="text/javascript">$(".daum_like_wrapper").before($(".foot-source"));</script>
</body>
</body> 위에 붙혀넣기를 해주시면 됩니다..daum_like_wrapper입니다..foot-source 클래스가 다음 공감 버튼 앞에 나오게 하는 스크립트 소스입니다.before를 after로 바꿔 주면 되겠죠?<div>태그로 backgroud에 이미지를 넣는 방식-[HTML] 부분에 추가
<!-- 위 치환자 아래 부분에 붙혀넣기 해줍니다. -->
<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> 박스의 크기를 단순히 width 및 height 값으로 조정하면 반응형 해상도에 따라padding-top 값을 주면 가로 세로 이미지가 해상도가 달라져도 딱 맞게 출력이 됩니다.content 가로 크기와 이미지 파일의 가로 크기가 동일하면 더 쉽게 할 수 있습니다.<div> 박스를 하나 더 만들어서background-size: cover; 속성을 주어서 높이나 높이 중 큰 값을 이미지 비중으로 맞추게 설정을 해주고backgroud 이미지로 넣을 수 있게 할 수 있죠!!<img> 태그와 backgroud [CSS] 속성의 차이
우리는 본문이 끝나고 소스 출처를 집어 넣기 위해서 해당 코드를 검색해 아래 부분에 붙혀넣기 해줍니다.
<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 클래스가 다음 공감 버튼 앞에 나오게 하는 스크립트 소스입니다.
만약 후에 나오고 싶다면 before를 after로 바꿔 주면 되겠죠?
최종적으로 완성된 모습!
자그럼 이번엔
<div>태그로 backgroud에 이미지를 넣는 방식-[HTML] 부분에 추가
안녕하세요. 오늘은 티스토리 하단 부분에 출처 이미지를 넣어 보겠습니다!!
요런식으로요!
이게 간단해 보이지만
자그마치 3개의 코드 기술이 합쳐진 컴비네이션.
아니고.. 누구나 손쉽게 따라 할 수 있게 해보겠습니다!
크게 하단 부분에 이미지를 넣는 방식은 2개가 있습니다.
1). 직접 <img> 태그를 사용해서 넣는 방식
2). <div>태그를 사용해서 박스를 만들고 backgroud CSS 속성으로 넣는 방식
(jQuery를 사용하는 방식도 있긴한데 나중에 갤러리효과를 소개할 때 따로 설명하고)
두개의 방식이 비슷 하긴 하지만 아래와 같은 차이가 있습니다.
하는 이미지로 인식을 하고 다른 하나는 그냥 페이지로 인식을 하고
하나는 이미지파일이 직접 노출되며 하나는 배경으로 들어가서 숨겨지게 되죠.
간혹 서식을 저장해놓고 글 작성할 때마다 일일히 본문 하단에 사진이나 코드를 삽입하시는 분들이 있는데 ㅠ_ㅠ
비 추천 하는 방식입니다. 혹시나 해당 이미지를 삭제 또는 수정 해야 할 때 뒷골 땡깁니다.
본격적으로 시작 해보자! 준비물 - 출처로 사용할 이미지
우선 본인이 사용할 출처 이미지 파일이 필요하겠죠?
각자 자신의 파일을 출처 이미지 파일을 [본인의 스킨]에 파일업로드를 해줍니다.
저는 아래 이미지를 사용 하겠습니다.
<img>태그로 직접 이미지를 넣는 방식-[HTML] 부분에 추가
<!-- 위 스킨 치환자 아래에 집어 넣어주세요 -->
<div class="foot-source" style="text-align: center";>
<img src="./images/foot-source.gif" style="max-width: 100%;height: auto;" class="img-responsive">
</div>
코드는 본문 영역을 나타내는 티스토리 스킨 치환자 입니다.
우리는 본문이 끝나고 소스 출처를 집어 넣기 위해서 해당 코드를 검색해 아래 부분에 붙혀넣기 해줍니다.
<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 클래스가 다음 공감 버튼 앞에 나오게 하는 스크립트 소스입니다.
만약 후에 나오고 싶다면 before를 after로 바꿔 주면 되겠죠?
최종적으로 완성된 모습!
자그럼 이번엔
<div>태그로 backgroud에 이미지를 넣는 방식-[HTML] 부분에 추가
<!-- 위 치환자 아래 부분에 붙혀넣기 해줍니다. -->
<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> 박스의 크기를 단순히 width 및 height 값으로 조정하면 반응형 해상도에 따라
이미지가 변하지 않고 고정되게 됩니다. 크기가 줄어들지 않고 커진상태로 튀어나가게 되죠.
제가 사용하려고 하는 이미지의 가로 세로 크기는
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 속성으로 표현 했을 때 차이입니다.
암튼 블로그의 이미지 넣는 방식만 잘 사용 하셔도!! 웹디자인을 할때 매우 큰 도움이 된답니다.
저렇게 하는 게 가장 한방에 쉽게 하는 방법인 것 같아요 개인적인생각으로는 ㅠ_ㅠ
그럼 다들 블로그 출처 소스나 로그 등등 이미지 넣을 때 유용하게 사용하길 바라겠습니다!
<!-- 위 치환자 아래 부분에 붙혀넣기 해줍니다. -->
<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> 박스의 크기를 단순히 width 및 height 값으로 조정하면 반응형 해상도에 따라
이미지가 변하지 않고 고정되게 됩니다. 크기가 줄어들지 않고 커진상태로 튀어나가게 되죠.
제가 사용하려고 하는 이미지의 가로 세로 크기는
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 속성으로 표현 했을 때 차이입니다.
암튼 블로그의 이미지 넣는 방식만 잘 사용 하셔도!! 웹디자인을 할때 매우 큰 도움이 된답니다.
저렇게 하는 게 가장 한방에 쉽게 하는 방법인 것 같아요 개인적인생각으로는 ㅠ_ㅠ
그럼 다들 블로그 출처 소스나 로그 등등 이미지 넣을 때 유용하게 사용하길 바라겠습니다!
