Page 1 of 1

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

Posted: 2004 12 29 21:01 54
by bopy
태터툴즈 기본스킨을 CSS레이아웃으로 바꾸고 있습니다.

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

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

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

방법은 무궁무진합니다.

Posted: 2004 12 30 00:03 25
by 박민권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을 적절히 사용하시면 될겁니다.

Posted: 2004 12 30 09:23 53
by 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>

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

뜨아

Posted: 2004 12 30 11:06 47
by 박민권
hyeonseok wrote:<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 태어나서 한번도 안써봤어요. 크흑~

대충...

Posted: 2004 12 30 11:12 17
by 박민권
w3c school에서 찾아서 예제를 보니 대충 어떻게 돌아가는지는 알겠네요.

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

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

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

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

Re: 뜨아

Posted: 2004 12 30 13:04 47
by hyeonseok
박민권 wrote: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

에 있습니다~

Posted: 2004 12 30 14:18 56
by 빛알갱이
hyeonseok wrote: ul. ol, dl

이 세개가 html 의 list 삼형제 입니다. ^^
수학, 물리학, 경제학에서 많이 쓰는 LaTeX에서는 itemize, enumerate,
description에 대응합니다. :-)

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

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

Posted: 2004 12 30 23:07 02
by bopy
감사합니다. 여러분 덕택에 많은걸 배우고 쉽게 만들수 있겠습니다.
다음에도 의문나는건 여기에 물어봐야(랄라)
빛알갱이 wrote:
그런데, 모든 테이블을 제거해야 한다는 강박 관념에 빠질 필요는 없습니다. 의미적으로 2차원적인 정보를 전달할 때에는 당연히 써야 합니다.

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

저두

Posted: 2004 12 30 23:29 48
by 박민권
빛알갱이 wrote: 그런데, 모든 테이블을 제거해야 한다는 강박 관념에 빠질 필요는 없습니다. 의미적으로 2차원적인 정보를 전달할 때에는 당연히 써야 합니다.
저도 님의 의견에 동의 합니다.

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