HTML5 둘러보기

웹표준 2009. 9. 29. 17:28

HTML5 둘러보기 추가된 엘리먼트

API의 확장 모바일에서 구동가능, 미디어 지원 이런특징을 가지고 개발되는 html5에 대해 간단히 둘러보자

The DOCTYPE 문서타입 선언

아주 간단해졌다. html1.0, html4.0문서선언 보다 훨씬 간단해졌다. 훨씬 간단하고, 기억하기쉽고, 간편하게 의미있어보인다

새로 만들어진 엘리먼트(Element)

이전에 엘리먼트에 새로운 엘리먼트가 추가되었다. 대체적으로 과다하게 쓰였던 div엘리먼트를 좀더의미화 하여 구체적으로 나누어졌다고 보면된다. 추가된 엘리먼트는 다음과 같다.

  • <header>
    글자그대로 머리부분이다.브랜드이름이나,페이지 맨위에서 사이트를 소개할떄 사용한다.
  • <nav>
    nvigation의 약자로 nav로 쓴다.흔히 사용하는 메뉴 네비게이션 부분에 쓰일 것이다.
  • <section>
    이제 div와 같이 사용한다.구역을 나눈다.
  • <article>
    section과 흔히 유사 하다하는데 article은 내용(content)를 담는 엘리먼트이다.예를 들어 블로그같으면 포스팅 부분이 article이 되겠다.
  • <aside>
    우리가 흔히 지정하고 사용해왔던 sidebar의 역할을 할 엘리먼트다.블로그로 예를들자면 태그클라우드, 카운터, RSS, 시계 등이 이부분이다.
  • <footer>
    하단 부분이다 헤더와 반대로 생각하면 된다.

위에 태그를 봤다면 이건 한페이지에 한번만 사용해야하나 하는 생각이들수 있다. 하지만 여러번 사용해도된다고 되어있다.예제를 들자면 아래그림과 같다.


위그림에서 보듯이 header 와 footer는 section안에 한번씩더쓰였다. 주요머리부분과 하단부분 이라보면되며 이로서 별도 아이디나 클래스 지정없이 편하게 짤수 있게 된다.

div 엘리먼트와 비교해보기

간단한 두그림으로 div를 쓸때와 html5에서 새 엘리먼트를 쓸때를비교해보자

모두 div로 지정하고 개별 아이디를 header, nav, article,....등으로 지정해붜야 됬다.


간편하고 아이디를 부여하지않아도 어떻게사용되는지 한눈에 들어온다.

이외에 추가와 개발

  • Drag & Drop
    자바스크립트를 서야했던 드래그 앤 드롭이 지원된다.
  • Video & Audio
    비디오와 오디오 엘리먼트 예제와 같이 사용된다.

이상 간단한 훑어보기였다.


설정

트랙백

댓글

  • Favicon of http://blog.naver.com/kso79101/30079829939 가인 2010.02.03 13:55 ADDR 수정/삭제 답글

    좋은정보 감사합니다. 제 블로그에 담아가겠습니다.
    http://blog.naver.com/kso79101/30079829939

웹표준 폼(form) 코딩(2)

웹표준 2009. 9. 11. 15:02
개인 신상 정보

좋아하는 색:



설정

트랙백

댓글

브라우저 버그 해결 기초

웹표준 2009. 9. 10. 21:10

브라우저 버그 해결 기초 개녑 잡기

문서를 다 작성후 브라우저에서 적용시켜보면 문제가 발생한다.이런 버그(bug)를 해결하기 앞서 기초 부터보자.

가장 기본적으로 일어나는 문제는 문서가 제대로 작성되지않았을 경우이다. 엘리먼트에서 " /" 이라던가 " >"

등 빼먹었을떄 당연히 문제는 일어난다. css경우도 마찬가지다.그래서 문서작성을 마치면 반드시 유효성검사를 해볼필요가있다.

html의 유효성검사

css의 유효성검사

IE 레이아웃..

IE는 특별나게 "레이아웃"이라는 개념을 사용한다.레이아웃을 가지는 엘리먼트는 다음과 같다.

body, html, table, tr,td,img,hr,input,select,textarea,button, iframe, embed,object,applet,marquee

엘리먼트가 레이아웃인지아닌지 확인하는방법은 hasLayout라는 자바스크립트로 확인할수 있다.

미리 말하지만 지금말하는 haslayout이라는 개념은 css우리가 흔히 말하는 layout 과 다르다. 앞서말했듯이 haslayout은 익스플로어에서 문서를 읽어들일때 사용하는개념이다

또 css를 다음과 같이 지정하면 레이아웃이라 인식한다

Layout을 갖게 만드는 CSS 속성
  • position: absolute
  • float: left|right
  • display: inline-block
  • width: ‘auto’ 외의 모든 값
  • height: ‘auto’ 외의 모든 값
  • zoom: ‘normal’ 외의 모든 값 (IE 전용)
  • writing-mode: tb-rl (IE 전용)
  • overflow: hidden|scroll|auto (IE7만 적용됨)
  • overflow-x|-y: hidden|scroll|auto (IE7만 적용됨)

IE 버그는 이런 layout인식 문제 떄문에 여러가지가 일어난다 다음부터 하나하나풀어보자



설정

트랙백

댓글

웹표준 폼(form) 코딩(1)

웹표준 2009. 9. 10. 15:00

웹표준 폼(form) :: 필드셋(fieldset)과 레이블(label)

예시로 소스부터보자

이름:
     
   

fieldset:관련 정보를 하나로 묶는 역할을 한다.

legend: 필드섹의 목적 명시

label : 레이블 엘리먼트를 클릭하면 연결된 폼 엘리먼트에 포커스가 옮겨진다.또 접근성을 높일 수 있는데 lable사용시 스크린리더 프로그램이 관련된 폼요소와 정확하게 연결시켜준다


설정

트랙백

댓글

웹표준 테이블 코딩

웹표준 2009. 9. 10. 14:46

웹표준 테이블 코딩하기

테이블의 본래 목적은 자료를 가독성있게 ,쉽게알아볼수 있도록 행렬로 표시해주는 것이다. 이런 표의 올바른 사용법 그리고 올바른 코딩을 알아본다

우리가 흔히 알고 있는 태그틑 table, td, tr 이세가지이다. 명확한 표의 사용을 위해 엘리먼트들을 살펴보자

써머리와 캡션

caption은 테이블의 제목으로 보면된다. 테이블의 가운데 정렬된다

최근 인기가요

참고로 table의 속성 엘리먼트 summary는 이미지의 속성 엘리먼트 alt와 같이 마우스를 올릴때 설명해준다

thead,th,tbody,td,tfoot

thead 는 표의 맨 머릿부분이다.다름것도 마찬가지로tbody는 주요 내용tfoot은 마지막을 나타낸다. 이렇게하면 좀더의미를 명확히 할 수 있다. th는td차이도 마찬가지이다.th는 thead에서 사용된다

번호 곡명 아티스트 앨범
2. 뭐야 만든놈B what is ...
1. 랄랄라 만든놈A 잼나는 앨범

속성엘리먼트에서 눈여겨볼것은 scope이다 값은 col, row로 소스를 봤을때 열인지 행인지 알수 있도록하기위해 사용한다.

col, colgroup

표에서 tr을 css에서 선택하면 전채행에 대해 적용할 수 있다.또 아이디를 부여하여 특정열에 사용할 수 있다. 하지만 td의 경우는 상대적으로 많이 사용되기에 한 행에대해 지정하기가 쉽지않다.그래서 지정을 위해 사용하는 엘리먼트가 col, colgroup이다

<colgroup>
<col id="first" />
<col id="second" />
<col id="third" />
<col id="forth" />
</colgroup>

하지만 단점이 있으니 아직 여러 브라우저에서 지원하지 않는다는점..

위와 같이하면 css에서 col#first{} 이런식으로 지정하여 표의 모든 첫번째 행에 스타일을 지정할 수 있게 된다

셀간격의 초기와 문제

css의 border-spacing를 사용하면 셀간격을 쉽게조절할 수 있다. 하지만 익스플로어에서는 지원하지않는다.

표준을 따라가자니 cellspacing를 사용할 수 밖에 없으니 할수 없다.cellspacing를 사용하면 마크업에 표현의 내용이 들어가지만.. 이정도쯤이야




설정

트랙백

댓글

  • Favicon of https://slfjsdijlc.tistory.com NeoKim 2009.09.10 14:48 신고 ADDR 수정/삭제 답글

    좋은 정보네요 ㅋㅋ 잘보고 갑니당~~

  • 리버앤 2014.09.18 13:10 ADDR 수정/삭제 답글

    #frist 아니고 저건가요??????

    • Favicon of https://siana.tistory.com 샷타이거 2014.09.20 11:53 신고 수정/삭제

      둘다상관없습니다
      다만 지정순위가 다를 뿐이지요 자세한건 여기서 참조하세요^^
      http://siana.tistory.com/entry/CSS-%EC%A7%80%EC%A0%95%EC%88%9C%EC%9C%84

내비게이션 기초 태그 소스

웹표준 2009. 9. 7. 18:36

CSS 내비게이션

이제 까지 많이 표로 내비게이션을 만들어 왔다.웹표준과 CSS를 사용하면서 리스트 태그를 사용하게된다.리스트 태그는 크게 3가지로 나뉜다 ul,ol, dl

ul은 비순차적인 리스트작성시 ,ol은 순차적 리스트 작성시, dl은 정의 할 때 사용된디

내비게이션 활용에 사용되는데 포탈사이트 네이버의 예를보자. 여기는 dl 리스트를 사용하고 있다.

콘텐츠 바로가기
내 정보
뉴스캐스트
오픈캐스트
네이버캐스트
타임스퀘어
쇼핑
마케팅 센터

다음경우 소스를 보면 ul을 사용하고 있다


이와 같이 내비게이션은 리스트 소스로 시작된다. 여기에 CSS를 어떻게꾸미냐에따라 세로,가로형 네비게이션이 만들어진다.


설정

트랙백

댓글

문서유형 doctype 전환 브라우저 모드

웹표준 2009. 8. 29. 14:43
DTD(document type Definition)문서타입 정의
DTD는 어떤내용은 허용하고 어떤내용은 허용하지않는가의 내용을 가지고 있다 .각 브라우저는  이에따라 웹문서를 해석할 때 문밥에 맞는지 제대로 동작하는지를 검사하게된다.

브라우저모드
호환성을 준수하기위해 노력해왔고 이를 위해 화면에 표시하기위한 엔더링모드를 두가지로 나뉘었다. 표준(standard)호환모드 비표준(quirks)확장모드 이다. 표준호환모드는 기술 명세서의 냐용대로 페이지를 화면에 표시하고 비표준 확장모드일때는 좀더 느슨하게 하의 호환을 고려하여 페이지를 화면에 표시한다.예로 비표준 확장모드는 과거 익스플로어 버전에서 페이지가 깨져 보이지않도록 한다.

아래는 어던 DOCTYPE일때  어던 렌더링 모드로 작동하는지 한눈에 알아볼 수 있는도표이다.
http://meyerweb.com/eric/dom/dtype/dtype-grid.html



설정

트랙백

댓글