영삼넷IT 강국 = 김영삼 블로그에 오신걸 환영합니다.

1. h1~h6 제목태그 [Heading] 

• 중요한 부분 부터 h1~h6
• 블록요소

     <h1></h1>

 

2. p 문단태그[paragraph]

• 블록요소 , 자동줄바꿈
• 이미지에도 사용?

<p></p> 

 

3. <br/> 강제 줄바꿈 태그  

• **꼭 닫는태그 슬러시 해줘야한다.

 

4. img 태그 

• IE기준으로 태그안에 width/height 값넣어줘야한다. 꼭! 
• width height 자체를 생략 가능하다.

<img src="" width="" height="" alt=""/>

 

5. ul 순서가 없는 목록 [Order list] 

• 중요 순서 상관 없는 목록 (날짜별...그냥 무작위 순서)
• 리스트의 앞에 붙는 아이콘 모양은 변경 가능하다.

<ul>

<li></li>

<li></li>

</ul>

 

6. dl 용어 정의 목록 [Definition list]

• 선물을 검색시 나오는 정의 내용
• dt(선물), dd(설명)

<dl class="">

<dt></dt>

<dd></dd>

</dl>

 

7. strong 강한강조태그 [Stronger emphasis]

• *문맥상의 중요성 을 표현*
• 굵게 표현
• 스크린리더기가 크게 읽는다.

<strong></strong>

 

8. em 태그 강조태그 [emphasis]

• *문맥상 강조할 부분 표현*
• 기울임체로 표현

<em></em>

 

9. i태그 b태그 보여지는 부분에만 있어서 표현 

• i : 기울임체
• b : 굵게 표현 
• 크로스브라우징 지원X 

 

10. hr 구분선태그 

• header/container/footer 사이에 구분 하여 레이아웃 작업시 유용

<hr/> *닫는 슬러시 꼭! 

 

11. a 링크 태그 

• target 속성 : _blank/_self/_parent/_top (새창/현재창/이전에연창/제일처음연창)

<a href="#" title="" target=""></a>

 

12. iframe 

• * title을 꼭 달아야 한다 * = 각 프레임의 구분할 수 있는 타이틀을 입력 해 준다.
• 홈페이지 사용자들이 이해할 수 있는 유의미한 제목을 반드시 제공 해 주어야 한다.
• name은 나중에 문서를 불러올 위치(target)을 지정하는 것으로 frame_left 등과 같이 띄어쓰기 없는 영문및숫자 문자열로 지정한다.
• title 은 사용자가 프레임들을 구분하기 쉽도록 안내해주는 것으로 '좌측 메뉴 프레임'과 같이 이해하기 쉬운말로 작성한다.

<iframe src="" frameborder="0" scrolling="" width="" height="" name="" title="" marginwidth="0" marginheight="0 "cols="" rows=""></iframe>

scrolling = "yes","no","auto"

 

13. address 주소 태그 

• 오직 주소만 쓴다.
• 기울임체로 표현

<address></address>

 

14. div [division] 분할태그 블록영역지정

• 블록단위

<div class=""></div>

 

15. span 태그

• 인라인 단위

<span></span>

  

16. table 관련 태그 

• 게시판 작업 시 사용
• th만 센터정렬 

<table border="0" cellpadding="0" cellspacing="0" summary="">//summary:테이블요약

<caption>테이블제목</caption>

<colgroup>

<col width=""/>

</colgroup>

<thead>//머릿글정보

<tr>

<th scope="">제목</th>//scope = "col row rowgroup colgroup" 

</tr>

</thead>

<tfoot>//꼬릿말정보

<tr>

<td colspan=""></td> // colspan:가로(열병합), rowspan:세로(행병합)

</tr>

</tfoot>

<tbody>//내용정보

<tr>

<td></td> // headers = "" 병합된 테이블에서 제목과 셀의 연관성 있는 관계를 지정.

</tr>

</tbody>

</table>

 

17. form 입력양식

• 아이디,회원가입,선택목록 선택 후 바로가기 가 X, Go와같은 버튼을 클릭시 갈 수 있도록.
• method=전송방식(get,post)
• action="실행프로그램"
• name="form의이름"

<form method="post" action="">

<fieldset>// 복수의 폼컨트롤을 그룹화 하기위해서 사용

<legend></legend>// fieldset의제목

<input type="text" name="" value="" title="" maxlength=""/> //텍스트 입력

<input type="password" name="" title=""/> //비밀번호 입력

<input type="button" name="" title="" action=""/> //버튼 action="reset, submit"

<input type="image" src="" name="" alt="" title=""/> //이미지 버튼

<input type="file" name="" title=""/> //파일찾기 

<input type="checkbox" name="" title=""/> //다중선택 박스

<input type="radio" name="" title=""/> //선택

<input type="hidden" name="" title=""/> //사용자에게 보여줄 필요가 없는 값을 처리 페이지에 넘겨줘야 할 때 사용

<textarea name="" cols="" rows="" title=""></textarea> //긴글 입력

<select name="" title=""> //선택메뉴

<optgroup label=""> // option 그룹이 길때 관련정보를 묶어준다.

<option value="" selected="selected"></option>

<option value=""></option>

</optgroup>

</select>

</fieldset>

</form>

 

18. label 태그 

• form요소의 접근성향상
• id와 for 값이 동일 해야함

<label for=""></label><input type="text" name="" title="" id=""/>

 

19. dfn 정의태그

• 이택릭체로 효현

<dfn></dfn>

 

20. code 코드출력

• 인라인요소
• 컴퓨터나 프로그래밍 코드 일부를 그대로 표시하고자 할때

<code></code>

 

21. samp 결과출력

• 컴퓨터 프로그램에서 샘플을 출력할때 

<samp></samp>

 

22. Kbd / var 값의표시

• Kbd : 유저키보드 입력 즉 키보드 입력을 지정할때 .. ctrl...
• var : 변수입력 시

<Kbd></Kbd> <var></var>

 

23. cite 인용출저

• 주로 작품명 그림이름 책이름 영화이름 등등을 표시하거나 인용할 때 쓴다.

<cite></cite>

 

24. abbr / acronym 축약태그

• abbr : 6브라우저 에서는 title 을 지원해 주지않는다. 지원하려면 span태그로 값싼 후 스판테그에 title 적용 <span><abbr></abbr></span>
• ‘abbreviation’의 예로는 ‘NATO’, ‘F.B.I.’ 등이 있고 ‘acronym’의 예는 ‘Inc’, ‘etc’ 등이 있다. 

 

25. blockquote / q 인용문태그

• blockquote : 긴인용문 또는 긴인용구 전 후에 자동 여백이 생김 (들여쓰기) / 블럭 요소이지만 직접인라인요소와 텍스트를 포함하는 것이 불가능 하므로 다른 p요소등으로 포함해야한다,
• q : 짧은 인용을 나타내는 태그 

<blockquote><p>웹사이트는 넓게 자신 이외의 제3자에 공개하는 것을 전제로 한다.</p></blockquote>

 

26. pre 태그 형식을 가지는 컨텐츠

• pre태그는 다른태그안에 사용하지 말아야 한다.
• 입력한 그대로를 보여준다 공백등등..

<pre></pre>

 

27. ins 추가태그

• 문사에 추가된 내용을 밑줄로 표현

<ins></ins>

 

28. del 삭제태그

• 문서에 삭제된 내용 취소선으로 표현

<del></del>

 

30. HTML4.0 

• [Hypertext Markup Language]
• 대소문자 구분 안함
• end 태그 생략가능
• 속성의 값에 "" 사용 생략 가능

 

31. XHTML1.0

• [Extensible Hypertext Markup Language]
• 대소문자 구분
• End태그 존재
• 속성의 값에는 "" 사용
• 모든요소는 완벽하게 내포되어야 함
• script 및 style 요소에는 type 속성이 포함 되어야 함
• img 및 area 요소에는 alt 속성이 포함 되어야 함 
• 문서 내 URL에서 &를 쓰면안됨
• SCRIPT 내의 태그는 Escape시켜야 함. ex) <\/p>

[장점] 

• 호환성이 좋다.
• 유지보수의 편리성
• 로딩속도 빠름

[문서구조]

<!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" lang="ko" xml:lang="ko"> // 네임스페이스,언어코드

<head>

<title> </title>

<meta http-equiv="content-type" content="text/html; charset=utf-8"/> //문자인코딩

<meta name="keywords" content=""/>

<meta name="description" content=""/>

</head>

<body>

 

<body>

</html>

 

//W3C//DTD XHTML 1.0 Transitional//EN - 공개식별자

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd - 시스템식별자

 

 

32. 문서형식의 종류

• HTML 2.0표준 문서 형식

<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">

• HTML 3.2표준 문서 형식

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

• HTML 4.01표준 문서 형식

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

• XHTML 1.0표준 문서 형식

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stric//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

• XHTML 1.1표준 문서 형식

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1.1/DTD/xhtml1.1.dtd">

 

 

   &nbsp; : 공백

출처: http://slreference.tistory.com/99 [reference]

요즘 UI/UX 에 빠져서 살고 있습니다.

사용자 입장에서는 별거 아닌 것 같지만
UI/UX 가 나쁘면 사용하지 않는 것도 또한 사용자 입니다.

MS 의 Windows Phone 에 적용된 UI 가 기존에 없던 형식 입니다.
새로운 것을 창조해낸 것이죠. 박수를 보낼만 합니다.

이것을 볼 수 있는 방법은 Windows Phone 을 쓰는 것 뿐이었는데,
고맙게도 CSS3로 구현을 해놨더군요. 한번 보시죠

• http://m.microsoft.com/windowsphone/en-us/demo/index.html?WT.mc_id=WPHomePage_Banner_Demo

CSS3 효과를 잘 사용하여 구현 했습니다. 정말 훌륭하죠.

그런데 웃긴건 정작 Windows Phone 에 탑재된 브라우저에서는 저 화면을 볼 수 없다는 것이죠
Android Phone 에서는 비슷하게 표현이 됩니다.
iPhone 에서는 매우 훌륭하게 표현 되고요.

UI/UX 고민 하시는 분들은 꼭 보셔야 할 화면 입니다.

http://jsdo.it/

다양한 HTML5 예제 코드들을 보실 수 있습니다.

쉽게 쉽게 따라하셔서 HTML5 페이지들을 제작할 수 있겠죠?

일본도 많이 앞서가고 있네요.

HTML 5 를 이용한 웹 애플리케이션을 개발할때 실시간으로 표현시 느린 부분 이나 즉시 수행해야 할 부분을 미리 읽어 들이거나, 다음 접속때, 오프라인된 내용을 이용할때 미리 저장된 데이터를 사용할 수 있도록 하는 방법입니다. 예를 들어 특정 버튼 클릭시 음성 파일을 재생한다고 했을때 캐시 되지 않고 실시간으로 표현하기 위해서는 이벤트가 발생한 후 음성 파일을 다운로드 후 재생을 하게 됩니다. 이때 발생하는 문제점 중에 하나가 버튼을 클릭 한 후 바로 재생을 못하고 다른 동작이 일어 났을때 재생이 될 수 있다는 점이죠. 이런 것을 최소한 방지 하기 위해 미리 읽어 들일 파일을 브라우저에게 알려주는 것입니다.

W3C HTML Application Cache

<DOCTYPE html>

캐시 파일의 MIME 타입은 text/cache-manifest 입니다.

CACHE MANIFEST
#해당 캐시 파일에 대한 설명 , 버전, 갱신일 등.

# 해당 웹 페이지에서 캐시할 내용입니다.
CACHE:
#캐시할 파일 
./cache.jpg
http://example.com/cache.png

# 네트웍 장애(또는 비슷한 현상 : 연결실패등)시 사용할 내용입니다.
FALLBACK:
#대상 파일	#대체할 오프라인 파일
./cache.jpg ./cache_offline.jpg

# 오프라인시 사용 불가능 한 파일 입니다. (온라인에서만 접근 가능한 파일)
NETWORK:
./networkimg.jpg

위 처럼 사용합니다.
HTML 5 Application cache 는 이벤트를 발생시킵니다.

interface ApplicationCache {

	// 상수 : 업데이트 상태
	const unsigned short UNCACHED = 0;	// 캐시가 안되었음 (캐싱전)
	const unsigned short IDLE = 1;	// 유휴상태 
	const unsigned short CHECKING = 2;	// 캐시 채크중
	const unsigned short DOWNLOADING = 3;	// 다운로드중
	const unsigned short UPDATEREADY = 4;	// 업데이트 준비
	const unsigned short OBSOLETE = 5;	// 캐시 크룹이 사용할 수 없는 상태임
	
	// 상태 값
	readonly attribute unsigned short status;
	
	// 업데이트
	void update();	// 업데이트를 다운로드 하도록함
	void swapCache();	// 캐시된 내용 중 최근 변경된 값을 확인합니다. 
	
	// 이벤트 핸들러 
	attribute Function onchecking;	// 캐시를 체크하고 있음
	attribute Function onerror;	// 오류발생
	attribute Function onnoupdate;	// 업데이트가 안되었다. 
	attribute Function ondownloading;	// 다운로드 중
	attribute Function onprogress;	// 다운로드 비율
	attribute Function onupdateready;	// 업데이트 준비 됨
	attribute Function oncached;	// 캐시 완료
	attribute Function onobsolete;	// 캐시 사용 할 수 없음
};
ApplicationCache implements EventTarget;

// cache 객체 
var cache = window.ApplicationCache;	// window 에서 가져옴