블로그 이미지
물결(Wave)
하고 싶은 것만 하며 살고 싶다

calendar

          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            

'HTML'에 해당되는 글 4

  1. 2007.01.05 [HTML] FIELDSET과 LEGEND
  2. 2006.11.30 테이블(Table) 그리기
  3. 2006.10.09 이벤트 추가 - addEventListener/attachEvent(2)
  4. 2006.05.11 DIV의 height

FIELDSETLEGEND는 우리나라의 사이트에서는 흔히 사용하지 않는 태그이다.
하지만 이 포스트를 읽고 나면 아마도 당신은 이 두 태그를 사랑하지 않을 수 없을 것이라 장담한다.

다음 캡쳐이미지를 보자.

Firefox/2.0.0.1 의 화면

언뜻 보면 레이어를 사용한 레이아웃 같다.
하지만 이어지는 코드를 보면 동공이 놀랄것이다.

<FORM action="..." method="post">
<P>
<FIELDSET>
  <LEGEND>Personal Information</LEGEND>
  Last Name: <INPUT name="personal_lastname" type="text" tabindex="1">
  First Name: <INPUT name="personal_firstname" type="text" tabindex="2">
  Address: <INPUT name="personal_address" type="text" tabindex="3">
  ...more personal information...
</FIELDSET>
<FIELDSET>
  <LEGEND>Medical History</LEGEND>
  <INPUT name="history_illness"
        type="checkbox"
        value="Smallpox" tabindex="20"> Smallpox
  <INPUT name="history_illness"
        type="checkbox"
        value="Mumps" tabindex="21"> Mumps
  <INPUT name="history_illness"
        type="checkbox"
        value="Dizziness" tabindex="22"> Dizziness
  <INPUT name="history_illness"
        type="checkbox"
        value="Sneezing" tabindex="23"> Sneezing
  ...more medical history...
</FIELDSET>
<FIELDSET>
  <LEGEND>Current Medication</LEGEND>
  Are you currently taking any medication?
  <INPUT name="medication_now"
        type="radio"
        value="Yes" tabindex="35">Yes
  <INPUT name="medication_now"
        type="radio"
        value="No" tabindex="35">No

  If you are currently taking medication, please indicate
  it in the space below:
  <TEXTAREA name="current_medication"
           rows="20" cols="50"
           tabindex="40">
  </TEXTAREA>
</FIELDSET>
</FORM>


- 이 코드는 w3c.org에서 발췌한 것임
- 원문 URL : http://www.w3.org/TR/html4/interact/forms.html#idx-label-2


예상한것과는 전혀 다르다.
레이어도 없고 테이블도 없다.

오로지 순수한 HTML 태그만을 써서 저런 레이아웃을 만들었다.
저 태그들은 IE전용 태그도 아니며 w3c에 나와있는 표준 태그이다.
어떤가, 아름답지 아니한가???
신고
posted by 물결(Wave)
<table width="500" cellpadding="3" cellspacing="0" border="1" rules="none">
  <thead>
       <tr>
           <th>id</th>
           <th>name</th>
           <th>birth</th>
       </tr>
  </thead>
  <tbody>
       <tr>
           <td>1</td>
           <td>Asrada</td>
           <td>79.06.15</td>
       </tr>
       <tr>
           <td>2</td>
           <td>Wave</td>
           <td>79.06.15</td>
       </tr>
  </tbody>
  <tfoot>
       <tr>
           <td colspan="3" align="center">hello world</td>
       </tr>
  </tfoot>
</table>

HTML에서 가장 많이 쓰이는 태그는 아무래도  <table>이 아닐까 한다.
표를 그리기 위한 table태그지만 레이아웃을 잡을때도 그 역할을 톡톡히 해내는
만능 태그이다. 물론 레이아웃용으로 쓰이는건 지양해야 하지만 말이다.

<table> 알맞게 쓰기

테이블을 그리기에앞서 테이블의 용도를 먼저 생각해야 한다.
<table>태그의 존재이유는 바로 '표'를 표시하기 위함이다.
표란 말 그대로 엑셀의 시트처럼 가로세로 칸이 나뉘어진 틀을 의미한다.
학급의 학생 목록이나 은행 계좌 거래 내역같은 일정한 형식의 내용들이 반복되는 경우
표를 써서 알아보기 쉽게 표현할 수 있다.
하지만 HTML에서 표를 그리는 역할을 맡은 <table>태그는 본래의 임무보다 과도한 일을 묵묵히
수행하고 있다.
페이지의 레이아웃을 잡기 위해 쓰이기도 하고 간격을 맞추기 힘든 부분에 <table>을 써서
꼼수로 간격을 맞추기도 한다.
이것은 코드와 디자인의 분리를 더욱 어렵게 만들고 나아가 필요 없는 부하를 유발한다.
실제로 <table>태그는 <div>태그에 비해 처리 속도가 늦다고 한다.
학생은 학생답게, 남자는 남자답게, <table>은 테이블답게....??


또한 가장 많이 쓰이는 태그이다보니 가장 많은 잘못된 습관을 야기시키기도 한다.
대표적으로 form태그와의 혼용문제이다.

흔히 form태그가 들어가면 공백이 생긴다는 이유로 form태그를 table 태그 안에 넣는 경우가 있다.
<table>
<form>
</form>
</table>

하지만 위는 아주 잘못된 태깅이다.
폼태그의 공백은 css에서 form{margin: 0}을 설정해 주는 것만으로 깔끔하게 처리가 된다.
다음과 같이 폼태그가 테이블 태그를 감싸는 것이 올바른 태깅이다.
<form>
<table>
</table>
</form>

또 <tr></tr>과 <tr></tr> 사이에는 폼태그가 들어가면 안된다.
단, <td></td>사이에는 허용이 된다.
<tr><td></td></tr>
<input type="text" />               >> 잘못된 사용
<tr><td></td></tr>

<tr><td><input type="text" /></td></tr>


다음으로 흔히 접하게 되는 잘못된 사용예는 테이블에 그룹핑을 하지 않는 것이다.
표준 테이블의 모양은 다음과 같다.
<table>
  <thead>
       <tr><td></tr></td>
  </thead>
  <tbody>
       <tr><td></tr></td>
  </tbody>
  <tfoot>
       <tr><td></tr></td>
  </tfoot>
</table>

단, tfoot는 필요에 따라 빼도 상관 없다.

이렇게 그룹핑을 함으로써 얻어지는 잇점은 다음에 살펴볼 테이블의 속성에 있다.


속성(Attribute)


1.rules

rules는 셀의 경계선을 나타내는 방법을 지정하는 속성이다.
위의 테이블에 border="1" 속성을 추가해 보자.
테이블의 모든 셀들이 작은 박스로 나뉘어 구분되어진다.
이제 rules="cols" 속성을 추가해 보자.
외곽선을 제외한 가로줄이 모두 없어졌다.
rules의 값을 rows로 바꿔보자.
이번엔 세로줄이 모두 사라지고 안보였던 가로줄이 나타난다.
만약 이 속성값을 모르고 있다면 각 셀마다 일일이 css로 border 값을 설정해주느라 태그가
엉망진창이 되버릴것이다.

rules 의 속성 값에는 cols,rows,all,groups,none 가 있다.


2.frame

frame는 테이블의 외각선을 나타내는 방법을 지정하는 속성이다.
rules와 더불어 css노가다를 획기적으로 줄여주는 속성이다.

frame의 속성 값에는 void,above,below,lhs,rhs,hsides,vsides,box,border 가 있다.



스타일(CSS)

3.border-collapse

border-collapse는 css이다.
보통 테이블에 border속성을 주면 값이 1이라도 선이 굵게 나와 보기 좋지 않다.
이떼 style="border-collapse: collapse;" 라고 스타일을 지정해주면
얇은 선으로 표시가 되어 한결 깔끔해진다.
테이블에 border속성을 주지 않고 style로 border: solid 1px #000000; 과 같이 border를 만들었다면
이 문서를 프린터로 인쇄 하면 선이 보이지 않는 문제가 있다.
하지만 테이블에 border값을 주고 스타일로 collapse를 지정함으로써 위와 같은 문제를
해결 할 수가 있다.

border-collapse 속성 값에는 collapse,separate 가 있다.

4.table-layout

테이블의 각 셀에 width,height값을 주지 않으면 브라우져가 자동으로 셀의 내용에 맞게
크기를 계산하여 그리게 된다. 하지만 셀에 width,height 값을 주어도 셀의 내용이 커지면
셀의 모양이 흐트러지게 된다.
이럴때 table-layout css를 사용하면 셀의 넓이를 정확히 고정시킬수 있다.
style="table-layout: fixed;" 이렇게 스타일을 지정하면 셀 내용에 상관없이 지정한 크기로 그려진다.

table-layout 속성 값에는 fixed,auto가 있다.



위의 테이블의 속성,css는 테이블을 그리는데 있어 가장 기본적인 것들이다.
더 세세한 내용은 http://www.w3c.org 홈페이지에서 HTML의 Table 명세를 보거나 테이블관련 CSS를 보면 쉽게 정보를 얻을 수 있다.
다시한번 강조하지만 테이블로써 레이아웃을 잡는건 아주 잘못된 습관이다.
테이블의 탄생 목적은 표를그리기 위함 이라는것을 명심하자.




"Markup Language 인 HTML에서 올바른 태그는
선택이 아닌 필수이며 코더의 의무이다."

신고

'Programing > HTML/JavaScript/CSS' 카테고리의 다른 글

이벤트 Fake!!!  (0) 2006.12.12
키입력 이벤트처리  (2) 2006.12.06
테이블(Table) 그리기  (0) 2006.11.30
CSS Box Model  (0) 2006.11.30
Ajax + Drag&Drop 활용 사이트  (0) 2006.11.10
자동으로 Sorting 이 되는 SELECTBOX에 항목추가하기  (0) 2006.11.08
posted by 물결(Wave)
TAG CSS, HTML, table
if(object.addEventListener) {
   object.addEventListener('change',event_listener,false);
}else{
   object.attachEvent('onchange',event_listener);
}

function event_listener(){
   alert('object 의 change 이벤트에 반응하는 리스너');
}

- 이벤트 리스너 추가 메서드
   IE        : attachEvent(event.type,listener)
   Mozila : addEventListener(event.type,listener,useCapture)
   * Mozila 의 event.type 은 IE의 그것과는 달리 접두사 'on'이 붙지 않는다는점에 유의.


- 이벤트 리스너 삭제 메서드
   IE        : object.detachEvent(event.type,listener)
  Mozila : removeEventListener(event.type,listener,useCapture)

신고
posted by 물결(Wave)

아래 내용은 피넷의 qna 게시판에 '엔젠드'님이 올린 질문에 대한
답변들을 인용한 것이다.

DIV의 height값은 default로 font-size를 갖는 듯(?) 하다...
<div style="height: 2px; border: solid 1px #000000;"></div>
<div style="background-color: #D9D9D9;">가운데...</div>
<div style="height: 2px; border: solid 1px #000000;"></div>

위 소스를 브라우져에서 보면
위 아래를 감싸고 있는 레이어의 height는 2px보다 크다.
하지만 font-size속성을 2px로 잡아 주면 height값이 2px로 된다...

추가로 '낭망백수'님의 답으로
overflow값을 이용한 방법도 있었다.
hidden 값을 설정한...

이건 아직 테스트를 못했다.
내일 해보고....

신고
posted by 물결(Wave)
TAG CSS, div, HTML
prev 1 next