티스토리 Poster 스킨 꾸미기 1-1 (고정 배경 이미지 넣기)

방치해뒀던 블로그를 다시 끄적거리며 깔끔한 분위기의 Poster 스킨으로 교체해봤습니다.

바꾸고 보니 조금씩 아쉬운 부분이 있어 코드를 살짝 수정하는 중 입니다. 

우선은 그 첫 번째 이야기 입니다.

 메인화면에 고정된 이미지 추가하기

심플한게 마음에 들기도 하지만 저는 뭔가 허전해서 작은 캐릭터를 넣어봤습니다.

PC버전에서 좌측 하단에 보이는 캐릭터 이미지입니다.

그럼 어떻게 추가했는지 설명 드릴게요.

주의!!! 실수로 코드가 꼬일수도 있으므로 태그 작업 전에 항상 백업부터 해두시길 권합니다.

1) 이미지 업로드

꾸미기 - 스킨편집 - HTML편집 - 파일업로드 순으로 찾아가서 자신이 올리고 싶은 이미지를 업로드 합니다.

(용량이 크면 그만큼 무거워지므로 이미지는 가급적 저용량의 이미지를 사용하는 것을 권합니다. )

이미지가 업로드되었으면 해당 파일이 정상적으로 업로드 되었는지 마우스를 살짝 올려서 확인하세요.

사진처럼 이미지가 바로 보여지면 정상적으로 올라간 것입니다.

2) HTML 코드 추가

꾸미기 - 스킨편집 - HTML편집 - HTML 으로 가서 "acc-nav"라는 id를 찾아갑니다.

코드를 건드리지 않은 상태라면 12번 행에 있을텐데요.

사진과 같이 

<div id="acc-nav">

<a href="#content">본문 바로가기</a>

</div>

바로 밑(15번 행)에 

<div class="fixed_bgimg"></div>를 추가해줍니다.

이때 fixed_bgimg는 다른 명칭으로 바꾸셔도 상관없으나 css상에서도 동일한 명칭으로 수정해주셔야 합니다.

(다른 명칭 사용 시 주의: 한글이나 특수기호 금지, 첫글자에 숫자 금지)

3) CSS 코드 추가

꾸미기 - 스킨편집 - HTML편집 - CSS 로 가서 맨 끝으로 이동합니다.

.fixed_bgimg{

position: fixed;

left: 0;

bottom: 15px;

width: 300px;

height: 600px;

z-index: 10;

overflow: hidden;

background-image: url(images/male.png);

background-repeat: no-repeat;

background-size: 100%;

}

만약 앞에 2)HTML 코드 추가 시 class="임의의내용"으로 작성하셨다면 .fixed_bgimg을 .임의의내용 으로 작성해주셔야 합니다.

위와 내용을 CSS 탭에 추가하고 미리보기의 새로고침을 누르면 이미지가 추가되는 것을 볼 수 있을 겁니다.

만약 제대로 표시되지 않는다면 background-image의 이미지 경로와 실제 업로드된 파일경로가 일치하는지

혹은 HTML추가 시 위치가 잘못되지 않았는지 부호가 맞게 들어갔는지 등을 다시 확인하시기 바랍니다.

여기까지 하고 끝난 줄 알았는데 생각해보니 반응형 모드(모바일이나 태블릿화면)일 때 처리를 해주지 않았습니다. 

아마 모바일에서 봤다면 이런 참사가 벌어져 있었겠네요.

그래서 한 가지의 작업이 추가됩니다.

4) CSS 코드에 숨기기 명령 추가

꾸미기 - 스킨편집 - HTML편집 - CSS 로 가서 Tablet 으로 검색합니다.

중간에 코드가 추가되지 않았다면 1749행 쯤에 있을 텐데요.

다음의 코드를 아래 사진과 같이 추가해줍니다.

.fixed_bgimg{

display: none;

}

마찬가지로 앞에서 클래스명을 임의의내용으로 바꾸셨다면 똑같이 수정해주시면 됩니다.

여기서 주의할 점은 아래 사진에서 1791행에 } 가 하나 더 있는데요. 

"@media screen and (max-width:1023px) { "로부터 이어지는 부호입니다. 

즉 위에 추가한 코드는 media 코드 내에 포함된다는 의미이니 위치를 꼭 확인하시기 바랍니다. 

추가한 코드의 의미는 1023px 이하의 해상도에서는 앞에 추가한 이미지를 사라지게 하라 입니다.

요기까지 했다면 고정 이미지 추가하기는 끝입니다. 

정상적으로 적용되었다면 아래처럼 미리보기에서 나타나고 사라지는 것을 확인할 수 있습니다.

오른쪽에도 이미지를 추가해보았습니다. 

추가 방법은 다음 글을 참조하세요~

다음글 링크: 티스토리 Poster 스킨 꾸미기 1-2 (고정 배경 이미지 추가)