무료로 제공하는 게시판을 링크로 사용하시는 분들에게 아주 유용한 소스 같네요.
게시판에 백그라운드 이미지를 넣더라도 게시판 글목록에 가려지죠. 그래서 글 목록을
투명하게하는 소스를 소개합니다.
1번 링크는 아래 스타일시트를 적용한 게시판이구요. 2번 링크는 원래의 게시판에 백그라운드 이미지만
적용했습니다. 일반적으로 2번 링크 처럼 사용을 하죠. 제가 적용한 이미지는 테스트라 별루 안이쁘지만
여러분이 응용을 해보세요. 그럼 무료 게시판이라구 하더라도 이쁘게 만들 수 있습니다.
<style>
table { background-color: transparent; }
tr { background-color: transparent; }
td { background-color: transparent; }
</style>
<table>과 <tr>, <td> 태그에서의 배경 색을 투명하게 만든 것입니다.
게시판 관리자 설정 부분에서 HTML 태그를 입력할 수 있는 곳에다 소스를 붙여넣기 하면 됩니다.
그리고 게시판 화면에 배경그림을 지정하고 싶다면 글 목록 화면의 배경그림 지정하는 부분에서
지정해줘도 되구요. 게시판 화면 전체에 배경그림 지정할 수 있도록 style 부분에 body 부분을
추가해도 됩니다. 아래 소스는 게시판에 배경색과 백그라운드 이미지를 지정한 경우입니다.
<style>
body { background:배경색 url("배경그림주소") no-repeat fixed right bottom; }
table { background-color: transparent; }
tr { background-color: transparent; }
td { background-color: transparent; }
</style>
'배경색'이라는 글씨 대신 white, black 또는 16진수를 써서 색이름을 써주면 됩니다.
'배경그림주소'에는 http:// 로 시작하는 배경으로 사용할 그림의 주소를 적어주면 됩니다.
no-repeat는 화면에 그림이 하나만 나오게 하는 경우구요.(무반복) 화면 전체에 그림이 계속
나오게 하려면 repeat 라고 고치구요. repeat-x는 가로로만 연달아 그림이 나오게 하는거구요.
repeat-y는 세로로만 연달아 그림이 나오게 하는거랍니다.
fixed 는 화면에서 배경 그림이 고정되도록 하는 것이랍니다. 스크롤바를 움직여도 배경그림은
움직이지 않고 그대로 있는 것이죠. right bottom 는 화면에서 오른쪽(right), 아래(bottom)에 배경
그림이 나타나게 하는 것이랍니다. 왼쪽은 left, 가운데는 center, 오른쪽은 right 라고 써주구요.
위는 top, 가운데는 center, 아래는 bottom 이라고 써주세요. 그러면 배경 그림은 원하는 위치에 나오게
할 수 있겠죠? 배경 그림의 위치를 지정해줬어도 repeat라고 해주면 그림은 위치에 상관없이 화면에
모두 나오게 될꺼에요. 그리고 작은 그림이 커져서 화면 가득히 나오게는 못합니다.
게시판에 백그라운드 이미지를 넣더라도 게시판 글목록에 가려지죠. 그래서 글 목록을
투명하게하는 소스를 소개합니다.
1번 링크는 아래 스타일시트를 적용한 게시판이구요. 2번 링크는 원래의 게시판에 백그라운드 이미지만
적용했습니다. 일반적으로 2번 링크 처럼 사용을 하죠. 제가 적용한 이미지는 테스트라 별루 안이쁘지만
여러분이 응용을 해보세요. 그럼 무료 게시판이라구 하더라도 이쁘게 만들 수 있습니다.
<style>
table { background-color: transparent; }
tr { background-color: transparent; }
td { background-color: transparent; }
</style>
<table>과 <tr>, <td> 태그에서의 배경 색을 투명하게 만든 것입니다.
게시판 관리자 설정 부분에서 HTML 태그를 입력할 수 있는 곳에다 소스를 붙여넣기 하면 됩니다.
그리고 게시판 화면에 배경그림을 지정하고 싶다면 글 목록 화면의 배경그림 지정하는 부분에서
지정해줘도 되구요. 게시판 화면 전체에 배경그림 지정할 수 있도록 style 부분에 body 부분을
추가해도 됩니다. 아래 소스는 게시판에 배경색과 백그라운드 이미지를 지정한 경우입니다.
<style>
body { background:배경색 url("배경그림주소") no-repeat fixed right bottom; }
table { background-color: transparent; }
tr { background-color: transparent; }
td { background-color: transparent; }
</style>
'배경색'이라는 글씨 대신 white, black 또는 16진수를 써서 색이름을 써주면 됩니다.
'배경그림주소'에는 http:// 로 시작하는 배경으로 사용할 그림의 주소를 적어주면 됩니다.
no-repeat는 화면에 그림이 하나만 나오게 하는 경우구요.(무반복) 화면 전체에 그림이 계속
나오게 하려면 repeat 라고 고치구요. repeat-x는 가로로만 연달아 그림이 나오게 하는거구요.
repeat-y는 세로로만 연달아 그림이 나오게 하는거랍니다.
fixed 는 화면에서 배경 그림이 고정되도록 하는 것이랍니다. 스크롤바를 움직여도 배경그림은
움직이지 않고 그대로 있는 것이죠. right bottom 는 화면에서 오른쪽(right), 아래(bottom)에 배경
그림이 나타나게 하는 것이랍니다. 왼쪽은 left, 가운데는 center, 오른쪽은 right 라고 써주구요.
위는 top, 가운데는 center, 아래는 bottom 이라고 써주세요. 그러면 배경 그림은 원하는 위치에 나오게
할 수 있겠죠? 배경 그림의 위치를 지정해줬어도 repeat라고 해주면 그림은 위치에 상관없이 화면에
모두 나오게 될꺼에요. 그리고 작은 그림이 커져서 화면 가득히 나오게는 못합니다.
반응형
'인터넷정보' 카테고리의 다른 글
천사가 날아가는 간단한 마퀴태그 (0) | 2007.10.16 |
---|---|
천사가 날아가는 간단한 마퀴태그 (0) | 2007.10.16 |
투명한 스크롤바 만들기 (0) | 2007.10.16 |
투명한 스크롤바 만들기 (0) | 2007.10.16 |
게시판 글 목록 테이블을 투명하게(배경 이미지 적용시) (0) | 2007.10.16 |
홈 들어갈 때와 나갈 때 인사말창 띄워주기 (0) | 2007.10.16 |
홈 들어갈 때와 나갈 때 인사말창 띄워주기 (0) | 2007.10.16 |
배경음악 삽입하기 - bgsound/embed (0) | 2007.10.16 |
배경음악 삽입하기 - bgsound/embed (0) | 2007.10.16 |
음악 플레이 멈춤 기능 (0) | 2007.10.16 |