dl 리스트 사용시 borer 값에 관한 질문입니다.
벚꽃
dl 리스트를 이용해서 위 이미지의 모양을 만들었는데요.
궁금한 점이 있어서요.
dt, dd에 border 값을 주면 dd의 글자가 dt의 글자 끝에 맞춰서 정렬이 되는데 border 값을 주지 않으면 오른쪽 그림처럼 dt의 글자 아래로 들어가 버리네요. 왜 그러는걸까요? 작업하다가 궁금해서 여쭤봅니다.
이경우 말고도 코딩을 하다 보면 border값을 줘야 제대로 위치가 잡히는 경우가 있거든요. border 값을 준것과 안 준것의 차이가 뭘까요?
웹표준을 공부를 이제 막 시작해서 이런저런 궁금한 점이 많이 생기네요. ^^
허접한 질문이더라도 자라나는 새싹을 위해 답변 부탁드릴께요.
css 소스
.sub31-2 {width:730px;}
.sub31-2 dl {width:350px; margin-right:35px;}
.sub31-2 dt {float:left;font-weight:bold;}
.sub31-2 dd {}
.sub31-2 .part {width:350px; color:#506288; font-size:13px; font-weight:bold;}
html 소스
div class=sub31-2
dl
dd class=part소프라노 (14명) /dd
dt· 파트장 :/dt
dd정현숙 선생/dd
dt· 대원 :/dt
dd양순희, 박미자, 김성희, 윤옥자, 강양근, 전화조, 임명숙, 이세진, 이범순, 유현주, 유윤정, 유지은, 고은비 /dd
/dl
/div
-
향율
아... 더 설명을 드렸어야 했는데... 위의 소스에다가 dt와 dd에 boder 값을 주게 되면 그림처럼 자동으로 글자가 밀리더라구요. 어떤 경우엔 위치까지 바뀔때가 있어서요. border 값을 주게되면 dt 와 dd의 속성이 바뀌게 되는 건가에 대한 질문이었어요. ^^
답변 감사합니다. 글자를 밀어내는 문제는 수다님 말씀처럼 마진값과 패딩값을 사용했습니다. 감사해요.^^ -
플랜
저건 dt에만 플롯이 되어져 있어서 그래요
음.. 간격같은걸 생각하고 코딩을 하자면 dd에다 margin-left:00px;처럼 적당한 픽셀만큼 여백을 주는게 괜찮을듯 싶네요