html5 h1 엘리먼트 (section,article,aside,nav안에서) 사용의 주의사항

웹표준/HTML5 훑어보기 2014.03.05 15:10

html5 h1 엘리먼트 (section,article,aside,nav안에서) 사용의 주의사항


아주 큰 주의사항은 아니지만 브라우저별 다른 반응에 다른 반응을 보이니 살펴보자

주제1

주제2

주제3

위의 예제에서 h1엘리먼트는 첫번째는 section안에 두번째는 section안에 section에, 마지막은 그냥 코딩되어있다.문제는 브라우저마다 다르게 보인다는것

몇몇 브라우저에서는 세개다 동일한 크기지만 몇몇브라우저는 크기가 다르게보인다


위예는 파이어복스와  오페라

큰문제는없다.css를 사용하니 css초기값으로 동일하게 잡아주면 당연히 해결. 다만 css를 잡아주지 않을경우 대비해서 포스팅



저작자 표시
신고

설정

트랙백

댓글

hgroup 태그, HTML5에서 제외(hgroup removed from HTML)

웹표준/HTML5 훑어보기 2014.02.27 10:52

hgroup 태그, HTML5에서 제외(hgroup removed from HTML)


뒤늦게 올린다만. 2013 4월경 hgroup 태그가 html5에서 제외됬다.

다음링크참조

http://www.webmonkey.com/2013/04/w3c-drops-hgroup-tag-from-html5-spec/
http://www.w3.org/html/wg/wiki/ChangeProposals/hgroup
https://www.w3.org/Bugs/Public/show_bug.cgi?id=11731


http://beautifulcss.com/archives/882

W3C는 더이상 <hgroup> 태그를 표준 명세에 표함시키지 않겠다고 밝혔습니다. 이 태그는 문서의 개요를 작성할 때 사용되는데, 반드시 <h1>부터 <h6>까지의 태그만을 포함할 수 있고, 그 외의 태그는 포함시킬 수 없습니다. 이렇다보니 실제로 <hgroup> 태그를 쓸모있게 사용할 일이 거의 없다는 것에 바탕을 둔 결정으로 보입니다.

  

HTML이란?

HTML의 역사

<hgroup>의 기본적인 사용 예제입니다. 사실 저런 식으로 목차를 만들기에는 <hgroup> 보다는, 들여쓰기와 머릿그림을 자동으로 만들어 주는 <ul> 태그가 훨씬 효율적입니다. 굳이 개요를 설명하는데 있어 헤딩 태그를 쓰지 않고도 <ul> 태그가 문서의 <header> 태그에 안에 위치한다면 그것으로 충분히 개요의 의미를 살릴 수 있기 때문이죠.

  • HTML이란?
    • HTML의 역사

작성하는 HTML 코드의 양은 다소 많다하더라도, 아무런 CSS를 사용하지 않은 상태에서의 화면 표현을 본다면 분명 <ul> 태그가 훨씬 우월합니다.

또 한가지로 예로는, 우리가 흔히 보는 인터넷 매체의 기사들은 주로 1개의 대제목만 사용합니다. 대제목 이후에 부제목을 사용해서 기사 자체를 개요화하기 보다는, 태그라인이나 날짜, 작성자 혹은 조회 수 따위를 표현합니다. 다른 태그를 품을 수 없는 <hgroup>의 특성상 사용빈도가 무척 떨어질 수 밖에 없지요.


882-01
일반적인 블로그 기사의 형식

이렇다보니 오히려 대제목을 뒷받침 해줄 수 있는 <subhead><subline> 태그의 명세를 준비하고 있는 듯 합니다. 해외 각종 블로그에서 보면 이런 태그들의 환영을 알리는 기사들이 점점 늘고 있거든요. 물론 정확한 정보는 아닙니다.

http://www.w3.org/html/wg/wiki/ChangeProposals/hgroup


아무튼, HTML도 개발자와 사용자 추세에 따라 그 명세를 유연하게 맞추어가고 있는 듯 합니다. 대부분의 웹 브라우저들은 <hgroup> 태그를 화면에 표현 할 수 있고, 혹시 지금까지 만들어 놓은 웹 사이트에 이 태그가 사용되었다면 굳이 당장 없애거나 바꿀 필요는 없습니다. 시간이 지남에 따라 웹 브라우저들도 단계적으로 <hgroup> 태그를 사용자 도구에서 제외시키겠지만 아직 시간은 충분합니다.

각종 명세나 규칙등은 HTML 언어의 버전(개정판)에서 빈번하게 제외되고 추가되고 재정의됩니다. 지금 제외되었다고 해서 영원히 그렇다는 것은 아닙니다. HTML의 다음 버전에서는 <hgroup>이 다시 새롭게 정의되어 추가될 수도 있다는 뜻입니다. 명세가 변하는 것에 일일이 대응하기 보다는, 그때그때 규칙에 맞는 작성을 지향해 나가는 것이 중요합니다.


저작자 표시
신고

설정

트랙백

댓글

HTML5 전역속성 (Global Attributes)

웹표준/HTML5 훑어보기 2014.02.24 18:49

HTML5 전역속성 (Global Attributes)


굵고 빨간건  HTML5부터 적용된것

Attribute Description
accesskey

키보드 단축키 명시하고 그 페이지에서 엘리먼트를 선택 할 수 있도록한다.

class 다수 선택자,엘리먼트 분류
contenteditable

ture 설정으로 사용자들이 텍스트변경가능
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_global_contenteditable

contextmenu

엘리먼트의 콘텍스트 메뉴들을 정의할 수 있도록한다. 이메뉴들은 사용자가 트리거시 팝업된다. (현재는<menu>와 함께 지원되는브라우저없슴)

data-*

HTML 태그 안에서 사용자 데이타 저장한다
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_global_data

dir

텍스트방향 rtl(왼쪽->오른),ltr(오른쪽->왼쪽)

draggable

드래그가능유무

dropzone

드래그한 데이터를 복사(copy)할지,이동(move)할지,링크(link)걸지 결정한다. 브라우저는 아직미지원

hidden

엘리먼트가 현재 적절하지않다는 것을 나타낼떄 쓴다,값은없는 불리언 속성
http://www.w3schools.com/tags/att_global_hidden.asp

id

유일무이 선택자

lang

컨텐츠의 언어명시 값은 ISO lanhuage code

spellcheck

브라우저가 엘리먼튼 컨텐츠의 철자를 체크해야 할지를 명시하기위해 사용한다. lang값은 무시하며, 철자체크는 컴퓨터 운영체제나 별도의 브라우저 설정에서 정의된 언어로 체크수행한다.
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_global_spellcheck

style 인라인스타일
tabindex

tab으로 포커스 이동시 그 순서조절. 값은숫자 낮은수서부터

title 추가정보
translate

엘리먼트 컨테츠가 번역되어야하는 아닌지 가린다(yes,no)(현재 지원브라우저 없슴)



저작자 표시
신고

설정

트랙백

댓글

웹표준 테이블 코딩 보완

웹표준 2010.07.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;}


저작자 표시
신고

설정

트랙백

댓글

웹표준 간단한 폼(form) 양식

웹표준 2010.02.18 16:53

웹표준 간단한 폼(form) 양식

리스트를 이용한 간단한 폼을 만들어보겠다. 그전에 폼에 사용되는 엘리먼트부터 보자 가장 기본적으로 구축할 모습은 다음과 같다.

개인정보입력

form
form은 양식을 시작한다는 의미를가진다.또한 action옵션을 가짐으로서 입력완료하고 실행시 작동연결을 담당한다.
fieldset
fieldset은 양식의 테두리를 보여준다. 구역의 의미로 임력해야할여러 정보가있다면 큰범위로 나누어 줄때 사용한다.
legend
legend은 나누어진 구역의 의미를 가르켜준다.여기서는 개인정보입력이라고 되어있다.
label
label은 input엘리먼트가 사용될 목적을 지칭할때 사용된다.
input
input은 입력 양식을 보여준다, 잘 알다시피 라디오버튼,체크 박스, 텍스트등을 옵션으로 가진다.

리스트를 활용한 응용

위에서는 p엘리먼트로 labler과 input엘리먼트로 감싸주었다.리스트를 이용해보자

  
  1. 이름(필수)
  2. 연락방법을 선택하세요 (적어도 하나)
    • E-Mail(선택)
    • Phone(선택)
    • Fax(선택)

위와같은 모델로 폼을 만들어볼것이다.폼양식은 만들기가 다른 것에비해 복잡하기에 이와같이 미리 모델을 만들어보는것이 유용하다.

개인 정보 입력
  1. (필수)
  2. 연락방법을 선택하세요 (적어도 하나)
    • (선택)
    • (선택)
    • (선택)

위와같이하면 결과는 아래그림처럼 나올 것이다.

CSS로 마무리

먼저 마진 패딩, 리스트 꾸밈을 초기화 해준다

*{ margin : 0; padding : 0; }
ol,ul { list-style : none; }

나머지는 아래를 참고

fieldset{ padding: 30px;}
/*필드셋안에 너비를 30px준다*/
form{ position:absolute; 
      left:200px; top:100px; 
      width:600px;}
/*폼의 위치는 임의로 대충 잡아놨다.
가로 너비를 600px*/
ol li{ margin-top:20px;}
ol li ul li{ margin-top:5px;}
ul{float:left; margin-left:30px; }
ul li label{ float:left; width:100px;}
/*개별 마진값을 준다.*/

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

저작자 표시
신고

설정

트랙백

댓글

Ajax란 무엇인가? Ajax의 정의

Ajax 2009.12.08 16:12

Ajax란 무엇인가?

jQuery를 한창 포스팅하다가 dom가지 설명을 끝내고 이제 Ajax로 넘어갈떄이다. 이쯤에서 Ajax를 둘러볼 필요가있다. 간단한 정의부터 사용예시까지 짤막하게 살펴보자.

Ajax 의 정의

초창기에 비동기적인 자바스크립트와 XML 이라는 말의 줄임으로 접근되었다.

  • 비동기(Asynchronous)
  • 자바스크립트(javascript)
  • 그리고 and
  • XML

이로서 ajax 란 약자가 나왔다고 하는데....마지막에 xml은 필수요소가 아니다. 이후에 어떤 약어라기보다는 방법론으로 축약되어 사용되고있다.

위에서 그래도 중요시 할점은 비동기(asynchronous) 란 점이다. 페이지의 전통적인경우 브라우저는 서버에 전재페이지를 요청하고 그리고 사용자가 링크크릭또는 폼전송시 브라우저는 새로운요청을 보내고 서버는 다른페이지를보내게된다. 하지만 ajax의 경우는 전체 페이지를 반환하는대신 현재 로딩되어있는 페이지의 일부분만 반환한다. 쉽게 말하자면 일반사이트의 클릭 새로고침으로 페이지가 완성된다면 한페이지내에서 간단하게 빨리 정보가 제공되는 셈이다.

간단히 둘러보는 몰라왔던 ajax

넓은 의미에서 ajax는 비동기란점에서 우리가 아는 다음과 같은 것들도 포함될수있다.

플래시
플래시 무비는 웹서버와 비동기적으로 통신할 수 있다.플래시로 구성된 사이트를 가보면 새로고침,앞으로 가기,뒤로가기와 달리 클릭으로 새내용을 볼수있는것을 볼수 있다. 새로고침을 플래시로 된 페이지에서 클릭한다면 맨처음페이지로 갈것이다.
프레임
요즘 홈페이지 구축에서 거의 사용하지않지만 기억을떠올려보자 클릭시 페이지의 모든 것이업데이트되지않고 한프레임만 업데이트되는것을 볼수 있다. 이것역시 비동기관점에서 본것이다.
그외..
아이프레임. XMLHttpRequest..

요약하기

Ajax는 특정한 기술, 즉 "css할 수 있어요"와 같이 "전 ajax할 수 있어요" 가 아니란 것이다. ajax는 방법론이다HTML,CSS,DOM을 기본으로 개념을 잡고 어떻게 서버측과 비동기적으로 페이지를 구축하는냐 라고 할 수 있다.

위키백과참조

앞서 설명한 것처럼 되어있다.여기도 특정 기술이 아니라고 설명되어있다. 일부 요약했고 링크된 곳으로 직접가보자

Ajax(Asynchronous JavaScript and XML)는 대화식 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 개발 기법이다.

  • 표현 정보를 위한 HTML (또는 XHTML) 과 CSS
  • 동적인 화면 출력 및 표시 정보와의 상호작용을 위한 DOM, 자바스크립트
  • 웹 서버와 비동기적으로 데이터를 교환하고 조작하기 위한 XML, XSLT, XMLHttpRequest (Ajax 애플리케이션은 XML/XSLT 대신 미리 정의된 HTML 이나 일반 텍스트, JSON, JSON-RPC를 이용할 수 있다).

DHTML이나 LAMP와 같이 Ajax는 자체가 하나의 특정한 기술을 말하는 것이 아니며, 함께 사용하는 기술의 묶음을 지칭하는 용어이다. 실제로 AFLAX와 같이 사실상 Ajax에 바탕을 두고 있는 유사/복합 기술들이 속속 나타나고 있다.

저작자 표시
신고

설정

트랙백

댓글

인라인(inline) ,블록(block) ,그룹(group)엘리먼트

웹표준 2009.10.25 14:44

엘리먼트의 종류 inline , block ,group

block 엘리먼트

h1, h2,h3...p, ul,ol,li,form,div등이 있다.
한블록을 차지한다,즉 <h1></h1><p></p>이러면 두엘리먼트가 두 층으로 쌓인다.
인라인 엘리먼트를 내부에 포함한다.

inline 엘리먼트

span,em,img, strong, a등이 있다.
한줄을 차지한다.워드프로그램에서 엔터를치지않는한 이어지듯이 인라인 엘리먼트역시 한줄로 이어진다.
img엘리먼트로 두그림을 넣었다고 가정해보자. 두그림은 연이어 보여질것이다.

group 엘리먼트
div,span엘리먼트를 특별히 칭하는말이다. 엘리먼트나 텍스트 데이터를 그룹으로 묶을 수 있는 기능을 가진 엘리먼트이다. 앞서 말했듯이 div는 블록 엘리먼트고 span은 인라인엘리먼트이다 이 점에서유의해야한다.


웹표준에 따른 제대로된 마크업을 위한 주의사항

블록엘리먼트안에 인라인엘리먼트가 들어가지만 인라인엘리먼트안에는 블록 엘리먼트가 들어가면 안된다.

그룹 엘리먼트도 그 점에서 주의해야 한다 별도로 그룹이라 칭한것이지 div,span은 그전에 각각 블록, 인라인엘리먼트다.

또 모든 블록엘리먼트가 모든 블록을 포함할수도 없다.

저작자 표시
신고

설정

트랙백

댓글

브라우저 버그 해결 기초

웹표준 2009.09.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.09.10 15:00

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

예시로 소스부터보자

이름:
     
   

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

legend: 필드섹의 목적 명시

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

저작자 표시
신고

설정

트랙백

댓글

웹표준 테이블 코딩

웹표준 2009.09.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를 사용하면 마크업에 표현의 내용이 들어가지만.. 이정도쯤이야



저작자 표시
신고

설정

트랙백

댓글


티스토리 툴바