19. 상단 메인 이미지 바꾸는 방법(스킨) - Cooltime의 블로그 초보탈출 설명서

안녕하세요. 쿨타임입니다.

'Cooltime의 블로그 초보탈출 설명서'에 대한 글을 아주 오랜만에 적는것 같습니다.

요즘 일이 바빠 잔업을 많이해서 피곤한데, 최근에 구글 애드센스 중지까지 먹어서 완전 맨붕상태가 왔었습니다.

부가적인 수입 하락으로 블로그를 새로 만들어서 해야겠다고 생각하고 새로운 블로그를 만들어 여기 있는 글들을 옮기는 도중

애드센스 중지가 풀려서 새롭게 만들던 블로그를 후딱 지우고 이렇게 다시 기존 블로그를 운영합니다.

그러고 보니 구글 애드센스 광고 다는 법을 아직 안올렸네요.

구글 애드센스는 블로그에 글 약 30~50개 이상은 있어야 가능하니, 너무 조급해 하지마시고 일단 내 블로그를 풍성하게 만들어 놓으시길 바랍니다.

조만간 구글 애드센스 광고 다는 방법에 대해서 올리도록 하겠습니다.

서론은 이쯤하고 본론으로 넘어가겠습니다.

이번글은 상단메인 이미지 바꾸는 방법에 대해서 적오보도록 하겠습니다.

* 상단메인 이미라는 말보다 Header 이미지 라는 말이 더 옳은 말이지만 본문에서는 상단메인 이미지라고 적겠습니다.

상단 메인이라 함은 위 이미지에서 파란색 네모박스를 말합니다.

제 블로그는 반응형 스킨이라서 적응방법이 조금 다르지만, 

티스토리에서 제공하는 스킨을 사용하시는분은 아래 방법을 따라 하시면 됩니다.

여기서 주의 할점은 스킨마다 HTML/CSS가 다르기 때문에 본인의 스킨에 맞게 응용을 하셔야 하니,

생각을 가지며 조금 여유롭게 글을 읽어주시길 바랍니다.

상단 메인 이미지 바꾸기 준비단계

 

일단 상단 메인 이미지를 바꿀려면 바꿀 이미지가 있어야 겠지요?

이미지는 본인이 포토샵 혹은 그림판을 이용해서 만들거나 기존것을 변경하시면 됩니다.

사이즈는 블로그 크기에 따라 다르기 때문에 이미지 적응 후 상단 메인 이미지가 짤려서 나오면 조금씩 수정하시면 됩니다.

* 제가 테스트한 이미지 크기는 530x60 으로 했습니다.

블로그 관리자 모드에서 'HTML/CSS 편집'을 선택합니다.

편집화면에서 상단에 보시면 '파일 업로드'라는 탭이 보일것입니다.

파일 업로드를 클릭하시면 위와 비슷한 화면을 볼 수 있습니다.

아까 말했지만 스킨마다 다르기 때문에 조금씩 응용하셔야 됩니다.

images/bs_header.gif 라는 파일 경로가 보이실것입니다.

이것이 기존 메인화면 이미지입니다.

어떻게 이녀석이 메인화면 이미지인줄 아냐고요?

파일 목록을 직접 하나 하나 클릭하면 왼쪽의 미리보기 창으로 이미지를 볼 수 있습니다.

직접 하나 하나 선택해보면 본인의 메인 이미지가 어떤것인지 알 수 있을 것입니다.

기존 메인 화면 이미지가 어떤것이 아셨다면 이제 내가 원하는 이미지를 올려봅니다.

하단에 '추가'를 눌러서 내가 원하는 이미지를 업로드 합니다.

이미지는 페이지 로딩 속도를 위해서 용량이 적는것을 추천드리며, 이미지 이름은 꼭 '영문'으로 하시길 바랍니다.

제가 메인화면을 변경하기 위해서 업로드 한 이미지 경로는 images/image-main07.png 입니다.

이 이미지명을 메모장 같은곳에 따로 적어두시길 바랍니다.

자 이제 준비를 마쳤으니 메인 이미지를 변경해보도록 하겠습니다.

* 본문 하단에 메인 이미지 바꾸는 방법에 대한 꼼수를 적어보도록 하겠습니다. 혹 너무 어려우시면 꼼수를 이용해보세요

상단메인 이미지 바꾸는 방법

 

상단 메인 이미지 바꾸는 방법은 크게 2가지로 구분되어 집니다.

하나는 HTML를 이용해서 바꾸는 방법이고, 나머지 하나는 CSS를 수정해서 바꾸는 방법입니다.

둘의 차이점은 처음 스킨을 제작한 사람에 따라 다르니 본인의 스킨에 맞게 찾아서 수정하시길 바랍니다.

그럼 내 스킨이 HTML를 수정해야 될지 혹은 CSS를 수정해야 될지 모를때는 어떻게 해야 될까요?

아주 간단한 방법을 알려드리겠습니다.

아까 기존 상단 메인 이미지를 찾는 방법에 대해서 적었는데,

HTML/CSS 편집화면에서 Ctrl + F(찾기)를 눌러서 'images/bs_header.gif'(기존 메인 이미지 경로)라고 검색해보시면 됩니다.

물론 스킨마다 찾아야 찾아야 되는것이 다르겠지요?

찾아보시면 내 스킨은 HTML를 수정해야 될지 혹은 CSS를 수정해야 될지 위치가 표기 됩니다.

일단 HTML를 수정해서 메인화면을 변경하시는 방법을 알아보겠습니다.

찾기로 상단메인 이미지 위치를 찾으셨다면, 그곳에 가보시면 위와 비슷한 화면을 볼 수 있습니다.

div class="header"

밑에 보시면 img src="이미지 주소" 가 있는것을 볼 수 있습니다.

여기에 아까 새로 올린 이미지 주소를 넣어주시면 됩니다.

주의 하실점은 src="./  <- 이 부분을 앞에 넣어주시고 나머지 이미지 주소를 넣으셔야 됩니다.

변경을 완료 하셨다면 '미리보기'로 상단 이미지가 변경된것을 확인하시고 '저장'을 누르시면 됩니다.

아주 간단하죠?

이제 CSS 편집으로 보겠습니다.

CSS 편집 같은 경우는 위와 같은 화면을 볼 수 있습니다.

CSS 편집에서는 /* 내용 */ 이런식으로 되어져 있는곳은 스킨에 적용이 안되는 곳이니 신경안쓰셔도 됩니다.

하지만 상단 이미지에서 빨간줄친곳을 자세히 보시면 별별(**) 사이가 아닌것을 볼 수 있습니다. 

이곳을 수정해주셔야 됩니다.

background-image:url(이미지 주소); 이런식으로 설정된것을 볼 수 있습니다.

여기에 아까 본인이 업로드한 이미지 주소를 올리시면 됩니다.

CSS 수정은 미리보기해서 바로 적응안되는 경우가 있기 때문에

'저장'을 누른 후 블로그를 새로고침(F5)를 눌러서 확인해야 됩니다.

생각보다 메인 이미지 바꾸는 방법이 간단하죠?

제가 전문적으로 HTML/CSS를 배운것이 아니라서 조금 서툰점이 많네요.

하지만 하나 하나 조금씩 배우다 보면 어느정도 틀을 이해하게 되고 간단한것을 수정가능해집니다.

그러니 포기하지 말고 하나 하나 해보시길 바랍니다.

HTML/CSS는 스킨마다 다르니 혹 너무 모르겠으면 댓글을 달아주시길 바랍니다.

티스토리 같은 경우는 '팀 블로그'라는 시스템이 있어서 제가 살짝 파티(?)를 맺어서 스킨만 수정 후 빠질 수 도 있습니다.

상단메인 이미지 바꾸기 꼼수

 

제가 설명한 방법은 HTML/CSS를 완전 모르시는분들에게는 조금 어려웠을 수 도 있습니다.

그래서 꼼수를 준비했습니다.

꼼수 방법은 아주 간단합니다.

일단 기존 이미지를 찾아줍니다.

저 같은 경우는 'images/bs_header.gif'가 기존 이미지 경로였는데,

여기에서 bs_header.gif가 기존 이미지의 파일명입니다.

즉, 내가 변경할 이미지 이름을 기존 이미지 파일명과 동일(확장자 포함)하게 해서 업로드 해버리면 

HTML/CSS를 수정하지 않아도 상단메인 이미지가 변경 될것입니다.

아주 간단하죠?

이렇게 간단한 방법을 나중에 적은 이유는 일단 HTML/CSS 수정을 조금씩 해보라는 의미에서 꼼수를 나중에 적었습니다.

제 글이 블로그 운영에 도움이 되었기를 바랍니다. ^-^