웹표준80 HTML5 object 엘리먼트(element) HTML5 object, param 엘리먼트(element) object엘리먼트는 외부 콘테츠를 표현한다. html5에서 달라진점이라면 html5에서는 audio와 video가 별도로 생겼기 째문에 이때는 object를 사용 안한다. data속성은 외부 콘텐트의 url을 지정한다. 두번째의경우는 폭백의 예이다. img엘리먼트로 폴백해주고 있다. type은 MIME 타입을 결정한다 name은 하이퍼링크 발생시 컨텐츠를 대체한다. 초기 콘텐츠 클릭시 대체 콘텐츠 ifram과 비슷하다. 2010. 7. 9. HTML5 embed 엘리먼트(element) HTML5 embed 엘리먼트(element) 플러그인을 표현할때 사용한다 동영상 음악등을 통합하여 표현할때 사용한다. embed엘리먼트에는 자식엘리먼트를 사용할 수 없다. 단일하게 embed만으로 종료한다 html5오면서 변화한점은 이전에 비해 embed엘리먼트가 정식등록된점-그전까지는 object 엘리먼트로 대체하도록 권유되어왔다. 그리고 align엘리먼트역시 css로 대체된 점이다. type 속성 엘리먼트 는mime-text', 'image', 'audio', 'video', 'message', multipart', 'application-중 선택한다 아래는 가장많이사용하는 플래시의예 2010. 7. 9. HTML5 img 엘리먼트(eleement) HTML5 img 엘리먼트(eleement) html5에서 변경된 속성이 있다. 이전에서 사용하던 모든속석은 아래에와 같다. 폐지 ,대체, css로 하도록 권유되는 것들을 제외하면 아래와같다. 속성 엘리먼트 alt엘리먼트는 이미지가보이지않을때 대신 대체 해서 보여줄 엘리먼트이다. 굳이 alt 속성에 일일이 다할필요는없다 다음예제를 보자 div엘리먼트 안에 하나의 의미의 그림이 있다. 이런경우는 첫번째 img엘리먼트에만 입력해주면된다. alt에 하이퍼링크의 유무에따른 코딩 메뉴 게시판 방명록 첫번쩨는 링크에 별도텍스트를 작성한 경우이다. 두번째는 텍스트에링크가걸린경우이다 이런경우는 이미지가 보이지않을때를 생각해서 alt속성을 작성해야한다. 서술형 아주큰 이미지를 사용하고 중심으로 설명할때 있다 이럴때는 이.. 2010. 7. 7. CSS3 라운드박스 익스플로어 (IE6,7,8) 모두적용 CSS3 라운드박스 익스플로어 (IE6,7,8) 모두적용 CSS3적용에 여전히 문제점을 가지는 IE ......에 라운딩박스의 경우여러가지방법이있다. 그 중 괜찮은것 출처는 여기 http://www.htmlremix.com/css/css-level-3-styles-in-internet-explorer-6-onwards 데모는 여기서 바로 확인 가능 http://fetchak.com/ie-css3/ 다른 방법들에 비해 쉽다. ie-css3.htc 이 파일이필요 다운은 http://code.google.com/p/curved-corner/ 소스를 알아보자 CSS3 : border-radius border-radius 는 박스의 라운드를 가능하게 해준다. 아직 이 방법이 적용 되지 않는 브라우저가 많으며 별도.. 2010. 7. 7. jQuery 페이지 스크롤링(scrolling) 플러그인 jQuery 페이지 스크롤링(scrolling) 플러그인 클릭에따라 페이지로 가는 플러그인이다. CSS3로 구며줬고 변경가능은 페이지이동시 속도(duration)이다. 미리보는 데모 http://sianasiatiger.cafe24.com/study/Jp_scroll.html HTML 코드 네비게이션은 다음과 같이 구성한다. 아이디명, 클래스명을 잘봐두자 ↑ Prev ↓ Next Comments Reply 맨위로 콘텐츠 html소스는 다음과 같다.클래스의명을 post로 해주었다. 포스팅 1내용물,그림등 포스팅 2내용물,그림등 포스팅 3내용물,그림등 포스팅 4내용물,그림등 포스팅 5내용물,그림등 네비게이션 네비게이션은 페이지이동해도 유지하도록 고정으로 해준다. #nav-dock { position: fix.. 2010. 7. 6. HTML5 del 엘리먼트(element) HTML5 del 엘리먼트(element) ins엘리먼트와 다르게 문서에서 삭제된 콘텐츠를 구분하여 표현한다. ins가 밑줄이 그어진다면 del은 가운데선이 그어진다. 속성엘리먼트역시 똑같으며 별반다를바없다. Empty the dishwasher Watch Walter Lewin's lectures Download more tracks Buy a printer 2010. 7. 5. HTML5 ins 엘리먼트(element) HTML5 ins 엘리먼트(element) ins엘리먼트는 뭍서에 콘테트가 추가되었다는것을 보여줄때 쓴다. 흔히 쉽게생각하면 블로그의 덧글이라고 생각하면되겠다.먼저간단한 예 우왕우왕 어쩌고저쩌고 간단한 문장이 추가된것. 이번엔 두번 사용 해보자 우왕우왕 어쩌고저쩌고. ㅎㅎ 속성 엘리먼트 cite , datetime cite는 추가한이융를 이야기해주고 datetime은 그날짜다. 아래는 그예제 I like fruit. Apples are tasty. So are pears. ins에 포함된 첫번째 두번쨰문장을 보자 날짜가 같다 그렇다고 아래와 같이사용하면 안된다. I like fruit. Apples are tasty. So are pears. 위의 예는 2005-03-16T00:00Z에 두가지가 포함되어.. 2010. 7. 5. HTML5 a 엘리먼트(element) HTML5 a 엘리먼트(element) a 엘리먼트는 잘아는 엘리먼트로 링크를 걸떄 사용한다. 새창,팝업 다른문서로 이동.일단 간단한 예제부터보자 티스토리 네이버 없음 페이지 위 예에서 첫번째는 티스토리로 두번째는 네이버로 세번째는 링크된주소가 없다.네번째는 페이지않에 id로 링크되도록 되어있다. 하이퍼링크(hyperlink)와 플레이스홀더(placeholder) href 속성이 없으면 그대로 페이지유지를 뜻한다. 위의예에서 3전째줄은 현재이페이지라는 뜻을 가지고있다. 플레이스홀더의또다른예는 현재페이지를 유지하고 다른 창을 띄울때 필요하다. 예로 전산결재 창의경우 현재페이지는 존속시키면서 결재창은 스크립트로 띄우기도 하는 경우이다. href 속성을 사용하지않으면 media,ping,rel, target,.. 2010. 7. 2. HTML5 br 엘리먼트(element) HTML5 br 엘리먼트(element) br 엘리먼트(element) br엘리먼트는 라인을 끝을때 사용한다. 반드시 콘텐츠의 내용을 끊을 때 사용해야한다. 아래 예를 보자 어쩌고 저쩌고 그리고 말야 저쩌고어쩌고라네요 34덧글 덧글을 다세요 34덧글 덧글을 다세요 첫번째 예는 적절한예이다. 내용의 문장을 필요할때 br엘리먼트로 끊어주고 있다. 두번째는 틀린예이다 앞서 말했듯이.콘텐츠 즉텍스를 끊을떄 사용하지 문단 엘리먼트를 끊을때 사용하지않는다. 올바른 사용은 p 엘리먼트를 사용하여 맨아래와 같이 사용해 줘야 한다. 2010. 7. 1. HTML5 span 엘리먼트(element) HTML5 span 엘리먼트(element) div엘리먼트처럼 span엘리먼트역시 특별한 의미를 가지지는 않는다. text-level의엘리먼트들의 용도외에 css별도 기꾸밈또는 기능적 으로 필요할 때 사용된디. 타이틀 위같은예에서h1엘리먼트 강조 또는 이미지대채, 꾸밈선택등의 기능으로 사용할 수 있다. 2010. 6. 30. 이전 1 2 3 4 5 6 ··· 8 다음