티스토리 반응형#2 스킨 배경이미지 변경하기

 

 

 

# 티스토리 블로그 스킨 #2 배경이미지 변경하기

 

지난번 폰트사이즈와 종류를 변경하는 포스팅에서 언급했지만 원본 소스 파일 다운받느라고 기존에 설정해두었던 내용이

모두 초기화되었다.

 

맨 처음 반응형#2 스킨을 적용했을 때 기본 이미지가 적용이 되었던 것 같은데 이번에는 그마저도 없더라.

 

 

 

어차피 기존게 적용되었더라도 변경했을거지만 막상 아무것도 안뜨니까 저건 또 왜저러나 의문이 생겨버림.

물론 아직도 왜인지는 모르겠지만 그냥 내가 하려고 한 일에나 집중하기로 마음 먹었다...

 

우선 블로그관리에서 스킨을 편집할 수 있도록 이동한다.

 

 

 

 

들어오는 경로에 따라서 처음 뜨는 페이지가 달라 내가 들어오는 경로로 이야기 하자면

주소창에 내 블로그 URL을 넣고 오른쪽 상단에서 로그인 한 뒤 다시 오른쪽 상단에 있는 계정관리를 클릭하는 순서로 들어온다.

 

여기까지 오면 왼쪽 카테고리 리스트에 꾸미기 > 스킨편집이라는 항목이 있다.

 

 

 

 

이건 내가 이미 삽입한 이후에 캡쳐한거라 미리보기 화면에 이미지가 나오지만

원래는 다른게 뜨거나 안떠야 정상이다.

 

티스토리 반응형#2 스킨은 사이트가 보여지는 크기에 따라 이렇게 좌측 혹은 상단으로 노출되게 되는데

개인적으로 이 맛에 반응형으로 사용한다 생각하고 있다:)

 

편집기로 들어가려면 오른쪽에 HTML편집 버튼을 누른다.

 

 

 

 

클릭하면 원본사이즈로 나오니 참고하세요:)

 

이렇게 편집기로 들어가면 CSS에서 저 이미지에 해당하는 위치를 찾아야한다.

보편적으로 해당 부분은 배경 그러니까 백그라운드에 해당하므로 [찾기] 기능으로 background라고 검색하면 왠만치 나온다.

하지만 나는 안나왔음.

 

다른 분들도 다 그런지 모르겠지만 찾기 기능으로 안나오는게 많아서 진짜 일일히 찾느라 눈 뽑히는줄 알았다.

또, background라는 명칭을 사용하는 부분이 저 항목 하나에만 해당하는 것이 아니기 때문에 정확한 위치를 파악하기 위해서는

앞뒤로 어떤 코드가 붙어있는지 잘 보아야 한다.

 

얕은 코딩 지식으로는 백그라운드니까 당연히 HTML에 있지 않을까 하고 한참 찾았었는데 왠걸 CSS에 있더라.

 

다행인건지, 제작자분께서 헤더 항목을 별도로 빼두셔서 몇 번의 유추 끝에 겨우겨우 항목을 찾긴 했다.

 

우선 내가 이 부분이 내가 찾는 항목이란걸 알았던 이유는 background-image가 있었고

이미지명과 경로처럼 보이던 url(***)와 같은 내용이 있었기 때문.

이걸 HTML에서 <a href>나 <img src>로 처리되어 있을 줄 알고 찾고 있었으니...이번에도 삽질 오지게 했다.

 

어쨌든 반응형#2 스킨의 배경이미지 위치는 이 곳이고,

항목이 있으니 이미지가 떠야 정상인데 안 뜨고 있다면 파일 명이 잘못되었거나 해당 파일이 아예 없다는 것.

 

 

 

 

 

확인은 바로 옆에 있는 파일업로드 항목에서 가능하다.

 

위에서 말한대로 <header_default>라는 이미지가 등록 되어있어야 하는데 암만 봐도 없다.

 

그럼 그 파일을 만들어주면 된다.

 

 

 

 

 

그럼 이미지를 먼저 찾아야하는데 이미 준비되어 있다면 그 파일명을 header_default로 변경하고

아까 파일업로드 부분에 추가해서 등록해주면 된다.

 

나는 없기 때문에 내 프로필인 새랑 잘 어울릴만한 정글 이미지를 찾아본다.

이번에 새로 알게된 언스플래쉬라는 무료이미지사이트인데 상당히 세련되기도 하고

그렇다 보니 원하는 퀄리티가 쏙쏙 잘나와 아주 요긴하게 이용하고 있다.

 

나처럼 pixabay에서 원하는 이미지를 찾을 수 없어 답답해하셨다면 여긴 아주 마음에 드실거다.

 

https://unsplash.com/

 

 

나는 정글이미지가 필요했으므로 검색창에 jungle이라고 검색했는데 정확히 어떤 이미지를 필요로 하는지 묻는 세부항목이

하단에 한번 더 제시된다.

이미 결과 이미지보고 신세계였는데 섬세함에 한번 더 너무 좋다고 오두방정.

 

 

 

 

내가 마음에 든 사진은 뾰족뾰족한 잎이 시원하게 뻗어있는 요 것.

 

딱히 새랑 엄청 어울리는 사진은 아니였지만 이 사진이 더 마음에 들어서 바꾸려면 새사진을 바꿔야될듯:)...

 

 

 

 

파일을 다운받은 뒤에 필요한건 이미지가 충분한 사이즈인가, 그리고 파일 유형이 jpg로 되어 있는가.

 

물론 jpg가 아니라면 CSS에서 확장자명까지 바꿔주면 되니 편한 방법으로 이용하도록 하자.

나는 jpg파일이기 때문에 크기만 확인하고 패스.

 

 

 

 

사이즈와 확장자명을 확인했다면 다음은 이름 변경이다.

물론 앞에서 말했듯이 파일 이름이 다르다면 파일 이름까지 변경해주면 된다.

난 그냥 저렇게 해두는게 또 나중에 찾기 쉬울것같아서 header_default로 변경해줌.

 

 

 

 

변경을 완료했다면 다시 티스토리로 돌아와 파일업로드에서 하단 추가버튼을 눌러주면

이렇게 원하는 파일을 업로드할 수 있도록 열린다.

 

아까 변경해 준 항목을 선택하면 업로드 완료.

 

옆에 header_default1이 있는데 사실 맨 처음에 사이즈 확인 안하고 적용했다가 다 깨져서 바꾼겋ㅎㅎ헿헤헿 

 

 

 

 

자 티스토리 반응형#2에 업로드를 하고 나면 이렇게 항목이 올라갔다.

 

CSS > 헤드 > 백그라운드이미지 영역에는 이미 저 파일명으로 설정이 되어있기때문에 따로 소스를 변경해 줄 필요는 없다.

자, 오른쪽 상단에 저장 버튼을 누르고 미리보기 혹인 새 창으로 블로그를 띄워 확인해보면-

 

 

 

 

짜라란- 이번엔 아주 예쁘게 이미지가 들어간걸 확인할 수 있다.

세로형 이미지를 넣었더니 안깨지고 아주 예쁘게 잘 들어감ㅠ_ㅠ감격스럽따

 

혹시 미리보기로 확인했는데 안바뀌었다면 새 창 열어서 한번 더 확인해보시길-가끔 미리보기로 잘 안뜨더라.

 

나는 원래 스킨을 다운받자마자 header_default에 해당하는 파일이 없었기 때문에 이렇게 올렸지만

기존에 파일업로드 란에 해당 이름으로 된 파일이 있다면 그 파일을 삭제하고 올리거나

새 이미지 파일을 올린 후 CSS에서 파일명을 수정하는 단계를 한번 더 거쳐야한다.

 

개인적으로 새로 바뀐 배경이 너무 마음에 들어서 일할때도 옆에 켜두고 싶음.

저것만 보고있어도 비가 온 숲속에서 삼림욕하는 기분이 든다ㅠㅠ요즘 밖에 먼지가 너무 심해서 더 욕구불만인듯.

 

- 티스토리 반응형#2 스킨 배경이미지 변경하기 끝!