본문 바로가기

웹표준/HTML5 훑어보기59

HTML5 address 엘리먼트(element) HTML5 address 엘리먼트(element) address는 영역을 대표하여 접촉 시도를 나타내는 엘리먼트이다 만약 내 블로그의 address엘리먼트를 쓴다면.address는 그블로그의 body엘리먼트 즉주인장을 대표할 것이다 샷타이거 address엘리먼트는 접촉자 외 다른것을 내포하지않는다.아래 예는 잘못된 예제이다. 수정날짜 1999/12/24 23:37:50 올바른예 by 샷타이거 on November 4th, 2009 2010. 5. 11.
HTML5 footer 엘리먼트(element) HTML5 footer 엘리먼트(element) footer말그대로 아랫바닥이다. 각 섹션에서 작성자,날짜,저작권,엮인글 이런것들이 속하는부분이다. 역시 약간의 주의 사항 인용 footer의 주요 용도는 섹션의 아랬부분의 여러정보를 포함한다. 반드시 작성자 정보를위해 사용하는것이아니다. 보통 작성자 정보를 위해 사용하는 엘리먼트는 address이면 물론 footer안에 포함될 수있다. 또 이 footer는 위치상 밑에 들어간다는 의미가아니라 역할상 앞서말한작 성자,날짜,저작권,엮인글 이런것들이 속하는 엘리먼트이다.따라서 맨앞으로 다음과 같이사용 될 수도 있다. Back to index... 푸터 설명 반드시 마지막은 아님 내용~어쩌고~저쩌고 Back to index... 2010. 5. 4.
HTML5 header 엘리먼트(element) HTML5 header 엘리먼트(element) header엘리먼트는 상단의 페이지의 머릿부분에 해당한다. 중요한점은 hgroup과 다른단점. hgroup의 경우는 한 섹션의 머리글을말한다.반면header는 한페이지의 머릿글에 해당한다. www.w3.org에는 다음과 같은 문구가 있다. header엘리먼트내부에 반드시 hgroup를 요구하지는않는다. header는 여러번 섹션을이끄는 sectioning content가아니다. 오셔셔반갑수 여기는 홈페이지 위의예제는 페이지를 안내하는 가장머릿부분이다. 반드시hgroup를 쓸필요없다고 했듯이 내부에 hgroup이 포함되어 있지 않다. ~프로그램 버전 ~제작 This version:이번버전 여기 Previous version:저번버전 저기 저작권 위의예제는 h.. 2010. 5. 3.
HTML5 hgroup 엘리먼트 HTML5 hgroup 엘리먼트(element) hgroup엘리먼트는 영역의 머릿글을 구룹화할때사용한다. h1~h6엘리먼트말으로도 충분히머릿글을 나타낼수이다.하지만 하위에서 h1~h6가 다시사용될때 혼동될수있으므로 머릿글로 따로 묶어놓는역할을 한다.간단한 예제 The reality dysfunction Space is not the only void Dr. Strangelove Or: How I Learned to Stop Worrying and Love the Bomb 2013년 4월경 html5에서 제외됬다. subhead등으로 대신 바꿀대안모색중. 2010. 4. 23.
HTML5 h1 ~ h6 엘리먼트 HTML5 h1 ~ h6 엘리먼트(element) 이전에도 잘아다시피 h1,h2,h3,h4,h5는 각 영역을 대표하는설명을 해준다.가장먼저중요한것이 h1 숫자가 높아질수록 차후의 중요도이다. 흔히 홈페이지를 만들때면 h1이 홈페이지 제목, h2는 네비게이션이나, 홈피의 두번째중요요소(현재페이지가 말하고자하는바라든지..ex.갤러리,방명록), h3는 그하위의 세부분야분류 ,h5,h6는 대략 맨하위에 저작권용도로 사용되었다. h1 엘리먼트를 한번만 사용해야한다라고 권유하지만 영역별로 대표한다면 여러번사용해도 상관없다. 마지막으로 예제를 보자 내정원 정원1. 꽃 이런저런 꽃 화초 이런저런 화초 정원2 정원3 정원4 쉽게생각하면 집합을 생각하면 되겠다. 위의예제는 정원이라는큰집합에 정원1.2,3,4가있고 정원1안.. 2010. 4. 23.
HTML5 aside 엘리먼트 HTML5 aside 엘리먼트(element) aside는 문서의 주요 부분을 표시하고 남은 부분의 컨텐츠를 보여주는 영역이다.흔히 생각하기쉬운점은 이전에 사이드바(sidebar)개념과 같다고 생각하는데 조금더명확히 생각할 필요있다. 앞서말했든이 주요부분외 남은 컨텐츠이다.티스토리블로그를 비교한다면, 최근포스트, 최근댓글, RSS등 이 이부분이다. My blogroll Example Blog Archives My last post My first post Twitter Feed 울라불라 뭐라쩝쩝 위예제에서 맨처음 블로그링크,다음은 최근 슨글, 또 별도로 트위터를 보여주고있다. 2010. 4. 22.
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.

티스토리툴바