본문 바로가기

html11

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.
웹표준 테이블 코딩 보완 웹표준 테이블 코딩 본주소는 여기 좀더보완한다 웹표준 테이블 행과 열 행(row)이 가로이고 세로가 열(col)이다. 아래 그림참조 코딩의 개념 다시확인 thead엘리먼트는 표의 머릿부분을 tfoot는 아랬바닥을 tbody는 메인내용을 이야기한다. tfoot의 경우는 꼭 마지막에 위치한다 라는 의미보다.보다 통계수치의 혼합등을 위해사용할 떄가 많다. 특별한 의미가 없다면 굳이 사용할 필요는 없다. tfoot의 경우는 tbody앞에서 미리 끝내주어야한다. 그래도 마지막에 나온다. 아래 예가 올바른모습 간단한예 이름 성별 직업 두사람 남자와여자 웹관련 뭐시기 남 프로그래머 저시기 여 디자이너 잘 모르는 것들 다시확인 colgroup은 세로 열을 다 지칭할때 사용한다. 흔한 예 웹표준 테이블 코딩 ... ca.. 2010. 7. 13.
웹표준 간단한 폼(form) 양식 웹표준 간단한 폼(form) 양식 리스트를 이용한 간단한 폼을 만들어보겠다. 그전에 폼에 사용되는 엘리먼트부터 보자 가장 기본적으로 구축할 모습은 다음과 같다. 개인정보입력 form form은 양식을 시작한다는 의미를가진다.또한 action옵션을 가짐으로서 입력완료하고 실행시 작동연결을 담당한다. fieldset fieldset은 양식의 테두리를 보여준다. 구역의 의미로 임력해야할여러 정보가있다면 큰범위로 나누어 줄때 사용한다. legend legend은 나누어진 구역의 의미를 가르켜준다.여기서는 개인정보입력이라고 되어있다. label label은 input엘리먼트가 사용될 목적을 지칭할때 사용된다. input input은 입력 양식을 보여준다, 잘 알다시피 라디오버튼,체크 박스, 텍스트등을 옵션으로 가.. 2010. 2. 18.
Ajax란 무엇인가? Ajax의 정의 Ajax란 무엇인가? jQuery를 한창 포스팅하다가 dom가지 설명을 끝내고 이제 Ajax로 넘어갈떄이다. 이쯤에서 Ajax를 둘러볼 필요가있다. 간단한 정의부터 사용예시까지 짤막하게 살펴보자. Ajax 의 정의 초창기에 비동기적인 자바스크립트와 XML 이라는 말의 줄임으로 접근되었다. 비동기(Asynchronous) 자바스크립트(javascript) 그리고 and XML 이로서 ajax 란 약자가 나왔다고 하는데....마지막에 xml은 필수요소가 아니다. 이후에 어떤 약어라기보다는 방법론으로 축약되어 사용되고있다. 위에서 그래도 중요시 할점은 비동기(asynchronous) 란 점이다. 페이지의 전통적인경우 브라우저는 서버에 전재페이지를 요청하고 그리고 사용자가 링크크릭또는 폼전송시 브라우저는 새로운.. 2009. 12. 8.
인라인(inline) ,블록(block) ,그룹(group)엘리먼트 엘리먼트의 종류 inline , block ,group block 엘리먼트 h1, h2,h3...p, ul,ol,li,form,div등이 있다. 한블록을 차지한다,즉 이러면 두엘리먼트가 두 층으로 쌓인다. 인라인 엘리먼트를 내부에 포함한다. inline 엘리먼트 span,em,img, strong, a등이 있다. 한줄을 차지한다.워드프로그램에서 엔터를치지않는한 이어지듯이 인라인 엘리먼트역시 한줄로 이어진다. img엘리먼트로 두그림을 넣었다고 가정해보자. 두그림은 연이어 보여질것이다. group 엘리먼트 div,span엘리먼트를 특별히 칭하는말이다. 엘리먼트나 텍스트 데이터를 그룹으로 묶을 수 있는 기능을 가진 엘리먼트이다. 앞서 말했듯이 div는 블록 엘리먼트고 span은 인라인엘리먼트이다 이 점에서유의.. 2009. 10. 25.
브라우저 버그 해결 기초 브라우저 버그 해결 기초 개녑 잡기 문서를 다 작성후 브라우저에서 적용시켜보면 문제가 발생한다.이런 버그(bug)를 해결하기 앞서 기초 부터보자. 가장 기본적으로 일어나는 문제는 문서가 제대로 작성되지않았을 경우이다. 엘리먼트에서 " /" 이라던가 " >" 등 빼먹었을떄 당연히 문제는 일어난다. css경우도 마찬가지다.그래서 문서작성을 마치면 반드시 유효성검사를 해볼필요가있다. html의 유효성검사 css의 유효성검사 IE 레이아웃.. IE는 특별나게 "레이아웃"이라는 개념을 사용한다.레이아웃을 가지는 엘리먼트는 다음과 같다. body, html, table, tr,td,img,hr,input,select,textarea,button, iframe, embed,object,applet,marquee 엘리.. 2009. 9. 10.
웹표준 폼(form) 코딩(1) 웹표준 폼(form) :: 필드셋(fieldset)과 레이블(label) 예시로 소스부터보자 2009. 9. 10.
웹표준 테이블 코딩 웹표준 테이블 코딩하기 테이블의 본래 목적은 자료를 가독성있게 ,쉽게알아볼수 있도록 행렬로 표시해주는 것이다. 이런 표의 올바른 사용법 그리고 올바른 코딩을 알아본다 우리가 흔히 알고 있는 태그틑 table, td, tr 이세가지이다. 명확한 표의 사용을 위해 엘리먼트들을 살펴보자 써머리와 캡션 caption은 테이블의 제목으로 보면된다. 테이블의 가운데 정렬된다 최근 인기가요 참고로 table의 속성 엘리먼트 summary는 이미지의 속성 엘리먼트 alt와 같이 마우스를 올릴때 설명해준다 thead,th,tbody,td,tfoot thead 는 표의 맨 머릿부분이다.다름것도 마찬가지로tbody는 주요 내용tfoot은 마지막을 나타낸다. 이렇게하면 좀더의미를 명확히 할 수 있다. th는td차이도 마찬가지.. 2009. 9. 10.

티스토리툴바