이걸 div만으로 구현해서 얻는 이득은???

국내에 웹 사이트들이 웹 표준을 지키고 OS나 브라우저와 관계 없이 접근성을 향상 시키기 위한 사이트 버그 신고 및 문제 해결을 위한 게시판입니다.
Post Reply
zzz

이걸 div만으로 구현해서 얻는 이득은???

Post by zzz »

아래 코든는 크기가 고정된 박스 안에 크기가 가변인 박스가 가로,세로 가운데 정렬된 경우입니다.
이걸 div 만으로 구현한 trick을 보았습니다만, table을 사용한 것만큼 직관적인 코드는 찾지 못하였습니다. table에는 단 하나의 셀밖에 없어 웝접근성을 어렵게하지도 않습니다.
이걸 div만으로 구현했다고 치고, 그렇게 해서 얻는 이득은 무엇일까요?

재미있는 글이 있더군요. 웹표준 선구자(?)들께서는 벌써 다녀가신듯합니다만...
http://www.dustindiaz.com/totally-compliant-markup/

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>vertical align</title>
<style type="text/css">
* {margin:0;padding:0;}
#outertable {
  width:300px;
  height:300px;
  margin:10px;
  padding:10px;
  border:1px solid #ccc;}
#outertable td {
  line-height:100%;
  text-align:center;
  vertical-align:middle;}
#innerdiv {
  margin:auto;
  border:1px solid #ccc;}
</style>
</head>

<body>
<table id="outertable" cellpadding="0" cellspacing="0"><tr><td>

<div id="innerdiv">
<p>This center-middle aligned inner box is not for the page layout but for a single text, image or block 
always located in a outerbox, which is fixed in size.<br/>
The dimension of the inner box is variable according to its content.</p>
</div>

</td></tr></table>
</body>
</html>
Top
아직도 졸림

Re: 이걸 div만으로 구현해서 얻는 이득은

Post by 아직도 졸림 »

zzz wrote:아래 코든는 크기가 고정된 박스 안에 크기가 가변인 박스가 가로,세로 가운데 정렬된 경우입니다.
이걸 div 만으로 구현한 trick을 보았습니다만, table을 사용한 것만큼 직관적인 코드는 찾지 못하였습니다. table에는 단 하나의 셀밖에 없어 웝접근성을 어렵게하지도 않습니다.
이걸 div만으로 구현했다고 치고, 그렇게 해서 얻는 이득은 무엇일까요?

재미있는 글이 있더군요. 웹표준 선구자(?)들께서는 벌써 다녀가신듯합니다만...
http://www.dustindiaz.com/totally-compliant-markup/

Code: Select all

<DOCTYPE>
<html>
<head>
<title>vertical align</title>
<style>
* {margin:0;padding:0;}
#outertable {
  width:300px;
  height:300px;
  margin:10px;
  padding:10px;
  border:1px solid #ccc;}
#outertable td {
  line-height:100%;
  text-align:center;
  vertical-align:middle;}
#innerdiv {
  margin:auto;
  border:1px solid #ccc;}
</style>
</head>

<body>
<table><tr><td>

<div>
<p>This center-middle aligned inner box is not for the page layout but for a single text, image or block 
always located in a outerbox, which is fixed in size.<br>
The dimension of the inner box is variable according to its content.</p>
</div>

</td></tr></table>
</body>
</html>
굴비를 맨 새끼줄로 장미를 묶으려든다면, 여전히 장미라도 그 비린내에서 벗어나지 못할 것입니다.

테이블이 편하다면, 그리하면 될 것이며, 웹표준을 단순히 Div와 CSS로 이해하고 있다면, 앞으로도 그러할 생각이라면 그렇게 하면 되지않을까 싶습니다.
Top
zzz

Re: 이걸 div만으로 구현해서 얻는 이득은

Post by zzz »

아직도 졸림 wrote: 굴비를 맨 새끼줄로 장미를 묶으려든다면, 여전히 장미라도 그 비린내에서 벗어나지 못할 것입니다.
비유나 풍자로 까자는(?) 얘기가 아니고, 웹표준, 접근성, 효율성 등의 측면에서 ㅤㅇㅗㅎ거나 더 나은 것이 무엇일까를 고민해 본 것입니다.
현재 어떤 방법을 사용하고 있으며, 전문가 분들이 가지고 계신 그에 대한 타당성이 굼금해서 글을 올렸습니다.

링크는 div+css와 validate markup의 허상적은 부분을 지적하고 있는 것이 요즘 제가 느끼는 것과 상치하여 걸어 놓은 것입니다.
Top
박민권
해커
해커
Posts: 724
Joined: 2005 01 31 22:33 55
Location: 대한민국
Contact:
Contact 박민권

상황에 맞는 테이블 하나쯤이야 괜찮다고 봅니다

Post by 박민권 »

IE가 display:table-cell;을 지원하지 않네요.
div를 이용해서 CSS만으로 IE에서 문제없이 구현하려면 무슨 방법이 있을까요?
CSS가 수직정렬을 지원하지 않으니 위와같은 상황에서의 수직정렬은 항상 문제였던 것 같습니다.

이럴때는 테이블 하나 써도 상관없겠다는게 제 생각입니다.
caption을 좀 신경써서 달아주구요.

지금의 xhtml도 부족한 부분이 많습니다.
xhtml 2.0 부터는 지금의 불편한 부분들이 많이 개션됩니다.
이런 부분들도 xhtml, css등이 버전업 될수록 해결되리라 생각합니다.

보통 웹디자인이 표스럽게 칸칸이 분리되어 있는데 보기 좋아서 그런건지 아니면 테이블에 생각이 고정되서 그런건지 저는 가끔 생각해봅니다.
상업적인 사이트에 공간이 독특하게 겹치면서도 가독성 좋은, 테이블로는 불가능한 그런 디자인도 나올 수 있지 않을까 싶지만 전 디자이너가 아니라서;;

수직정렬에 대한 글을 하나 찾아봤습니다.
viewtopic.php?t=6778
Top
drawtree

Re: 이걸 div만으로 구현해서 얻는 이득은???

Post by drawtree »

오래된 글이지만...안타까워서 답글 남깁니다.

표준적인 마크업의 목적은 여러가지 있으나 가장 밑에 깔리는 사상은 대충 이렇습니다. 이걸 허상이라 하시면 곤란하죠.

1. 내용과 표현의 분리
2. 분리된 내용의 구조화
3. 정보의 구조화를 통한 정보 처리의 자동화.
4. 자동 처리를 기반으로 이종 기계간의 정보 교환의 자동화.

4단계까지 완료되면 유비쿼터스가 가능해집니다. 어디에서나 어떤 방법으로든 정보를 얻을 수 있게 되죠.

XHTML+CSS도 사실 제대로 된 방법이 아니라 임시방편에 가깝습니다. 원래의 이상은 XML+XFORM이었습니다. CSS의 레이아웃 기능이 너무 미약해 표현을 위해 태그가 남발되기 시작한 상황을 보면 CSS도 완전한 것은 아닙니다.
하여간 이렇게 되면 1,2단계가 대략 완료됩니다.
3단계를 위해서는 기계를 통한 자동처리가 중요한데, 이를 위해서는 validation이 중요합니다. 기계는 예외(=오류)에 민감하며, 예외를 걸러내는 것이 발리데이션입니다.

지금도 3,4단계가 가능한 것이 아니냐라고 하실 수 있습니다만, 위에서 말하는 것은 일부 회사만의 표준에 묶이지 않은 완전 개방된 표준에 맞춰간다는 것이 중요합니다.

희한하게도 지금 위의 이상에 가장 잘 맞는 것은 RSS죠. RSS를 생각해보시면 위의 단계가 이해되실 겁니다.




PS.
일단 div+css라는 것은 말이 안되는 용어입니다. div는 html의 태그 중 하나일 뿐이고, css가 div에만 적용되는 것도 아닙니다. css를 사용했다지만 레이아웃만을 위해 div로만 도배한 html페이지는 table 도배한 페이지와 다를게 없습니다. html+css라 하는 것이 좀 더 낫습니다.

또한 웹표준이라 하시는데, 사실 웹표준은 매우 많으며, HTML/XHTML/CSS는 그 중 일부일 뿐입니다. XML및 관련 기술들을 포함해, 웹표준은 굉장히 많습니다.
웹 브라우저에서 가장 흔히 볼 수 있는 구현이 HTML이므로 착각하는 분들이 많은데 HTML=웹은 아닙니다.
Top
Mr.Dust
서포터즈
서포터즈
Posts: 108
Joined: 2006 10 30 10:25 25
Location: 먼산 ( '')a
Contact:
Contact Mr.Dust

Re: 이걸 div만으로 구현해서 얻는 이득은???

Post by Mr.Dust »

drawtree wrote:표준적인 마크업의 목적은 여러가지 있으나 가장 밑에 깔리는 사상은 대충 이렇습니다. 이걸 허상이라 하시면 곤란하죠.

1. 내용과 표현의 분리
2. 분리된 내용의 구조화
3. 정보의 구조화를 통한 정보 처리의 자동화.
4. 자동 처리를 기반으로 이종 기계간의 정보 교환의 자동화.

4단계까지 완료되면 유비쿼터스가 가능해집니다. 어디에서나 어떤 방법으로든 정보를 얻을 수 있게 되죠.
웹표준과 전혀 관계없는 일을 하고, 페이지 제작에도 관심이 없어서 대강 웹표준이라는 게 있고, IE 가 안지키고..
라는 정도로만 알고 있었는데, 쉽게 이해되는 정리네요.

사실 css 를 보면 막 짜증이 나곤 했습니다. 간단한 css 정리야.. 통일된 표현, 중복 사용 방지, 수정 용이 등의 기본적인 목적을 이해할 수 있지만, 지나치게 복잡하게 구성된 css(특히 phpbb 의 css 같은)를 보면 이게 도대체 뭔가 싶곤 했습니다. 목적이 뭐냣?!
스파게티에서 벗어나고자 하는 건 알겠는데, 그럼으로써 css 가 지나치게 복잡해지면 결국 '내용과 표현'을 사람 머릿속에서 합쳐야하는 건가? 그게 뭐야? 좀 느리더라도 직접 써넣는게 (코더에게)더 클리어하고 리더빌러티도 증가하는 게 아닐까? 아 짜증나..
뭐 사실 1, 2번 만으로도 css 에 대한 얘기는 제 가벼운 생각을 무찌를(?) 수 있겠지만, 여튼 그 정도가지고는 웹표준이라든가 내용 분리에 너무 집착하는 거 아니냐..라는 생각이 들곤 했는데, 3-4번을 보고나니 이해가 되는군요. 시각장애인을 위한 부분에 집착(?)하시던 분들 말씀도 다시 떠오르고..

앞으로도 웹표준과는 관계없는 일들을 하고 살겠지만(프로그래머라든가하는 사람이 아니라서요 ;;), 이런 글을 무척 좋네요. 감사합니다. :)
Top
SkyKiDS
Posts: 27
Joined: 2008 06 19 20:24 12
Contact:
Contact SkyKiDS

Re: 이걸 div만으로 구현해서 얻는 이득은???

Post by SkyKiDS »

drawtree wrote:HTML=웹은 아닙니다.
팀 버너스 리의 초창기 웹은 HTML이다라고 생각해도 맞는 것 아닌가요? 최근에 XML 등으로 확장이 된 것으로 생각합니다. 즉, 기본적으로 웹은 HTML이라는 언어를 이용해 만드는 글자 또는 그림의 한 무리(?)라고 생각합니다.

웹이 인터넷이 아니니까, HTML은 인터넷이다는 말은 틀린 것이 확실하겠죠? :)
하늘을 향해 쏴라, SkyKiDS!
Top
Post Reply

Return to “Mozilla 웹 표준 포럼”