[CSS] 자식 요소의 % 패딩(% padding) 값은 부모 요소의 너비 값을 기준으로 정해진다.
주제가 조금 어렵습니다.
개념도 조금 어렵고, 글을 읽고 나면 더 이해가 안갈 수 있습니다.
단, 웹 표준이 그렇게 정해져 있기 때문에 그렇게 사용해야 하고, 그럴 수 밖에 없는 이유도 분명히 있다는 점을 알아두는게 좋습니다.
CSS를 전문적으로 작성하는 프론트엔드 개발자도 대부분 모르는 내용이며, 실제로 이렇게 잘 사용하지 않습니다. 알아서 회피를 한다기 보다는 그냥 몰라서 이렇게 사용하지 않는 것입니다.
아주 쉽게 기본적인 예를 먼저 들어 보겠습니다.
결과 화면은 크롬 브라우저를 기준으로 합니다.
단순한 <div> 박스 2개가 부모 자식 요소로 되어 있습니다.
<div class="parent">
<div class="child"> </div>
</div>CSS는 다음과 같이 구분하기 쉽도록 배경색을 지정해서 블록으로 만들었습니다.
.parent{
height: auto;
width: 200px;
background-color: #a00;
}
.child{
padding: 25px;
background-color: #0a0;
}여기까지는 우리 모두가 아는 CSS 작성 방식입니다.
부모 요소에 너비 200px를 주고 높이는 잡지 않고, 자식 요소는 패딩을 25px을 줘서 부모 요소와의 간격을 띄우고 그 안에 표시할 컨텐츠를 넣는다.
부모 요소에 너비 200px를 준 것은 작은 화면에 예를 들기 위한 것이고, 결과에는 영향을 주지 않습니다.
웹브라우저 개발자 도구로 요소를 선택해서 확인하면 다음과 같이 깨끗하게 적용이 된 것을 확인할 수 있습니다.
자식 요소의 패딩 값 25px를 단위를 변경해서 25%로 변경합니다. 그러면 다음과 같이 갑자기 자식 요소 박스 크기가 커지면서 이해할 수 없는 패딩 크기값(50px)을 가지게 됩니다.
패딩 값이 50px 이유는 글 제목에서 미리 알고 있으므로 바로 이유를 확인합니다.
부모 요소의 너비 값을 200px 에서 450px로 변경해서 확인하면 다음과 같이 패딩 값이 같이 커집니다.
패딩 한면의 크기는 변경된 부모 요소의 너비 값 450px * 0.25 = 112.5px 가 됩니다.
따라서 자식 요소의 최종 높이는 112.5px * 2 가 되고, HTML 자식 요소에 " "로 텍스트 공백을 넣어서 내용이 높이를 차지하면서 웹 브라우저 텍스트의 기본 높이 값인 21px를 차지하므로 112.5 * 2 + 21 = 246px가 됩니다.
부모 요소의 너비 값을 정하지 않으면, 브라우저 전체 영역이 너비 값이 되고, 마찬가지로 자식 요소의 패딩 % 값에도 영향을 미치게 됩니다. 웹 브라우저 너비가 되면 자식 요소의 % 패딩 값도 따라서 변하게 되고, 레이아웃이 계속 변하는 상황에 직면하게 됩니다.
% 단위와 em 단위는 반응형 웹에서 매우 중요한 역할을 합니다. 특히 레티나 디스플레이 지원을 위해서는 필수적인 요소이며, 누누히 강조해 왔듯이 현재와 미래의 웹에서는 픽셀(px) 단위를 사용하는 것은 가능하면 줄여야 합니다.
단, 예외적으로 패딩 값이 % 단위를 사용할 때는 특별히 주의를 해야 하며, 레티나 디스플레이에서의 취약성에도 불구하고 픽셀(px) 단위를 혼용해서 사용해야하는 상황이 있습니다.
앞의 예에서 본 것처럼 패딩에 % 단위를 사용하면, 웹 페이지 레이아웃을 작성하는데 우리가 예측할 수 없는, 또는 예측할 수 있음에도 정확하게 제어를 하기 힘든 결과를 표시합니다.
이 이상한 결과를 만들어내는 자식 요소 패딩 값의 % 값에 대한 참조 기준은 웹 표준으로 정해져 있고, 또 오랫동안 유지되어온 방식입니다. 단지 우리가 사용하지 않고 있어서 몰랐을 뿐입니다.
자식 요소의 패딩 값으로 %를 사용할 경우, %의 기준 크기는 부모 요소의 너비 값이 됩니다.
표준을 제정한 사람을 위해 약간의 변명을 더하자면, 자식 요소의 % 값 패딩의 기준 참조 크기로 부모 요소의 너비 값을 사용할 수 밖에 없는 이유가 있습니다. 소위 어쩔 수 없었다거나, 그렇게 할 수 밖에 없었습니다.
웹페이지를 렌더링 하기 위해서 박스 모델의 요소 크기를 정해야 하는 시점에 자식 요소는 % 패딩 값을 최종적으로 픽셀로 변환해서 크기값을 정해서 화면에 표시해야 합니다. 이때 자식 요소는 부모 요소의 크기 값을 기준으로 그 크기를 확정해야 하는데, 웹의 구조상 확정적으로 크기 값을 알 수 있는 것은 부모 요소의 너비 값 밖에 없습니다.
부모 요소의 높이 값은 현재 자식 요소의 뒤에 또 다른 자식 요소가 오게 되면 인해 높이가 변할 수 있기 때문에 확정적이 될 수 없습니다.
우리가 사는 세상의 웹은 가로 쓰기를 기준으로 되어있기 때문에 세로 높이는 언제나 가변이라는 전제로 동작합니다.
따라서, 확정적인 부모 요소의 너비 값(부모 요소는 렌더링을 위해 픽셀 단위로 가로 값이 이미 확정되어 있으므로)을 기준으로 자식 요소의 패딩 % 값을 계산할 수 밖에 없습니다.
이런 이유 때문에 반응형 웹을 작성할 때 무작정 % 패딩 값을 사용해서는 안되며, 어떤 경우에는 픽셀 단위를 사용하기도 해야 합니다.