'분류 전체보기'에 해당되는 글 2265건
- 2009.07.15 oracle rownum 구현하기
- 2009.07.15 CSS hack 정리
- 2009.07.15 css 초기화
- 2009.07.15 컬러이미지를 흑백이미지로 바꾸기
- 2009.07.15 CSS 불투명/투명 테이블 만들기
- 2009.07.15 CSS img 태그 X 박스 처리
- 2009.07.14 split 비교(jsp, asp, php, javascript)
- 2009.07.14 alt와 title의 차이점 3
- 2009.07.14 PHP 문자열 함수 관련
- 2009.07.14 PHP POST, GET, SESSION, 배열 값, 기타 등등 모두 출력하기
[css-tip]CSS hack 정리
다양한 브라우저와 브라우저의 버그를 이용하여 특정 브라우저에만 css를 적용하는 것을 "CSS 핵"이라고 한다. 크로스브라우징을 위해 사용을 하고 있지만 사용하지 않고 구현하기를 권장한다.
css 핵은 사용하지 않는 것이 좋다.
새로운 브라우저가 생겼을 경우나 기존 브라우저의 버전 변경시 다시 손을 봐야 하는 경우가 생길 수도 있으며 css 문법상 올바르지 않는 것도 있을 수 있고 무엇보다 크로스브라우징, 웹 표준에 맞지 않아 올바른 CSS 라고 볼 수가 없다.
스타핵 (star hack)
셀렉트 앞에 * 을 붙히며 Win IE 4~7 에만 적용(IE8, FF에는 적용 안됨)
예> P { padding:3px; *padding:0px; } /* IE8, FF는 padding:3px, IE4~7는 padding:0px 적용 */
셀렉트 앞에 *html 을 붙히며 Win IE 4~6, Mac IE 4~5 에만 적용
예> * html p { padding:3px; } /* 맨앞에 *html 을 붙힌다. */
속성의 가장 앞부분에 언더스코어(_)를 붙이며 Win IE 4~6에만 적용
예> p { _padding:3px; } /* padding 앞에 _ 를 붙힌다. */해시 핵 (hash hack)
속성의 앞에 # 를 붙이며 Win IE 4~6, Mac IE 5, Opera 7, Mozila, Firefox 적용(CSS의 문법상 속성의 앞에 #를 두는 것은 문법적으로 바르지 않다.)
예> p { #padding:3px; } /* padding(속성) 앞에 #를 붙힌다. */
스타 7 핵 (star 7 hack)
셀렉트 앞에 html* 를 붙이며 Win IE 5.5~6, Map IE 5, Safari 에만 적용(html* 과 선택자 사이에 공백을 두면 안된다.)예> html*p { padding:3px; }IE7 전용핵
셀렉트 앞에 *:first-child+html 를 붙히며, IE 7에만 적용예> *:first-child+html p { padding:3px; }사파리용 핵
body:first-of-type
예> body:first-of-type #wrap이밖에도 브라우저 배제를 위한 핵과 박스모델 핵 패스필터 등이 있다.소스 예>style="text-align:left;padding-left:5px;*padding-left:7px;_padding-left:0px;"소스 예 설명> 위 소스 중 padding 부분[ff,ie8]padding-left:5px;[ie7]*padding-left:7px;[ie6]_padding-left:0px;[css-tip]css 초기화
초기화를 하지 않는 경우 브라우저마다 버전마다 기본으로 지정되어있는 css를 사용하게되어 크로스브라우징을 구현하는데 문제가 된다.
초기화를 하게 되면 모든 브라우저에서 다 공통으로 지정이되므로 크로스브라우징을 구현함에 있어서 권장한다.
아래 에를 참고로 본인이 원하는 css 초기화를 구현할 수 있다.
예> * 는 전체를 뜻한다.
/* css 초기화 */
*{
margin:0; /* margin 여백 : 0 */ padding:0; /* padding 여백 : 0 */ border:0; /* 선 굵기 : 0 */ background-color:transparent; /* 배경색상 투명 */ color:#666; /* 색상 */ font-size:100%; /* 폰트 크기 */ font-weight:normal; /* 폰트 굴기 */ font-style:normal; /* 폰트 모양 */ text-decoration:none; /* 폰트 장식 */}[css-tip]컬러이미지를 흑백이미지로 바꾸기
img 태그 속성에 style="filter:gray(enabled=1)" 삽입한다.
예>
<img src="http://www.twar.co.kr/images/text_board/sample_s5.gif"
style="filter:gray(enabled=1)" />
[css-tip]CSS 불투명/투명 테이블 만들기
<html>
<head>
<title>[css-tip]불투명/투명 테이블 만들기</title>
<style type="text/css">
<!--
-->
</style>
<script language="JavaScript">
<!--
//-->
</script>
</head>
<body>
<h1>불투명/투명 테이블 만들기</h1>
<table style="filter:alpha(opacity=50)">
<tr>
<td>sdfsd</td>
</tr>
</table>
</body>
</html>
[css-tip]CSS img 태그 X 박스 처리
img 태그 사용시 경로에 해당 이미지가 없거나 불러오지 못하는 경우 표시되는 X 모양의 상자(이하 엑박)를 일명 엑스박스 또는 엑박이라고들 말을 하기도 한다.
<img src="이미지 경로" style="WIDTH: 67px; HEIGHT: 63px" />
이러한 엑박을 다른 형태로 처리할 수 있다.
onerror
<img src="이미지 경로" style="WIDTH: 67px; HEIGHT: 63px" onerror="this.src='이미지를 못 불러오면 표시할 이미지'" />
<html>
<head>
<title>[css-tip]img 태그 X 박스 처리</title>
<style type="text/css">
<!--
-->
</style>
<script language="javascript">
<!--
//-->
</script>
</head>
<body>
<h1>img 태그 X 박스 처리</h1>
<img src="" width="60" height="60" title="기본사진"
onError="this.src='http://www.twar.co.kr/images/0/event/banner02.png" />
</body>
</html>
split 비교(jsp, asp, php, javascript)
String[] arr = str.split("_");
//결과 arr[0] = "as", arr[1] = "bd", arr[2] = "cd", arr[3] = "dd"
arr = str.split("_", 2);
//결과 arr[0] = "as", arr[1] = "bd_cd_dd"
[PHP]
$arr = split("_",$str);
//결과 arr[0] = "as", arr[1] = "bd", arr[2] = "cd", arr[3] = "dd"
$arr = split("_",$str,2);
//결과 arr[0] = "as", arr[1] = "bd_cd_dd"
//PHP는 구분자에게 패턴을 줄수도 있다 "[_, -]" 이런식으로
[ASP]
Dim arr : arr = Split(str)
'결과 arr(1) = "as_bd_cd_dd" arr(2) = "ee"
arr = Split(str, "_")
'결과 arr(1) = "as", arr(2) = "bd", arr(3) = "cd", arr(4) = "dd ee"
arr = Split(str, "_", 2)
'결과 arr(1) = "as", arr(2) = "bd_cd_dd ee"
' "0"과 "1"만 사용 할 수 있다. "0" 바이너리 비교 "1" 텍스트 비교
arr = Split(str, "_", 2, "0")
'결과 arr(1) = "as", arr(2) = "bd_cd_dd ee"
[javascript]
var arr= str.split("_");
//결과 arr[0] = "as", arr[1] = "bd", arr[2] = "cd", arr[3] = "dd"
arr= str.split("_",2);
alt와 title의 차이점
1. alt(alternative) : 이미지의 대안, 이미지에 대한 설명
① 인터넷 속도, 또는 컴퓨터 사양 문제로 웹브라우저 설정을 '이미지 출력 안 함'으로 한 사용자에게 이미지에 대한 간략한 설명을 볼 수 있음. (데스크탑이 아닌 모바일기기로 접속시에도 유용함.)
② 시각장애인의 웹서핑시 사용하는 리더(reader) 프로그램이 텍스트는 읽어주나, 이미지는 읽을 수 없으므로 alt태그 안의 설명을 읽어줌.
③ 일반인 웹서핑시 인터넷 접속 등의 문제로 해당 이미지를 불러오지 못했을 때, 배꼽과 함께 이미지 설명을 보여줌.
2. title : 이미지 위에 마우스 포인터를 올려 놓았을 때 풍선 도움말처럼 뜨게 함.
① 이미지뿐 아니라, a태그, span태그, td태그 등 거의 대부분의 태그에 사용할 수 있고, '클릭하시면 다음 사진으로 바뀝니다.' 등의 간단한 풍선도움말 형식을 사용할 수 있음. 특히 웹표준에서는 a태그에 title 속성은 필수항목임. 링크주소에 대한 설명을 넣어, 링크주소에도 의미를 부여할 수 있음.
② 터치스크린 모바일기기에서 웹브라우징시에는 a링크 또는 이미지에 마우스 포인터를 올려놓을 수 없으므로, 한 번 터치시 title내용을 보여주고, 두 번 터치시 해당 링크로 접속이 됨.
③ 일반적인 게시판 리스트 페이지에서 게시물 제목을 일정 길이로 잘랐을 때, title속성에 전체 제목을 넣어주면, 해당 게시물을 클릭할 필요 없이 마우스 오버만으로 전체 제목을 볼 수 있음.
IE에서 alt속성의 내용을 마우스 오버시 보여줌으로 인해 alt와 title의 구별에 혼동을 주곤 하지만, alt와 title은 용도와 기능 면에서 확실히 다른 속성이다.
[php-함수]PHP 문자열 함수 관련
strlen() : 문자열 길이 리턴
<?
$char="php_sample";
echo strlen($char);
?>
addslashes() : 문자열에 포함된 [작은따옴표], [큰따옴표], [역슬래시]에 해당
하는 문자가 있을 경우 그 앞에 역슬래시 문자를 추가 후 리턴
<?
$char="php_'sample";
echo addslashes($char);
echo "<br>";
$char="php_\sample";
echo addslashes($char);
?>
stripslashes() : 문자열에 [역슬래시]가 있을때 역슬래시를 제거 후 리턴
<?
$char="php_\'sample";
echo stripslashes($char);
?>
nl2br() : '\n' 문자를 <br>로 바꾼 후 리턴
<?
$char="member \n blog";
echo nl2br($char);
echo "<br>";
?>
number_format() : 문자열의 값을 금액 단위의 문자로 리턴
<?
$char=1234;
echo number_format($char); //1,234
echo "<br>";
$char="";
echo number_format($char); //0
echo "<br>";
$char=1234;
echo number_format($char,2); //1,234.00
?>
substr() : 문자열의 일부를 옵션에 맞게 리턴
<?
$char1=substr("abcdef", 0); //abcdef
$char2=substr("abcdef", 1); //bcdef
$char3=substr("abcdef", -1); //f
$char4=substr("abcdef", 0, 3); //abc
$char5=substr("abcdef", 2, 3); //cde
echo "$char1 <br> $char2 <br> $char3 <br> $char4 <br> $char5";
?>
strrchr() : 해당 문자열의 선택된 문자부터 마지막 문자까지 리턴
<?
$char1=strrchr("php_sample", "s"); //sample
$char2=strrchr("php_sample", "p"); //ple
$char3=strrchr("image.gif", "."); //.gif
echo "$char1 <br> $char2 <br> $char3";
?>
rand() : 정수형 임의의 값 리턴
<?
$char1=rand();
$char2=rand(0,5);
$char3=rand(1,100);
echo "$char1 <br> $char2 <br> $char3";
?>
uniqid() : 마이크로타임에 기반하여 중복되지 않는 고유한 값 리턴
<?
$char1=uniqid(2);
$char2=uniqid(2);
$char3=uniqid(rand());
echo "$char1 <br> $char2 <br> $char3";
?>
md5() : 중복되지 않는 고유값 리턴
(16진수 32문자 -> 고정된 크기의 값을 구할 수 있다)
<?
$char1=md5(2);
$char2=md5(rand());
$char3=md5(uniqid(rand()));
echo "$char1 <br> $char2 <br> $char3 <br>";
?>
htmlspecialchars() : 저장되는 문자열이 html로 적용되지 않도록 한다
<?
$char1="<";
$char2=">";
$char3="&";
echo htmlspecialchars($char1); //<
echo "<br>";
echo htmlspecialchars($char2); //>
echo "<br>";
echo htmlspecialchars($char3); //&
?>
chop() : 문자열의 마지막 부분 공백을 지운 후 리턴
<?
$char1="php_sample ";
$char2="테스트";
$char3=" php_sample";
echo chop($char1);
echo chop($char2);
echo chop($char3);
?>
[php-tip]PHP POST, GET, SESSION, 배열 값, 기타 등등 모두 출력하기
<?
// 테스트용 데이터 생성
$_POST['1']="가";
$_POST['2']="나";
$_POST['3']="다";
$_POST['4']="마";
$_GET['1']="가";
$_GET['2']="나";
$_GET['3']="다";
$_GET['4']="마";
$_SESSION['1']="가";
$_SESSION['2']="나";
$_SESSION['3']="다";
$_SESSION['4']="마";
$ary = array("1","2","3");
?>
<?
# POST 값을 모두 출력하기
// foreach()을 이용하는 방법
foreach($_POST as $key => $value)
{
echo "$key ==> $value <br>";
}
echo "<br><br>";
// var_dump()을 이용하는 방법
var_dump($_POST);
echo "<br><br>";
// print_r()을 이용하는 방법
print_r($_POST);
?>
<?
# GET 값을 모두 출력하기
// foreach()을 이용하는 방법
foreach($_GET as $key => $value)
{
echo "$key ==> $value <br>";
}
echo "<br><br>";
// var_dump()을 이용하는 방법
var_dump($_GET);
echo "<br><br>";
// print_r()을 이용하는 방법
print_r($_GET);
?>
<?
# SESSION 값을 모두 출력하기
// foreach()을 이용하는 방법
foreach($_SESSION as $key => $value)
{
echo "$key ==> $value <br>";
}
?>
<?
# 배열 값을 모두 출력하기
// foreach()을 이용하는 방법
foreach($ary as $key => $value)
{
echo "$key ==> $value <br>";
}
echo "<br><br>";
// var_dump()을 이용하는 방법
var_dump($ary);
echo "<br><br>";
// print_r()을 이용하는 방법
print_r($ary);
?>
