Table레이아웃을 CSS로 수정하는 중입니다

[bopy]

태터툴즈 기본스킨을 CSS레이아웃으로 바꾸고 있습니다.

거의다 바꾸고 마무리만 하면 되는데요.
여기서 막혀 버렸습니다.

http://user.chol.com/~bopy/align.PNG

이런식으로 줄을 맞춰서 레이아웃하는건 어떻게 해야 하는 건가요.
저건 Table로 레이아웃된 원래의 태터 기본 스킨중 일부입니다.

[박민권A2]

워낙 많은 방법이 있어서 무엇을 가르쳐 드려야 할지.

간단하게 한다면

<style>
#DivTable .row{height: 20px;}
#DivTable .col{float: left;}
#DivTable .col.fix{width: 70px; text-align: right;}
</style>

<div id="DivTable">
<div class="row">
<div class="col fix">이름</div><div class="col">인풋박스</div>
</div>

<div class="row">
<div class="col fix">홈피</div><div class="col">인풋박스</div>
</div>

<div class="row">
<div class="col fix">아이콘</div><div class="col">인풋박스</div>
</div>
</div>


이렇게 하셔도 됩니다.
방법은 워낙 많으니 상황에 따라 취향에 따라 하시면 됩니다.
미세한 조정은 padding과 margin을 적절히 사용하시면 될겁니다.

[hyeonseok]

<style type="text/css">
#comment-write {
}
#comment-write dt {
background: url("double-colon.gif") no-repeat 100% 3px;
padding-right: 0.7em;
text-align: right;
width: 9.5em;
}
#comment-write dd {
margin: -1.5em 0 0 10em;
}
#comment-write dt.contents {
display: none;
}
</style>


<dl id="comment-write">
<dt><label for="name">이름</label></dt>
<dd><input type="text" id="name" name="name" /></dd>
<dt><label for="homepage">홈페이지</label></dt>
<dd><input type="text" id="homepage" name="homepage" /></dd>
<dt><label for="icon">아이콘</label></dt>
<dd>
<select id="icon">
<option></option>
<option></option>
</select>
</dd>
<dt class="contents"><label for="contents">내용</label></dt>
<dd><textarea id="contents" rows="" cols=""></textarea></dd>
<dt><label for="password">비밀번호</label></dt>
<dd><input type="password" id="password" name="password" /> <input type="image" src="" alt="Submit" /></dd>
</dl>

저라면 이런 식으로....

[박민권]

<style type="text/css">
<dl id="comment-write">
<dt><label for="name">이름</label></dt>
<dd><input type="text" id="name" name="name" /></dd>
<dt><label for="homepage">홈페이지</label></dt>
<dd><input type="text" id="homepage" name="homepage" /></dd>
<dt><label for="icon">아이콘</label></dt>
<dd>
<select id="icon">
<option></option>
<option></option>
</select>
</dd>
<dt class="contents"><label for="contents">내용</label></dt>
<dd><textarea id="contents" rows="" cols=""></textarea></dd>
<dt><label for="password">비밀번호</label></dt>
<dd><input type="password" id="password" name="password" /> <input type="image" src="" alt="Submit" /></dd>
</dl>

정말 자세히도 코딩해주셨네요. ㅎㅎ
dt랑 dd는 뭐죠 dl두.... OTL 태어나서 한번도 안써봤어요. 크흑~

[박민권]

w3c school에서 찾아서 예제를 보니 대충 어떻게 돌아가는지는 알겠네요.

정확히 무슨 용도(?)인지는 모르겠지만 정말 좋네요.

진작에 알았었더라면.... ㅠ_ㅠ

float:left 로 삽질하지 않았을텐데. ㅠ0ㅠ

덕분에 좋은거 알아갑니다. 지난 삽질은 슬프지만 오늘의 지식업그래이드는 기쁘네요.

[hyeonseok]

dt랑 dd는 뭐죠 dl두.... OTL 태어나서 한번도 안써봤어요. 크흑~

ul. ol, dl

이 세개가 html 의 list 삼형제 입니다. ^^

각각 unorderde list, ordered list, definition list 입니다.

dl 은 보통 하나의 리스트 항목이 두가지 셋으로 구성될때 사용합니다.

스펙은...
http://www.w3.org/TR/html4/struct/lists.html#h-10.3

한글 번역 문서는..
http://trio.co.kr/webrefer/html/struct/ ... tml#h-10.3

에 있습니다~

[빛알갱이]

ul. ol, dl

이 세개가 html 의 list 삼형제 입니다. ^^

수학, 물리학, 경제학에서 많이 쓰는 LaTeX에서는 itemize, enumerate,
description에 대응합니다.

그런데, 모든 테이블을 제거해야 한다는 강박 관념에 빠질 필요는 없습니다. 의미적으로 2차원적인 정보를 전달할 때에는 당연히 써야 합니다.

이번 경우 (2차원 정보라고 하기 힘들기는 하지만. 만일 한 컬럼이 더 있었다면, 확실히 그렇겠지만) dl의 대안으로 table을 쓰는 것도 많이 나쁘지 않다고 봅니다. 내용물 자리 배치를 위한 table이 아니고, 의미를 지니고 있고, '선형화' (serialize/linearize) 했을 때에도 (시각 장애인 등을 위해서) 의미가 명확하니까요.

[bopy]

감사합니다. 여러분 덕택에 많은걸 배우고 쉽게 만들수 있겠습니다.
다음에도 의문나는건 여기에 물어봐야(랄라)

그런데, 모든 테이블을 제거해야 한다는 강박 관념에 빠질 필요는 없습니다. 의미적으로 2차원적인 정보를 전달할 때에는 당연히 써야 합니다.

이번 경우 (2차원 정보라고 하기 힘들기는 하지만. 만일 한 컬럼이 더 있었다면, 확실히 그렇겠지만) dl의 대안으로 table을 쓰는 것도 많이 나쁘지 않다고 봅니다. 내용물 자리 배치를 위한 table이 아니고, 의미를 지니고 있고, '선형화' (serialize/linearize) 했을 때에도 (시각 장애인 등을 위해서) 의미가 명확하니까요.

그런거군요. 확실히 코드상으로도 직선이 되는구요..
으음.

[박민권]

그런데, 모든 테이블을 제거해야 한다는 강박 관념에 빠질 필요는 없습니다. 의미적으로 2차원적인 정보를 전달할 때에는 당연히 써야 합니다.

저도 님의 의견에 동의 합니다.

진짜 표를 나타낼때는 테이블을 쓰는게 확실하죠.