스타일(css)문의
아리에스
제가 웹접근성 연구소 코딩스타일을 좀 보려다가 스타일 하나가 궁금해서 아무리 css를 봐도
모르기에 문의드려요. ^^;
firebug사용시 dd에 포커스가 생기면 dd의 영역이 잡히잖아여?! 근데 영역이 dt까지 잡히더라구여
dt는 float:left;되어있고, dd는 float하지 않은 상태이네요.
그래서 dd.next에 border-top:1px dotted #B3D4D9; 하니까 dt까지 dot이 쫙~ 깔리더라구요.
그래서 궁금한거는 어떻게 dt까지 영역이 잡혔을까 하는 것입니다.
margin-left에 -수치를 넣어준것도 아니구; 아~ 정말 궁금해여 ^^;
혹시 이런방법으로 코딩하시는 분들 계시나여?
css도 올려드립니다.
-
창의적 2024-02-04
제가 안한건 아니구여 ㅋㅋ
접근성 연구소에서 안하신거에여 ㅋㅋ
dd에 float:left;하면 하단 dt가 또 딸려 올라오니까
그러신게 아닐까여? 소스도 간소화되구 말이죠 -
빵돌 2024-02-04
저두 그렇게 생각하고 테스트 했는데 dt가 나오고 나서 dd가 width:100%를 가지더군여;;
ㅠㅠ -
딥레드 2024-02-04
dd 에 float:left; 해주세요~
안해주는 이유라도?;;; -
우람늘 2024-02-04
dt는 플로트 되면서 블록으로서 가지던 100% 넓이를 잃었고 dd는 블록으로서 100% 가져서 dd에 보더주면 100%로 출력되는게 아닐지. dt는 100%를 잃었대도 내용이 있고 패딩값이 있으니 고만큼은 출력되는듯하네요.
-
도손 2024-02-04
요크 님의 말 처럼 dd에도 float를 주는 경우
dd의 텍스트가 dt의 영역보다 길어질 경우 dt의 아래로 텍스트가 흐름니다.
지금 dt와 dd의 영역이 구분 되어 있는 디자인 이니까
dd의 텍스트가 길어진다면 이전글 밑으로 흐르겠지요-
그렇게 되지 않게 하기 위해 dd에 float를 주지 않고 margin-left를 사용해서
영역을 구분 하는것이 좋습니다. -
별햇님 2024-02-04
dd에 margin-left:(dt의 넓이) 가 들어가 있지 않나요???