블로그 이미지
초딩입맛제주아재
하고 싶은 것만 하며 살고 싶다

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/attachEvent2
  4. 2006.05.11 DIV의 height
2007. 1. 5. 15:12 Programing/HTML/JavaScript/CSS

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 초딩입맛제주아재
2006. 11. 30. 14:57 Programing/HTML/JavaScript/CSS
<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
CSS Box Model  (0) 2006.11.30
Ajax + Drag&Drop 활용 사이트  (0) 2006.11.10
자동으로 Sorting 이 되는 SELECTBOX에 항목추가하기  (0) 2006.11.08
posted by 초딩입맛제주아재
2006. 10. 9. 11:08 Programing/HTML/JavaScript/CSS
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 초딩입맛제주아재
2006. 5. 11. 01:01 Programing/HTML/JavaScript/CSS

아래 내용은 피넷의 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 초딩입맛제주아재
prev 1 next