본문 바로가기

웹표준77

HTML5 콘텐트 모델 HTML5 콘텐트 모델HTML5의 각 요소들은 특성에 따라 분류된다. 한요소가 어떤 분류에도 속하지 않을 수도 있고 여러 분류에 속해있을 수도 있다. 분류는 아래 이미지와 같이 분포하고 있다.(이미지는 원본에서 확인가능하며 표로 정리된 것만을 발췌하였습니다.) 분류특성엘리먼트 메타데이타 콘텐트(metadata content)콘텐츠의 모양, 동작을 설정하거나 다른 문서와의 관계를 나타낸다. base, command, link, meta, nocript, script, style, title플로우 콘텐트(flow content)대부분의 body 요소 안의 요소들이 포함된다. 플로우 콘텐트는 하위에 텍스트나 임베디드 콘텐트를 포함한다.a, abbr, address, map>area, article, aside.. 2015. 2. 21.
html5 h1 엘리먼트 (section,article,aside,nav안에서) 사용의 주의사항 html5 h1 엘리먼트 (section,article,aside,nav안에서) 사용의 주의사항 아주 큰 주의사항은 아니지만 브라우저별 다른 반응에 다른 반응을 보이니 살펴보자 주제1 주제2 주제3 위의 예제에서 h1엘리먼트는 첫번째는 section안에 두번째는 section안에 section에, 마지막은 그냥 코딩되어있다.문제는 브라우저마다 다르게 보인다는것몇몇 브라우저에서는 세개다 동일한 크기지만 몇몇브라우저는 크기가 다르게보인다 위예는 파이어복스와 오페라큰문제는없다.css를 사용하니 css초기값으로 동일하게 잡아주면 당연히 해결. 다만 css를 잡아주지 않을경우 대비해서 포스팅 2014. 3. 5.
hgroup 태그, HTML5에서 제외(hgroup removed from HTML) hgroup 태그, HTML5에서 제외(hgroup removed from HTML) 뒤늦게 올린다만. 2013 4월경 hgroup 태그가 html5에서 제외됬다. 다음링크참조 http://www.webmonkey.com/2013/04/w3c-drops-hgroup-tag-from-html5-spec/ http://www.w3.org/html/wg/wiki/ChangeProposals/hgroup https://www.w3.org/Bugs/Public/show_bug.cgi?id=11731 http://beautifulcss.com/archives/882 W3C는 더이상 태그를 표준 명세에 표함시키지 않겠다고 밝혔습니다. 이 태그는 문서의 개요를 작성할 때 사용되는데, 반드시 부터 까지의 태그만을 포함할.. 2014. 2. 27.
HTML5 전역속성 (Global Attributes) HTML5 전역속성 (Global Attributes) 굵고 빨간건 HTML5부터 적용된것 Attribute Description accesskey 키보드 단축키 명시하고 그 페이지에서 엘리먼트를 선택 할 수 있도록한다. class 다수 선택자,엘리먼트 분류 contenteditable ture 설정으로 사용자들이 텍스트변경가능 http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_global_contenteditable contextmenu 엘리먼트의 콘텍스트 메뉴들을 정의할 수 있도록한다. 이메뉴들은 사용자가 트리거시 팝업된다. (현재는와 함께 지원되는브라우저없슴) data-* HTML 태그 안에서 사용자 데이타 저장한다 http://www.w3sch.. 2014. 2. 24.
HTML5 예제 : 이미지와 설명텍스트 코딩 HTML5 예제 : 이미지와 설명텍스트 코딩간단한 이미지와 설명이 되있는사이트를 html5로 코딩해보자 실험할 사이트는 Pinterest이다 http://pinterest.com/사이트중 이걸 코딩 해보도록한다.첫번째로 원래 있던걸 보자 .가 너무 많이쓰이다보니 뭐가뭔지 햇갈 린다. html5에서는 우리가 익숙하지않아서 그렇지 좀더 명확화 할수있다. Repin Like Comment Awesome cat description. 25 likes 2 comments 100 repins Me onto here 1. 첫번째로 , , 를 사용한방법이다 Repin Like Comment Awesome cat description. 25 likes 2 comments 100 repins Me onto here 2. .. 2013. 1. 23.
웹표준을 어떻게 생각하는가? 웹표준을 어떻게 생각하는가? 웹표준에 대한 생각들을 다음에 달아보자.출처는 웹스탠다드포럼 http://cssdesign.kr/forum/viewtopic.php?pid=19094#p19094 웹 표준 뭐라고 생각하세요? 웹 표준 뭐라고 생각하세요? HTML 시멘틱마크업,CSS오류없슴, '정보'와 '꾸밈(장식)', '기능'의 역할요소를 구분 웹 표준 어떻게 생각하세요? 현재 웹 설계의 필수요소. 웹 표준의 장점은 뭘까요? 역할분담과 알아볼수 있는 체계의 명확화. 웹표준을 지킴으로서 검색기능의 향상, 명확한 역할 구분,분담이 이루어진다. 예로 내가한작업을 넘겨줄 때도 이 규약을 지킴으로서 알기쉽다. 또한 접근성향상 웹 표준의 단점은 뭘까요? 아직까지 시간이 지나도 웹표준에 대한 이해 그리고 공통적인 개념이 .. 2011. 6. 30.
HTML5 엘리먼트 알아보기 (계속업데이트) HTML5 HTML5 엘리먼트 알아보기 (계속업데이트) 업데이트로 올린글 링크 section 엘리먼트 HTML5 aside 엘리먼트 HTML5 article 엘리먼트 HTML5 nav 엘리먼트 HTML5 section 엘리먼트 HTML5 article 엘리먼트 HTML5 aside 엘리먼트 HTML5 hgroup 엘리먼트 HTML5 header 엘리먼트 HTML5 footer 엘리먼트 HTML5 address 엘리먼트 group 엘리먼트 HTML5 p 엘리먼트 HTML5 hr 엘리먼트 HTML5 pre 엘리먼트 HTML5 ol 엘리먼트 HTML5 ul 엘리먼트 HTML5 li 엘리먼트 HTML5 dl, dt, dd 엘리먼트(element) HTML5 figure, figcaption 엘리먼트(element) HTM.. 2010. 7. 22.
HTML5 menu,command 엘리먼트(element) HTML5 menu, command 엘리먼트(element) 커맨드리트를 표현하는 menu엘리먼트 상세히 표현하기위해 command엘리먼트가 자식엘리먼트로 html5에서 추가되었다. 커맨드엘리먼트는텍스등으 여러가지로 나타난다.커맨드는 현재 아직지원하지않는다. 냉무 역시차후 업데이트 2010. 7. 22.
HTML5 details, summary 엘리먼트(element) HTML5 details 엘리먼트(element) 스크립트와 더불어 흔히 웹사이트에서 클릭시 화면에 새로운정보를보여주고 클릭시 사라지는경우를 봤을 것이다. 이를 구현해주는것이 이엘리먼트이다. 클릭할것은 삼각형버튼으로 되어있다. 하지만 아직 브라우저에서 지원하지 않는다.summary는 details의 자식엘리먼트로 요약해서 설명해준다. 어쩌고저쩌고 울라불라울라불라.... open속성 엘리먼트는 보이는 상태로 시작된다 2010. 7. 22.
HTML5 canvas 엘리먼트(element) HTML5 canvas 엘리먼트(element) canvas엘리먼트는동적그래픽을 구현한다. 단독으로 이 엘리먼트만으로 구현 되지 않는다. 스크립트를 동반해서 사용하여 구현하다.속성엘리먼트로는 가로세로를 지원한다. 간단한 예 자바스크립트에서는 아이디로 접근,그리고 getContext로 시작한다. 이예대한 예는 차후에 .... 2010. 7. 22.