Noname

이번에도 두서없기는 마찬가지입니다...

이글루스를 꾸밀 때 네이버 블로그나 티스토리 블로그 등을 살펴보면 스킨들 중 본문이 쓰여지는 곳에도 배경이 반투명하게 비취는 모습을 종종 보실 수 있으실 겁니다.
이런 표현은 미리 블로그를 어떻게 구성할지 염두하여 그림들을 잘라 붙여 만든 경우가 많은데 상당히 어렵습니다...

그래서 간단히 뒷 배경이 완전히 비치거나 반투명하게 비치는 방법을 적어 보도록 하겠습니다.


[뒷 배경이 완전히 비치도록 하기]

css편집으로 들어갑니다.


#body, #container, #header, #sidebar, #contents, #footer 부분에 보이는  background: 구문을 지워주세요.

예를 들자면, 아래에서 표시된 부분을 지워주시면 됩니다.

body에 배경을 지정한 상태에서 모두 지우면 이렇게 보이지요.
배경 위에 바로 글씨들이 적혀있는 것이 보이십니까?


[배경을 반투명하게 보이게 하기]
배경을 반투명하게 보이게 하려면 반투명한 이미지를 올리면 됩니다.

포토샵을 켜서 새 파일을 만듭니다.
주의하실 점은 배경 내용을 투명으로 해주셔야 페인트 통 도구로 흰색을 칠한 뒤 투명도를 적용하실 수 있으실 겁니다.
(그렇게 하지 않아도 큰 불편은 없지만 흰색/배경색일 경우 배경 레이어가 잠금 상태가 되어 새로운 레이어를 만드셔야 합니다)

투명도를 정합니다.

약 80정도가 무난한 것 같습니다.
60이하는 너무 비춰보이고 90이상은 배경이 잘 보이지 않아요.^^;;

그리고 png형식으로 저장하세요.
png가 아닌 gif나 jpg로 저장하시면 투명도 적용이 되지 않습니다.

위의 파일을 이글루스에 올린 뒤

원하는 곳에 이미지 삽입하는것과 같이 지정해 주시면 됩니다.
background: url(주소) 옵션 ;
잊지 않으셨겠죠?

[적용한 항목별 화면]
#body
참고!
일반적으로 #body부분은 #container부분의 그림자를 표현하기 위해 사용되고 있습니다.
#body부분은 손대시지 마시고 #container부분만 고치시는 것을 추천합니다...만 그다지 차이는 없습니다.

#container

#header

#content
#sidebar

#footer

레이어의 위 아래 순서를 따지자면
body
#body
#container
#content /#sidebar /#footer
의 순서입니다.

간단히 응용해서 이렇게 구성해 봤습니다.
body - 타일
#body - 검정색
#container - 이미지
#header - 노란색
#contant - 반투명 80%
#sidebar - 흰색
각각의 영역과 선후가 이해가 되시나요?

수고하셨습니다^^