2.2 마진과 패딩

약 3분

본문 듣기

읽기 설정

글자 크기

줄 간격

글꼴

2.2 마진과 패딩

이제 CSS에서의 박스 모델에서 가장 핵심적인 개념 중 하나인 마진(margin)과 패딩(padding)에 대해 알아보겠습니다. 이 두 속성은 요소의 배치를 조정하는 데 매우 중요합니다.

마진(margin)

마진은 요소와 요소 사이의 간격을 설정하는 속성입니다. 즉, 마진을 통해 다른 요소와의 거리를 조정할 수 있습니다. 마진의 사용은 웹 페이지의 구성 요소가 어떻게 배열될지를 결정하는 중요한 역할을 합니다.

패딩(padding)

패딩은 요소의 내부 여백을 설정하는 속성입니다. 즉, 패딩은 요소의 내용과 경계(border) 사이의 공간을 의미합니다. 패딩을 통해 내용을 더 잘 보이게 하거나, 요소의 경계를 둥글게 만들 수 있습니다.

예제

아래의 코드는 마진과 패딩을 사용한 간단한 예제입니다. HTML 요소는 두 개의 상자를 나타내며, 각 상자에 마진과 패딩을 각각 적용합니다.

코드 html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>마진과 패딩 예제</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="box box1">상자 1</div>
    <div class="box box2">상자 2</div>
</body>
</html>

코드 css

.box {
    width: 200px; /* 상자의 너비 */
    height: 100px; /* 상자의 높이 */
    background-color: #3498db; /* 상자의 배경색 */
    color: #ffffff; /* 텍스트 색 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.box1 {
    margin: 20px; /* 상자 1의 마진 */
}

.box2 {
    padding: 20px; /* 상자 2의 패딩 */
    background-color: #e74c3c; /* 상자 2의 배경색 변경 */
}

2.2 마진과 패딩

2.2 마진과 패딩

마진(margin)

패딩(padding)

예제

댓글 0