코딩스쿨

CSS Margins

CSS Margins: 웹 페이지에서 마진 설정하는 방법

CSS에서 **마진(Margin)**은 HTML 요소의 경계선 밖에 위치한 공간을 정의하는 속성입니다. 마진은 요소와 요소 사이의 간격을 조절하여 페이지 레이아웃을 구성하는 데 매우 중요한 역할을 합니다. 이 자료에서는 CSS 마진 속성을 활용하여 웹 페이지에서 요소 간의 여백을 설정하는 방법을 다룹니다.

1. CSS 마진 속성 (Margin Properties)

마진 속성은 HTML 요소 주위에 여백을 설정하는 데 사용됩니다. 이 속성은 **네 방향(위, 오른쪽, 아래, 왼쪽)**의 마진을 개별적으로 설정할 수 있으며, 한 번에 모든 방향의 마진을 설정할 수도 있습니다.

주요 CSS 마진 속성은 다음과 같습니다:

margin: 네 방향(위, 오른쪽, 아래, 왼쪽)의 마진을 한 번에 설정하는 단축 속성.
margin-top: 요소의 위쪽 마진을 설정합니다.
margin-right: 요소의 오른쪽 마진을 설정합니다.
margin-bottom: 요소의 아래쪽 마진을 설정합니다.
margin-left: 요소의 왼쪽 마진을 설정합니다.

마진 값은 픽셀(px), 퍼센트(%), em, rem 등의 단위를 사용하여 설정할 수 있습니다.

2. `margin` 단축 속성

margin 속성은 위, 오른쪽, 아래, 왼쪽의 마진을 한 번에 설정할 수 있는 단축 속성입니다. 이 속성을 사용하면 코드가 간결해지며, 모든 방향의 마진을 빠르게 지정할 수 있습니다.

예시:

div {
    margin: 20px;
}

위 코드는 네 방향 모두 20px의 마진을 설정합니다.

여러 값을 지정하는 방법:

1개 값: 모든 방향에 같은 마진이 적용됩니다.
```
margin: 20px;
```
- 모든 방향에 20px 적용.
2개 값: 위아래, 좌우의 마진을 다르게 설정합니다.
```
margin: 10px 20px;
```
- 위아래 10px, 좌우 20px 적용.
3개 값: 위, 좌우, 아래 마진을 설정합니다.
```
margin: 10px 20px 30px;
```
- 위 10px, 좌우 20px, 아래 30px 적용.
4개 값: 위, 오른쪽, 아래, 왼쪽 마진을 각각 설정합니다.
```
margin: 10px 20px 30px 40px;
```
- 위 10px, 오른쪽 20px, 아래 30px, 왼쪽 40px 적용.

3. 각 방향별 마진 설정

마진을 각 방향별로 개별 설정할 수 있습니다. margin-top, margin-right, margin-bottom, margin-left 속성을 사용하여 특정 방향의 마진을 지정할 수 있습니다.

예시:

p {
    margin-top: 20px;
    margin-right: 15px;
    margin-bottom: 25px;
    margin-left: 10px;
}

위 코드는 각각 위 20px, 오른쪽 15px, 아래 25px, 왼쪽 10px의 마진을 설정합니다.

4. 자동 마진 (`auto`)

auto 값은 요소를 수평으로 중앙에 배치할 때 유용하게 사용됩니다. 특히, 요소의 너비를 고정하고 margin-left와 margin-right를 auto로 설정하면 중앙 정렬이 됩니다.

예시:

div {
    width: 600px;
    margin: 0 auto;
}

위 코드는 요소의 좌우 마진을 자동으로 설정하여, 부모 요소 내에서 수평으로 중앙 정렬합니다. 상하 마진은 0으로 설정되었습니다.

5. 음수 마진 (Negative Margins)

CSS에서는 음수 값을 사용하여 마진을 설정할 수도 있습니다. 음수 마진은 요소를 예상된 위치에서 앞으로 당기거나, 겹치게 할 때 사용됩니다.

예시:

h1 {
    margin-top: -20px;
}

위 코드는 <h1> 요소를 위쪽으로 20px 당겨서 배치합니다.

음수 마진은 주로 레이아웃을 세밀하게 조정할 때 사용되지만, 과도하게 사용하면 레이아웃이 복잡해질 수 있으므로 주의해서 사용해야 합니다.

6. 마진과 블록 요소 (Block Elements)

블록 요소는 기본적으로 상하 마진이 적용되며, 좌우 마진은 부모 요소의 전체 너비를 차지하게 됩니다. auto를 사용하여 수평 중앙 정렬을 하거나, 블록 요소 간의 간격을 설정할 때 마진을 사용할 수 있습니다.

예시:

article {
    width: 80%;
    margin: 0 auto;  /* 수평 중앙 정렬 */
}

이 코드는 article 요소를 부모 요소 내에서 중앙 정렬하고, 너비는 80%로 설정합니다.

7. 마진 겹침 현상 (Margin Collapsing)

두 개의 인접한 블록 요소 사이에 있는 상하 마진은 겹쳐질 수 있습니다. 이 현상을 **마진 겹침(Margin Collapsing)**이라고 하며, 이는 위아래로 마주한 마진이 합쳐지는 것이 아니라, 더 큰 값의 마진만 적용된다는 것을 의미합니다.

마진 겹침 예시:

<style>
  div {
      margin-bottom: 50px;
  }

  p {
      margin-top: 30px;
  }
</style>

<div>이것은 블록 요소 div입니다.</div>
<p>이것은 블록 요소 p입니다.</p>

위 코드에서 <div>의 하단 마진은 50px, <p>의 상단 마진은 30px으로 설정되어 있지만, 두 요소의 마진은 겹쳐져서 더 큰 값인 50px만 적용됩니다. 이 현상은 상하 마진에서만 발생하며, 좌우 마진에서는 겹침이 발생하지 않습니다.

8. 마진 계산 시 주의 사항

8.1 마진의 상속

마진은 상속되지 않습니다. 즉, 부모 요소에 설정한 마진이 자식 요소에 자동으로 적용되지는 않습니다. 각 요소에 대해 별도로 마진을 지정해야 합니다.

8.2 마진과 패딩 차이

마진과 패딩은 요소 주위에 공간을 만들어주는 속성이지만, 마진은 요소의 외부에 공간을 추가하고, 패딩은 요소의 내부에 공간을 추가합니다. 패딩은 배경색과 테두리에 영향을 받지만, 마진은 요소 간 간격을 제어하는 데만 영향을 미칩니다.

9. 마진과 반응형 웹 디자인

CSS 마진은 반응형 웹 디자인을 구현할 때 중요한 역할을 합니다. 다양한 화면 크기에 적응하는 마진을 설정하면, 페이지 레이아웃이 더 유연해집니다. 마진을 **퍼센트(%)**로 설정하면 화면 크기에 따라 자동으로 마진이 조정되며, 미디어 쿼리를 사용하여 다양한 장치에서 마진 값을 변경할 수 있습니다.

반응형 마진 예시:

div {
    margin: 5%;
}

@media (max-width: 600px) {
    div {
        margin: 2%;
    }
}

위 코드는 화면 너비가 600px 이하일 때, 마진을 더 좁게 설정하여 작은 화면에서도 적절한 간격을 유지하도록 만듭니다.

10. 자주 사용되는 마진 예제

네 방향 모두 동일한 마진 설정:

div {
    margin: 20px;
}

수평 중앙 정렬:

section {
    width: 800px;
    margin: 0 auto;
}

위쪽과 아래쪽 마진만 다르게 설정:

p {
    margin: 10px 0;
}

음수 마진 사용:

h2 {
    margin-top: -10px;
}

각 방향별로 다른 마진 설정:

div {
    margin: 10px 15px 20px 25px;
    /* 위 10px, 오른쪽 15px, 아래 20px, 왼쪽 25px */
}

코딩 스쿨 CSS