본문 바로가기

웹표준77

HTML5 pre 엘리먼트(element) HTML5 pre 엘리먼트(element) pre 에리먼트는 텍스트 서식등 있는그대로 타이포그래피처럼 보여줄때 쓴다.예로 html이나 스크립트 css소스를 보여줄때 사용한다. 계속포스팅할때 소스를 보여주는 것도 pre엘리먼트를 사용할때이다. 있는그대로 보여주므로 띄우기도 그대로 나오계된다.사용되는예를보자면 이메일이나 빈칸공백이있는것들을 그대로 보여줄 떄 프로그래밍언어나 소스일부분을 보여줄떄 ASCII 코드를 보여줄때 첫번째예를 보자 이것은 프로그래밍코드를 보여주느예제이다 This is the Panel constructor: function Panel(element, canClose, closeHandler) { this.element = element; this.canClose = canClose; t.. 2010. 5. 28.
HTML5 hr 엘리먼트(element) HTML5 hr 엘리먼트(element) hr엘리먼트는 테마별로 각 섹션을 정확히 나누어 주는데 이용한다.네이버,다음 홈페이지를 봐도 헤더와,콘테츠,푸터 부분사이에 들어가 있는것을 볼수있다. 사이트 이름 내용이 어쩌고 저쩌고 샷타이거 이것 말고도 문단을 먕확히 단락지을 때도 사용된다 이번 엘리먼트는..................입니다 그리고.................입니다 마지막 으로...........입니다 2010. 5. 13.
HTML5 p 엘리먼트(element) HTML5 p 엘리먼트(element) 가장 흔히 쓰는 문장을 담는 엘리먼트 별도로 설명하지않아도 포스팅 쓸때 쓰무로 잘알것이다. 간단한예제 쓰고 싶은대로 아무거나 씀 그러나 다음과 같은 예를보자 최종수정날짜: 2010-05-13 작성자: 샷타이거@xxxxcom 물론 문제없으나 더 명확화 하기위해 적절한 엘리먼트를 사용하는것이 올바르다.아래는 좀더 좋은예 최종수정날짜: 2010-05-13 작성자: 샷타이거@xxxxcom 2010. 5. 13.
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.

티스토리툴바