웹표준에 관심을 가지면서 table보다는 div 사용을 장려하고 사용하는 그런 모습을 보면서 웹표준 웹표준 입에 달고 살길래 초보자를 위한 관련사이트가 많은 줄 알았습니다. (여기서, 초보자라 함은 div보다는 table로 익숙하게 써왔고 앞으로도 그러려고 했던 css 같은것을 잘 모르는 SCAC같은 사람들을 뜻합니다) 그런데 찾아보니 준비중인 사이트도 많고 이런 말 하기는 그렇지만 확실히 "부실"합니다.
div로 table 효과를 내는데에 있어서 float:left (혹은 right)를 사용하는 예제가 있어서, 또 달린 댓글들을 보면서 테이블의 셀이 나열되는 효과를 내기 위해서는 꼭 그래야만 하는 줄 알았습니다. (어느 사이트에서)
float:left를 쓰는 분들은 아시겠지만 죽을 맛입니다.
여기서 본래 이렇게 사용하기 위한 것이 아님을 눈치챌 수가 있는데...
아시겠지만 div를 쓰는 경우에는 무조건 엔터를 치고 들어갑니다.
<div>타이틀</div>
<div>본문</div>
라고 할 경우 기본적으로
 |  |
#1의 효과가 아니라 #2의 효과를 나타냅니다.
#1의 효과를 내기위해서는 <div style="float:left">로 지정하고는 하는데요.
이건 이렇게 쓰라고 만들어 놓은 것이 아니라고 감히 추측합니다.
그런데 #1의 모양을 float:left로 만들어놓았더니 가운데정렬을 못합니다.
<div id="top" style="text-align:center">
<div style="float:left">타이틀</div>
<div style="float:left">본문</div>
</div>
해도 가운데정렬을 먹지 않습니다.
 |  |
SCAC처럼 float를 잘못 이해한 분들의 경우에는 결과 페이지를 보기전에 상상을 해볼 때 #3처럼 상상을 합니다. 그런데 알고보면 #4처럼 id가 top으로 주어져있는 상위 div가 하위 div를 둘러싸지 못하면서 center 속성이 헛바퀴를 돕니다.
지식년을 보면 float:left를 지워놓고 개판을 만들어놓은 답변이 있는데 float:left를 지워놓고 가운데 정렬하라면 누가 못하겠습니까? (table로 안바꿔 놓은게 다행)
#3 처럼 id가 top로 주어진 div가 하위 div를 포괄하게 하기 위해서는
<div id="top" style="margin:0 auto; width:300px;">
<div style="float:left">타이틀</div>
<div style="float:left">본문</div>
</div>
로 하면 실제로 의도하던대로 div가 나란히 배열되면서 top의 div가 아래 div를 둘러싸고 center 속성이 적용이 됩니다. 단, style에 (CSS 파일로도 상관없음) margin:0 auto; width:임의값px;을 반드시 넣어줘야 합니다.
그리고 이 방법을 사용하기 위해서는 페이지 상단에 DOCTYPE를 선언을 해줘야합니다.
SCAC는 strict를 사용중이나 transitional이 범용으로 사용되고 있습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"일반" 카테고리의 다른 글 메탈슬러그6 플레이 후기 (16) 2008/07/11 역전재판 (12) 2008/03/27 DJMAX 테크니카 PV 공개 (2) 2008/08/12 메탈슬러그 7 발매 예정 (14) 2008/01/09 웹표준 검사 팁 (0) 2008/08/06 2008/01/08 |
스즈 | 2008/10/14 19:53완벽하다고는 할 수 없지만 뭔가 응어리가 내려가는 느낌이네요.
너무나 잘봤습니다.
감사합니다.
 SCAC | 2008/10/14 23:35(완벽하다고는 할 수 없지만);;
끙.. 이런 거에 신경 많이 쓰는데;; |
|
정신통일 | 2008/11/14 17:15여태 잘 먹던 float:center;가 갑자기 안 먹어서 새로 코딩도 해보고 구조도 뒤집어 엎어보고 미쳐가던 중 끝내 테이블로 때워버린 찰나 SCAC님의 명쾌한 답변을 봤습니다. 우와 SCAC님 사랑합니다.^///^ 그런데 이 불초소생 똑같은 코드를 썼어도 페이지에 따라 먹혔다 안 먹혔다 하는 이유는 아직도 파악 불가능이네요;; SCAC님 덕분에 일단 당면한 문제는 단박에 해결 시켰습니다. 인사가 늦었네요. 서핑 중에 들어오게 되었습니다. 감사한 마음에 초면에도 불구하고 두서없는 인사 몇 줄 남기고 갑니다.
|
SCAC | 2008/11/15 14:38 도움이 되었다니 다행입니다.
DOCTYPE를 선언은 반드시 해주는 걸 잊지 마세요. |
|
........ | 2009/03/19 18:01좀더웹표준에 대해 아님CSS에 대해 계속적으로 설명해주시면 넘 좋을것 같아요..~~~>_<;;;
|
SCAC | 2009/12/22 10:11 전 OTL 아는게 없어서..;
그냥 W3C valid 값만 튀어나오면 그만이라;; |
|
감사 | 2009/12/11 13:47|
SCAC | 2009/12/12 07:49 참 쉽죠잉~?
|
|
감사합니다. | 2009/12/22 00:02항상 이건 간과하네요 .. 감사합니다.
|
SCAC | 2009/12/22 10:13 그렇지만 전 아직도 doctype가 무슨 역활을 하는지 모르고 있습니다;
|
|
뽀이 | 2010/09/12 19:27|
SCAC | 2010/12/18 02:50 축하합니다.
|
|
지나가다가.... | 2010/09/20 18:08width:auto;
이걸로는 테스트해보셨나요?
|
SCAC | 2010/12/18 02:49 해봐야 알 것 같은데요;
지금은 해볼 처지가 아니라서; |
|
깜보애미 | 2011/05/21 20:41감사합니다.
감사의 울 장남 깜보의 뽑뽀를 보내드리고 싶군요....^^
김하코 | 2011/10/18 18:38정말 웹표준에대한 정보가 너무 부족한건 사실이에요...
이제시작했거든요 ㅠㅠ
감사합니다!!
박창규 | 2011/11/18 15:40초록영역 안에서는 가운데 정렬은 절대 이뤄지지 안습니다 이건 자바스크립트로 하는수밖에 없구요
초록영역은 가운데 정렬이 되겟지요
한마디로 float를 쓴 오브젝트안에 내용이 유동적인(text라던가 이미지)부분에대해서는
절대로 어떤구간에서도 가운데 정렬은 불가능합니다.
피카츄 | 2012/01/11 12:51
0