'웹표준'에 해당되는 글 11건

  1. 2012/03/29 visualp css, hack , ie hack selector
  2. 2010/09/15 visualp jquery vaildator 사용방법
  3. 2010/04/18 visualp png24 배경 사용
  4. 2010/03/18 visualp PNG-24 사용 가이드
  5. 2009/07/17 visualp XML선언
  6. 2009/07/17 visualp 문서형 선언
  7. 2009/07/17 visualp 네임스페이스 , 언어코드 지정
  8. 2009/07/17 visualp title , 타이틀 지정
  9. 2009/07/17 visualp link 요소
  10. 2009/07/17 visualp 인라인요소(inline elements)

html5 - 숫자패드

웹표준 RSS Icon ATOM Icon 2016/12/01 11:08 visualp
<input type="number" pattern="[0-9]*" inputmode="numeric" placeholder="">
2016/12/01 11:08 2016/12/01 11:08
받은 트랙백이 없고, 댓글이 없습니다.

댓글+트랙백 RSS :: http://blog.visualp.com/rss/response/714

댓글+트랙백 ATOM :: http://blog.visualp.com/atom/response/714

css, hack , ie hack selector

웹표준 RSS Icon ATOM Icon 2012/03/29 13:51 visualp

Target ALL VERSIONS of IE

<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

Target everything EXCEPT IE

<!--[if !IE]><!-->
	<link rel="stylesheet" type="text/css" href="not-ie.css" />
 <!--<![endif]-->

Target IE 7 ONLY

<!--[if IE 7]>
	<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

Target IE 6 ONLY

<!--[if IE 6]>
	<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

Target IE 5 ONLY

<!--[if IE 5]>
	<link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->

Target IE 5.5 ONLY

<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->

Target IE 6 and LOWER

<!--[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]-->

Target IE 7 and LOWER

<!--[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]-->

Target IE 8 and LOWER

<!--[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]-->

Target IE 6 and HIGHER

<!--[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]-->

Target IE 7 and HIGHER

<!--[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]-->

Target IE 8 and HIGHER

<!--[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 CSS

Dealing 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;
}


2012/03/29 13:51 2012/03/29 13:51
받은 트랙백이 없고, 댓글이 없습니다.

댓글+트랙백 RSS :: http://blog.visualp.com/rss/response/470

댓글+트랙백 ATOM :: http://blog.visualp.com/atom/response/470

jquery vaildator 사용방법

웹표준 RSS Icon ATOM Icon 2010/09/15 10:24 visualp
[원문] : http://mytory.textcube.com/entry/jQuery-Form-Validation-Plugin-%ED%8F%BC-%EA%B2%80%EC%A6%9D-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-%EA%B0%84%EB%8B%A8-%EC%82%AC%EC%9A%A9%EB%B2%953



jQuery의 validation(검증) 플러그인이다. 일단 데모 페이지부터 보면 어떤 건지 알 수 있을 것이다.

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코드에 적어 주면 된다. 정리하면 다음과 같다.

  • 필수요소인 경우 class="required" 라고 쓴다.
  • email 검증을 해야 하는 경우 class="email"이라고 쓴다.
  • 필수이면서 이메일 검증을 해야 하는 경우에는 복수 클래스 병기하는 방법을 따라 class="required email" 이라고 적으면 되고 나머지도 마찬가지다.
  • 최소 글자수가 있는 경우 minlength="숫자" 형태로 적는다.

위와 같은 방법으로 했을 때의 최대 단점은 메시지가 영어로 나온다는 점이다. 필수 요소인데 안 적은 경우 '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 하단에 띄워 주는 스타일이다.

jQuery Validation Plugin API 문서

API 문서를 보는 건 항상 귀찮은 일이지만, 유용한 일이기도 하다.

내가 보기에 API 문서 중 핵심은 rules다.

다양한 옵션의 API가 나와있는 주소를 곧장 링크할 테니 참고해서 보기 바란다.

jQuery 검증 플러그인 API 문서 : validate 함수의 option 사용법

2010/09/15 10:24 2010/09/15 10:24
받은 트랙백이 없고, 댓글이 없습니다.

댓글+트랙백 RSS :: http://blog.visualp.com/rss/response/310

댓글+트랙백 ATOM :: http://blog.visualp.com/atom/response/310

png24 배경 사용

웹표준 RSS Icon ATOM Icon 2010/04/18 00:02 visualp

background: url(../images/asdf.png) no-repeat center top;
//CSS문서 위치를 중심으로 이미지 경로를 따질것

background
-image : none;
filter
: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/asdf.png',sizingMethod='scale');
//실제 읽어들이는 페이지를 중심으로 이미지 경로를 따질것

2010/04/18 00:02 2010/04/18 00:02
받은 트랙백이 없고, 댓글이 없습니다.

댓글+트랙백 RSS :: http://blog.visualp.com/rss/response/245

댓글+트랙백 ATOM :: http://blog.visualp.com/atom/response/245

PNG-24 사용 가이드

웹표준 RSS Icon ATOM Icon 2010/03/18 13:18 visualp
[원문] - http://hylaweb.net/guide/html/04_image/image03.php

PNG-24 사용 가이드

png 이미지를 사용시 ie6에서 배경이 회색으로 보이는 현상이 있습니다.
많이 알려진 htc 로는 no-repeat 이되서 배경을 원하는 위치에 두거나 반복적인 효과를 줄수없습니다.
iepngfix.htc와 iepngfix.js 를 이용해 ie6에서도 정상적이게 보일수있게 합니다.

첨부파일

출처 : http://www.twinhelix.com/css/iepngfix/ 새창

ie6 이하의 버전을 위한 핵이므로 css 는 따로 해주시는게 좋습니다.

샘플1. png 이미지를 <img>로 사용

코드뷰
<style type="text/css">
#sample01 {width:200px; height:100px; background:#333;}
.png24 {behavior:url(iepngfix/iepngfix.htc)}
</style>

<div id="sample01">
<img src="img/text.png" class="png24" alt="" />
</div>

샘플2. png 이미지를 배경으로 사용 (고정배경으로 사용시는 htc와 js 필요없이 filter를 쓰시면됩니다.)

코드뷰
<style type="text/css">
#sample02 {width:200px; height:100px; background:#ddd url(img/text.png) no-repeat;}
</style>
<!--[if lt ie 7]>
<style type="text/css">
#sample02 {background:#ddd; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/text.png', sizingMethod='crop');}
</style>
<![endif]-->

<div id="sample02">
</div>

샘플3. png 이미지를 배경으로 반복(repeat) 또는 위치지정

코드뷰
<script type="text/javascript" src="iepngfix/iepngfix.js"></script>

<style type="text/css">
#sample03 {width:200px; height:100px; background:#ddd url(img/text.png) repeat-y;}
</style>
<!--[if lt ie 7]>
<style type="text/css">
#sample03 {background:#ddd url(img/text.png) repeat-y; behavior:url(iepngfix/iepngfix.htc);}
</style>
<![endif]-->

<div id="sample03">
<img src="img/text.png" class="png24" alt="" />
</div>
2010/03/18 13:18 2010/03/18 13:18
받은 트랙백이 없고, 댓글이 없습니다.

댓글+트랙백 RSS :: http://blog.visualp.com/rss/response/225

댓글+트랙백 ATOM :: http://blog.visualp.com/atom/response/225

XML선언

웹표준 RSS Icon ATOM Icon 2009/07/17 19:11 visualp
XHTML은 XML어플리케이션의 한 종류이기 때문에 문서의 처음 부분에 XML선언을 기술한다ㅏ.

<?xml version="1.0" encoding="UTF-8"?>
<html>
     <head>
           문서의 기본정보
     </head>
     <body>
           문서의 본문
     </body>
</html>

버전 속송은 필수 속성이며 XHTML 버전이 아닌 xml 버전임으로 XHTML1.0 이든 XHTML1.1이든 상관없이 1.0 으로  지정한다.

한글이 깨질 경우 UTF-8  --> EUC-KR 지정 한다.
2009/07/17 19:11 2009/07/17 19:11
받은 트랙백이 없고, 댓글이 없습니다.

댓글+트랙백 RSS :: http://blog.visualp.com/rss/response/8

댓글+트랙백 ATOM :: http://blog.visualp.com/atom/response/8

문서형 선언

웹표준 RSS Icon ATOM Icon 2009/07/17 19:11 visualp
XHTML에는 여러 버전이 있음으로 이문서가 어떤 버전의 XHTML로 작성 되었다는 것을 명시 하기 위해서 xml 버전 선헌후 바로 문서형 선언을 하면 된다.

Xhtml에는 strict,Transitional, Frameset 이 있으며 각각 HTML4.01의 Strict, Transitional, Frameset을 이어 받는다. 그러나 XHTML 1.1버전에서 Transitional, Frameset 폐지 되고 Strict에 해당하는 것만 존재 함으로 Strict를 문서 형으로 선언 해야 한다.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
     <head>
           문서의 기본정보
     </head>
     <body>
           문서의 본문
     </body>
</html>


2009/07/17 19:11 2009/07/17 19:11
받은 트랙백이 없고, 댓글이 없습니다.

댓글+트랙백 RSS :: http://blog.visualp.com/rss/response/7

댓글+트랙백 ATOM :: http://blog.visualp.com/atom/response/7

네임스페이스는 xmlns 속성으로 지정 
XHTML에서는 "http://www.w3.org/1999/xhtml" 이 네임 스페이스로 부여 되어 있음

언어 코드는 xml:lang 속성으로 지정
한국어  : ko
영   어  : en
미   국  : en-us
프랑스  : fr
중   국  : zh

XHTML1.0에서는 하위 호환성을 고려하여 xml:lang 속성 같은 값을 지정 한다.
XHTML1.1에서는 lang속성을 인정하지 않기 때문에 xml:lang 속성만으로 문자코드를 지정한다.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko" >
     <head>
           문서의 기본정보
     </head>
     <body>
           문서의 본문
     </body>
</html>

2009/07/17 19:11 2009/07/17 19:11
받은 트랙백이 없고, 댓글이 없습니다.

댓글+트랙백 RSS :: http://blog.visualp.com/rss/response/6

댓글+트랙백 ATOM :: http://blog.visualp.com/atom/response/6

title , 타이틀 지정

웹표준 RSS Icon ATOM Icon 2009/07/17 19:11 visualp
XHTML 문서에서 타이틀은 반드시 한 번만 지정 해야 한다.
중복  지정은 인정 되지 않음.
타이틀 지정시 뜻살려서 시정
예 X) 3장
예 O) 3장 DML 사용 하기 - 실습

이페이지가 어떤 페이지 인지 나타낼 수 있도록 명확히 표시 하도록 하자.
 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko" >
     <head>
           <title>장 DML 사용 하기 - 실습</title>
     </head>
     <body>
           문서의 본문
     </body>
</html>

2009/07/17 19:11 2009/07/17 19:11
받은 트랙백이 없고, 댓글이 없습니다.

댓글+트랙백 RSS :: http://blog.visualp.com/rss/response/5

댓글+트랙백 ATOM :: http://blog.visualp.com/atom/response/5

link 요소

웹표준 RSS Icon ATOM Icon 2009/07/17 19:10 visualp

외부 스타일 시트 지정
<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" />

2009/07/17 19:10 2009/07/17 19:10
받은 트랙백이 없고, 댓글이 없습니다.

댓글+트랙백 RSS :: http://blog.visualp.com/rss/response/4

댓글+트랙백 ATOM :: http://blog.visualp.com/atom/response/4