blog.visualp.com
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->
<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
<!--[if gt IE 5.5]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->
<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->
<!--[if gt IE 6]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->
<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->
<!--[if gt IE 7]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->
<!--[if gte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->
Universal IE 6 CSSDealing with IE 6 and below is
always an extra-special challenge. These days people are dropping support for it
right and left, including major businesses, major web apps, and even
governments. There is a better solution than just letting the site go to hell,
and that is to server IE 6 and below a special stripped-down stylesheet, and
then serve IE 7 and above (and all other browsers) the regular CSS. This is been
coined the universal IE 6 CSS.
<!--[if !IE 6]><!-->
<link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" />
<!--<![endif]-->
<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" />
<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" media="screen, projection" href="http://universal-ie6-css.googlecode.com/files/ie6.0.3.css" />
<![endif]-->
Hacks
If you must...
IE-6 ONLY
* html #div {
height: 300px;
}
IE-7 ONLY
*+html #div {
height: 300px;
}
IE-8 ONLY
#div {
height: 300px\0/;
}
IE-7 & IE-8
#div {
height: 300px\9;
}
NON IE-7 ONLY:
#div {
_height: 300px;
}
Hide from IE 6 and LOWER:
#div {
height/**/: 300px;
}
html > body #div {
height: 300px;
}
jQuery의 validation(검증) 플러그인이다. 일단 데모 페이지부터 보면 어떤 건지 알 수 있을 것이다.
사용법은 사실 데모 페이지 긁어와서 이름만 고치는 정도로도 알 수 있을 텐데, 몇 가지 써 보자.
두 가지 방법으로 사용할 수 있다. 첫 번째는 심플한 방법이다.
이 방법은 위 데모 페이지에서 위쪽에 있는 예시에 사용된 방법이다.
△이 첫 번째 방법은 javascript 코드가 간단하다는 장점이 있는 반면, 메시지가 영어로 나오고, html 코드에 들어갈 게 많아진다는 단점이 있다. 비표준 어트리뷰트가 사용된다는 점도 단점이다.
1.
$(
function
(){
2.
// submit 시켰을 때 #form을 검증합니다.
3.
$(
"#form"
).validate();
4.
});
javascript 코드에는 위와 같이 쓰고(물론 jquery.js를 위 코드 전에 호출해야 하는 건 당연하다.) html에는 이렇게 적는 것이다.
01.
<
form
id
=
"form"
method
=
"get"
action
=
""
>
02.
<
fieldset
>
03.
<
legend
>잘 적어 주세요</
legend
>
04.
<
p
>
05.
<
label
for
=
"cname"
>이름 (필수, 최소 2글자)</
label
>
06.
<
input
id
=
"cname"
name
=
"name"
class
=
"required"
minlength
=
"2"
/>
07.
<
p
>
08.
<
label
for
=
"cemail"
>E-Mail (필수)</
label
>
09.
<
input
id
=
"cemail"
name
=
"email"
class
=
"required email"
/>
10.
</
p
>
11.
<
p
>
12.
<
label
for
=
"curl"
>URL (선택)</
label
>
13.
<
input
id
=
"curl"
name
=
"url"
class
=
"url"
value
=
""
/>
14.
</
p
>
15.
<
p
>
16.
<
label
for
=
"ccomment"
>남기실 말씀 (필수)</
label
>
17.
<
textarea
id
=
"ccomment"
name
=
"comment"
class
=
"required"
></
textarea
>
18.
</
p
>
19.
<
p
>
20.
<
input
class
=
"submit"
type
=
"submit"
value
=
"Submit"
/>
21.
</
p
>
22.
</
fieldset
>
23.
</
form
>
위 코드에서 볼 수 있는 것처럼, html코드에 적어 주면 된다. 정리하면 다음과 같다.
위와 같은 방법으로 했을 때의 최대 단점은 메시지가 영어로 나온다는 점이다. 필수 요소인데 안 적은 경우 'This field is required.'라는 메세지가 뜬다. 메세지를 한국어로 하고 싶다면 두 번째 방법을 사용하라.
다른 단점도 있다. minlength 라는 어트리뷰트는 웹표준 검증기를 통과하지 못한다. 표준 점수를 깎아먹을 수 있다는 것이다. 그게 사용성보다 중요한 요소는 아니지만, 웹을 잘 모르는 상관들에게는 중요할지 모른다.
이 방법은 모든 요소를 javascript 단에서 처리하기 때문에 가장 깔끔한 코드를 생산할 수 있다.
일단 코드를 보자.
01.
$(
function
(){
02.
// validate signup form on keyup and submit
03.
$(
"#signupForm"
).validate({
04.
rules: {
05.
name:
"required"
,
06.
password: {
07.
required:
true
,
08.
minlength: 8
09.
},
10.
confirm_password: {
11.
required:
true
,
12.
minlength: 8,
13.
equalTo:
"#password"
14.
},
15.
email: {
16.
required:
true
,
17.
email:
true
18.
},
19.
topic: {
20.
required:
"#newsletter:checked"
,
21.
minlength: 2
22.
},
23.
agree:
"required"
24.
},
25.
messages: {
26.
name:
"이름을 입력해 주세요"
,
27.
password: {
28.
required:
"암호를 입력해 주세요"
,
29.
minlength:
"암호는 8자 이상이어야 합니다."
30.
},
31.
confirm_password: {
32.
required:
"암호를 한 번 더 입력해 주세요"
,
33.
minlength:
"암호는 8자 이상이어야 합니다."
,
34.
equalTo:
"암호가 일치하지 않습니다."
35.
},
36.
email:
"형식에 맞는 이메일을 입력해 주세요."
,
37.
agree:
"정책 동의에 체크해 주세요"
38.
}
39.
});
40.
});
위에서 눈여겨 볼 점은 validate 안에 들어있는 {} 안쪽 부분이다. 여기 옵션이 들어간다.
이 옵션 중 핵심적으로 사용된 것인 rules 옵션이다.
1.
rules: {옵션오브젝트}
이런 형식으로 사용된다. 옵션 오브젝트는 어떻게 구성되는지 보자.
1.
{name:
"required"
}
이렇게 씌인 게 있다. 이것은 name이 "name"인 놈은 필수라는 뜻이다. 다른 방식으로 적용할 수도 있는데 한 input(혹은 textarea)에 여러 개의 옵션을 걸 때다.
1.
email: {required:
true
, email:
true
}
이런 식으로 들어가는데, 이 때 email: true 항목은 당연히 이메일형식 검증을 하겠다는 뜻이다.
rules 옵션 아래쪽에 있는 message 옵션은 rules에 대응되는 메시지들을 적어주면 된다. 위 형식을 참고하면 될 것이므로 굳이 일일이 설명하지 않겠다.
다음 html 코드를 보자.
01.
<
form
id
=
"signupForm"
method
=
"get"
action
=
""
>
02.
<
fieldset
>
03.
<
legend
>정보를 입력해 주세요</
legend
>
04.
<
p
>
05.
<
label
for
=
"name"
>Lastname</
label
>
06.
<
input
id
=
"name"
name
=
"name"
/>
07.
</
p
>
08.
<
p
>
09.
<
label
for
=
"password"
>암호</
label
>
10.
<
input
id
=
"password"
name
=
"password"
type
=
"password"
/>
11.
</
p
>
12.
<
p
>
13.
<
label
for
=
"confirm_password"
>암호확인</
label
>
14.
<
input
id
=
"confirm_password"
name
=
"confirm_password"
type
=
"password"
/>
15.
</
p
>
16.
<
p
>
17.
<
label
for
=
"email"
>Email</
label
>
18.
<
input
id
=
"email"
name
=
"email"
/>
19.
</
p
>
20.
<
p
>
21.
<
label
for
=
"agree"
>개인정보 보호정책 동의</
label
>
22.
<
input
type
=
"checkbox"
class
=
"checkbox"
id
=
"agree"
name
=
"agree"
/>
23.
</
p
>
24.
<
p
>
25.
<
input
class
=
"submit"
type
=
"submit"
value
=
"제출"
/>
26.
</
p
>
27.
</
fieldset
>
28.
</
form
>
위 코드는 html 검증을 통과할 수 있는 깔끔한 코드다. label에 있는 for 어트리뷰트는 웹표준에 맞는 어트리뷰트다. 이 라벨이 어떤 인풋에 대한 것인지, 해당 인풋의 id를 써 주는 부분이다.
그러나 jQuery 검증 플러그인의 자바스크립트 코드에서 위 폼을 인식할 때는 name 어트리뷰트를 기준으로 하는 것이므로, name을 신경쓰면 된다. 즉, label은 선택이니 너무 눈 돌아가지 않아도 된다는 말이다.
name을 바탕으로 하므로 checkbox나 radio 같은 것도 검증이 가능하게 된다.
자, 그럼 required 라고 써준 input에 입력을 안 하고 submit 버튼을 눌렀을 때(이 경우를 '에러가 났을 때'라고 표현하자.) 나올 스타일은 어디서 결정할까?
그건 따로 써줘야 한다. 미리 준비된 css는 제공하고 있지 않은 듯하다.
사용되는 페이지의 head 부분에 아래처럼 써 주면 된다.
두 경우를 제공하겠다. 첫 번째 것은 메시지가 input의 오른쪽에 나오는 디자인이다. 두 번째 것은 메시지가 input의 하단에 나오는 디자인이다. 둘 다 input의 테두리가 빨간 점선으로 변하고, 메시지도 빨간 색으로 뜬다. css 지식이 조금만 있다면 수정해서 자신이 원하는대로 사용할 수 있을 것이다.
01.
<style type=
"text/css"
>
02.
input.error, textarea.error{
03.
border
:
1px
dashed
red
;
04.
}
05.
label.error{
06.
margin-left
:
10px
;
07.
color
:
red
;
08.
}
09.
</style>
위 스타일이 에러메시지를 input 오른쪽 공간에 띄워 주는 스타일이다.
01.
<style type=
"text/css"
>
02.
input.error, textarea.error{
03.
border
:
1px
dashed
red
;
04.
}
05.
label.error{
06.
display
:
block
;
07.
color
:
red
;
08.
}
09.
</style>
이 스타일은 에러메시지를 input 하단에 띄워 주는 스타일이다.
API 문서를 보는 건 항상 귀찮은 일이지만, 유용한 일이기도 하다.
내가 보기에 API 문서 중 핵심은 rules다.
다양한 옵션의 API가 나와있는 주소를 곧장 링크할 테니 참고해서 보기 바란다.
background: url(../images/asdf.png) no-repeat center top;
//CSS문서 위치를 중심으로 이미지 경로를 따질것
background-image : none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/asdf.png',sizingMethod='scale');
//실제 읽어들이는 페이지를 중심으로 이미지 경로를 따질것
[출처] IE6 PNG background없애기|작성자 스파이크
png 이미지를 사용시 ie6에서 배경이 회색으로 보이는 현상이 있습니다.
많이 알려진 htc 로는 no-repeat 이되서 배경을 원하는 위치에 두거나 반복적인 효과를 줄수없습니다.
iepngfix.htc와 iepngfix.js 를 이용해 ie6에서도 정상적이게 보일수있게 합니다.
출처 : http://www.twinhelix.com/css/iepngfix/
- blank.gif - 49Byte
- iepngfix.htc - 5.1KB
- iepngfix.js - 4.2KB
ie6 이하의 버전을 위한 핵이므로 css 는 따로 해주시는게 좋습니다.
외부 스타일 시트 지정
<link rel="stylesheet" type="text/css" media="screen" href="./css/default.css" />
<link rel="stylesheet" type="text/css" media="print" href="./css/print.css" />
작성자 지정 - 주로 이메일 지정시 사용
<link rev="made" href=mailto:rhqudaks@nate.com" />