웹표준 테이블 코딩 보완

웹표준 2010. 7. 13. 18:29

웹표준 테이블 코딩

본주소는 여기 좀더보완한다 웹표준 테이블

행과 열

행(row)이 가로이고 세로가 열(col)이다. 아래 그림참조

코딩의 개념 다시확인


thead엘리먼트는 표의 머릿부분을  tfoot는 아랬바닥을 tbody는 메인내용을 이야기한다.

tfoot의 경우는 꼭 마지막에 위치한다 라는 의미보다.보다 통계수치의 혼합등을 위해사용할 떄가 많다.
특별한 의미가 없다면 굳이 사용할 필요는 없다.

tfoot의 경우는 tbody앞에서 미리 끝내주어야한다. 그래도 마지막에 나온다. 아래 예가 올바른모습


<table cellspacing="0" summary="간단한 테스트">
<caption>간단한예</caption>
<thead>
 <tr>
  <th scope="col">이름</th>
  <th scope="col">성별</th>
  <th scope="col">직업</th>
 </tr>
</thead>
<tfoot>
 <tr>
  <td>두사람</td>
  <td>남자와여자</td>
  <td>웹관련</td>
 </tr>
</tfoot>
<tbody>
 <tr>
  <td>뭐시기</td>
  <td>남</td>
  <td>프로그래머</td>
 </tr>
 <tr>
  <td>저시기</td>
  <td>여</td>
  <td>디자이너</td>
 </tr>
</tbody>
</table>


잘 모르는 것들 다시확인


colgroup은 세로 열을 다 지칭할때 사용한다. 흔한 예



<caption>웹표준 테이블 코딩</caption>
<colgroup span="1"/> <colgroup span="2"/> ...

caption 다음에 쓰는것이 올바르다.
colgroup대한 올바른 사용은 그림을 참조하여 아래를 상기하자

1. 단순한 colgroup으로 끝맺으면 표 에서 세로한줄을 의미한다.
2. 속성 span은 몇개의 세로줄을 지칭 하는가 이다.
span="2" 라고 되어있으면 연 이은 세로 두줄을 지칭한다
3. 자식엘리먼트로 col이 있다. col역시 span속성 엘리먼트가 있으며 수에따라 세로줄을 지칭한다.


<colgroup>
 <col />
 <col span="2" />
</colgroup>

colgroup, col엘리먼트의 span ,CSS width

span 처럼 위에서 말한데로 세로줄을 지칭한다. 이때 span값이 2일지라도 CSS나 속성의 width값등은 하나의 줄마다적용된다. colgroup, col엘리먼트의 다른 속성으로는 넓이도 있는데 다음예를보자.


<col width="70" span="2" />

또는 css로보자면


col{width:70px;}


span값이 2라고 해서 두 줄을 합해서 가로값이 70이 아니고 각각의 줄의 값을 말한다.

IE6와 CSS문제

그림과 같이 배경색을 지정할때 문제는 IE6에 있다. 속성 선택자가 가능하면  단번에 다음과 같이 한줄을 월하는색으로 해줄수있다.


colgroup[span="1"]{ background:#fc9;}
colgroup[span="2"]{ background:#6c6;}
col{background:#f6f;}
col[span="2"]{background:#969;}

하지만 IE6는 지원하지않는다. 방법은 아래와같이 colgroup안에 col을 다 만들고 아이디 지정후
그에맞게 CSS로 지정해주는 방법뿐이다.


<col id="first" />
<col id="sec" />
<col id="thi" />
<col id="forth" />
<col id="fifi" />
<col id="six" />

마지막으로 아래는 처음의 그림과 같은 결과를 보여준다


..... 
<caption>웹표준 테이블 코딩</caption>
<colgroup span="1" />
<colgroup span="2"/>
<colgroup>
 <col />
 <col span="2" />
</colgroup>
<thead>....

예제의 결과참조 http://sianasiatiger.cafe24.com/study/1_html_table.html


실용적인 표만들기

일단 완성된 그림부터보자


결과는 여기서 확인 http://sianasiatiger.cafe24.com/study/1_html_table_02.html


직업을 나타낼 간단한 표를 만들어 보자. 먼저 테이블 콘텐츠 코딩. 많은 내용의 중간은 생략했다.


<table cellspacing="0" summary="간단한 테스트">
<caption>간단한 직업표</caption>
<thead>
 <tr>
  <th>이름</th><th>성별</th>
  <th>직업</th><th>나이</th>
  <th>혈액형</th><th>기타</th>
 </tr>
</thead>
<tfoot>
 <tr>
  <td>두사람</td><td>남자와여자.......</td>
 </tr>
</tfoot>

<tbody>
 <tr class="odd">
  <td>뭐시기..........</td>
 </tr>
 <tr>
  <td>저시기...........</td>
 </tr>
  <tr class="odd">
  <td>또한명...........</td>
 </tr>
</tbody>
</table>


tr엘리먼트에 클래스를 추가한것은 그림처럼 열에따라 배경색을 입히기위해서이다. CSS3가지원된다면 아래처럼 하면  되지만 지원하지않는 브라우저가 많기에 클래스로 해준다.


.odd{ background:#edf5ff;; }
tr:nth-child(odd){background:#edf5ff;}

colgroup을 코딩한 것 처럼 두세로줄을 가로 70 그 다음한줄은 100 다음두중 70 나머지는 자동으로 해주었다.


<colgroup>
<col width="70" span="2" />
<col width="100" />
<col width="70"  span="2" />
<col />
</colgroup>

마지막으로 CSS확인 tfead색 텍스트정렬 이정도는 기본.


body{text-align:left;}
table{padding:0; width:500px; border-collapse:collapse;
border-spacing : 0; border:1px solid #666666;}
thead{ border:2px solid #F99;}
tfoot td{ background:#FFF;} table th{ background:#FC9;} td{border-right: 1px solid #ccc;} col{border-right: 1px solid #ccc;} .odd{ background:#EDF5FF; } tr:nth-child(odd){background:#edf5ff;}



설정

트랙백

댓글

  • 도야 2010.07.20 11:24 ADDR 수정/삭제 답글

    제목은 웹표준 코딩인데.. 내용은 그렇지 않아 보이는군요
    colspan과 rowspan은 웹 표준이 아닙니다.
    익스에서만 지원하는 속성일 뿐입니다.
    웹표준을 공부하시는분들이 이글보고 잘못 이해하실수 있으리라 생각됩니다.
    내용 수정좀 해주세요..
    아님 제목을 그냥 테이블코딩법??

    • Favicon of https://siana.tistory.com 샷타이거 2010.07.20 12:57 신고 수정/삭제

      잘못 보신 듯 한데....

      colspan과 rowspan이 익스에서만 지원하다니요?-_-?

      다른 브라우저에서도 잘 작동합니다.

      이 속성이 없으면 셀병합을 어떻게 하지요?ㅎㅎ

      HTML5에서도 여전히 지원합니다.

      아마도 테이블의 용도를 레이아웃용으로 여전히 착각하시는듯 하네요, 테이블은 웹에서 일목요연한 정리된 정보를 나타낼 때 나타내는 표입니다.

  • 야옹이 2010.10.20 17:50 ADDR 수정/삭제 답글

    ㅋㅋ 아마도 테이블의 용도를 레이아웃용으로 여전히 착각하시는듯 하네요, 테이블은 웹에서 일목요연한 정리된 정보를 나타낼 때 나타내는 표입니다.☜ 전 아주그냥 여기에 동감~!!!

  • 2012.03.27 14:30 ADDR 수정/삭제 답글

    tr:bth-child(odd){background:#edf5ff;}

    이부분요.. bth --> nth 아닌가요? 제가 잘못알고있나....용 ;

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

      오 제가 잘못입력했군요 tr:nth-child 맞습니다.
      감사합니다^^

  • Favicon of http://dsgn.kr 허말랭이 2013.03.20 11:51 신고 ADDR 수정/삭제 답글

    잘보고 갑니당 :-) 도움이 되었어요!

HTML5 map area 엘리먼트(element)

웹표준/HTML5 훑어보기 2010. 7. 9. 11:02

HTML5 map area 엘리먼트(element)


map엘리먼트는 이미지맵을 정의하는 엘리먼트이다.
img엘리먼트나 objec t엘리먼트를 이용하여 이미지 삽입후에 다수이미지에 대한 이미지맵을 정의한다.

자식엘리먼트가 area로 맵의 하이퍼링크를 표현한다.
html5에서는 area의 속성엘리먼트 noHref(일크없음)이 사라지고 좀더참조핳 hreflang(링크할 언어종류),
meadia,pinㅎ(서버용어플리케이션호출), rel이 추가되었다. 사용하는 예를 보자

1. img나 object로 이미지를 삽입하고 속성엘리먼트 usemap으로 지정한다.


<img src="images/box.jpg" alt="" width="200" height="100" usemap="#box" />
2. map 엘리먼트 시작 name과 id 속성의 값을 같게 작성하고 연계하도록 한다.
usemap에서 box로 했듯이 여기서도 box로 해주었다.

<img src="images/box.jpg" alt="" width="200" height="100" usemap="#box" />
<map name="box" id="box">
...
</map>
이렇게 해서 연계된다

3.area엘리먼트
shape는 형태를 말한다 사각형(rect) 다각형(poly) 원형(circle)이있다.

coords는 위치를 지정해준다
다음그림을 참조하자


그림의 크기는 가로 200px 세로 100px이다.
(x,y)는 가로 세로 위치이다.

먼저 사각형은 시작점과 대각선 끝점으로 지정된다.
다각형은 시계방향으로 좌표를 지정한다.


마지막으로 원은 제일쉽다 원의 중심 그리고 반지름을 지정하면된다.
이렇게 지정한 영역을 클릭시 지정한 곳으로 하이퍼링크된다.

area엘리먼트에서 alt역시 필수


<img src="images/box.jpg" alt="" width="200" height="100" usemap="#box" />
<map name="box" id="box">
<area shape="rect" coords="0, 0, 50, 100" alt="" href="#" />
<area shape="rect" coords="50, 0, 100, 100" alt="" href="#" />
<area shape="poly" coords="100, 100, 125, 0, 150,100" alt="" href="#" />
<area shape="circle" coords="175,50,25" alt="" href="#" />
</map>


설정

트랙백

댓글

HTML5 param 엘리먼트(element)

웹표준/HTML5 훑어보기 2010. 7. 9. 10:11

HTML5 param 엘리먼트(element)

플러그인 즉 object 엘리먼트의 파라미터를 정의한다.

type ,valuetype는 페지되었다. object엘이먼트의 자식엘리먼트이다. 이름과 값 속성엘리먼트는 반드시 작성해야하고 이값을 정함으로 서 외부 자원을 호출시 참조한다. 간단한 CNN뉴스에서 사용되는 소스를 보고 확인

<object height="384" width="640" type="application/x-shockwave-flash" 
data="cnn_video.swf">
 <param name="quality" value="high" />
 <param name="bgcolor" value="#000000" />
 <param name="allowFullScreen" value="true" />
</object>



설정

트랙백

댓글

HTML5 object 엘리먼트(element)

웹표준/HTML5 훑어보기 2010. 7. 9. 09:58

HTML5 object, param 엘리먼트(element)

object엘리먼트는 외부 콘테츠를 표현한다.

html5에서 달라진점이라면 html5에서는 audio와 video가 별도로 생겼기 째문에 이때는 object를 사용 안한다.

data속성은 외부 콘텐트의 url을 지정한다.
두번째의경우는 폭백의 예이다. img엘리먼트로 폴백해주고 있다.
type은 MIME 타입을 결정한다



<object data="images/vine.jpg" type="image/jpg"></object>

<object data="vine" type="image/jpg">
 <img src="images/vine2.JPG" alt="" title="덩굴" />
</object>

name은 하이퍼링크 발생시 컨텐츠를 대체한다.
<object data="base.html" 
name="targetting" width="200" height="200">
<p><a href="replace.html" target="targetting" >클릭하면 대체된다</a></p>
</object>
<p>초기 콘텐츠</p>
<p>클릭시 대체 콘텐츠</p>

ifram과 비슷하다.


설정

트랙백

댓글

HTML5 embed 엘리먼트(element)

웹표준/HTML5 훑어보기 2010. 7. 9. 09:05

HTML5 embed 엘리먼트(element)

플러그인을 표현할때 사용한다 동영상 음악등을 통합하여 표현할때 사용한다.

embed엘리먼트에는 자식엘리먼트를 사용할 수 없다. 단일하게 embed만으로 종료한다

html5오면서 변화한점은 이전에 비해 embed엘리먼트가 정식등록된점-그전까지는 object 엘리먼트로 대체하도록 권유되어왔다. 그리고 align엘리먼트역시 css로 대체된 점이다.


<p><embed src="tistory.swf" width="300" height="200" ></p>

type 속성 엘리먼트 는mime-text', 'image', 'audio', 'video', 'message', multipart', 'application-중 선택한다

아래는 가장많이사용하는 플래시의예


<embed height="100" width="466"  
type="application/x-shockwave-flash" src="flash.swf">



설정

트랙백

댓글

HTML5 iframe 엘리먼트(element)

웹표준/HTML5 훑어보기 2010. 7. 8. 17:22

HTML5 iframe 엘리먼트(element)

iframe은 내부에 포함된 콘텐츠를 표시할때 사용한다. 이번에 html5로 오면서 사라진 속성이 많다.


<iframe align="" frameborder="" longdesc="" marginheight="" marginwidth="" scrolling=""></iframe>

align은 img엘리먼트에서 설명했듯이 css로 대체, 마진 보더역시 마찬가지다. 옛부터 논의되던 scroll바역시 overflow로 css로 대체된다. 설명해주던 엘리먼트 longdesc는 a엘리먼트로 대체되었다.

간단한 예


<iframe src="inner.html" width="300" height="200"></iframe>

가로 세로 링크할 파일을 보여준예이다.꼭 src가 아니더라도 콘텐트에 포함시킬려면 srcdoc를 사용하면된다.

하지만 지원되는브라우저가 없다.


<iframe srcdoc="<p>모든부라우저에서 지원안함</p>" width="300" height="200"></iframe>

새로추가된것들

sandbox

보안강화를 위해 추가된것이다. 값은 4가지가있다.


<iframe sandbox="allow-same-origin"></iframe>
<iframe sandbox="allow-top-navigation"></iframe>
<iframe sandbox="allow-forms"></iframe>
<iframe sandbox="allow-scripts"></iframe>

seamless

값은없다 이속성을 사용하면 문서에 그냥일반콘텐츠로나타난다.



<iframe seamless src="form.html" width="300" height="200"></iframe>


설정

트랙백

댓글

HTML5 img 엘리먼트(eleement)

웹표준/HTML5 훑어보기 2010. 7. 7. 14:08

HTML5 img 엘리먼트(eleement)

html5에서 변경된 속성이 있다. 이전에서 사용하던 모든속석은 아래에와 같다.


<img src="" title="" alt="" width="" height="" usemap="" 
ismap="" hspace="" longdesc="" name="" vspace="" />

폐지 ,대체, css로 하도록 권유되는 것들을 제외하면 아래와같다.


<img src="" title="" alt="" width="" height="" 
usemap="" ismap=""  />

속성 엘리먼트

alt엘리먼트는 이미지가보이지않을때 대신 대체 해서 보여줄 엘리먼트이다.


<img src="game.jpg" alt="게임" />

굳이 alt 속성에 일일이 다할필요는없다 다음예제를 보자


<div>
<img src="game_01" alt="게임" />
<img src="game_02" alt="" />
<img src="game_03" alt="" />
</div>

div엘리먼트 안에 하나의 의미의 그림이 있다. 이런경우는 첫번째 img엘리먼트에만 입력해주면된다.

alt에 하이퍼링크의 유무에따른 코딩


<ul>
<li><a href="#"><img src="menu.jpg" alt="" />메뉴</a></li>
<li><a href="#"><img src="board.jpg" alt="" />게시판</a></li>
<li><a href="#"><img src="visit.jpg" alt="" />방명록</a></li>
</ul>

<ul>
<li><a href="#"><img src="menu.jpg" alt="메뉴" /></a></li>
<li><a href="#"><img src="board.jpg" alt="게시판" /></a></li>
<li><a href="#"><img src="visit.jpg" alt="방명록" /></a></li>
</ul>

첫번쩨는 링크에 별도텍스트를 작성한 경우이다. 두번째는 텍스트에링크가걸린경우이다 이런경우는 이미지가 보이지않을때를 생각해서 alt속성을 작성해야한다.

서술형

아주큰 이미지를 사용하고 중심으로 설명할때 있다 이럴때는
이어지는 문장으로 설명하는 것을 alt에 입력한다


<p><img src="worldcup.jpg" alt="국제축구연맹이 4년마다 
한번씩 개최하는 세계선수권대회이다." /></p>

요약하면 이미지가 안보일때 영향을 끼치는지여부에 따라 alt속성에 작성하냐 안하냐가요점이 된다.


설정

트랙백

댓글

HTML5 del 엘리먼트(element)

웹표준/HTML5 훑어보기 2010. 7. 5. 17:56

HTML5 del 엘리먼트(element)

ins엘리먼트와 다르게 문서에서 삭제된 콘텐츠를 구분하여 표현한다.

ins가 밑줄이 그어진다면 del은 가운데선이 그어진다.

속성엘리먼트역시 똑같으며 별반다를바없다.


<ul>
 <li>Empty the dishwasher</li>
 <li><del datetime="2009-10-11T01:25-07:00">Watch Walter Lewin's lectures</del></li>
 <li><del datetime="2009-10-10T23:38-07:00">Download more tracks</del></li>
 <li>Buy a printer</li>
</ul>


설정

트랙백

댓글

HTML5 ins 엘리먼트(element)

웹표준/HTML5 훑어보기 2010. 7. 5. 17:48

HTML5 ins 엘리먼트(element)

ins엘리먼트는 뭍서에 콘테트가 추가되었다는것을 보여줄때 쓴다.

흔히 쉽게생각하면 블로그의 덧글이라고 생각하면되겠다.먼저간단한 예


<aside>
  <ins>
  <p>우왕우왕 어쩌고저쩌고</p>
  </ins>
 </aside>

간단한 문장이 추가된것. 이번엔 두번 사용 해보자


<aside>
  <ins>
  우왕우왕 어쩌고저쩌고</em>.
  </ins>
  <ins>
  ㅎㅎ
  </ins>
</aside>

속성 엘리먼트 cite , datetime

cite는 추가한이융를 이야기해주고 datetime은 그날짜다. 아래는 그예제


<aside>
  <ins datetime="2005-03-16T00:00Z">
  <p> I like fruit. </p>
  </ins>
  <ins datetime="2005-03-16T00:00Z">
  Apples are <em>tasty</em>.
  </ins>
  <ins datetime="2007-12-19T00:00Z">
  So are pears.
  </ins>
</aside>

ins에 포함된 첫번째 두번쨰문장을 보자 날짜가 같다 그렇다고 아래와 같이사용하면 안된다.


<aside>
  <!-- don't do this -->
  <ins datetime="2005-03-16T00:00Z">
  <p> I like fruit. </p>
  Apples are <em>tasty</em>.
  </ins>
  <ins datetime="2007-12-19T00:00Z">
  So are pears.
  </ins>
</aside>

위의 예는 2005-03-16T00:00Z에 두가지가 포함되어있다. cite 속성 엘리먼트가 시사하는 바가 다르기에 각각 사용해야한다는 점을 잊지말자.


설정

트랙백

댓글

HTML5 a 엘리먼트(element)

웹표준/HTML5 훑어보기 2010. 7. 2. 12:53

HTML5 a 엘리먼트(element)

a 엘리먼트는 잘아는 엘리먼트로 링크를 걸떄 사용한다. 새창,팝업 다른문서로 이동.일단 간단한 예제부터보자


<ul>
  <li><a href="http://www.tistory.com">티스토리</a></li>
  <li><a href="http://www.naver.com">네이버</a></li>
  <li><a>없음</a></li>
  <li><a href="#where">페이지</a></li>
</ul>

위 예에서 첫번째는 티스토리로 두번째는 네이버로 세번째는 링크된주소가 없다.네번째는 페이지않에 id로 링크되도록 되어있다.

하이퍼링크(hyperlink)와 플레이스홀더(placeholder)

href 속성이 없으면 그대로 페이지유지를 뜻한다. 위의예에서 3전째줄은 현재이페이지라는 뜻을 가지고있다. 플레이스홀더의또다른예는 현재페이지를 유지하고 다른 창을 띄울때 필요하다. 예로 전산결재 창의경우 현재페이지는 존속시키면서 결재창은 스크립트로 띄우기도 하는 경우이다.

href 속성을 사용하지않으면 media,ping,rel, target, type 속성역시 의미가없으니사용하지않는다

사라진 속성엘리먼트 name 새로생긴 ping

a 엘리먼트의 속성엘리먼트 name은 html5에서 사라졌다. 그전에는 name 엘리먼트에 링크시키기도 했으나 이제는 id 로 링크 시키길 권유하고있다.


<a href="#ID>아이디</a>
<a href="#out" >네임</a> 

<p id="ID">아이디로사용할것</p>
<p><a name="out>이름</a></p>

위의예는 name과 id사용에 따른 두가지를 보여준다. 한체이지에서 링크는 이제 id 링크 사용을 권유하고 있다.

한편 ping속성 엘리먼트는 클릭시 서버어필리케이션을 호출한다. 공백으로 다수를 지정할 수있다. 이를이용하면 유입 통계등을 구할수도 있다.


<a href="#" ping="urlincome.asp other.jsp">유입</a>

인라인 엘리먼트를 넘어서

a 엘리먼트는 어디까지나 html5이전에 인라인 엘리먼트였다. 하지만 html5 로넘어오면서 인라인 블록 엘리먼트를떠나 엘리먼트의 개념이바뀌고나서 a엘리먼트는 다른 엘리먼트들도 감살수있게되었다.


<a><div><p>어쩌고저쩌고</p></div></a>

<a href="#">
  <section>
    <h1>가격인하</h1>
    <p>즉시구입하러오세요</p>
  </section>
</a>

위의예와 같이 다른것을 감살수 있다. 첫번째예는 그전버전에서 허용되지않는 잘못된예이다.

참조예 http://dev.w3.org/html5/spec/Overview.html#the-a-element



설정

트랙백

댓글

  • 2010.07.24 16:59 ADDR 수정/삭제 답글

    비밀댓글입니다