포럼은 전부터 들러왔는데 글쓰기 하려고 보니까 괜히 가입하고싶어지더군요.
(원래는 네이버 자바스크립트 오류때문에
파폭에서 억지로라도 돌려볼 방법이 없을까 질문하려고 했는데 샛길로 빠져서.)
맨날 밋밋한 홈페이지만 만드는데 오늘 갑자기 호기심이 발동했습니다.
라운디드 코너… 테이블과 이미지로 만드는 방식 말곤 없나 하고요.
레이아웃을 바이너리 파일 없이 구상하다보니 항상 네모반듯한 홈이 되더군요.
지난번엔 테이블을 전부 css와 div로 대체했는데 당연히 별 티가 안나고
메모장 하나 열고 삽질 시작했습니다. 딱히 일도 없이
밥먹고 메신저 켜놓고 놀면서 생각하다보니 진척이 느리더군요.
다음은 네시간동안 삽질해서 만든 소스입니다.
결과는 어쩌다보니 성공… 입니다. 코드가 지저분해도 이해해 주시길.
1. IE와 불여우가 그려주는 방식이 다르다는 것하고
2. 제 소스가 표준에 어긋나지 않는가 하는 점.
3. 비효율적인 부분이 있는지.
4. width를 상대값으로 만들 수 없을지
이곳에 와서 얘기해보고 싶었습니다.
많은 지적 기대하겠습니다-
덧. 주석처리한 css 한줄은 IE에서 전부 표시할 때 어색해서 여러가지 시도하다가 그나마 낫게 조절해 본 것입니다. 불여우에서는 주석처리 하지 않으면 원래 의도대로 표현이 됩니다.
덧2. 만들다보니 이미지를 쓰지 않았을 때 가능한 장점들이 죄다 희석되어 버렸습니다.
그래도 나름대로 쓸만하다고 생각하지만.덧3.
http://www.fireandknowledge.org/archive ... es-part-1/
위 주소에서 찾은 방식은 제대로 구현이 안되던데, Css2.0 이 완전히 지원되어야만 하는 걸까요?
-- - 소스 - --
<html><head><style type=text/css>
body {background:#fff;color:#000;font-size:9pt;letter-spacing:-0.1em;}
div {background:#eee;}
div.box {width:200px;}
.headfoot {width:200px;background:#fff}
div#px0 {width:168px;font-size:0px;height:1px;}
div#px4 {width:176px;font-size:0px;height:1px;}
div#px7 {width:182px;font-size:0px;height:1px;}
div#px9 {width:186px;font-size:0px;height:1px;}
<!-- div#px10 {width:188px;font-size:0px;height:1px;} -->
div#px11 {width:190px;font-size:0px;height:1px;}
div#px12 {width:192px;font-size:0px;height:1px;}
div#px13 {width:194px;font-size:0px;height:1px;}
div#px14 {width:196px;font-size:0px;height:2px;}
div#px15 {width:198px;font-size:0px;height:3px;}
div#content {padding:16px;}
div#dummy {background:#fff;}
</style></head>
<body>
<div class=box>
<div class=headfoot align=center>
<div id=px0> </div>
<div id=px4> </div>
<div id=px7> </div>
<div id=px9> </div>
<!-- <div id=px10> </div> -->
<div id=px11> </div>
<div id=px12> </div>
<div id=px13> </div>
<div id=px14> </div>
<div id=px15> </div>
</div>
<div id=content>
괜히 집어넣은것 같아서 내용은 생략합니다</div>
<div class=headfoot align=center>
<div id=px15> </div>
<div id=px14> </div>
<div id=px13> </div>
<div id=px12> </div>
<!-- <div id=px11> </div> -->
<div id=px10> </div>
<div id=px9> </div>
<div id=px7> </div>
<div id=px4> </div>
<div id=px0> </div>
</div>
</div>
</body></html>
