new html

HTML Introduction

HTML Versions

- HTML 1991

- HTML+ 1993

- HTML 2.0 1995

- HTML 3.2 1997

- HTML 4.0.1 1999

- XHTML 1.0 2000

- HTML5 2012

- XHTML5 2013

The <!DOCTYPE> Declaration

- <!DOCTYPE>은 브라우저가 해당 document 를 정확히 표시하도록 도와준다.

Common Declarations

- HTML5 : <!DOCTYPE html>

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

- XHTML 1.0 : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

DOCTYPE Reference

HTML Elements

Empty HTML ELements

- content가 없는 HTML element 는 empty element라 불린다. <br>이 그 예이다.

( XHTML 에서는 <br/> 이 옳다. )

HTML Tip: Use Lowercase Tags

- HTML tag는 case insensitive이다.

- W3C에서는 HTML4 부터 lower-case 를 권장하며, XHTML 에서는 lower-case 를 써야 한다.

HTML Attributes

Always Quote Attribute Values

- 모든 attirbute value 들은 항상 quote 로 감싸져야 한다.

- "" 와 '' 모두 사용 가능하다.

- attribute 안의 값 자체가 quote 가 있을 경우에는 서로 상반되는 부호를 사용해준다.

HTML Tip: Use Lowercase Attributes

- attribute name 과 attribute value 모두 case-insensitive 이다.

- 마찬가지로 lower case 가 권장되며 XHTML에서는 lower case 를 사용해야 한다.

HTML Attributes Reference

- HTML TAG Reference

- 대부분의 HTML element 가 class, id, style, title 이렇게 4개는 갖는다.

- title 은 말풍선으로 대응된다.

- HTML Global Attributes

HTML Text Formatting

HTML Formatting Tags

- 현재 대부분의 브라우저에서 <strong>은 <b>로, <em>은 <i> 로 랜더링된다.

- 하지만 의미가 다르다. <strong> 과 <em> 은 각각 중요함을 강조하기 위해서 쓰인다.

- <ins> 는 insert, 표현은 underline

- <del> 은 delete, 표현은 strike

- 위 두 태그 역시 표현은 underline 과 strike 로 하지만, 의미는 다르다.

HTML "Computer Output" Tags

- <code> : 컴퓨터스러운 코드

- <kbd> : keyboard text

- <samp> : sample computer code

- <tt> : teletype text,

- <var> : variable, 표현은 italic

HTML Citations, Quotations, and Definition Tags

- <abbr> : abbreviation, abbr 로 된 element 에 마우스를 가져다 대면, title 내용이 말풍선으로 표시된다.

- <address> : page author의 contact info, 표현은 italic

- <bdo> : text direction, bdo의 'dir' attribute 대로 표현한다.

attribute value 기본은 ltr 이고 rtl 도 설정 가능하다.

- <blockquote> : 다른 소스로부터 인용, 다른 소스로부터 가져온 내용을 표시하며, 내용물이 들여쓰기가 되어있다. 'cite' attribute 에 인용 주소를 적어준다.

- <q> : inline 짧은 인용. q 안의 내용물은 " " (double quote) 안에 들어간다. 'cite' attribute 를 설정 가능하다.

- <cite> : 작업, 작품 등의 제목, 표현은 italic

- <dfn> : definition term, 표현은 italic

HTML Links

HTML Hyperlinks(Links)

- a 태그를 이용하여

다른 document 를 연결할 수도 있고,

문서 안의 name attribute 를 통한 bookmark 위치로도 이동 가능하다.

HTML Links - The target Attribute

- a 태그의 attribute 로 target 을 지정할 수 있는데 target value 가 "_blank"일 경우에는 새 창에 뛰우며 링크를 연결한다.

HTML Links - The name Attribute

- <a name="name">Here</a> 을 통해 bookmark 를 만들 수 있고, <a href="#name">Go There</a> 을 통해서 bookmark 로 이동할 수 있다.

- 다른 doc 의 bookmark로도 이동 가능한데, <a href="url/#bookmark"> 를 통해 가능하다.

Basic Notes - Useful Tips

- folder 를 reference로 요청을 보낼 때는 항상 마지막에 '/' 를 붙여주는 것이 좋다. 붙이지 않으면, 최초 요청시 '/' 를 붙여주는 작업을 하고, 재요청을 한다. 처음부터 붙여주는 것이 좋다.

HTML <head>

The HTML <head> Element

- head 에서는 script 정의, style sheet 링크, meta info 제공 등을 기술해준다.

- head 안에는 <title>, <base>, <link>, <meta>, <script>, <style> 태그들이 올 수 있다.

The HTML <title> Element

- browser toolbar 의 제목 표시

- favorite 추가시 제목

- search-engine result 의 제목

The HTML <base> Element

- 페이지에 있는 모든 링크에 대한 기본(default) 주소와 기본 target 들을 명시

- <base href="주소"><base target="_blank">

The HTML <link> Element

- 현재 document 와 external resource 의 관계를 명시한다. 보통 style sheet 연결할 때 사용한다.

- <link rel="stylesheet" type="text/css" href="mystyle.css">

The HTML <style> Element

- style 을 정의한다.

- <style type="text/css">

정의구문

</style>

The HTML <meta> Element

- data 의 metadata 기술

- page description, keyword, document author, last modified 등의 데이터를 표시하며, 브라우저에는 표시되지 않는다.

- meta data는 브라우저가 content를 어떻게 표현할지, page reload 를 어떻게 할지에 활용되고, 검색엔진이나 다른 웹 서비스에서도 이용한다.

Keywords for Search Engines

- meta 태그의 name 과 content attribute 는 검색엔진에서 참고한다.

- <meta name="description" content="Content Description">

HTML Styles - CSS

Styling HTML with CSS

- HTML 안에 CSS 를 추가하는 방법은 3가지가 있다.

1. Inline : style attribute 에 추가한다.

2. Internal : <head> 의 <style> 안에 기술한다.

3. External : 외부 CSS 파일을 사용한다.

- 가장 선호되는 스타일은 external 이다.

Inline Style

- <p style="colod:blue;"> 스타일로 기술한다.

HTML Style Example - Text Alignment

- text-align:center;

Deprecated Tags and Attributes

- <font>, <center>, <strike> 와 color, bgcolor attribute 쓰는것은 피해야 한다.

HTML Images

HTML Images - The Alt Attribute

- "alt" attribute 는 image 가 표시되지 못하는 상황에서 대신 보여지는 text 이다.

HTML Images - Set Height and Width of an Image

- width 와 height를 항상 명시해주는 것이 좋다. 만약 명시되지 않으면 실제 사이즈로 표시되는데, 이미지를 다 받아올 때까지 사이즈를 결정할 수 없기 떄문에 html 페이지가 loading 되며 계속 refresh 된다.

Basic Notes - Useful Tips

- 10개의 이미지를 가지고 있다면, 11개의 이미지를 사용하는 게 좋다. ( 1개는 로딩 전 보여주기 )

HTML Image Tags

- image-map 은 클릭가능한 image 를 말한다. <map> 은 여러개의 <area>를 가지고 있다.

- map 태그에는 "name" attribute 를 정의하고, img 태그의 "usemap" attribute 에 map name 을 링크해준다. 이 때 # 을 이용한다.

- map tag 안에 정의하는 area는 img 태그 안의 클릭가능한 section들을 명시해준다.

"alt" : 해당지역을 표시 못할 경우 표시해주는 text

"coords" : area coordinate

"href" : 연결 URL

"shape" : default,

rect, coords = (left, top, right, bottom)

circle, coords = (x, y, radius)

poly coords = ( x1, y1, x2, y2, ..., xn, yn )

"target" : _blank(new window나 tab),

_parent(parent frame),

_self(클릭한 곳에 바로 연결),

_top(윈도우의 full_body에 open),

framename

<img src="planets.gif" width="145" height="126" alt="Planets"

usemap="#planetmap">

</map>

HTML Tables

HTML Table Tags

- <caption> : table caption 정의

- <colgroup> : formatting을 위해 table의 column group 정의

<colgroup> 안에는 <col> 태그를 갖는다.

- <col> 태그에 "span" attribute 값을 넣어 column group의 style 을 적용하는데 주로 사용된다.

- <thead><tfoot><tbody> 를 통해 head, body, foot 위치를 정한다. 단순 grouping & positioning 역할이다.

HTML Lists

HTML Definition Lists

- <dl> (list)

<dt> (item)

<dd> (decription)

Basic Notes - Useful Tips

- list item 안에서는 text, line breaks, images, link, list 등을 다 넣을 수 있다.

HTML <div> and <span>

HTML Block Elements

- 대부분의 HTML element 는 block level element 와 inline element 로 구분된다.

- block level element 는 주로 new line 으로 시작하고 끝난다.

- <h1> <p> <ul> <table> 등이 block element 이다.

HTML Inline Elements

- <b>, <td>, <a>, <img> 등이 있다.

The HTML <div> ELement

- 다른 element 들을 grouping 하는 역할의 block element

- browser 가 div 앞뒤로 line break 를 추가한다

- div 는 보통 block 에 대한 style 을 적용할 때 잘 쓰인다.

- table 로 구성되던 layouting 을 div 가 대신한다. ( table 로 layoutting 하는 것은 좋은 방법은 아니다. table은 tabular data 를 표시하는 목적이다. )

The HTML <span> Element

- span 은 text 의 inline container element이다.

- span 은 style 과 함께 쓰여 특정 text 에 효과를 주는 역할을 한다.

HTML Layout

Website Layouts

- 대부분의 웹사이트가 잡지나 뉴스처럼 여러개의 column 으로 나누곤 한다.

- <div> 나 <table> 을 사용하여 layouting 할 수 있다.

HTML Layouts - Using <div> Elements

- block element 이기 때문에 style의 float:left를 사용하여 마무리 new line을 막는다.

HTML Layout - Useful Tips

- external source 에 style 을 넣어주면 유지보수가 쉽다.

HTML Forms and Input

Text Fields

- <input type="text" name="firstName">

Password Field

- <input type="password" name="pwd">

Radio Buttons

- <input type="radio" name="sex" value="male">Male<br>

<input type="radio" name="sex" value="female">Female<br>

Checkboxes

- <input type="checkbox" name="vehicle" value="bike">bike<br>

Submit

- <form name="input" action="result.asp" method="get">

HTML Form Tags

- <form>

accept-charset

action

enctype : form data 를 서버에 보낼 때 어떻게 encoding 할지를 결정한다. POST 와만 쓰인다.

application/x-www-form-urlencoded : default. 보내기 전에 encode된다. space는 + 로 변환. 특수문자는 ASCII HEX value 로 변환된다.

multipart/form-data : 인코드되지 않는다. 파일 업로드가 있는 경우 사용한다.

text/plain : space만 + 로 바뀌고 특수문자는 encode 되지 않는다.

method : get / post

name

target : form reposponse 를 어디에 표현할지를 결정한다.

_blank / _self / _parent / _top

- <input>

- <textarea>

cols : visible width 를 정한다.

disabled

name

readonly

rows

- <label>

for : element_id 를 명시하며 이는 form element와 경부된다.

- <fieldset>

<legend> 태그를 가지며 이는 fieldset 의 title(caption) 이 된다.

- <select> : dropdown

<option> 태그를 가지며 개별 item 이 된다.

disabled

multiple

name

size

- <option>

disabled

label : short version text 이며 label 이 있으면 이 녀석이 item text 로 표시된다.

selected

value

- <optgroup> : select list 안에 관계된 option을 group 으로 정의한다.

disabled

label : 그루핑 텍스트가 들어간다.

- <button>

disabled

type : button, reset, submit

value

HTML Iframes

- iframe 은 web page 안에 다른 web page 를 넣을 때 사용된다.

- syntax

Iframe - Remove the Border

- "frameborder" attribute 를 이용해 border 를 없앨 수 있다.

Use iFrame as a Target for a Link

- "name" attribute 를 명시하고, target 에 해당 이름을 mapping 해주면 된다.

HTML Scripts

The HTML noscript Element

- <noscript>컨텐츠</noscript> 를 명시해주면, script 가 지원되지 않는 브라우저에서 해당 내용을 표시한다.

HTML Uniform Resource Locators

URL Encoding

- URL 은 ASCII char-set 을 통해서만 인터넷을 통해 전달될 수 있다.

- ASCII char-set 이 아닌 녀석들은 %hh 로 치환된다.

- URL 은 space를 가질 수 없다. 스페이스는 보통 + 로 치환된다.

도움이 되셨다면 손가락 꾸욱~ ( 로그인 필요 x )

저작자표시 비영리 변경금지

'프로그래밍 놀이터 > Web' 카테고리의 다른 글

[jQuery/Tutorial] window.onload vs. ($document).ready (0)	2013.05.08
jQuery 를 공부해야 하는 이유 ( 결심동기 ) (2)	2013.05.07
RESTful Web service: The basics (0)	2012.12.08
ECMAScript(에크마스크립트, ES) 가 뭔가요? (0)	2012.11.27
[Script] Dox 에 대해 알아본다. ( Dox Output에 대한 설명 ) (0)	2012.11.11

돼지왕 왕돼지 놀이터

new html

'프로그래밍 놀이터 > Web' 카테고리의 다른 글

댓글

티스토리툴바

new html

'프로그래밍 놀이터 > Web' 카테고리의 다른 글

댓글

관련글

티스토리툴바