Yesterday : 55
Total : 878,067
- 쿠팡파트너스
- 구글에드센스
- 애드핏
- 애드픽
- 달빛이비추는 금빛작업실
- #폰요리
- 생명유지필수영양소
- 코코소프트
- 재테크포럼
- 나라디자인
- 기면기의 기억을 걷는⋯
- Carbon Fiber Workroom
- 작은설탕
- 김장배추의 게임스토리
- 문또또 라이프
- 필로소피아트
- TakeALook
- 하포의블로그
- 주니엘의 라이프 스토리
- neverending
- NEOEARLY*
- 서기닷컴
- 나 혼자 중얼??
- 먹보a의 살찌는 블로그
- 블로그팩
- 내다보는 (창)
- 집사 강가이버
- JunToday.com
- Hi Hello, Daily
- 영웅엔진
- 사람의 향기
- READ!
- Half and Half
- 비행인생
- Urban Country Diary
- 푸우시로의 지식창고
- Never Ending Story
- 오다
- 꽃길만 걷자
- 실버스타그램
- 하이공도리
- MY FIRST REFRAIN
- 브로페's
- 지금, 당신은 행복합니까?
- JS Storage
- 여행지스크랩북
- 재무컨설턴트 이주호
- 미친듯이 만들어 재끼자.
- 마음의 평온
- Papa's Lab
- Almost nothing
- OK건설워커
- Enjoy the monent ~ Lao⋯
- Lifelog of Sol
- moviescale
- The Invincible Iron Man
- 도메인연결
호기심 가득! 모지모지!
티스토리 반응형 스킨 #2 배경이미지를 바꿔보자! 본문
티스토리 반응형 스킨을 만지작거리다보니 요즘 대세인 반응형 웹에 대한 자신감이 늘어가는 중!~ 기본은 뭐니 뭐니해도 각 화면별 CSS만 잘 정리해주면 된다는 것~
이번에 손대볼 곳은 배경이미지입니다. 기본스킨은 배경이미지 하나를 사용하고 있습니다만, 그냥 하나로만 사용하기엔 심심하고 재미가 없죠? 그래서 각 화면별 그리고 펼쳐치는 메뉴쪽 배경을 바꿔 볼 생각입니다.
방법을 간단히 요약하자면,
1. 각 영역별 이미지를 업로드한다.
2. 각각의 CSS상의 이미지 URL을 바꿔준다.
정도입니다. 크게 어렵지 않으니 겁내지 마세요~ㅎ
일단, 교체할 영역을 살펴보죠~
가장 큰 PC화면에서 볼때 좌측의 배경이미지가 나타나는 부분입니다. 다스베이더가 오토바이를 타고 있는 이미지 보이시죠?
두번째는 중간 크기로 브라우저에서 볼때의 상단의 배경이미지입니다. 이번엔 다스베이더가 R2를 실고가는 연합군을 쫓고있네요~ㅎㅎ
그리고 마지막 메뉴를 클릭했을때, 메뉴 배경이미지입니다. 스톰트루퍼들이 나란히 서있는 이미지입니다.
이렇게 총 3군데의 배경이미지를 바꿔서 나름 테마 다운 스킨으로 바꿔보는 겁니다. 우선 이미지를 3개 구해야겠죠?
이미지는 각자 구글링을 하시거나, 무료이미지사이트를 좀 뒤져서 맘에 드는 이미지로 준비해주세요~
물론, 방법을 알아두시고 찬찬히 제대로 테마스러운 이미지로 바꾸셔도 되겠죠?
우선 구하신 이미지를 아래처럼 스킨편집창에서 파일업로드를 합니다.
파일이름은 저와 다르게 지어도 상관없습니다. 아래에서 설명할 이미지 URL에만 본인이 정한 파일이름을 잘 사용하시면 돼요~
이미지업로드가 완료되었다면, 위의 URL을 메모장에 적어두시면 편하겠죠?
image/이미지이름_01.jpg
image/이미지이름_02.jpg
image/이미지이름_03.jpg
뭐 이런식이 될겁니다.
그럼 CSS의 어디를 고쳐야할지 찾아보죠
화면이 작아보이지 않을 수도 있겠네요.
일단 큰화면의 좌측 배경이미지를 고치시려면 위 그림 오른아래쪽의 체크된 부분을 참고하시면 됩니다.
제 CSS파일에서는 73줄에 .wrap_sub{)란 곳에 배경이미지가 설정되어있네요.
줄 수는 좀 다르겠지만 그 근방에 보시면 .wrap_sub{) 이 보일겁니다.
background-image:url(images/본인의첫번째이미지이름.jpg);
로 바꿔주세요.
/*@background-image*/와 /*@*/는 주석이니 삭제해도 상관없습니다.
이번엔 두번째, 중간크기의 브라우저에서의 배경이미지, 보시면 572줄에 또다른 .wrap_sub{}가 보입니다.
background-image:url(images/본인의두번째이미지이름.jpg);
추가해주세요~ (아마 기본은 background-image가 없을테니 추가해주시면 됩니다.)
* 여기서 아래에 보이는
background-position과 background-size에 대한 설명은 나중에 다시 따로 블로그에 담아 설명해보도록 할테니 우선 지금은 생략~
자 마지막 메뉴가 펼쳐졌을때의 배경이미지를 바꿔줍시다~. 줄 수 96줄에 있군요. .navi_on .wrap_sub {}가 보이네요. 위 두 개의 CSS이름과 좀 다르죠? .navi_on 가 앞에 붙어있네요~ (쉽게, 메뉴가 펼쳐져있을때의 .wrap_sub {}대로 표시해라란 뜻입니다.)
background-image:url(images/본인의세번째이미지이름.jpg); 를 추가해줍니다.
위와 같이 세군데의 CSS를 수정하셨다면 저장을 누르시면 됩니다. 끝~
* 다시한번 요약하자면, 위에서 설명한 CSS명을 찾아 background-image의 내용을 수정하거나 추가하면 됩니다.
아참!~ 혹 노파심에 CSS를 수정하는 곳은 아래화면참고~ (초보분 중 질문하시는분이 있으실까바)
도움되셨다면 하트 버튼 눌러주실꺼죠?
-
너만의 봄길 2016.05.15 00:18 신고 배경을 설정했는데 사진을 가운데 두고 싶어요! 근데 사진이 한쪽으로 쏠리고 사진이 계속 연결해서 보이면 어떻게 해야하나요??
-
모지모지 2016.05.15 13:43 신고 background 속성의 다양한 활용법을 아셔야하는데.제 게시물에선 생략을 좀 했어요~.아래 사이트를 한번 참고해보세요~^^
http://blog.naver.com/dickymicky/220277207387 -
모지모지 2016.06.03 13:33 신고 해당 게시물의 댓글로 고칠 부분을 표시해드렸습니다. 1-2줄 차이는 날겁니다. 생각해보니 제CSS는 수정/추가를 좀 했더니만, 글 수가 많이 차이가 났었네요.^^
-
배성원 2016.06.03 13:56 신고 모지모지님, 직접 와서 댓글 달아주셔서 너무 감사합니다. 첫번째 사진만 변경해봤는데, 변경이 되네요. 열심히 배우겠습니다. 감사합니다. 좋은하루 되시기 바랍니다.
-
알 수 없는 사용자
2016.06.27 23:39
오늘 개설해서 이 스킨 적용했는데 좋은정보 얻어갑니다
한가지 질문드려요
가장 큰 PC화면에서 볼때 좌측의 배경이미지 자체를 삭제하고
중간 크기로 브라우저에서 볼때의 상단의 배경이미지만 항상 유지하고 싶은데
(큰화면이나 중간화면이나 늘 상단의 배경이 나왔으면 합니다)
어떤부분을 수정해줘야 할까요?
본문의 내용이랑 다른질문이라 죄송합니다ㅜ
왠지 여기선 답을 얻을수 있을것 같아 실례인줄 알지만 문의드려요 -
모지모지 2016.06.28 20:54 신고 이론적으론
@media
only screen and (min-width:738px) and (max-width:1262px){ 아래 나열된 속성들 중, 좌측메뉴 관련된 속성의 내용을, CSS 페이지 상단(가장큰사이즈관련)쪽의 동일한 속성에다 넣으면 되긴할텐데...고칠 곳이 은근 많을거같네요. 왼만해서 손대지 않는것이 어떨까싶기도한데요. -
모지모지 2016.07.09 18:21 신고 움 요상하네요 암튼 저도 시간나면 함 다시 봐야겠네요
-
모지모지 2016.07.09 21:15 신고 67줄
512줄
90줄
514줄에 있는 속성들 {}에 'background-image:해당이미지주소'
를 넣어보세요. (기존에 있다면 교체, 없다면 추가) -
배성원 2016.07.12 12:54 신고 예를들어 512줄의 경우
(두번째, 중간크기의 브라우저에서의 배경이미지 변경)
.wrap_sub {position:relative;width:100%;max-height background-image:images/worker2.jpg} 이런식으로 넣는건가요?
이렇게 하는거는 반응이 없는거 같아서요. -
모지모지 2016.07.12 14:28 신고 아하! 제가 CSS기본작성법을 생략하고 설명을 드려서 혼동이 있었군요. 일단, 위의 소스는...
.wrap_sub {position:relative;width:100%; background-image:url(images/worker2.jpg)}으로 고쳐서 붙여보세요.
* 배경이미지를 넣을때 URL(주소) 형식으로 넣어야하거든요.
그리고 속성들간의 구분은 ;으로 구분해야하고요.
아마 이미지가 바뀔걸로 예상해봅니다. 설명이 친절하지 못했군요. 죄송~ -
모지모지 2016.07.12 23:28 신고 PC에선 세곳모두 적용하신 이미지가 잘 나오는거 같은데요.
-
모지모지 2016.07.13 00:20 신고 종종 브라우저 설정에 따라 이미지가 저장되어있던 파일을 불러올수도 있습니다. 책쌓여있는 이미지가 아닌가요? 제 피씨에선 그 이미지가 보이는데..
-
모지모지 2016.07.13 17:57 신고 제 블로그를 모바일로 접속했을때 상단이미지를 말씀하시는거였군요? 모바일의 상단은 원래 기본 스킨에 없어요~ 안보이는게 정상...(제가 HTML을 추가해서 보여지는 부분입니다.) 중간크기라고 설명드린 부분은 PC에서 브라우저의 푹을 줄였을때 나타나는 이미지를 가리키는 겁니다. 모바일 상단이미지를 추가하려면 HTML을 많이 건드려야해요.
-
하이공도리 2016.11.29 23:45 신고 아 모바일 상단에도 이미지를 추가하려면 많이 뜯어고쳐야 하는군요.....ㅠㅠ모지모지님의 스킨이 탐나네요...ㅎㅎ
-
모지모지 2016.12.03 12:54 신고 모바일에서의 상단은 쪼금 손이 많이 가긴하죠^^ 근데 기존 PC화면에서 보여지는 HTML을 거의 그대로 모바일로 옮긴거라 꼼꼼히 챙겨보면 또 그렇게 어렵진 않아요...^^
-
바닌 2017.08.15 17:10 신고 헤더 사진 설정하면 검은색 투명도 조절해서 덮은 것처럼 헤더가 어두워지잖아요. 그거 해제하려면 어딜 건드려야될까요?ㅜㅜ
-
모지모지 2017.08.18 06:01 신고 혹시 개발자도구 아시나요? 제 블로그글중에도 간략한 설명 있을텐데요. 고거 함 참고해보세요. 정확히 다시 봐야 저도 알 수 있을거같네요.^^ 하두 손을 못대다보니...
-
모지모지 2017.09.28 19:55 신고 에고 죄송 요즘 블로그에 신경을 못쓰다보니... 만능인 ‘개발자 도구’를 이용해보실래요? 윗분 답글 참고~
-
odass 2017.09.28 01:49 신고 엄청 오래 걸렸습니다 저는 ㅎㅎㅎ 다른분들보다 저같은 초보자들이 훨씬더 알아보기 쉽네요~^^;;ㅋㅋ
감사합니다~^^ -
모지모지 2017.09.28 19:56 신고 감사합니다;
-
배성원 2017.11.14 07:27 신고 안녕하세요. 모지모지님, 반응형#2 스킨 궁금한게 있어서 오랜만에 댓글을 남깁니다.
1. 모지모지님 블로그 제목이 "호기심 가득! 모지모지!"인데요. "호기심 가득!" 하고 "모지모지!"를 아래위로 배치하는 것이 어떻게 하는건지 궁금합니다. 제목이 이어지는데, 자유자재로 위치 변경이 가능한건지요.
2. 블로그 제목의 폰트나 글자크기는 어디서 변경하는 건지요. 예전에 모지모지님 설명을 듣고 변경을 했는데, 다시 원위치 시키려니까 생각이 안나네요.ㅠㅠ -
모지모지 2017.11.21 11:02 신고 CSS에서
.area_head .area_profile .tit_post
이 걸함 찾아보시죠.
width값으로 좌우폭을 조절해서
강제로 줄바꿈을 한거 같네요.^^ -
alice.hankyeol 2017.12.08 21:41 신고 안녕하세요, 모지모지님!
모지모지님 글을 보고 블로그를 꾸미는 와중에 궁금한 점이 있어서 이렇게 글을 씁니다!
우선 이런 정보글을 주셔서 정말 정말 감사합니다
덕분에 원하는 사진으로 블로그를 꾸밀 수 있었답니다!
제가 따라하는 중에 타이틀은 적용이 되었는데 블로그 사이드에 보이는 사진과 메뉴사진 적용이 안되더라구요 ㅠㅠ
제가 잘 못 이해한건지 문제가 있는건지..
혹시 괜찮으시다면 이메일로 HTML 을 보내려고 하는데 어디가 문제인지 봐주실 수 있나요?
항상 좋은정보 잘 보고있습니다!!
긴 글 읽어주셔서 감사합니다!! - 익명 2017.12.09 21:41 비밀댓글입니다
-
버터플라이 2018.08.25 00:36 신고 덕분에 이미지 변경 잘했습니다. 감사합니다!^^
-
모지모지 2018.08.29 15:38 신고 감사합니다.