padding과 margin - 한 눈에 끝내는 HTML5/CSS3
한 눈에 끝내는 HTML5/CSS3
  • padding과 margin
    learn
    Practice
    learn
    11 Box 모델
    padding과 margin

    border 내외 여백인 패딩과 마진에 대해 알아봅시다. border를 기준으로 경계선 내부 여백을 패딩(Padding), 경계선 외부 여백을 마진(Margin)이라고 합니다.

    패딩과 마진 둘 모두 앞서 배운 border처럼 네 방향 따로 혹은 한꺼번에 모두 적용할 수 있습니다.

    아래 코드를 작성하여 실행하면, 빨간 경계선을 기준으로 내부 여백과 외부 여백이 생긴 것을 확인할 수 있습니다. 명확한 차이를 확인하고 싶다면 marginpadding 프로퍼티를 지운 뒤 다시 실행해 봅시다.

    .boxmarginpadding의 실체를 파악하기 위해 아래 gif와 같이 오른쪽 개발자 도구의 박스 모델에서 마우스를 움직여 직접 확인합니다.

    개발자 도구에서 볼 수 있듯이, content에 해당하는 <div class="inner">구름EDU</div>의 주위로 padding20px만큼 있고, 그 주위로 border8px 생긴 것을 확인할 수 있습니다. 또한 그 border의 주위로 margin20px씩 위치해 있습니다.


    마진 상쇄


    마진과 패딩은 비슷하지만 서로 다른 두 요소를 위아래로 배치하여 마진을 사용할 때 주목해야 할 특징이 있습니다. 예시를 통해 살펴봅시다. 먼저 두 <div>태그를 생성합니다.

    아래와 같이 padding을 추가합니다.

    실행시켜보면 배경만 넓어지고 여전히 두 <div> 태그는 붙어 있는 것을 볼 수 있습니다. 이번에는 margin을 추가합니다.

    뭔가 이상합니다. 위에 20px을, 아래에 20px을 적용했지만 #top#bottom 사이 마진은 40px이 아닌 20px입니다. 마진이 서로 상쇄된 것이 확인됩니다.

    좀 더 확실히 확인하기 위해 아래와 같이 CSS를 수정합니다.

     #top에 적용된 20px이 제대로 적용이 되는 것을 확인할 수 있습니다.

    여기서 #bottom에 적용된 40px이 특이하죠? 위의 20px을 포함하고 있습니다.

    위아래로 맞닿은 두 요소 사이 마진은 더 큰 쪽을 기준으로 결정됩니다. 두 요소에 각각 마진을 각각 적용하더라도 서로 맞닿아 있다면 마진이 따로 존재하지 않는다는 말과 동일합니다.

    CSS의 마진 상쇄에 의해 상하 요소 사이의 마진은 서로 상쇄됩니다. 큰 쪽의 마진을 기준으로 한다는 점 참고하시기 바랍니다.

    CSS를 적용할 때 내가 생각한대로 여백이 생기지 않는다면 마진 상쇄 문제가 아닌지 고민해보시기 바랍니다.


    box-sizing


    이제까지 박스 모델에 대해 배웠습니다. 마지막으로 box-sizing에 대해 간단히 살펴봅시다. 우리가 일반적으로 요소에 width나 height를 적용하면 항상 content의 크기기 조정된 것을 기억하실 겁니다.

    때문에 다른 요소들과 배치할 때 종종 크기 값을 어떻게 줘야 할지 고민할 때가 많습니다. 아래의 코드를 한 번 작성하여 실행해 봅시다.

    위 코드를 실행해보면 #left#right이 서로 붙어 있는 것을 볼 수 있습니다. 이 상황에서 #right 박스를 paddingborder로 꾸미려 아래와 같이 코드를 수정하면, 예상한 것과 달리 #left#right이 분리되어 버립니다.

    이런 고민을 해결하기 위해 box-sizing 프로퍼티를 이용할 수 있습니다. 일반적인 기본 값으로 box-sizing: content-box;를 사용합니다. 말 그대로 content-box를 기준으로 크기를 정하죠. 이와 달리 box-sizing: border-box;의 크기는 border 바로 전 padding까지를 기준으로 정해집니다.

    코드를 아래와 같이 수정하여 다시 실행해 봅시다. 여러분이 원하는 대로 왼쪽과 오른쪽에 정렬되는 것을 확인할 수 있습니다.

    정리하면 기본 값인 content-box의 width 값은 컨텐츠만의 사이즈이고, border-box는 컨텐츠의 크기와 패딩까지 합한 값이라는 것입니다.

    box-sizing: content-box;

    width(height) = content size

    box-sizing: border-box;

    width(height) = content size + padding + border size

    이 때문에 content-box와 border-box는 padding 값을 줄 때 다르게 작용하는 것처럼 보입니다. 간단한 예시를 하나 더 볼까요? 다음과 같이 작성하고 개발자 도구로 두 코드의 차이를 살펴 봅시다.

    content-box에서 padding 값을 줄 경우 배경이 넓어진 것처럼, 즉 내부 여백이지만 밖으로 펼쳐 나가는 모습처럼 보입니다. 반면 border-boxwidthpadding을 포함하기 때문에 자동으로 컨텐츠의 크기가 줄어듭니다. 내부 여백인 패딩에 값을 주면 컨텐츠가 줄어 안으로 여백이 확장되는 것처럼 보이죠.

    경우에 따라 box-sizing을 잘 사용하면 웹 개발을 좀 더 편하게 할 수 있으니 반복하여 연습하시길 권장드립니다.

    Practice

    이론에서 살펴본 코드를 직접 작성하여 결과를 확인한 뒤, 구성 요소를 변경하며 어떤 변화가 일어나는지 확인해봅시다.

    learn
    Practice
    Q & A
    Q&A forum that anyone can ask and answer.
    Share your questions and answers with other students and grow together!

    Registered Questions(0)