마진과 패딩에 퍼센트 값 적용
dev | 2012-07-24
가변 폭 비디오를 만드려고 검색했다가 발견(내가 참고했던 글을 못찾겠다;;)했는데 마진과 패딩에 퍼센트로 값을 지정하면 내 예상과는 다른 값이 지정된다.
보통 마진과 패딩은 고정된 값을 지정하고 퍼센트 같은 상대값으로 지정하지는 않는다. 퍼센트는 상대값이기 때문에 기준이 되는 요소가 있어야 하는데 마진이나 패딩을 지정한 요소가 아니라 상위 요소를 기준으로 적용된다. 더더욱 특이한 점은 상하 마진/패딩이 상위 요소의 높이를 기준으로 하지 않고 너비를 기준으로 한다는 점이다. 좌우 마진/패딩은 상위 요소의 너비를 기준으로 값을 취하는 것이 자연스러운데 상하 마진/패딩이 상위 요소의 너비를 기준으로 한다는 점은 잘 납득이 가지는 않는다. CSS2 스펙의 마진부분에서는 퍼센트에 대해 아래와 같이 기술하고 있다.
- <percentage>
- The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.
강조까지 하면서 너비를 기준으로 계산된다고 한다. 이러한 특징을 이용해서 가변 크기이면서 가로세로비를 동일하게 유지하는 박스를 만들어 낼 수 있다. 정말 HTML, CSS는 끝이 없는 것 같다. 새로운 내용이 계속해서 나온다.
Share on
Comments
제 생각에는 웹 페이지에서 너비는 고정된 경우가 많은데 높이는 결정하기 힘들고, 안쪽 엘리먼트의 패딩이 높이에 누적되기 때문에 결정적으로 계산하기가 힘들어서 저런 명세가 나온 게 아닐까 싶습니다.
잘 생각해보면 상위요소 기준이라는 건 사실 지금도 납득하고 계산하고 있었던 것 아닌가요? 어떤 요소의 너비(width)를 %로 지정할 때 그 %는 상위요소를 기준으로 계산하니, 그 요소의 마진이나 패딩을 계산하는 기준도 같은 게 당연한 것 같은데요. 모르셨던 사실은 아니신 듯... 근데 세로쪽 값도 너비 기준이라는 건 몰랐던 얘기네요 -_-a 킁킁
홍민희님 설명이 가장 설득력이 있는데 직관적인 의미와 구현사이에서의 줄다리기라는 느낌이 조금 있어요. CSS에서 높이를 어떻게 바라보는지 다시 한번 생각해본 계기였어요. 청솔모님 말씀처럼 상대값의 기준은 상위 요소인데 이 마진과 패딩이라는 속성은 왠지 박스에 종속된다는 느낌이 강해서 이상하게 생각했던 것 같아요. 마진은 다른 박스와의 관계니까 그나마 납득이 가는데 패딩은 박스의 안쪽에 생기는데 부모요소에 의존한다는게 좀....미스테리입니다. 뭐, CSS 박스 모델의 너비와 높이가 처음에 이해 안가는 것과 비슷하달까요. ㅎㅎ
이런 사실을 최근에 아셨단 말이에요? ㅎㅎ 전 벌써 작년에 제 블로그 디자인 할 때 써먹어서 별 놀랍지도 않던데... ㅋㅋ 제 블로그에서 스타일시트 연결 교체 해보신 후 화면크기를 늘렸다 줄여보시기 바랍니다. ^^
그런데 세로비도 가로비와 함께 유지할 수 있다는 사실을 여기서 첨 알았네요.. 하지만 세로비는 컨텐츠 량에 따라 결정되는게 일반적이라 저렇게 가로세로비를 같이 유지할 일이 있나 싶네요.
헐... 이럴수가;; 테스트해보니, 정말이네요;;; 맙소사... 이건 상식적으로 납득이 안되는데;;; css제작자가 실수한건 아니겠죠?