[simple gray 4.0] 배경 설정 방법
※ 이 가이드는 simple gray 스킨 전용입니다. 다른 스킨에는 적용되지 않습니다.
스킨 위자드로 배경 설정하는 방법과 배경 설정 시 필요한 추가 CSS 수정법에 대해 적어보겠습니다.
※ 배경 설정 관련 추가 질문이 들어오면 이 글에 덧붙이겠습니다.
스킨 위자드 설정 전 알아야 하는 정보
이 캡쳐는 simple gray 4.0의 기본 타이틀입니다.
이 부분을 봐주시겠어요?
표시된 타이틀과 서브타이틀은 스킨위자드로 설정할 때 색이 같이 바뀝니다.
만약 타이틀을 흰색으로 지정한다면 그 밑에 서브타이틀도 흰색으로 표시됩니다.
단, 서브타이틀은 투명도가 설정돼있어 타이틀보다 글자가 조금 연하게 나옵니다.
다음으로 알아야 할 부분은
이 부분입니다. 서브 타이틀의 배경인데요,
기본값은 #222 이지만 스킨 위자드에서 블로그 배경색과 같이 바뀝니다.
만약 블로그 배경색을 빨갛게 하면 서브타이틀의 배경색도 빨갛게 변합니다.
이것도 투명도가 설정돼있습니다.
스킨 위자드를 몇 번 만지다 보면 금세 어떤 의미인지 아실 수 있을 겁니다.
이제 위 내용은 머릿속에 보관해두고... 배경을 적용해볼까요?
스킨 위자드 설정
(스킨 위자드 설정으로 접속하는 방법은 생략합니다)
배경 이미지를 넣기 전 타이틀 탭으로 우선 이동해 다음 사진의 버튼을 눌러주세요.
타이틀 배경 색이 없어진걸 확인하셨나요?
배경을 투명하게 설정했습니다.
이제 다시 배경 탭으로 넘어와서 원하는 이미지를 업로드 하거나, 마음에 드는 디자인을 선택해주세요.
저는 이걸 선택했습니다.
글자 색이 마음에 안드네요. 바꿔볼까요?
타이틀 > 텍스트 탭으로 이동해 글자색을 변경해주세요.
흰색으로 설정해볼게요.
한결 낫군요!
이제 적용을 누르고 스킨위자드를 빠져나와주세요.
style.css 편집
배경 설정도 다 했는데 맘에 안드는 부분이 한군데 있네요.
푸터가 회색인게 영...
바꿔줍시다.
style.css 파일에서 #footer 를 검색하거나 368번째 줄로 이동하면 다음 소스가 있습니다.
#footer { position: relative; margin: 0; padding: 20px 0 100px; line-height: 170%; color: #999; background-color: #2e2e2e; }
background-color: #2e2e2e; 를 제거하거나, 원하는 색으로 바꾸거나, 컬러값을 transparent로 바꿔 투명하게 만들어주세요.
배경은 없어졌는데 글씨 색이 안어울리네요.
/* * footer */
부터
/* * scrolling */
사이에 있는 모든 color 값을 바꿔주세요!
설정한 배경색에 맞게 바꿔주시면 될 것 같습니다.
색상값을 잘 모르겠다면 이 사이트(링크)를 참고해주세요.