1.  자료실
  2.  팁
  3.  나의 XE
  4.  Html
  5.  배경이미지

XE 인기게시물

MH 슬라이딩 배너 0....
MH 위젯스타일
prettyphoto - 본문내...
SCM 플레이어 사용법
XE 1.4.4.2버전 이후에...
네비게이션 위젯
IE 버젼별로 css 따로...
문서보기 유저 지정
문하우스 게시판스킨 V...
내용글 출력시 주소창에...
Html Tip
여러사이트에서 제가 필요해 가져온 Html Tip들입니다.
2008.04
04

아니다.

W3C의 어떤 곳에도 저것을 장려하거나 표준에 접합한 방법으로 제시하지 않았다.

하지만...

저것이 당연한 것으로 알고 있는 디자이너들이 너무 많다.

저것이 당연한 것으로 알게 되는 원인은 두가지이다.

1. HTML, XML에 통달한 한 외국 웹 디자이너가 칼럼에 저딴 걸 써놨기 때문이다.

근데...그 칼럼의 의도가 어떤 것이었는지 해석해 볼 노력도 없이...

<TD><DIV>내용</DIV></TD>

이렇게 써라....라는 말만 여기저기로 널리 퍼지고 옮겨져 갔다.

심지어는....아래 내용이 있는 서두부분은 싹뚝 짤리버린채...

내용만 옮겨진 곳도 많다.

그 칼럼의 의도를 요약하면 아래와 같다.

아직까지 웹브라우저가 CSS표준방식을 제대로 구현해주지 못하기 때문에

웹 디자이너는 <table>태그의 사용을 중단하기를 망설여하고 있다.

레이아웃을 쉽게 구현하는 <table>태그를 버리지 못하겠다면

최소한...

큰 레이아웃은 <table>태그로 사용하되, <td>내에서 <div>태그를 사용해서 세부적인 레이아웃을 구성하고, 점차 CSS사용법을 익혀나가는 것이 좋을 것이다.

점진적으로 익숙해질 때까지만 저렇게라도 써봐라....라는 것이다!!!!!

2. 쓰레기 프로그램 프론트페이지가 저렇게 구현하더니 구데기 프로그램 드림위버까지...

프론트페이지는 그냥 막....<TD><DIV>이렇게 만들어내더니...

드림위버는 아예...그걸 조절하는 옵션까지 만들어놔따.

저러니...웹 디자이너가 아무런 의심없이 저것이 코딩방식의 발전향이라고 받아들인 것이다.

---------------------------------------------------------------------------------------

웹 표준에는 절대!

<TD>태그안에 <DIV>태그가 들어가는 것을 장려하지 않는다.

<TD>태그는 <span>, <strong>, <acronym>같은 inline속성 태그의 범주로 구분되고 있다.

(범주로만....그렇게 구현되는 것은 아니다)

그런 증거로 <TD>태그에 valign이나 vertical-align속성이 정의되지 않았을 때의 기본이

vertical-align:middle이 아닌

vertical-align:baseline으로 규정되어져 있다.

baseline을 간단히 설명하자면. 아래정렬을 하되

서로다른 inline태그의 배열중에서 높이(line-height)가 가장 높은 것의 아랫단을 기준으로 하는 것이다. 이는 <span style="display:table-cell">내용</span>과 같은 방식을 구현하는데 그 기준으로 삼기 위한 것이다.

그래도 어렵다..^^....간단하게 말해서

<TD>내용</TD> 이렇게 코딩하면 상하정렬이 중단정렬(middle)이 기본으로 되던 것이

<TD>의 크기에 상관없이 가장 큰 폰트나 line-height의 baseline을 기준으로 정렬이 되는 것이다.

<TD>는 표를 위한 태그중 하나이다.

절대 내용을 집어넣기 위한 것이 아니다.

그렇기 때문에 <TD>안에 <DIV>가 들어갈 이유가 없다.

단지, 표로 정리된 것에 익숙한 국내유저를 위해...디자인이 그렇게밖에 진행되지 못하기에

코딩할 때 <TD>에 <DIV>를 넣는 방식을 버릴 수 없을 뿐이다.

[레벨:5]happycomp
2011.05.01 11:19:22 댓글

아.. 여기에도 div...

잘 읽었습니다.^^

번호
제목
글쓴이
38 IE 버젼별로 css 따로 적용하는 방법
[레벨:30]id: 팔공산
2011-02-17 897
37 마퀴태그의 기본
[레벨:30]id: 팔공산
2010-02-06 2286
36 이미지 바꾸기 소스 1
유료회원감로수
2009-06-06 3914
35 익스6에서만 작동되게하는 css구문
[레벨:30]id: 팔공산
2009-02-19 3574
34 CSS 기초 깨우치기 1
[레벨:30]id: 팔공산
2008-10-12 4499
33 CSS 사용시 익스플로러 버그 해결하기
[레벨:30]id: 팔공산
2008-07-19 3895
32 CSS : 글꼴과 텍스트(2) - 장식과 자간 및 줄간 1
[레벨:30]id: 팔공산
2008-07-19 4900
31 기본적인 태그 (링크걸기)| 1
[레벨:30]id: 팔공산
2008-07-12 4350
30 가장 기본적인 태그들
[레벨:30]id: 팔공산
2008-07-12 2840
29 자신의 홈에 프린트버튼을 넣자 2
[레벨:30]id: 팔공산
2008-07-12 2718
28 테이블(셀) 깨지지 않는 CSS 1
[레벨:30]id: 팔공산
2008-07-12 3553
27 날짜 매개변수 1
[레벨:30]id: 팔공산
2008-07-12 2771
26 이미지 없이 그라데이션효과 주기
[레벨:30]id: 팔공산
2008-07-12 3500
25 자신의 홈페이지 단어를 더블클릭하면 네이버로 해당단어 검색을 1
[레벨:30]id: 팔공산
2008-07-12 2693
24 뒤로..앞으로..새로고침 버튼 넣기
[레벨:30]id: 팔공산
2008-07-12 3780
23 ( align="absmiddle" ) 이미지와 글자 높낮이가 다를때 관해서 3
[레벨:30]id: 팔공산
2008-04-27 5928
22 붙어야 할 이미지가 붙지 않을때.
[레벨:30]id: 팔공산
2008-04-19 2797
21 사각박스 코너를 이미지없이 둥글게 만드는법
[레벨:30]id: 팔공산
2008-04-08 3265
20 CSS로 바꾸어 쓰는 HTML태그!.. [XHTML약간^^;] 1
[레벨:30]id: 팔공산
2008-04-04 3299
19 네이밍 가이드
[레벨:30]id: 팔공산
2008-04-04 3207
18 논리 태그 사용
[레벨:30]id: 팔공산
2008-04-04 3368
17 POSITION속성과 그 속성값 2
[레벨:30]id: 팔공산
2008-04-04 3735
16 긴 제목 마우스오버시에만 보기
[레벨:30]id: 팔공산
2008-04-04 3214
15 xhtml 기본 작성법
[레벨:30]id: 팔공산
2008-04-04 3163
14 display:block 쪼금 더~
[레벨:30]id: 팔공산
2008-04-04 5796
13 글들의 상하 정렬위치 설정 vertical-align속성
[레벨:30]id: 팔공산
2008-04-04 3735
12 덧글달기 CSS Coding TIP
[레벨:30]id: 팔공산
2008-04-04 2766
11 iframe 대신 사용하는 object 태그 1
[레벨:30]id: 팔공산
2008-04-04 4225
TD안엔 DIV를 넣어라? 1
[레벨:30]id: 팔공산
2008-04-04 4040
9 제발...alt텍스트와 title텍스트를 구분해조바바 1
[레벨:30]id: 팔공산
2008-04-04 3674
  • 문하우스는 IE7, 1280*1024 이상의 모니터 해상도에서 최적화 되어 있습니다.무단 E-mail 추출이나, 성인광고를 허용치 않습니다
  • 단축키 : l-목록, w-글쓰기, z-이전글, x-다음글, s-최근글, a-이전목록, d-다음목록, 1-home, 2-data, 3-zbxe, 4-blog, 5-total, 6-QnA