다중 배경이미지 Multiple backgrounds (css3)
css3 에서는 여러개의 배경이미지를 사용할 수 있다. (ie는 9.0부터 지원가능)
body {
background-images:url("images/bg.jpg"),url("images/footerbg.jpg");
background-repeat: repeat-x;
background-position:top center,bottom center;
}
여러개의 속성값을 부여할 때는 콤마를 사용해서 분리한다.
background-repeat 의 경우 속성값이 하나이면 두개의 이미지에 대해 같은 값을 부여하게 된다.
포지션은 서로 다르게 해서 상단 배경 이미지와 하단 배경 이미지로 분리한다.
배경이미지는 전체배경뿐 아니라 div태그의 배경에도 적용할 수 있다.
.box {
background-images:url("images/top-left.jpg"),
url("images/top-right.jpg"),
url("images/bottom-left.jpg"),
url("images/bottom-right.jpg");
background-repeat: no-repeat,
no-repeat,
no-repeat,
no-repeat,
background-position:top left,
top right,
bottom left
bottom right;
}
4개의 이미지에 대해서 각각 위치를 달리해서 적용한다.
css3지원 브라우저 테이블 http://caniuse.com
테이블 가로정렬
정렬 스타일 style=float:left; 삽입
<TABLE width="626" border="1">
<TR>
<TD>
<table width="142" height="100" border="1" cellspacing="5" cellpadding="0" style=float:left;>
<tr>
<td>표1</td>
</tr>
</table>
<table width="142" height="100" border="1" cellspacing="5" cellpadding="0" style=float:left;>
<tr>
<td>표2</td>
</tr>
</table>
<table width="142" height="100" border="1" cellspacing="5" cellpadding="0" style=float:left;>
<tr>
<td>표3</td>
</tr>
</table>
</TD>
</TR>
</TABLE>
테이블에 이미지 삽입 시 공백 없애기
style=display:block;
이미지 태그에 위의 스타일 추가.
이미지 롤오버
onMouseOver="this.src=''" onMouseOut="this.src=''" style=cursor:hand;border:none; 삽입
예제:
<img src=기본 이미지 주소 onMouseOver="this.src='마우스 오버시 보여질 이미지 주소'" onMouseOut="this.src='기본 이미지 주소'" style=cursor:hand;border:none;>
DIV 겹치기
<div style='position:absolute; top:0px; left:0px; z-index:1;'>
<p style="position:absolute; left:0px; top:0px; z-index:1;">1</div>
<div style='position:absolute; top:0px; left:0px; z-index:2;'>
<p style="position:absolute; left:0px; top:0px; z-index:2;">2</div>
<div style='position:absolute; top:0px; left:0px; z-index:3;'>
<p style="position:absolute; left:0px; top:0px; z-index:3;">3</div>
<div style='position:absolute; top:0px; left:0px; z-index:4;'>
<p style="position:absolute; left:0px; top:0px; z-index:4;">4</div>
</div>
스크롤바제어
가로 스크롤 없애기
<body style="overflow-x:hidden;">
세로 스크롤 없애기
<body style="overflow-x:hidden;">
스크롤 모두 없애기
<body scroll=no>
투명한 아이프레임
iframe 태그에 allowTransparency="true" 추가
제로보드 원프레임 이미지 리사이징
원프레임이나 노프레임에서 게시판의 이미지 리사이징이 안될때,
---------------------------------------
헤드
---------------------------------------
테이블 가로크기설정!!
---------------------------------------
푸터
---------------------------------------
게시판 들어갈 자리에 테이블 가로크기 설정을 해주면 된다.
<td width=테이블사이즈>
이런식으로..
배경 이미지 반복 안하게
<body style="background-repeat:no-repeat">
body태그에 style="background-repeat:no-repeat" 삽입.
no-repeat : 반복없음
repeat-x : 수평반복
repeat-y : 수직반복스크롤 부드럽게 따라다니는 이미지
1. </html>뒤에 삽입
<SCRIPT LANGUAGE=JAVASCRIPT>
<!--
var isDOM = (document.getElementById ? true : false);
var isIE4 = ((document.all && !isDOM) ? true : false);
var isNS4 = (document.layers ? true : false);
function getRef(id) {
if (isDOM) return document.getElementById(id);
if (isIE4) return document.all[id];
if (isNS4) return document.layers[id];
}
var isNS = navigator.appName == "Netscape";
function moveRightEdge() {
var yMenuFrom, yMenuTo, yOffset, timeoutNextCheck;
if (isNS4) {
yMenuFrom = divMenu.top;
yMenuTo = windows.pageYOffset +10 ; // 위쪽 위치
} else if (isDOM) {
yMenuFrom = parseInt (divMenu.style.top, 10);
yMenuTo = (isNS ? window.pageYOffset : document.body.scrollTop) +10; // 위쪽 위치
}
timeoutNextCheck = 500;
if (yMenuFrom != yMenuTo) {
yOffset = Math.ceil(Math.abs(yMenuTo - yMenuFrom) / 20);
if (yMenuTo < yMenuFrom)
yOffset = -yOffset;
if (isNS4)
divMenu.top += yOffset;
else if (isDOM)
divMenu.style.top = parseInt (divMenu.style.top, 10) + yOffset;
timeoutNextCheck = 10;
}
setTimeout ("moveRightEdge()", timeoutNextCheck);
}
if (isNS4) {
var divMenu = document["divMenu"];
divMenu.top = top.pageYOffset +10;
divMenu.visibility = "visible";
moveRightEdge();
} else if (isDOM) {
var divMenu = getRef('divMenu');
divMenu.style.top = (isNS ? window.pageYOffset : document.body.scrollTop) +10; // 시작점
divMenu.style.visibility = "visible";
moveRightEdge();
}
//-->
</SCRIPT>
2. <body>와 </body> 사이에 삽입
좌측정렬일때
<div id=divMenu style="top:0px; left:0px; visibility: visible; width: 140px; position: absolute;">내용</div>
중앙정렬일때- 2+357 => 2등분해서 오른쪽으로 357떨어진 위치에 출력
<div id="divMenu" style="width:53px; height:23px; position:absolute; left:1025px; top:407px; z-index:1; left:expression((document.body.clientWidth)/2+357);">내용</div>
스타일 시트 불러오기
테이블 너비 고정
<table style="table-layout:fixed;>
띄어 쓰기 하면 자동 줄바꿈이 되고
vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
위에 처럼 띄어쓰기 없이 영타를 연속으로 쳐도 자동으로 잘려 테이블 너비를 고정해준다.
특문제외 강제 줄바꿈 style="word-break:break-all"
특문포함 강제 줄바꿈 style="word-wrap:break-word"
줄바꿈 못하게 style="nowrap"
png파일 ie6에서 구현
<head> </head> 사이에 아래 소스 삽입.
<script language="javascript">
<!--
function setPng24(obj) {
obj.width=obj.height=1;
obj.className=obj.className.replace(/\bpng24\b/i,'');
obj.style.filter =
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ obj.src +"',sizingMethod='image');"
obj.src='';
return '';
}
//-->
</script>
<style type="text/css">
.png24 {
tmp:expression(setPng24(this));
}
</style>
png파일 사용시 이미지 태그에 class=png24 처럼 클래스 네임을 주면 됨.
소스 출처
http://bones.tistory.com/46
http://hmoai.blog.me/50095288676
php 파일 불러오기
<? include("document.php"); ?>
html파일 불러오기
<marquee scrollamount="3">내용</marquee> //숫자가 클수록 빨라짐
behavior=alternate // 왕복
direction=up //위로흐름 그외 right, left, up, down/* 여러 라인 주석처리 */
토글
<span id=s0 onclick=tgl(0)>여기에 제목을 적어주세요</span>
<div id=d0 style=display:none>
<p id="d0">내용<br>내용<br>내용<br>내용<br>내용<br>내용<br>내용<br>내용<br>내용<br></div>
<p>
<span id=s1 onclick=tgl(1)>제목은 이렇게</span>
<div id=d1 style=display:none>
<p id="d1">내용<br>내용<br>내용<br>내용<br>내용<br>내용<br>내용<br>내용<br>내용<br></div>
<script>
function tgl(v){ //타겟의 id넘버를 받아서, 레이어를 토글하는 함수
var a=document.getElementById('d'+v).style.display; //레이어의 display 속성
document.getElementById('d'+v).style.display=(a=='none')?'block':'none'; //속성이 보임이면 감춤, 감춤이면 보임으로 레이어의 display 속성을 토글
}
</script>
border 스타일
solid (내부가 채워진 선 모양)
ridge (선이 입체적으로 돌출됨)
dotted (점선 모양으로 표시)
dashed (끊어진 선 모양으로 표시)
double (선을 두줄로 표시)
inset (내부가 약간 들어간 듯하게 선을 표시)
outset (바깥으로 돌출된 듯하게 선을 표시)
groove (홈이 파진 듯하게 선을 표시)
none (나타나지 않거나 혹은 기본적인 선 모양)
hidden (모양을 숨김)
인풋박스 텍스트 클릭하면 사라지게
흐르는 배너
chrome에서 margin/padding 값 적용하기
해결 방법은,
margin-top:20px;margin-right:5px;margin:bottom:46px;margin-left:3px;
위처럼 margin값을 줄 정확한 위치 설정과 단위를 적어줄 것.
+ chrome 에서 가장 작은 폰트사이즈는 10px 더 작게 설정해도 10px로 동일한 값으로 출력된다.
chrome 에서 번역 툴바 안뜨게
그누보드 삭제 시 gnuboard4 폴더가 살아있을때 제거 하기
<?
$cmd = `rm -rf ./gnuboard4/`; //<-- 삭제할폴더의 경로
echo "$cmd";
echo "삭제 되었습니다.";
?>
위 소스를 입력한 del.php 파일을 만들어 계정에 업로드 한 뒤
http://계정주소/del.php 를 불러오면, gnuboard4 폴더가 삭제된다.
단, 하위 폴더가 모두 삭제되니 주의할것.
삭제된것이 확인되면 del.php 를 삭제한다.
출처 : http://sir.co.kr/bbs/board.php?bo_table=g4_tiptech&wr_id=29139
그누보드 글작성 시 '글쓰기에는 wr_id값을 사용하지 않습니다' 에러 뜰때 
wr_id.txt
1. gnuboard4 > skin > 해당스킨폴더 에서 write.skin.php 파일에서 아래 구문을 찾는다.
function fwrite_submit(f)
{
/*
var s = "";
if (s = word_filter_check(f.wr_subject.value)) {
alert("제목에 금지단어('"+s+"')가 포함되어있습니다");
return false;
}
if (s = word_filter_check(f.wr_content.value)) {
alert("내용에 금지단어('"+s+"')가 포함되어있습니다");
return false;
}
*/
2. 상단의 구문 하단에 아래 구문을 추가한다.
if ($g4[https_url])
echo "f.action = '$g4[https_url]/$g4[bbs]/write_update.php';";
else
echo "f.action = './write_update.php';";
?>
/* 글쓰기에는 wr_id값을 사용하지 않습니다 에러 수정용*/
최근게시물 링크 클릭하면 www/gnuboard4//bbs/.... 식으로 경로가 꼬일때
그누보드 상대경로 적는 란에 $g4_path = "../gnuboard4/"; 를 $g4_path = "../gnuboard4"; 로 변경
<?
$g4_path = "../gnuboard4/"; // 그누보드 상대경로
include_once("$g4_path/_common.php");
include_once("$g4[path]/lib/outlogin.lib.php");
include_once("$g4[path]/lib/latest.lib.php");
include_once("$g4[path]/lib/userfunction.lib.php");
?>