가변 margin, 가변 padding

가변 margin, 가변 padding

(margin과 padding 정리 → 박스 모델(Box Model))

 

1. 가변 margin

 - 마진의 간격을 가변으로 설정이 가능함

 - 가변 마진은 가변 그리드 공식과 같음

    → 가변 마진값 =(가변 마진을 적용할 마진값 ÷ 적용할 박스를 감싸고 있는 박스의 가로 너비) x 100

 - 예시) 300px 두개의 박스 사이에 가변 마진을 설정

<div id="wrap">
    <div></div><div></div>
</div>

#wrap {
    width: 90%;             /* 960px */
    height: 500px;
    margin: 0 auto;
    border: 4px solid black;
}

#wrap div {
    display: inline-block;
    width: 31.25%;          /* 300px ÷ 960px */
    height: 100%;
}

#wrap div:first-child {
    margin-right: 37.5%;    /* 360px ÷ 960px */
    background: lightcoral;
}

#wrap div:last-child {
    background: lightblue;
}

 

    ※ 다음과 같이 가변적인 크기로 제작된 박스에 마진이 고정값으로 설정 되어 있으면, 애매한 위치에 배치가 되어버림

        → 이렇게 되지 않기 위해 margin 값을 가변적인 크기로 설정할 것

#wrap div {
    width: 31.25%;          /* 300px ÷ 960px */
}

#wrap div:first-child {
    margin-right: 360px;    /* 360px ÷ 960px */
}

 

2. 가변 padding

 - 패딩의 간격을 가변으로 설정이 가능함

 - 가변 패딩은 가변 그리드 공식과 같음

    → 가변 패딩값 = (가변 패딩을 적용할 패딩값 ÷ 적용할 박스를 감싸고 있는 박스의 가로 너비) x 100

 - 예시) 40px 크기의 패딩 값을 가변 크기로 설정

<div id="wrap">
    <p>길을 할지니, 남는 대중을 그것은 밥을 있는가? 있으며, 구하기 위하여...</p>
</div>

#wrap {
    width: 90%;                 /* 960px */
    height: 500px;
    margin: 0 auto;
    border: 4px solid black;
    background: lightcyan;
}

#wrap p {
    padding: 40px 4.166667%;    /* 40px ÷ 960px */
}

 

 - 만약 박스의 최대 크기를 제한하되, 패딩의 값을 주고 싶을 경우, 다음과 같이 설정함

    - (박스의 최대 크기 - 패딩값x2)를 구한 뒤, 가변 크기 %값 공식인 '가변 크기로 만들 박스의 가로 너비'에 적용

        ※  가변 크기의 %값 = (가변 크기로 만들 박스의 가로 너비 ÷ 그 박스를 감싸고 있는 박스의 가로 너비) x 100

 - 예시) 960px 박스안에 박스가 있는데, 그 박스의 너비는 600px를 넘지 않으면서 패딩값을 50px로 적용

#wrap {
    width: 90%;                 /* 960px */
    height: 700px;
    margin: 0 auto;
    border: 4px solid black;
}

#wrap p {
    /* 600px를 유지해야 하는 박스에 가변 패딩값을 적용하기 위해 (왼+오)의 패딩값만큼을 빼줌 */
    width: 52.083333%;          /* (600-100)px ÷ 960px */
    padding: 50px 5.208333%;    /* 50px ÷ 960px */
    margin: 0 auto;
    background: lightcyan;
}

 

3. calc 함수

 - 박스는 가변적이되, 고정 크기의 마진과 패딩을 적용할 때, 사용

 - calc 함수를 사용해서 원하는 패딩값(왼+오 패딩값)을 뺀 값을 너비값으로 설정함

 - 예시) 박스 안에 자식 박스가 한 개 있고, 그 박스에 50px의 고정 마진을 적용

#wrap {
    width: 90%;                 /* 960px */
    height: 500px;
    margin: 0 auto;
    border: 4px solid black;
}

#wrap div {
    /* 총 너비값에서 (왼+오)의 패딩값인 100px를 뺸 값을 너비값으로 설정 */
    width: calc(100% - 100px);
    height: 200px;
    margin: 50px;
    background-color: lightblue;
}

 

4. 실습

<div id="wrap">
    <div></div><div></div>
</div>

#wrap {
    width: 90%;                 /* 960px */
    height: 500px;
    margin: 0 auto;
    border: 4px solid black;
}

#wrap div {
    width: 31.25%;               /* 300px ÷ 960px */
    display: inline-block;
}

#wrap div:first-child {
    padding: 50px 5.208333%;    /* 50px ÷ 960px */
    background-color: lightblue;
}

#wrap div:last-child {
    padding: 130px 13.541667%;  /* 50px ÷ 960px */
    background-color: lightcoral;
}