본문 바로가기

분류 전체보기229

HTML5 table 엘리먼트(element) HTML5 table 엘리먼트(element) 테이블의 경우 크게 변한것 없다. 일단 그전에 올린 포스팅을 참조하자 여기것이 거의 그 대로이다. 웹표준 테이블 코딩 2009/9 웹표준 테이블 코딩 좀더 보완 2010/7 대부분의 속성엘리먼트가 CSS로 대체하도록 되었고 남은 속성엘리먼트는 summury, span정도이다. 테이블 네임의 작성형태 테이블엘리먼트에서 별 다를 바가 없으나 다른 엘리먼트추가로 약간 테이블 설명에 변화를 줄 수 있다. 월드 와이드웹 홈에서 참고http://dev.w3.org/html5/spec/Overview.html#the-table-element 먼저 흔히 사용해오던 방법 caption에 strong으로 강조하고 있다. Characteristics with positive a.. 2010. 7. 13.
웹표준 테이블 코딩 보완 웹표준 테이블 코딩 본주소는 여기 좀더보완한다 웹표준 테이블 행과 열 행(row)이 가로이고 세로가 열(col)이다. 아래 그림참조 코딩의 개념 다시확인 thead엘리먼트는 표의 머릿부분을 tfoot는 아랬바닥을 tbody는 메인내용을 이야기한다. tfoot의 경우는 꼭 마지막에 위치한다 라는 의미보다.보다 통계수치의 혼합등을 위해사용할 떄가 많다. 특별한 의미가 없다면 굳이 사용할 필요는 없다. tfoot의 경우는 tbody앞에서 미리 끝내주어야한다. 그래도 마지막에 나온다. 아래 예가 올바른모습 간단한예 이름 성별 직업 두사람 남자와여자 웹관련 뭐시기 남 프로그래머 저시기 여 디자이너 잘 모르는 것들 다시확인 colgroup은 세로 열을 다 지칭할때 사용한다. 흔한 예 웹표준 테이블 코딩 ... ca.. 2010. 7. 13.
HTML5 map area 엘리먼트(element) HTML5 map area 엘리먼트(element) map엘리먼트는 이미지맵을 정의하는 엘리먼트이다. img엘리먼트나 objec t엘리먼트를 이용하여 이미지 삽입후에 다수이미지에 대한 이미지맵을 정의한다. 자식엘리먼트가 area로 맵의 하이퍼링크를 표현한다. html5에서는 area의 속성엘리먼트 noHref(일크없음)이 사라지고 좀더참조핳 hreflang(링크할 언어종류), meadia,pinㅎ(서버용어플리케이션호출), rel이 추가되었다. 사용하는 예를 보자 1. img나 object로 이미지를 삽입하고 속성엘리먼트 usemap으로 지정한다. 2. map 엘리먼트 시작 name과 id 속성의 값을 같게 작성하고 연계하도록 한다. usemap에서 box로 했듯이 여기서도 box로 해주었다. ... 이렇.. 2010. 7. 9.
HTML5 param 엘리먼트(element) HTML5 param 엘리먼트(element) 플러그인 즉 object 엘리먼트의 파라미터를 정의한다. type ,valuetype는 페지되었다. object엘이먼트의 자식엘리먼트이다. 이름과 값 속성엘리먼트는 반드시 작성해야하고 이값을 정함으로 서 외부 자원을 호출시 참조한다. 간단한 CNN뉴스에서 사용되는 소스를 보고 확인 2010. 7. 9.
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 iframe 엘리먼트(element) HTML5 iframe 엘리먼트(element) iframe은 내부에 포함된 콘텐츠를 표시할때 사용한다. 이번에 html5로 오면서 사라진 속성이 많다. align은 img엘리먼트에서 설명했듯이 css로 대체, 마진 보더역시 마찬가지다. 옛부터 논의되던 scroll바역시 overflow로 css로 대체된다. 설명해주던 엘리먼트 longdesc는 a엘리먼트로 대체되었다. 간단한 예 가로 세로 링크할 파일을 보여준예이다.꼭 src가 아니더라도 콘텐트에 포함시킬려면 srcdoc를 사용하면된다. 하지만 지원되는브라우저가 없다. 새로추가된것들 sandbox 보안강화를 위해 추가된것이다. 값은 4가지가있다. seamless 값은없다 이속성을 사용하면 문서에 그냥일반콘텐츠로나타난다. 2010. 7. 8.
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.

티스토리툴바