오래된 자료, HTML4/5 관련 내용 정리

■ HTML5 관련 사이트

ㆍHTML5

   - HTML5 강좌 : http://www.sqler.com/374157

   - HTML&HTML5 차이점 : http://www.w3.org/TR/2010/WD-html5-diff-20100304/

   - THML5 지원 브라우저 : http://www.quirksmode.org/dom/html5.html

   - 현 브라우저에 HTML5기능이 적용 여부 : http://caniuse.com/#feat=canvas

   - 구문검증

      http://validator.w3.org/

      http://html5.validator.nu/

      http://gsnedders.html5.org/outliner/

   - html5 레이아웃

      http://siana.tistory.com/entry/HTMl5-%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83-%EB%A7%8C%EB%93%A4%EA%B8%B0

   - html5 레이아웃 구성

      http://rintiantta.blog.me/40148094029

   - WebSocket : http://m.mkexdev.net/98

   - html5 추가된 기능 : http://nimba.tistory.com/279

   - html5 + css 템플릿 사이트 : http://freehtml5templates.com/template-portfolio/

 

ㆍAJAX

   - jquery 시작하기 : http://docs.springnote.com/pages/591286

   - jQuery, jsp, jSON을 이용한 Ajax 방식 구현

     http://orangenius.tistory.com/entry/jQuery-jQuery-jsp-jSON-%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-Ajax-%EB%B0%A9%EC%8B%9D-%EA%B5%AC%ED%98%84

   - jQuery API : http://api.jquery.com/category/ajax/

   - AJAX 단순호출: http://fttvoid.egloos.com/64519

   - AJAX 메소드 설졍 : http://cafe.naver.com/jobstartgogo/13373

ㆍ실 ip 확인 사이트 : http://coolpunch.tistory.com/513

■ HTML4 파일 업로드 할때, URL에 'fakepath'라는게 들어갈때

IE8에서만 그런건줄 모르겠지만...

IE 상단의 도구 > 인터넷 옵션(보안탭 선택) > 사용자 지정수준(파일을 서버에 업로드 할 때 로컬 디렉토리 경로

포함 항목의 사용)을 변경하면 되겠으며,

제 생각으로는 보안때문에 위와 같은 옵션이 추가 된듯 하다.

<embed invokeurls="false" allowscriptaccess="never" allownetworking="internal" enablehtmlaccess="false" allowhtmlpopupwindow="false" height="80" type="application/x-shockwave-flash" width="400" src="http://v.daum.net/static/recombox1.swf?nid=14739495" bgcolor="#ffffff" quality="high"></embed>

■ HTML4 이미지맵(Image Map)

한 개의 이미지에 여러개의 링크를 할당하는 기술

1.사각형(Rect)

<area shape="rect" coords="x1,y1,x2,y2" href="url">

2.원형(Circle)

<area shape="Circle" coords="x1,y1,r" href="url">

3.다각형(Poly)

<area shape="poly" coords="x1,y1,x2,y2,x3,y3..." href="url">

-> 좌표 : 각 꼭지점 좌표

<img src=image1.jpg width=200 height=100 border=0 usemap="#imgmap1">

<map name="imgmap1">

<area shape="rect" coords="10,10,50,30" href="border-2.html alt=border2>

<area shape=circle coords="150,50,20" href=border-width.html alt=border-width>

<area shape=poly coords="20,30,50,50,30,75,20,30" href=cssmargin.html alt=cssmargin>

</map>

<embed invokeurls="false" allowscriptaccess="never" allownetworking="internal" enablehtmlaccess="false" allowhtmlpopupwindow="false" height="80" type="application/x-shockwave-flash" width="400" src="http://v.daum.net/static/recombox1.swf?nid=12070663" quality="high" bgcolor="#ffffff"></embed>

■ HTML4 폼(Form)

웹사이트를 방문한 사람이 입력한 정보를 서버로 전달하기 위해서 사용

name 폼의 이름

action url지정

method 서버에 정보전달방식(get,post)

enctype 전송될 데이터 타입 지정("multipart/form-data")

- 텍스트상자<input />

type

name

value 텍스트상자에 나타내고 싶은문자

maxlength 최대문자

size 크기

- 비밀번호입력상자<input value="" type="password" />

type

name

value

maxlength

- 체크상자<input type="checkbox" />

type

name

value 전달될 값

checked 선택되어진 상태

- 라디오 버튼<input type="radio" />

type

name

value

checked

- 목록상자

name

size

multiple 다중선택기능

- 입력상자<textarea></textarea>

name

cols

rows

- submit<input value="쿼리 전송" type="submit" />

type

name

value

- reset<input value="원래대로" type="reset" />

type

name

value

- button<input type="button" />

type

name

value

- image<input type='image"' />

type

src

name

- file<input type="file" />

type

name

■ HTML4 프레임(Frame)

- frameset의 속성

cols 수직나누기

rows 수평나누기

frameborder 프레임을 나눈 경계선의 출력 유무(0 또는 1, yes 또는 noi)

framespacing 프레임간의 간격지정

- frame의 속성

src 보여줄문서경로

name 프레임이름

scrolling 스크롤바유무(auto,yes,no)

marginwidth 좌우여백

marginheight 상하여백

noresize 크기조정못하게

- Iframe(웹 문서의 특정위치에 다른 웹문서를 불러오는 기능)

src

name

width

heigth

frameborder

scrolling

marginheight

marginwidth

vspace

hspace

■ HTML4 테이블(Table) 

- table의 속성

align

bgcolor

background

border

bordercolor

cellspacing 셀과 셀 사이의 간격

cellpadding 셀안의 안쪽 여백 설정

width

height

- tr의 속성

align

bgcolor

bordercolor

valign 줄의 수직 정렬방식(top,middle,bottom)

- td의 속성

align

bgcolor

background

bordercolor

valign

rowspan 줄을 합칠때

colspan 칸을 합칠때

■ HTML4 META(웹사이트 정보를 나타낸다)

웹 사이트를 제작할 때 어떤 툴을 사용했는지 표시합니다.

웹 사이트의 제작자를 표시합니다.

검색엔진에서 검색할 홈페이지의 키워드를 표시합니다.

웹 사이트의 주제를 표시합니다.

이 웹사이트는 5초후 해당 url로 이동합니다.

■ HTML4 기본태그

- 정렬하기(top,middle,bottom)

- 폰트(Font)

face

size

color

- 글자모양

b

i

u

s 가운데

sub 아래첨자

sup 윗첨자

- 수평선(Hr)

size

width

align

color

noshade 입체감없는선

- 특수기호

<

> >

" "

  공백

© 저작권기호

- Pre와 Xmp

pre 태그적용

xmp 태그적용안됨

- Body

bgcolor 배경색상

background 배경그림

text 글자색

link 처음링크색

vlink 방문했던링크색

alink 현재선택된링크색

default

- 이미지(Image)

src 경로,파일이름

width

height

alt 풍선도움말

align(top,middle,bottom)

hspace 수평간격

vspace 수직간격

border 그림외곽두께

-링크(A)

<a target="_blank">http://www.naver.com"> 네이버

- UL,OL 리스트

UL : 순서없는 List

<li>국어</li>

<li>영어</li>

<li>수학</li>

OL : 순서있는 리스트

<li>바나나</li>

<li>사과</li>

<li>중국산</li>

<li>한국산</li>

  

- 움직임(Marquee)

behavior scoroll 한쪽방향으로 반복

             behavior 반대편 끝에서 정지

             behavior 양쪽 끝을 오락가락

direct(left,right,up,down) 움직이는방향

loop 반복횟수 지정(-1 : 무한반복)

scrollamount 한복에 이동하는 거리

scrolldalay 이동후 delay되는 시간(ms)

width

height

- 멀티미디어(Embed)

src

width

height

autostart 매체의 자동실행여부(ture,false)

hidden 재생기가 나타나게할지 여부(true,false)

loop 반복횟수 지정(무한반복 : -1)