script
- 에딧플러스 컬러설정 파일.. 2009.04.22
- [Submit 버튼] 한 번만 동작하기 2007.11.01
- div 중앙정렬.. 2007.09.21
- 글꼴의 단위에 따른 크기 비교표 : Font size by kukie 2007.09.16
- 자주사용하는 스타일 모음 ... 2007.09.15
- input 필드에 숫자만 저장 2007.09.14
- stripslashes 함수. 2007.09.06
- 라디오 버튼을 이용한 페이지 이동.. 2007.09.03
- 깔끔한 테일블 소스. 셀의 외부와 내부까지 1px의 윤각을 보여주고 싶을때. 2007.08.16 2
- "position" 속성 찾다가 스크렙...;;; 2007.08.11
에딧플러스 컬러설정 파일..
[Submit 버튼] 한 번만 동작하기
phpschool 거친마루님의 덧글 참고.
<form action=\"http://phpschool.com\" onSubmit=\"this.submit.disabled=true\">
<input type=\"text\" name=\"test\">
<input name=\"submit\" type=\"submit\" value=\"전송\">
</form>
이렇게 해야겠네요 : )
Jun// type=image일때는 조금 다르게 동작하는거같습니다
그래도 disabled 속성은 있으니
<input type=\"image\" onClick=\"this.form.submit();this.disabled=true\" value=\"전송\">
====================================================================
IE6에선 확인할수 없지만.
일단 IE7에선 아래 처럼 적용.
<input type="submit" value=" 저장 " onClick="this.form.submit();this.disabled=true"/>
div 중앙정렬..
#id {width:값; margin:0 auto}
position(relative)을 사용한 방법..
#id {position:absolute;top:0px;left:감싸고 있는 DIV의 50%값 px;}
left: 50% 해주시고 추가로 margin-left: DIV의길이의 (-)50%값 px 을 해주면 중앙 정렬이 됨.
"마진 오토"를 사용 하기윈해선 블럭 엘리멘트에 위드 값이 정해져 있어야 하며
DTD에 따라 안먹는 경우가 있음.
덧글 참조
글꼴의 단위에 따른 크기 비교표 : Font size by kukie
자주사용하는 스타일 모음 ...
/*게시판 본문*/
.ment {font: 9pt/14.5pt "굴림","돋움","돋움체","Dotum","verdana","arial"; color: #555555;}
.descript {width:100%; overflow:hidden;}
overflow : 설명
.hand {cursor:pointer;}
.bold {font-weight:bold;}
.text {font: 8pt "tahoma","돋움", "돋움체","Dotum","verdana","arial";}
.num {font:7pt "Tahoma","verdana","arial";}
input 필드에 숫자만 저장
IE에서만동작....
검색해보니 isNaN()라는 함수가 있군요.
IE, FF 둘다 잘됨.. 다른건 아직 확인 안해봤음.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<SCRIPT LANGUAGE="JavaScript">
<!--
function checkNumber(value) {
if (isNaN(value)) {
alert("숫자만 입력할 수 있습니다.");
return "";
} else return value;
}
// -->
</SCRIPT>
</head>
<body>
생년월일 :
<INPUT TYPE=text NAME=birthyear SIZE=4 MAXLENGTH=4 onkeyup="this.value = checkNumber(this.value)">년
<INPUT TYPE=text NAME=birthmonth SIZE=2 MAXLENGTH=2 onkeyup="this. value = checkNumber(this.value)">월
<INPUT TYPE=text NAME=birthday SIZE=2 MAXLENGTH=2 onkeyup="this.value = checkNumber(this.value)">일<BR>
</body>
</html>
stripslashes 함수.
if($mode=="exec"){
$fp=fopen("index.css","w");
$str=$text;
$str=stripslashes($str);
fwrite($fp,$str);
fclose($fp);
}
?>
<form method="post" action="<?=$PHP_SELF?>?mode=exec">
<textarea name="text" rows="20" cols="120"><?=htmlspecialchars(file_get_contents("index.css"))?></textarea><br />
<input type="submit" />
</form>
stripslashes : 함수는 인자로 지정된 문자열에서 역슬래시 코드들을 원래의 문자열들로 변환한 결과를 돌려준다.
스킨관리페이지(미니보드)를 따로 만들어 부분적인 편집을 위해 만들어 본 소스..
ex)
$str = "Ist Ihr Name O\'reilly?";
// Ausgabe: Ist Ihr Name O'reilly?
echo stripslashes($str);
?>
라디오 버튼을 이용한 페이지 이동..
<html>
<head>
<title> new document </title>
</head>
<body>
<form name="Form" method="post" action="<?=$PHP_SELF?>?style=bbs" id="Form">
<script type="text/javascript">
<!--
var theForm = document.forms['Form'];
if (!theForm) {
theForm = document.Form;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.submit();
}
}
// -->
</script>
<input id="ViewModeRBL_0" type="radio" name="ViewModeRBL" value="T" checked="checked" /><label for="ViewModeRBL_0">1번 페이지</label><input id="ViewModeRBL_1" type="radio" name="ViewModeRBL" value="N" onclick="javascript:setTimeout('__doPostBack(\'ViewModeRBL$1\',\'\')', 0)" /><label for="ViewModeRBL_1">2번 페이지</label>
</form>
</body>
</html>
므지 필요한거 였는데...
레이소다에 갔다가 발견 ....
낼름 업어 왔다...;;;;
깔끔한 테일블 소스. 셀의 외부와 내부까지 1px의 윤각을 보여주고 싶을때.
<tr>
<td>ddddd</td>
<td>ddddd</td>
<td>ddddd</td>
</tr>
</table>
단점은 이넘을 사용하면 padding이 안 먹는다는거...
cellpadding를 자알 활용하면 되려나...
"position" 속성 찾다가 스크렙...;;;
근데 정작 찾던 position에 관한 내용은 빠자 있..;;;;;
원문 : http://blog.naver.com/beige9?Redirect=Log&logNo=30019116536
CSS스타일 속성모음
▶ 각 항목을 클릭하시면 새창으로 상세사용법을 보실수 있습니다.
배경값 설정 | background | B |
배경 이미지의 스크롤 여부 설정 | background-attachment | |
배경색 설정 | background-color | |
배경 이미지 | background-image | |
배경 위치 설정 | background-position | |
배경 이미지의 반복 설정 | background-repeat | |
박스 경계선의 속성 설정 | border | |
박스 아래 경계선의 속성 설정 | border-bottom | |
박스 아래 경계선의 두께 설정 | border-bottom-width | |
박스 경계선의 색상 설정 | border-color | |
박스 왼쪽 경계선의 속성 설정 | border-left | |
박스 왼쪽 경계선의 두께 설정 | border-left-width | |
박스 오른쪽 경계선의 속성 설정 | border-right | |
박스 오른쪽 경계선의 두께 설정 | border-right-width | |
경계선 스타일 지정 | border-style | |
박스 위쪽 경계선의 속성 설정 | border-top | |
박스 위쪽 경계선의 두께 설정 | border-top-width | |
박스 경계선의 두께 설정 | border-width | |
이미지나 테스트의 배치 지정 | clear | C |
글자색의 설정 | color | |
디스플레이 값의 변경 설정 | display | D |
이미지나 택스트의 배치 지정 | float | F |
글꼴 속성 설정 | font | |
글꼴 종류 설정 | font-family | |
글자 크기 설정 | font-size | |
글자 모양 설정 | font-style | |
글꼴의 전환 | font-variant | |
글자 두께 지정 | font-weight | |
Element(요소) 높이 설정 | height | H |
글자간의 간격 조절 | letter-spacing | L |
각 줄간격 설정 | line-height | |
목록의 스타일 설정 | list-style | |
목록의 이미지 설정 | list-style-image | |
목록의 위치 형태 설정 | list-style-position | |
목록의 형태 설정 | list-style-type | |
모든 여백 설정 | margin | M |
맨 아래쪽 여백 설정 | margin-bottom | |
맨 왼쪽 여백 설정 | margin-left | |
맨 오른쪽 여백 설정 | margin-right | |
맨 위쪽 여백 설정 | margin-top | |
박스내의 간격 설정 | padding | P |
박스내의 아래쪽 간격 설정 | padding-bottom | |
박스내의 왼쪽 간격 설정 | padding-left | |
박스내의 오른쪽 간격 설정 | padding-right | |
박스내의 위쪽 간격 설정 | padding-top | |
수평 정열을 설정 | text-align | T |
텍스트의 효과 조절 | text-decoration | |
텍스트에서 첫번째 줄 들여쓰기 | text-indent | |
문자열의 변환 | text-transform | |
수직 정열을 설정 | vertical-align | V |
띄어쓰기 부분의 처리 | white-space | W |
Element(요소) 너비 설정 | width | |
단어들 사이의 간격 조절 | word-spacing |