이런건 Div로 바꿔야 할런지...

온다리 · Post by **온다리** » 2005 08 10 06:03 38

휘유... 이번에 아는 사람 홈페이지를 작업해 주는데..

웹표준으로 작성하려는데요...

ㅋ 생각보다 어렵네요.

테이블에 익숙하다보니..쩝..

염치 불구하고 함 물어볼랍니다.

http://blog.dreamwiz.com/usr/o/n/ondari ... 5536_1.gif

그림에서 보듯이 빨간 선부분이 div로 표현해야 할부분인데..
어찌해야 할런지..ㅠ.ㅠ

좀가르쳐주세요

박민권 · Post by **박민권** » 2005 08 10 09:33 09

올려주신 이미지처럼 css로 구성할때 테이블 개념이 아닌 다른 방향으로 접근해야 하는데 이 부분이 많이 해보지 않으면 어려운 부분이죠.

가장 중요한 것은 구조적인 xhtml 문서를 작성하는 것입니다.
때문에 각자 구현하는 방법이 다를 것 입니다.

저는 dl로 구성하는 것이 좋을 것 같습니다.
(dl은 현석님에게 영향을 받음. ㅎㅎ)

Code: Select all

<html>
<head>

<style type="text/css">
	/* 브라우저 기본 스타일 초기화 */
	dl,dt,dd{margin: 0; padding: 0; border: 1px solid red;}

	/* 리스트의 원하는 크기 잡기 */
	dl{width: 250px; height: 120px; position: relative;}

	/* dt부분에 대한 설정 */
	dt{position: relative;}
	dt span{position: absolute; right: 0; top: 0;} /* +more */

	/* dd에 대한 살정 */
	dd{padding: 3px 0 3px 100px;}
	/* 사진이 들어간 dd */
	dd.pic{padding: 0; position: absolute; left: 0; top: 20px;}
</style>

</head>
</body>

<dl>
	<dt>원룸 <span>+more</span></dt>
	<dd class="pic"><img src="" alt="아잉나그림" width="80" height="80"/></dd>
	<dd>원룸 18평</dd>
	<dd>강남구 논현동</dd>
	<dd>전월 1000/100</dd>
</dl>

</body>
</html>

위의 스타일을 잘 분석하셔서 테이블과는 다른 개념이 무엇인지 확인해보세요.

css = div 가 전부는 아닙니다.
의미있는 태그를 적재적소에 사용하는 것이 좋습니다.
위의 코드를 스타일을 없는 상태에서도 확인해보세요.

위에서 img태그에 width, heigth등의 크기는 왜 스타일에서 정하지 않고 넣어는지 궁금해 하실 수도 있습니다.

처음에는 img의 크기에 관한 것도 css로 작성하였는데 막상 하다보니 여러가지 이유로 img의 크기는 태그에 직접 속성을 적어주기로 했습니다.
그 중 하나가 스타일을 없앴을 경우 큰 이미지는 대략 난감...

빛알갱이 · Post by **빛알갱이** » 2005 08 10 22:56 10

Code: Select all

<dl>
   <dt>원룸 <span>+more</span></dt>
   <dd class="pic"><img src="" alt="아잉나그림" width="80" height="80"/></dd>
   <dd>원룸 18평</dd>
   <dd>강남구 논현동</dd>
   <dd>전월 1000/100</dd>
</dl>

dt에 대해 dd가 여려 개 붙은 경우에는 각각의 dd가 dt에 내세운 표제어에 대한 '독립적인 정의'여야 합니다. 예를 들어 사전에서 center 혹은 centre에 대한 표제어에 대해 몇 가지 다른 정의를 할 수 있습니다.

Code: Select all

<dl>
  <dt>center</dt>
  <dt>centre</dt>
  <dd> A point equidistant from the vertices of a regular polygon</dd>
  <dd> A person or thing that is the chief object of attention, interest, activity, or emotion.</dd>
  <dd> Baseball. Center field.</dd>
</dl>

보기로 드신 경우는 '강남구 논현동', '전월 1000만원/100만원' , '원룸 18평' 등이 독립적으로 정의가 될 수 없고, 전체가 합해서 하나의 설명을 구성하므로 dd를 나열해서 쓰는 것은 적절하지 않다고 봅니다. 아래와 같이 html을 작성한 후에 적절한 스타일을 붙이는 게 좋지 않을까요?

Code: Select all

<dl>
  <dt>원룸</dt>
  <dd>
     <ul>
       <li>18평</li>
       <li>강남구 논현동</li>
       <li>전월 1000/100</li>
     </ul>
  </dd>
 </dl>

박민권 · Post by **박민권** » 2005 08 10 23:52 31

빛알갱이 wrote: dt에 대해 dd가 여려 개 붙은 경우에는 각각의 dd가 dt에 내세운 표제어에 대한 '독립적인 정의'여야 합니다. 예를 들어 사전에서 center 혹은 centre에 대한 표제어에 대해 몇 가지 다른 정의를 할 수 있습니다.

보기로 드신 경우는 '강남구 논현동', '전월 1000만원/100만원' , '원룸 18평' 등이 독립적으로 정의가 될 수 없고, 전체가 합해서 하나의 설명을 구성하므로 dd를 나열해서 쓰는 것은 적절하지 않다고 봅니다. 아래와 같이 html을 작성한 후에 적절한 스타일을 붙이는 게 좋지 않을까요?
Code: Select all
<dl>
  <dt>원룸</dt>
  <dd>
     <ul>
       <li>18평</li>
       <li>강남구 논현동</li>
       <li>전월 1000/100</li>
     </ul>
  </dd>
 </dl>

아... 제가 dt와 dd에 대해서 잘못 알고 있었군요. 부끄~
저는 dt가 dl의 caption(?)과 같은 역할을 하는 것으로 알았습니다.
table에서의 caption 처럼요.
잘못을 지적해주셔서 감사합니다.

온다리 · Post by **온다리** » 2005 08 11 07:54 42

휘유 굉장히 어렵네요..

이거 테이블에 익숙한걸 어찌 뜯어 고 쳐야 할텐데..
우...정말 가슴아프네요.

정말 처음부터 대했으면 이렇게 어렵지 않을텐데요.
빡시게 공부해야뒤요.별수 없으니.

dt dd dl...-_- 솔찍히 이 태그들 있는 줄도 몰랐습니다.

태그 공부부터 다시시작해야 할듯 싶네요.

박민권 · Post by **박민권** » 2005 08 11 09:29 51

온다리 wrote:휘유 굉장히 어렵네요..

이거 테이블에 익숙한걸 어찌 뜯어 고 쳐야 할텐데..
우...정말 가슴아프네요.

정말 처음부터 대했으면 이렇게 어렵지 않을텐데요.
빡시게 공부해야뒤요.별수 없으니.

dt dd dl...-_- 솔찍히 이 태그들 있는 줄도 몰랐습니다.

태그 공부부터 다시시작해야 할듯 싶네요.

그러게 말입니다. 처음부터 제대로 배웠으면 잘못된 버릇에 고생하지 않을텐데요.
저도 dl 태그들의 존재 자체를 모르고 살았었습니다. ㅡㅡ;
그래서 xhtml 태그부터 다시 공부했었죠.

Mozilla 한국 커뮤니티

이런건 Div로 바꿔야 할런지...

이런건 Div로 바꿔야 할런지...

음

아...

^^ 감사합니다.

Re: ^^ 감사합니다.

Who is online