바람이 머문 언덕

블로그의 본문에 배경색과 여백 주기 본문

컴퓨터 IT/컴퓨터 인터넷

블로그의 본문에 배경색과 여백 주기

알 수 없는 사용자 2010. 8. 2. 23:26
반응형
블로그를 꾸며야 겠다는 생각은 가지고 있어서나 시간이 잘 나지 않아서 미루다가 시간을 내어서 블로그를 스킨에 손을 대보았습니다.
 
먼저 스킨 위자드로 블로그에 이미지를 삽입해 보았는데 배경 이미지가 포스트 본문에도 적용되어 글을 읽는데 불편하고 눈이 아프네요. ㅡㅡ;

그래서 본문의 <div>에 배경 색상을 주어 보았습니다.
그렇더니 배경 이미지가 본문에까지 적용되지 않아서 편하게 글을 읽을 수 있어서 좋네요. ^^;

 

본문에 따로 배경 색상을 주기 위해서는 먼저 Ctrl + f키를 눌러 div id="content"를 찾아서
style="background-color:#색상코드을 입력해 주면 됨니다.


여기에 배경 색상을 지정해주면 글 제목부터 댓글까지 색상이 다 적용 됩니다.

그런데 배경 이미지가 블로그 본문에 침범하지 않아서 포스팅 내용을 읽기가 편해졌지만 구글 애드센서의 광고 내용이 잘 보이지 않아서 좀 더 세밀하게 색을 적용하기 위해서 포스팅 내용을 표시하는 부분 div class="article"를 찾아서 위에 처럼  style="background-color:#색상코드를 입력했습니다.



아까 보다는 좀 더 보기가 괜찬은 것 같아서 기분이 좋습니다.

내친 김에 사이드바에도 색을 적용하기 위해서 <div id="sidebar" style="background-color:#색상코드>로 색을 지정해 주었습니다.

특별한 색상을 넣기를 원하는 곳이 있어면 <div>에 배경 색을 넣어 주면 되겠죠. ^^;

그런데 이렇게 스킨을 변경하고 블로그를 보는데  눈에 거슬리는 부분이 하나 있었습니다.
블로그 배경색과 본문의 색니 갔았을 때는 몰랐는데 배경 이미지를 적용하고 나서 보니 본문 글의 시작과 끝 부분에 약간의 여벽이 있어야 읽기 편할 것인데 여백이 없네요. ㅡㅡ;


어디서 스킨을 잘 못 건들였지 ... ㅡㅡ;

스킨 위자드에서 여러 스킨으로 미리 보기해 본 결과 글의 시작과 끝 부분에 끝 부분에 여백이 들어가는 스킨도 있고 내가 사용하고 있는 스킨처럼 여백이 없는 스킨도 있다는 것을 알았습니다.

스킨 오류가 아니라서 다행 입니다. ^^

글의 시작과 끝 부분에 여백이 있는 스킨스으로 변경 할여고 해도 이 스킨에 정이 많이 들어서 인지 다른 스킨은 마음에 들지도 않고 또 변경 후에 해주어야 할 여러 가지 작업때문에 스킨 변경하는 것은 포기하고 글의 시작과 끝 부분에 여백을 넣는 수 있는 다른 방법을 찾아 보기로 했습니다.

한참을 찾다가 하노비님의 "HTML의 기본 <DIV>태그 활용하기 #.1"라는 글을 보게 되었습니다.
Table에서 여백을 <DIV>를 활용해 여백을 주는 방법을 설명한 것인데 이 것을 응용해 보면 본문 글 시작과 끝 부분에 여백을 줄 수 있을 것 같아서 "_article_rep_desc_"를 찾아서 <div>에 적용을 해보았어나 앞에 색상을 적용한 부분과 중복이 되어서 인지 아무른 변화가 없어서 <div>를 하나 더 만들어서 아래처럼해 적용해 보았습니다. 


<div class="article" style="background-color:" >
                                             <div style="margin: 0px 10px 0px 10px" >
                            [ ##_article_rep_desc_ ##]
                                             </div>
</div>

그렇더니 내가 원하는 되로 아래와 같이 포스팅한 글에 여백이 생겨서 보기가 좋습니다.


사이드바도 글이 공백이 없이 본문 처럼 여백을 주기 위해서 사이드바에 적용을 해보았더니 보기 싫은 부분이 있어서 원하는 부분을 찾아서 따로 그 부분을 따로 적용을 했습니다.


사이드바는 본문에서 처럼 따로<div></div>를 만들어서 묶지 않고 기존의 <div>에 style="margin: 0px 10px 0px 10px"만 추가 해주었는되도 적용되었습니다.

스킨 변경을 처음 해보아서 여러 번의 시행 착오를 거치 면서 배운다고 몇 칠 동안 스킨 수정한다고 했는되도 아직 얼마 수정하지 못 했습니다.

스킨 수정을 생각보다 시간이 많이 걸리고 어떤 부분을 어떻게 수정 해야 할지도 아직 감이 잘 오지 않습니다. ㅡㅡ;

별 것 아니지만 스킨 수정할여고 하는 블로거가 있다면 약간의 도움이라도 되었으면 하는 생각에 올려 봅니다. ^^