Margin percent

The Missing Manual - 세상에 없던가장 꼼꼼함 매뉴얼

안 여백(margin), 바깥 여백(margin)과 퍼센트 값

퍼센트 값의 경우, 브라우저는 그 값이 실제로 얼마만큼의 공간인지를 해당 태그의 상위 요소 폭에 근거하여 계산한다. 간단한 웹 페이지라면 바깥쪽 HTML 요소는 body일 것이므로 브라우저 창 폭과 같을 것이다. 그 경우 퍼센트 값은 특정 시점의 브라우저 크기를 기준으로 계산된다. 가령 창 너비가 760픽셀이라고 하자. 10%의 왼쪽 바깥 여백을 설정하면, 해당 요소의 왼쪽에 76픽셀의 여백이 자리하게 될 것이다. 하지만 브라우저 크기를 조정하면 그 값도 바뀐다. 가령 창 너비를 600픽셀로 조정하면 해당 바깥 여백의 너비는 60픽셀로 바뀐다(600픽셀의 10%)

하지만 바깥 요소가 항상 body인 것은 아니므로, 퍼센트 값도 항상 창의 너비를 기준으로 하는 것은 아니다. 나중에 살펴보겠지만, 복잡한 페이지 레이아웃을 만드는 경우에는 페이지 내용을 구성하는 데 도움이 되는 새로운 요소를 추가할 수 있다.

가령 <div> 태그를 사용해 사이드바 영역에 들어갈 관련 내용을 한데 묶었다 해 보자.(255쪽 자습서에서 그 사례를 살펴볼 것이다.) 그 사이드바의 폭이 300픽셀이라고 해 보자. 사이드바의 <div> 안에 있는 태그들은 <div>의 폭을 기준으로 퍼센트 값을 계산한다. 따라서 10%의 오른쪽 바깥 여백을 지정하면 태그 오늘쪽에 30픽셀의 공간이 생길 것이다.

문제는 위아래 여백에 퍼센트 값을 지정하는 경우에도, 해당 태그의 바깥 태그 높이가 아닌 '폭'을 기준으로 실제 너비를 계산하게 된다는 것이다. 따라서 20%의 위쪽 바깥 여백은, 해당 태그를 포함하는 태그의 폭 기준으로 20%만큼의 공간을 차지하게 된다.

TEST

padding 예시 이미지

위 예시와 분석 이미지를 보면, 상단 maring, padding으로 10%를 설정했으면 그 기준값이 높이값 100px이 아니라 넓이값 300px이라는 사실을 알 수 있다..