본문 바로가기

웹표준78

HTML5 article 엘리먼트 HTML5 article 엘리먼트(element) 독립적인 컨텐츠 단위를 표시할 때 사용 한다.예를들자면 블로그,뉴스, 기사, 포스팅등에 사용될것이다. 블로그포스팅 어쩌고 저쩌고 내용 코멘트보기 위 에제를보면 간단히 쓰는 블로그를 샹각하면될것이다. 상단에 블로그 포스팅제목, 시간 그리고 내용 마지막에 코멘트 접기이것이 나와있다. 이 독립적인영역을 감사는것이 article엘리먼트이다 블로그 포스팅 어쩌고 저쩌고 내용 댓글 Posted by: 어떤놈 댓글내용 어쩌고저쩌고 Posted by: 다른놈 대글내용 뭐시기뭐시기 위의 예제에서는 블로그 포스팅의 내용뿐만아니라 댓글역시 독립적인 부분으로 article로 감싸주고있다. 계층요소를보면 전체포스팅글 article,안에 머리부분 header 그리고 댓글영역 se.. 2010. 4. 22.
HTML5 nav 엘리먼트 HTML5 nav 엘리먼트(element) 문서 내 네비게이션 요소들을 표시하기 위한 영역이다. 네비게션의 역할은 페이지의 안내.다른페이지로 연결이다. 검색로봇이나 기타에 리더기에 읽히는 경우 네비게이션안의 링크 철글자는 중요하다. 예제는 네비게이션이 페이지 자체를 안내하는것 그리고 외부링크 연결 한 것을 보여준다 네비게이션 어쩌고저쩌곳 이러코저런곳 다른곳 2010. 4. 22.
HTML5 section 엘리먼트 HTML5 section 엘리먼트(element) 일반적인 문서 및 애플리케이션 영역을 표시할 때 사용한다. 콘텐츠의 주제별 그룹화한다 섹션의 예로는 챕터 될, 탭 대화 상자, 또는 논문의 번호 섹션에있는 다양한 탭 페이지. 웹 사이트의 홈 페이지는 섹션으로 소개, 뉴스 항목에 대한 연락처 정보등으로 사용될 수있다. 공식사이트에는 section엘리먼트사용시 두가지주의점을 요망하고있다. article 엘리먼트와 혼란하지말것, article은 내용,주제를 담은 것을 사용할때 사용한다 스크립트나 기타 기능적으로 엘리먼트를 사용하게 될 경우 div를 대신사용할것 요약하면 section의 경우는 구역지정으로 감싸는역할로 사용할것을 권하고있다. 이전에 div엘리먼트가 기능적,본문을 담은 부분,전체를 감사는역할을했다.. 2010. 4. 21.
HTML5 IE 핵 HTML5 IE 핵 웹문서에 따른 핵과 필터에 대해서는 미리 설명한적있다. CSS 핵(hack)과 필터(filter) IE이 못난이 역시 버전을 무시하고 HTML5를 제대로 지원해주지 않는다. 다행스럽게 간단한 if구문의 스크립트소스로 해결할 수있다. 이것으로 해결.아래는결과물 http://sianasiatiger.cafe24.com/study/5_html_IE.html 2010. 4. 14.
HTML5 변경점 추가된 새속성 HTML5 변경점 추가된 새속성 HTML 5는 기존 HTML 4 내의 요소에 대해 여러 가지 새 속성들을 제공 하고 있다. a와 area 요소는 link와 함께 사용 가능한 media 속성을 이용할 수 있다. a와 area 요소는 ping이라는 새 속성을 통해 하이퍼 링크에 대해 ping 정보를 보내야하는 URI 목록에 대해 한칸 공백으로 분리해서 제공할 수 있다. 이 속성은 사용자 에이전트가 어떤 URI에 ping 정보를 보냈는지 사용자에게 알려 주거나 개인 정보를 우려하는 사용자를 위해 기능 끄기도 제공 한다. area 요소는 좀 더 견고 하도록 hreflang와 rel 속성 모델을 사용한다. base 요소는 a 요소에서 이미 널리 지원되는 target 속성을 지원한다. a와 area에서 iframe.. 2010. 4. 3.
html5 엘리먼트 변경점 새로생긴 엘리먼트 html5 엘리먼트 변경점 새로생긴 엘리먼트 HTML5 추가된 엘리먼트포스팅에서 간단히 봤지만 새로추가된것들 더자세히보자 section은 태그는 일반적인 문서 및 애플리케이션 영역을 표시할 때 사용한다. article은 뉴스 기사나 블로그 글 같은 독립적인 컨텐츠 단위를 표시할 때 사용 한다. aside는 문서의 주요 부분을 표시하고 남은 부분의 컨텐츠를 표시할 때 사용한다. hgroup은 섹션 머리말을 표시할 때 사용한다. header은 문서 내 소개 및 네비게이션 메뉴 모음을 표시할 때 사용한다. footer는 문서 내 꼬리말 부분을 표시할 때 사용하며 문서 저자, 저작권 정보 같은 것을 표시할 수 있다.. nav는 문서 내 네비게이션. figure는 그림이나 비디오 같은 임베딩 컨텐츠와 함께 캡션을.. 2010. 3. 30.
HTMl5 레이아웃 만들기 HTMl5 간단한 레이아웃 만들기 html5를 이용해서 간단한 레이아웃을 만들어보자 먼저 생각하는 레이아웃의 모양은 다음과 같다. 각 엘리먼트와 그 크기는 그림과 같이 할것이다 html5 소스 위 그림에서 알수있듯이 먼저 헤더(header) 그리고 네비게이션(nav) 그다음에는 사이드바(aside)와 콘테츠(section, artucle) 맨아래 풋터(footer)를 둘것이다. 소스는 다음과 같다. html5 simple test header nav link link link aside section article footer 위에서 div엘리먼트를 쓰면서 왜 전체를 감싸주었는지는 아래에 설명하겠다. CSS로 완성 이제 css로 꾸며보자. 항상 해주는것이지만 일단 마진과 패딩을 0, 그리고 리스트스타일을.. 2010. 2. 20.
html5 변경점 사라진 엘리먼트 html5 엘리먼트 변경점 사라진 엘리먼트 html5에서는 사라진것도 많고 새로 만들어진 엘리먼트도 많다. 하나하나 살펴보자 사라진 엘리먼트 CSS로 다루는것이 더 좋기때문에 사라진 엘리먼트 basefont 이런식으로 문서 전체의 기본 폰트를 설정하기도했으나 css에서 완전히 처리해주니 불필요하다고 여겨짐 big, small 문자를 크게 또 작게 변경 해 주는 엘리먼트였으나 이것역시 css에서 가능 center 중앙에 배치하는 역할을 했으나 이것역시 css에서 가능하다. font font역시 basefont와 마찬가지 s,strike,u 줄로 텍스트를 꾸며주는 이들역시 css에서 가능하므로 사라졌다. tt 공지나, 상표를위해 사용했던것 이역시 css별도 강조 가능하기에 사라졌다. 프레임, 더이상 없다! .. 2010. 2. 19.
웹표준 간단한 폼(form) 양식 웹표준 간단한 폼(form) 양식 리스트를 이용한 간단한 폼을 만들어보겠다. 그전에 폼에 사용되는 엘리먼트부터 보자 가장 기본적으로 구축할 모습은 다음과 같다. 개인정보입력 form form은 양식을 시작한다는 의미를가진다.또한 action옵션을 가짐으로서 입력완료하고 실행시 작동연결을 담당한다. fieldset fieldset은 양식의 테두리를 보여준다. 구역의 의미로 임력해야할여러 정보가있다면 큰범위로 나누어 줄때 사용한다. legend legend은 나누어진 구역의 의미를 가르켜준다.여기서는 개인정보입력이라고 되어있다. label label은 input엘리먼트가 사용될 목적을 지칭할때 사용된다. input input은 입력 양식을 보여준다, 잘 알다시피 라디오버튼,체크 박스, 텍스트등을 옵션으로 가.. 2010. 2. 18.
인라인(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.

티스토리툴바