20. padding, border, margin

이번 포스팅에서는 앞선 포스팅의 연장으로, boxmodel에 포함되는 padding, border, margin에 대하여 알아보겠습니다.

CSS는 다양한 속성들을 반복적으로 자주 사용하다 보니, 하나하나 잘 이해하고 넘어가시는 게 좋을 것 같습니다.

padding, border, margin에 대한 간단한 소개는 이미 다루었으니 사용 방법 위주로 소개드리겠습니다.

 

1. padding

padding의 기본 값은 0이며, 속성 값으로는 고정 값과 퍼센트(%)를 사용할 수 있는데요.

padding은 상(top), 하(bottom), 좌(left), 우(right)를 각각 지정할 수도 있습니다.

 

h1 {
    padding: 10px 20px 10px 20px; /* 순서대로 상/우/하/좌 */
}

 

위와 같이 이어서 작성할 수도 있고, 위치마다 따로 적용할 수도 있습니다.

 

h1 {
    padding-top:10px;
    padding-right:20px;
    padding-bottom:10px;
    padding-left:20px;
}

 

그리고 예시와 같이 상/하, 좌/우의 값이 같다면 축약형으로 사용할 수 있으며, 상/하/좌/우의 값이 모두 같을 경우에도 가능합니다.

 

h1 {
    padding: 10px 20px;
}
h1 {
    padding: 10px;
}

 

위의 예시는 상/하에 padding: 10px, 좌/우에 padding:20px을 적용하는 것이며, 두 번째 예시는 상/하/좌/우에 padding:10px을 적용하는 것입니다.

2. border

border는 background처럼 몇 가지의 속성을 축약하여 사용할 수 있습니다.

 

h1 {
    border: width/style/color;
}

 

► border-width

border-width는 선의 굵기를 지정하는 속성으로, 기본 값은 medium을 가집니다.

해당 속성을 통하여 상/하/좌/우에 각각 다른 선의 굵기를 적용할 수 있습니다.

 

h1 {
    border-width: top/right/bottom/left;
}

 

속성 값으로는 키워드(thin, medium, thick)와 고정 값이 있으며, 대부분 고정 값을 많이 사용합니다.

 

► border-style

border-style는 선의 모양를 지정하는 속성으로, 기본 값은 none을 가집니다.

해당 속성을 통하여 상/하/좌/우에 각각 다른 선의 모양을 적용할 수 있습니다.

 

h1 {
    border-style: top/right/bottom/left;
}

 

자주 사용되는 속성 값으로는 none, soild, double, dotted 등이 있으며, 이 외의 속성 값은 MDN에서 확인해 보시는 것을 권해드립니다.

 

► border-style 속성 값 확인하기

 

► border-color

border-color는 선의 색상을 지정하는 속성으로, 기본 값은 currentcolor를 가집니다.

해당 속성을 통하여 상/하/좌/우에 각각 다른 선의 색상을 적용할 수 있습니다.

 

h1 {
    border-color: top/right/bottom/left;
}

 

색상 값은 앞선 포스팅들에서 다룬 방법들로 적용이 가능합니다.

3. margin

margin의 기본 값은 0이며, 속성 값으로는 고정 값과 퍼센트(%), auto를 사용할 수 있는데요.

margin은 padding과 마찬가지로 상(top), 하(bottom), 좌(left), 우(right)를 각각 지정할 수 있습니다.

 

h1 {
    margin: 10px 20px 10px 20px; /* 순서대로 상/우/하/좌 */
}

 

h1 {
    margin-top:10px;
    margin-right:20px;
    margin-bottom:10px;
    margin-left:20px;
}

 

h1 {
    margin: 10px 20px;
}
h1 {
    margin: 10px;
}

 

위의 예시들에서 보이듯이 적용 방법은 padding과 동일하다고 보시면 됩니다.

다만, margin에는 padding은 존재하지 않는 auto라는 속성 값이 있는데요.

auto 속성 값은 기본적으로 웹 브라우저에 의해서 자동으로 계산되는 값으로, 대부분 0 또는 요소의 측면에서 사용 가능한 공간과 같은 값을 가지게 됩니다.

 

h1 {
    margin: auto;
}

 

해당 속성 값으로 가장 많이 사용하게 되는 경우는 요소를 수평 중앙으로 정렬할 때인데요.

좌/우의 margin이 모두 auto로 적용된 경우, 웹 브라우저는 요소의 가로 영역에서 자신의 너비를 제외한 나머지 여백 크기에 대하여 균등 분할하여 적용하게 됩니다.

이처럼 좌/우 여백이 균등 분할되기 때문에 요소가 수평 중앙으로 정렬되게 됩니다.

 

h1 {
    margin: 0 auto;
}

 

하지만, 상/하의 margin에 auto를 준다고 해서 수직 중앙 정렬이 되지 않으며, 다른 방법을 사용해야 하는 점 참고해 주세요.

또 하나 padding에는 존재하지 않지만 margin에만 있는 특성으로는 마진 병합(margin collapse)이 있는데요.

마진 병합은 두개 이상의 수직 방향의 마진이 하나로 합쳐지는 것을 뜻하며, 수평 방향으로는 마진 병합이 일어나지 않습니다.

마진 병합은 아래의 경우들에서만 발생하게 됩니다.

• 두 요소가 상하로 인접
• 부모 요소와 첫 번째 자식 요소 또는 마지막 자식 요소
• 내용이 없는 빈 요소

또한, padding은 음수(-) 값을 가질 수 없지만, margin은 음수(-) 값을 가질 수 있는 것이 차이점입니다.

 

여기까지 boxmodel에 포함되는 주요 속성들을 상세히 알아보았습니다.

해당 속성들을 잘 사용하면 다양한 UI를 구현해 낼 수 있으니, 많이 연습해 보시는 것을 권해드립니다.

오늘도 읽어주셔서 감사합니다.

좋은 하루 보내세요! :)