마진

Coddy HTML 여정의 Styling with CSS 섹션에 포함된 레슨 — 76개 중 35번째.

CSS에서 margin은 정의된 테두리 바깥쪽에 있는 요소 주변의 공간입니다. 이는 박스 모델(box model)의 또 다른 필수적인 부분입니다. Margin은 요소들 사이에 공간을 만들어 서로를 분리하는 데 사용됩니다.

요소의 네 면(위, 오른쪽, 아래, 왼쪽)의 여백(margin)을 개별적으로 또는 단축 속성(shorthand notation)을 사용하여 제어할 수 있습니다.

margin 속성을 사용하기 위한 기본 구문은 다음과 같습니다:

selector {
    margin-top: value;
    margin-right: value;
    margin-bottom: value;
    margin-left: value;
}

margin-top: 요소의 상단 여백입니다.
margin-right: 요소의 우측 여백입니다.
margin-bottom: 요소의 하단 여백입니다.

margin-left: 요소의 왼쪽 여백입니다.
value: 원하는 여백 값으로, 픽셀(px), em(em), 백분율(%) 또는 기타 유효한 CSS 단위로 지정할 수 있습니다.

또한 다음과 같이 단축 속성(shorthand notation)을 사용하여 네 면의 여백을 한 번에 설정할 수 있습니다:

p {
    margin: 20px; /* 네 면 모두에 동일한 여백을 적용합니다 */
}

div {
    margin: 10px 25px; /* 위아래 여백을 10px로, 좌우 여백을 25px로 설정합니다 */
}

.button {
    margin: 15px 30px 10px 5px;/* 각 면의 여백을 개별적으로 설정합니다 */
}

이 예제에서 모든 <p> 요소는 모든 면에 20px의 여백(margin)을 가지며, 모든 <div> 요소는 상하 10px 및 좌우 25px의 여백을 가집니다. 그리고 button 클래스를 가진 모든 요소는 위쪽 15px, 오른쪽 30px, 아래쪽 10px, 왼쪽 5px의 여백을 가집니다.

챌린지

쉬움

제목(<h1>)과 구역(<div>)이 포함된 HTML 문서가 주어집니다. 여러분의 작업은 margin 속성을 사용하여 이 요소들 주변에 여백을 추가하는 것입니다. 아래 단계를 따르세요:

<h1> 요소를 대상으로 하는 CSS 규칙을 작성하세요. 모든 방향의 margin을 20px로 설정하세요.
<div> 요소를 대상으로 하는 CSS 규칙을 작성하세요. 상하 margin을 10px로, 좌우 margin을 30px로 설정하세요.

치트 시트

margin 속성은 테두리 외부의 요소 주위에 공간을 만듭니다. 네 면의 여백을 개별적으로 제어하거나 단축 표기법을 사용할 수 있습니다.

개별 여백 속성:

selector {
    margin-top: value;
    margin-right: value;
    margin-bottom: value;
    margin-left: value;
}

단축 표기법:

/* 모든 면에 동일한 여백 */
margin: 20px;

/* 위/아래: 10px, 왼쪽/오른쪽: 25px */
margin: 10px 25px;

/* 위: 15px, 오른쪽: 30px, 아래: 10px, 왼쪽: 5px */
margin: 15px 30px 10px 5px;

직접 해보기

<html>
<head>
    <title>Margins</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1 style="border:2px solid black;">Mastering CSS Margins</h1>
    <div style="border:2px solid black;">Margins create space around elements.</div>
</body>
</html>