css box-model에 대해서

box의 종류

box에는 4가지 요소가 있음

컨텐츠
보더
패딩
마진

가장 안에 있는것이 컨텐츠

보더 기준으로 안쪽이 padding

보더 기준으로 바깥쪽이 margin

box 안에 inside-box가 있는 구조에서 예를 들어보자

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Box Model</title>
</head>
<body>
    <div class="box">
      <div class="inside-box"></div>
    </div>
</body>
</html>

<style>
    body,html{
      padding: 0;
      margin: 0;
      background-color: green;
      height: 100%;
    }
    .box{
      background-color: yellow;
      width: 50%;
      height: 50%;
    }
    .inside-box {
      background-color: blue;
      width: 50%;
      height: 50%;

    }

위와 같은 css를 적용한 결과는 이하와 같다

현재 부모 자식관계는 이러함

할아버지는 녹색(body,html) -> 아버지는 노란색(box) -> 아들은 파란색(inside-box)

아들 파란색을 밑으로 50px정도 이동시키려면 어떻게 해야할까

파란색을 이동시켜야 하므로 파란색의 속성(inside-box)을 수정하려는 고정관념이 있는데

이 경우에는 아버지 노란색의 안쪽 여백(padding)중 top에 값을 주면서 아들 파란색을 밑으로 밀어주는 방식을 쓴다.

    .box{
      background-color: yellow;
      width: 50%;
      height: 50%;
      padding-top: 50px; /* <<-- 추가 */
   
    }

자립적으로 아들 파란색의 속성을 수정해서 이동시키는 방법은 없을까 아들 파란색 속성의 바깥쪽(margin) top에 값을 주면 이동될 것 같기도하다. 해봤다.

    .inside-box {
      background-color: blue;
      width: 50%;
      height: 50%;
      margin-top: 50px; /*  <<-- 추가 */
    }

파란색이 밑으로 내려가긴 했는데 노란색 아버지도 같이 내려가 버렸다.

여기까지 결론

아들속성을 움직이게 하려면 아버지 속성을 수정하자 아들이 잘못하면(?) 아버지에게 주의를 주자

아들이 잘못했다고 아들을 벌하면(?) 아들이 삐뚤어져서 아버지 먹칠(?)을 한다. ..할때도 있는것 같다.

padding,margin값 설정방법

상하,좌우에 값을 줄때

padding 상하에 20을 주고 좌우는 10을 주고싶을때

padding: 20px 10px;

첫번째 인자는 상하를 의미하고 두번째 인자는 좌우를 의미

상우하좌 방향으로 각각 값을 지정할때

padding: 상,   우,   하,  좌;
padding: 20px, 10px, 5px, 2px;

상우하좌에 같은 값을 지정할때

padding: 20px;

margin도 마찬가지임

보더 경계의 사용법

아들 속성에 보더설정을 추가해봤다.

    .inside-box {
      background-color: blue;
      width: 50%;
      height: 50%;
      
      border-width: 5px;  /*  <<-- 추가 */
      border-color: red;  /*  <<-- 추가 */
      border-style:dashed;  /*  <<-- 추가 */
    }

보더도 이하와 같이 단축해서 사용하는 형태가 있음

    .inside-box {
      background-color: blue;
      width: 50%;
      height: 50%;
      
      border: 5px dashed red; /*  <<-- 추가 */
    }