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

왼쪽에 고정 이미지를 하나 추가했었습니다만

왼쪽만 추가하는 것은 뭔가 아쉬워서 오른쪽에도 이미지를 하나더 추가해봤습니다.

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

* * *   * * *

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

추가하는 방법은 앞선 포스팅과 거의 동일합니다. 

마지막에 CSS 수정할 때만 조금 다르게 진행되니 그 부분만 보셔도 될 것 같아요.

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

1) 이미지 업로드

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

2번째 이미지를 올리기 전에 이거저거 테스트하느라 파일 구성이 조금 바뀌었네요. 크게 의미는 없습니다.

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

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

2) HTML 코드 추가

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

인증키를 추가해서 행번호가 살짝 밀려나 있는 상태입니다.

사진에서처럼 앞서 추가했던 div 태그 밑에

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

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

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

3) CSS 코드 추가

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

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

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

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

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

-. 처음 추가했던 소스코드

.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%;

}

-. 이번에 추가한 소스코드

.fixed_bgimg_right {

position: fixed;

right: 0;

bottom: -210px;

width: 300px;

height: 600px;

z-index: 10;

overflow: hidden;

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

background-repeat: no-repeat;

background-size: 100%;

}

크게 바뀌는 것은 없습니다. 

클래스 명, left 대신 right, bottom 설정값, 이미지 주소 요렇게 4가지만 바뀌었습니다.

(bottom값이나 right 혹은 left 값은 미리보기 해가면서 직접 조정하시면 됩니다.)

중복되는 코드들을 묶어서 하나로 만드는 방법도 있지만 현재까지는 2개만 추가하고 말 생각이라 그냥 위와 같이 추가해뒀습니다.

나중에 추가로 이미지나 다른 요소를 추가하게 된다면 다뤄보도록 하겠습니다.

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

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

앞서 추가해둔 .fixed_bgimg라는 코드가 보입니다.

이번에는 따로 코드를 추가하지 않고 " .fixed_bgimg{ "를 아래와 같이 수정해주시면 됩니다.

.fixed_bgimg, .fixed_bgimg_right {

주의할 점은 .fixed_bgimg 바로 뒤에 콤마(,)를 꼭 넣어주어야 합니다. 

동일한 기능(display: none;) 을 하는 클래스 또는 아이디 등을 구분지어 각각 적용해준다는 의미입니다.

요기까지 하셨으면 두 번째 고정 이미지 추가하기는 끝입니다. 

적용하기 전에 미리보기 기능을 통해 정상적으로 적용되었는지 꼭 확인 하신 후 적용을 눌러주세요.