'2010/10'에 해당되는 글 5건
- 2010.10.27 ie7 이하부터 셋팅이 잘못될 경우 한글인식이 안된다? 2
- 2010.10.21 티스토리앱으로 작성하기
- 2010.10.20 validation(검증) 플러그인
- 2010.10.15 [html5] 요소와 속성
- 2010.10.06 Drupal 설치 후기 - 오픈소스 웹 앱 인스톨 페어
홈페이지용 웹진을 하나 만들었다.
플래시는 오픈 소스를 사용하고 html과 css 등등을 작성해주고 반복해서 사용할수 있게...
내가 사용중인 브라우저에서는 잘 표현되고 (ie7, 크롬, 오페라, 사파리 -_-) 다른 직원 컴퓨터의 브라우저 (ie6)에서도 잘되길래 완성하고 거래처에 건네주었다.
여태껏 쓰던 웹진은 구형이라 현재 쓰기에는 오류도 많이 발생하고 해서 거래처 담당자분은 좋아라하셨다.
그리고 그쪽 서버에 올렸는데... 2달 정도 지난 오늘 전화가 왔다.
특정 컴퓨터에서 웹진을 띄우면 하얀 화면만 나온다는 것이다.
물론 난 다 테스트를 해봤기에 그럴일을 없을거라 했지만 일단 원인파악을 하기로 했다.
모든 브라우저에서 테스트를 해봤는데 아무런 문제가 없다.
혹시 로컬때문에 내 데이터를 읽어가서 나만 보이나 싶어서 iis 중지시켜도 잘보인다.
이유가 머지???
설마 또 ie 자체 버그인가?
그래서 IE TESTER로 모든 버전으로 돌려봤다.
그랬더니 5,6,7 버전에서 하얀 화면만 뜬다.... 망할...
소스보기로 보니
<html>
<head>qqljeqlrkjrqr(외계어)</head>
<body></body>
</html>
작성한 코드는 온데간데 없고 외계어만 자리잡고 있네.
한글 문제인가 싶어서 head안에 있는 한글 부분을 지우니 모든 화면이 정상적으로 보였다.
아니 한글 문제면 body안에 있는 한글은 왜 잘 표현되지?
이유는 간단했다.
<!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" lang="ko" xml:lang="ko">
<head>
<!-- 브라우저 타이틀 (주소바에 표시됨) -->
<title>타이틀</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
...........
기존 소스는 위와 같다.
head안에 한글이 먼저 나오고 그 다음에 문자설정이 나와서 그런것이었다.
ie7 이하 버전은 지들이 알아서 안해주나 보다...
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- 브라우저 타이틀 (주소바에 표시됨) -->
<title>타이틀</title>
기존 소스를 위와 같이 교체를 했다. 잘된다. 행복하면서 짜증난다. -_-;
'프로그래밍 > CSS/웹표준' 카테고리의 다른 글
| 테이블 내 tr에 display:none, display:block 주기 (0) | 2010.09.01 |
|---|---|
| ie6 frame 잔상이 생기는 현상 (0) | 2010.08.12 |
| HTML 버전별 DTD (0) | 2010.08.07 |
| float된 자식의 높이를 부모가 감싸안도록 만들기 (0) | 2010.07.08 |
| css로 완벽히 이미지 투명도 조절하기. (0) | 2010.03.06 |
itistory-photo-1폰으로 글 적기는 너무 힘드네...
오타의 천국이라니
근데 왜 위치를 제대로 못찾지
추석때 큰집에서 찍은떵개
iPhone 에서 작성된 글입니다.
'커뮤니티 > 자유게시판' 카테고리의 다른 글
| 와우 오리지널(오리지날)을 소개합니다 (0) | 2017.03.25 |
|---|---|
| 네이버 중고나라 자전거 사건 (5) | 2011.02.25 |
| 김제동 술어록 (0) | 2010.06.05 |
| 아미산 정ㅋ벅ㅋ (0) | 2010.05.02 |
| 애완로봇 게임 (0) | 2010.03.19 |
폼을 사용하다보면 유효성을 체크해야할 경우가 많다.
필수 입력란이 비어있지는 않은가, 숫자만 입력해야하는데 문자를 입력하지 않았는가 등등...
데이터베이스 처리 부분에는 asp로 제어를 하면 되지만 일단 폼에서 체크를 하기 위해 자바스크립트를 써야한다.
하지만 일일이 체크를 하려면 얼마나 귀찮을까...
jQuery 플러그인 중 좋은게 있어서 적어본다.
jquery.validation.js
위 이미지는 샘플페이지의 회원가입 폼이다.
자바스크립트 경고창을 띄우지 않으니 얼마나 좋은가.
물론 플러그인 자체내에서 경고창을 띄우게 옵션을 변경할 수도 있다.
HTML
<style type="text/css">
.relatived { position:relative }
input.invalid, textarea.invalid { border:1px dotted #ff0000 !important; }
label.invalid { position:absolute; left:20px; top:-20px; display:block; color:#747474; width:auto; font:11px/11px Dotum; text-align:left; line-height:11px; border:1px solid #FF8033; padding:5px; background:#ffffff; }
<style>
<form id="fo_insert_member" action="./" method="post">
<table cellspacing="0">
<tr>
<th><div>아이디</div></th>
<td class="wide">
<div class="relatived"><input type="text" name="user_id" value="" class="inputTypeText" id="user_id" /></div>
<p>사용자 ID는 3~20자 사이의 영문+숫자로 이루어져야 하며 영문으로 시작되어야 합니다.</p>
</td>
</tr>
<tr>
<th><div>비밀번호</div></th>
<td class="wide">
<div class="relatived"><input type="text" name="password" value="" class="inputTypeText" id="password" /></div>
<p>사용자 ID는 3~20자 사이의 영문+숫자로 이루어져야 하며 영문으로 시작되어야 합니다.</p>
</td>
</tr>
<tr>
<th><div>비밀번호 확인</div></th>
<td class="wide">
<div class="relatived"><input type="text" name="password2" value="" class="inputTypeText" id="password2" /></div>
<p>사용자 ID는 3~20자 사이의 영문+숫자로 이루어져야 하며 영문으로 시작되어야 합니다.</p>
</td>
</tr>
</table>
</form>
JS
var add_member_srl = "?member_srl=회원 번호";
var query_user_id = "아이디 체크할 경로";
var query_member = "폼 전송할 페이지";
$("#fo_insert_member").validate({
errorClass:"invalid",
rules: {
user_id: {
required:true, minlength:3, maxlength:20, remote:{ type: "post", url: query_user_id }
},
password: {
required:true, minlength:6, maxlength:20
},
password2: {
required:true, equalTo:"#password"
}
},
message: {
user_id: {
required: "사용자 ID를 입력해주세요.",
user_id: "사용자 ID는 영문+숫자로 이루어져야 하며 영문으로 시작되어야 합니다.",
remote: "사용할수 없는 아이디입니다."
},
password: {
required: "사용자 비밀번호를 입력해주세요.",
minlength: "비밀번호는 6자 이상 입력해주세요.",
maxlength: "비밀번호는 20자까지 입력 가능합니다."
},
password2: {
required: "비밀번호를 입력해주세요.",
equalTo: "비밀번호가 일치하지 않습니다."
},
},
submitHandler: function(form) {
$.post( query_member, $(form).serialize(),
function( data ) {
// 폼 전송후 할 행동
});
}
})
옵션
debug
기본값: false
디버그 할수 있도록 입력값이 유효해도 전송하지 않는다.
$(".test").validate({
debug: true
})submitHandler 폼이 submit 될때 마지막으로 먼가 할수 있도록 핸들을 넘겨준다.
'프로그래밍 > jquery' 카테고리의 다른 글
| jquery dom 객체 존재 여부 체크 (1) | 2010.09.10 |
|---|---|
| jQuery 기본 셀렉터 (0) | 2010.06.10 |
| [02] selector (0) | 2009.09.23 |
| [01] jQuery Core (0) | 2009.09.23 |
| [플러그인] 쿠키 (0) | 2009.09.23 |
1. 구조를 나타내는 요소
내가 처음 html을 접했을때는 table로 모든 구조를 만들었었다.
하지만 css를 접하고 부터는 div와 span을 이용하여 구조를 나타내고 table은 데이터를 표시할때만 사용을 했다.
html5에는 div를 포함해서 새로운 개념과 요소들이 추가되어 보다 구조적인 문서를 만드는 일이 가능해졌다.
section
문서나 어플리케이션의 섹션을 나타내는 section 요소가 추가되었다. 이 요소는 문서의 구조를 나타내기 위해 h1, h2, h3, h4, h5, h6 요소들과 같이 사용될 수 있다.
탭형식으로 되어 있는 콘텐츠의 각 탭에 section 요소를 쓸 수 있다. 만약 스타일링이나 스크립트를 위해서 감싸는 요소가 필요하다면 이론 용도로는 section을 사용해서는 안된다. 이러한 용도로는 문서 구조상으로 특별한 의미가 없는 div 요소를 사용해야 한다.
<article>
<hgroup>
<h1>Apples</h1>
<h2>Tasty, delicious fruit!</h2>
</hgroup>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<section>
<h1>Red Delicious</h1>
<p>These bright red apples are the most common found in manysupermarkets.</p>
</section>
<section>
<h1>Granny Smith</h1>
<p>These juicy, green apples make a great filling for applepies.</p>
</section>
</article>
하나의 섹션 안에서는 그 섹션이 전체 문서 구조에서 같는 단계와 상관
없이 h1 요소를 사용할 수 있다.
nav
네비게이션을 위해 구성된 섹션을 나타낸다.
페이지 않에 있는 모든 링크의 그룹이 nav 요소로 기술될 필요는 없다. nav 요소로는 그 페이지의 주요 네비게이션 링크들만 묶어주는 것이 좋다. 일반적으로 푸터에서 그 사이트의 주요 페이지로 이동하는 링크를 제공하는 경우가 많은데 이러한 링크는 푸터 안에 표시하는 것 만으로도 그 목적을 가늠할 수 있기 때문에 nav 요소를 사용할 필요는 없다.
그렇다고 한 페이지 안에서 nav 요소를 하나만 사용해야 하는 것은 아니다. 사이트 전반적인 이동을 위한 네비게이션과 페이지 전체를 이동하는 네베게이션이 있는 경우 각각을 nav 요소로 기술 할 수 있다.
article
문서내의 독립적인 글을 article로 표시할 수 있다. 블로그 글이나 뉴스 본문 등이 이에 해당한다.
article 요소 안에 article 요소가 들어갈 경우 안쪽의 article 요소는 밖의 article 요소의 내용과 관련이 있는 내용이라는 것을 의미한다. 예를 들어서 블로그의 글과 사용자가 작성한 댓글이 있는 경우 하나의 댓글은 안쪽 article로 기술하고 전체 블로그 글은 바깥쪽 article로 기술 할 수 있다.
aside
문서의 주 내용이 아닌 관련성이 낮은 내용들은 aside로 표시할 수 있다. 본문과 직접적으로 상관이 없는 관련 사이트 링크나 광고, nav 요소의 그룹 등이 aside 요소로 기술 될 수 있다.
hgroup
섹션의 제목을 나타낸다.
섹션의 제목이 여러 단계를 가지고 있을 때 이를 hgroup 요소로 기술할 수 있다. 문서의 구조를 나타낼 때에는 hgroup 안에 있는 가장 높은 레벨의 헤딩을 사용하고 나머지 요소들은 문서의 구조에서는 나타나지 않는다.
header
소개나 네비게이션 기능들의 묶음을 나타낸다.
header 요소는 보통 섹션의 제목(h1, h2, h3, h4, h5, h6)을 포함하지만 반드시 포함할 필요는 없다. 또한 header 요소는 목차나 검색창, 로고 등을 포함할 수도 있다.
header 요소는 섹션으로 간주되지 않는다. header 요소를 썼다고 문서 구조상 새로운 섹션이 생기지 않는다.
footer
섹션의 푸터를 나타내고 저자나 저작권 등을 포함할 수 있다.
footer 요소는 가장 가까운 선행하는 섹션의 푸터를 의미한다. 섹션의 저자나 관련 문서로의 링크, 저작권 정보 등을 나타낼 수 있다.
저자나 편집자의 연락처는 보통 footer 요소 안의 address 요소로 표현이 된다. 대부분의 푸터 정보는 섹션의 마지막에 위치하지만 반드시 마지막에 위치할 필요는 없다.
footer 요소도 header 요소와 마찬가지로 섹션으로 간주되지 않는다. footer 요소를 썼다고 문서 구조상 새로운 섹션이 생기지 않는다.
figure
그래픽이나 비디오를 위한 캡션을 표시할 수 있게 한다. figcaption 요소로 캡션을 표시한다.
본문에서 참조가 되지만 내용의 흐름에 크게 영향을 미치지 않는 일러스트, 다이어그램, 사진, 코드 등을 표시할 수 있다.
<figure>
<video src="ogg"></video>
<figcaption>Example</figcaption>
</figure>
2.헤딩과 섹션
h1, h2, h3, h4, h5, h6, hgroup 요소들은 헤딩을 의미한다.
섹셔닝 콘텐츠의 첫번째 헤딩 콘텐츠는 그 섹션의 헤딩을 의미한다. 그 이후의 같거나 더 높은 레벨의 헤딩은 새로운 섹션을 의미한다. 낮은 레벨의 섹션은 새로운 하위 섹션을 의미한다.
blockquote, body, details, fieldset, figure, td는 섹셔닝 루트(sectioning root) 요소들로, 이 요소들은 자기 자신만의 아웃라인을 가지고 상위 요소 문서의 아웃라인에 영향을 미치지 않는다.
<body>
<h1>Foo</h1>
<h2>Bar</h2>
<blockquote>
<h3>Bla</h3>
</blockquote>
<p>Baz</p>
<h2>Quux</h2>
<section>
<h3>Thud</h3>
</section>
<p>Grunt</p>
</body>
위와 같은 문서의 구조는 다음과 같다.
1. Foo (Grunt 문단을 가지고 있는 body 섹션의 헤딩)
1. Bar (Baz 문단과 blockquote 요소 포함한 섹션의 헤딩)
2. Quux (내용이 없고 헤딩만 있는 섹션의 헤딩)
3. Thud (section 요소로 표시된 섹션의 헤딩)
섹션 헤딩의 단계는 크게 상관없지만 되도록 h1 요소를 사용하거나 섹션구조에 맞는 단계의 헤딩을 사용할 것을 권장한다.
<body>
<h4>Apples</h4>
<p>Apples are fruit.</p>
<section>
<h2>Taste</h2>
<p>They taste lovely.</p>
<h6>Sweet</h6>
<p>Red apples are sweeter than green ones.</p>
<h1>Color</h1>
<p>Apples come in various colors.</p>
</section>
</body>
즉, 이렇게 헤딩의 단계가 순차적이지 않아도 유효한 구조적인 문서로 판단할 수 있다. 하지만 아래와같이 섹션을 명시적으로 지정해 주는 것이 더 좋다.
<body>
<h1>Apples</h1>
<p>Apples are fruit.</p>
<section>
<h2>Taste</h2>
<p>They taste lovely.</p>
<section>
<h3>Sweet</h3>
<p>Red apples are sweeter than green ones.</p>
</section>
</section>
<section>
<h2>Color</h2>
<p>Apples come in various colors.</p>
</section>
</body>
섹션을 구성하는 요소의 아웃라인은 포함된 섹션의 목록으로 이루어진다. 각각의 섹션은 하나의 헤딩을 포함할수 있고 다수의 다른 섹션을 포함할 수 있다.
<body
<h1>A</h1>
<p>B</p>
<h2>C</h2>
<p>D</p>
<h2>E</h2>
<p>F</p>
</body>
이렇게 구성된 마크업은 다음과 같은 아웃라인을 생성한다.
body 요소로부터 하나의 섹션이 만들어지고 이 섹션은 헤딩 A와 문단 B를 갖는다. 이 섹션은 다은 두개의 섹션을 포함한다. h2 요소로부터 하나의 섹션이 만들어지고 헤딩 C와 문단 D를 갖느다. 그 다음 h2 요소로부터 하나의 섹션이 또 만들어지고 헤딩 E와 문단 F를 갖는다.
3. 그밖의 요소
video, audio
비디오나 오디오 콘텐츠를 넣기위해 사용된다. 스크립트로 제어할 수 있게끔 스크립트 API가 제공된다. source 요소로 여러개의 미디어를 추가할 수 있다.
embed
플러그인 콘텐츠를 넣을 때 사용된다.
mark
중요 텍스트를 표기할 때 사용된다. 예를 들어 원 저자는 중요하다고 표현하지 않았지만 이 글을 따왔을 때 중요한 부분이 변경되거나 추가된다면 이 텍스트를 mark 요소로 표현할 수 있다.
progress
다운로드 상태바 처럼 작업의 진행상황을 나타낼 때 사용된다.
meter
분량이나 수량을 나타낼 때 사용된다.
time
날짜나 시간을 나타낼 때 사용된다.
ruby, rt, rp
일본어에서 한문에 음을 다는 것과 같은 루비 주석(ruby annotation)을 달 때 사용된다.
canvas
그래픽이나 게임과 같이 동적인 비트맵 이미지를 구현할 때 사용된다.
command
사용자가 행할 수 있는 명령 기능을 나타낼 때 사용된다.
details
사용자의 필요에 의해서 사용할 수 있게 제공되는 추가적인 정보나 기능을 나타낼 때 사용된다. summary 요소를 이용해서 요약, 제목, 캡션을 나타낼 수 있다.
<section class="progress window">
<h1>"Really Achieving Your Childhood Dreams" 복사중...</h1>
<details>
<summary>복사중...
<progress max="375505392" value="97543282"></progress> 25%
</summary>
<dl>
<dt>초당 전송량:</dt> <dd>452KB/s</dd>
<dt>복사할 파일명:</dt> <dd>/home/rpausch/raycd.m4v</dd>
<dt>대상 파일명:</dt> <dd>/var/www/lectures/raycd.m4v</dd>
<dt>걸린시간:</dt> <dd>01:16:27</dd>
<dt>컬러 프로파일:</dt> <dd>SD (6-1-6)</dd>
<dt>영상 크기:</dt> <dd>320×240</dd>
</dl>
</details>
</section>
datail 요소를 이용해서 상세한 내용을 사용자의 선택에 의해서 보이거나감출 수 있다.
datalist
미리 정의되어 있는 option의 묶음을 나타낸다. input의 list, datalist의 id로 서로 연결된다.
keygen
서버에 공개키를 보내고 로컬의 키 저장소에 개인키를 저장하는데 사용된다.
output
서식이나 스크립트를 통해 생성된 결과물을 나타낼 때 사용된다.
input
input 요소의 type 속성으로 다음과 같은 다양한 형식을 사용할 수 있게 되었다. tel, search, url, email, datatime, date, month, week, time, datetime-local, number, range, color. 이러한 속성을 사용해서 달력이나 컬러 픽커와 같은 기능을 브라우저에서 제공할 수 있다.
| 값 | 상태 | 데이터 타입 | 콘트롤 타입 |
|---|---|---|---|
| hidden | 감춰짐 | 임의의 문자열 | n/a |
| text search |
텍스트 검색 |
줄바꿈 없는 텍스트 줄바꿈 없는 텍스트 |
텍스트 필드 검색 필드 |
| tel | 전화번호 | 줄바꿈 없는 텍스트 | 텍스트 필드 |
| url |
URL 이메일 |
절대 IRI 이메일 주소나 이메일 주소 리스트 |
텍스트 필드 텍스트 필드 |
| password datetime |
비밀번호 날짜와 시각 |
줄바꿈 없는 텍스트 UTC 날짜와 시각 |
데이터 입력이 나타나지 않는 텍스트 필드 날짜와 시각 콘트롤 |
| date | 날짜 | 시간대 없는 날짜 | 날짜 콘트롤 |
| month week |
달 주 |
시간대 없는 년과 달 시간대 없는 주 번호 |
달 콘트롤 주 콘트롤 |
| time | 시각 | 시간대 없는 시각 | 시각 콘트롤 |
| datetimelocal | 로컬 날짜와 시간 | 시간대 없는 날짜와 시각 | 날짜와 시각 콘트롤 |
| number | 숫자 | 숫자 값 | 텍스트나 스피너 콘트롤 |
| range color |
범위 색 |
숫자 값이나 정확한 숫자가 필요없는 의미상의 값 8-bit 적녹청 sRGB 칼라 |
슬라이더 콘트롤 컬러 웰 |
| checkbox radio |
체크박스 라디오 버튼 |
이미 설정된 리스트 값의 0 또는 다른 값 지정된 값 |
체크박스 라디오 버튼 |
| file | 파일 입력창 | MIME type과 파일명이 있는 파일 목록 | 레이블과 버튼 |
| submit image |
전송 버튼 이미지 버튼 |
폼 서식을 전송하는 지정된 값 폼 서식을 전송하는 이미지 좌표 값 |
버튼 클릭 가능한 이미지나 버튼 |
| reset | 리셋 버튼 | 해당사항 없음 | 버튼 |
| button | 버튼 | 해당사항 없음 | 버튼 |
style, script
style 요소와 script 요소의 type 속성이 생략 가능해졌다. style 요소의 기본 type 값은 "text/css", script 요소의 기본 type 값은 "text/javascript"이기 때문에 둘 다 type 요소를 생략할 수 있게 되었다.
<style>
#myelement {
width: 100px;
}
</style>
<script>
function myfunction() {
return 'Hello world';
}
</script>
모든 내용은 html5 실전가이드에 담겨져 있는 내용이다.
괜히 블로그에 올리는거는방문자를 끌기위해서손수 타이핑을 하고 읽어봄으로써 좀더 기억에 남기기 위해서이다.
html5 실전가이드는 아래 첨부파일을 받던가 http://html5.creation.net/html5-guide.pdf 에서 받으면 된다.
관련 사이트 : 정찬명님의 블로그
html5-guide.pdf이번엔 Drupal을 설치한다.
저번 다스블로그도 그러했지만 이놈 역시 메뉴가 영문이다... 외산이라서...
한글 쩜 지원해주이소~
'프로그래밍 > 기타 등등' 카테고리의 다른 글
| 포토샵이나 일러 등 어도비 시리즈를 실행하다 copytype.dll 오류가 발생하는 경우 (0) | 2011.05.23 |
|---|---|
| ckeditor 편집기 (0) | 2011.01.18 |
| DasBlog 설치 후기 - 오픈소스 웹 앱 인스톨 페어 (3) | 2010.09.10 |
| 윈도우7에서 중요파일 삭제가 안될 경우(TrustedInstaller) (0) | 2010.05.27 |
| 용량이 큰 PDF파일을 줄여보자! (2) | 2010.02.04 |
