안녕하세요. StyleSheet관련 질문..

Mozilla Firefox 사용에 대한 일반적인 질문과 답을 해 주는 게시판입니다. 질문을 하기 전에 FAQ를 읽어 보시는게 도움이 될 것입니다.
댓글 게시
crescent
게시물: 1
참여됨: 2004 06 02 11:02 34

안녕하세요. StyleSheet관련 질문..

게시물 작성자 crescent » 2004 06 02 11:06 59

안녕하세요.

HTML을 좀 만지다가 궁금한 사항이 생겨서 이렇게 질문 남깁니다.
현재 <b>DIV</b> 태그에

{ width: 128px; padding-left: 2px; border: RGB(212, 225, 229) 1px solid; font-family: 굴림; background-color: #F3F6F7; }

위와 같은 스타일시트를 적용하였을 경우,
IE의는 width가 정확히 128px인 박스(?)가 생성되는 반면, 모질라는 Padding-left + border-left 1 + border-right 1 도합 6픽셀이 커져서 134px짜리 박스(?)가
생성됩니다.
표현이 좀 뭣하지만.. 이해하셨으리라 생각됩니다.

이상해서 w3c 에서 CSS문서를 찾아보았는데 이런 부분이 있더군요.

--------------------------------------------------
10.3.7 절대적으로 위치된, 대체되지 않은 엘레멘트
이 엘레멘트들에서 계산된 값을 결정하는 공식은:

'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = 용기블럭 너비
--------------------------------------------------

즉 width 를 정해주면 margin이나 border, padding이 바뀌어도 width는 그대로여야 한다는것 아닌가요?
정확히 물어볼곳도 마땅찮고 해서 질문 올려봅니다.
아시는분 속시원히 답좀 주시면 감사하겠습니다.
안녕하세요.
모질라를 사랑합니다!

kheled

Re: 안녕하세요. StyleSheet관련 질문..

게시물 작성자 kheled » 2004 06 02 19:07 31

결론적으로, 모질라가 취급하는 방식이 맞습니다. IE도 버전 6에서 DOCTYPE을 지정하여 표준 준수 모드로 렌더링하면 모질라와 같은 (즉, CSS2 스펙과 같은) 식으로 계산합니다. 디폴트 모드와 IE 구 버전에서는 width:나 height: 계산을 스펙대로 하지 않고 있습니다.

CSS2의 width: 속성 설명을 보면 width는 '내용(content)의 너비'라고 되어 있습니다. margin, padding, border 너비는 내용 너비에 추가적으로 붙어서 계산됩니다. 위 공식의 의미가 그것이죠.

참고로, 같은 CSS로 브라우저간 다른 결과를 보이는 위 문제를 해결하기 위해 box model hack이라는 것이 쓰이기도 합니다.

crescent
게시물: 1
참여됨: 2004 06 02 11:02 34

Re: 안녕하세요. StyleSheet관련 질문..

게시물 작성자 crescent » 2004 06 03 10:21 27

제가 잘못 이해하고 있었네요... 그러리라 예상은 했었지만,,,
아무튼 답변 감사드립니다..

box model hack에 대하여 알아봐야겠군요 :)
안녕하세요.
모질라를 사랑합니다!

두슬

Re: 안녕하세요. StyleSheet관련 질문..

게시물 작성자 두슬 » 2004 06 07 15:16 33

자세히는 모르지만.
div 태그 속에 들어가는 내용에도 스타일시트를 잘 지정해주면
IE 와 모질라의 차이없이 나타나게 할 수 있습니다.
음...있다고 생각합니다...

댓글 게시

누군가 접속

유저들이 이 포럼을 탐색중: 가입된 유저 없음 그리고 8 손님들