박스 모델

박스 모델이란

• 실제로 CSS 계산 및 처리는 박스모델로 이해해서 처리할 수 있음 즉, 일종의 박스로 되어 있다고 볼 수 있음, 그래서 이를 토대로 콘텐츠를 담고 배치하고 처리한다고 봄
• 박스 모델은 content로 콘텐츠가 표시되는 영역과 padding 콘텐츠와 테두리(border)사이의 여백
• border padding과 margin 사이의 테두리, margin의 경우 가장 바깥 쪽 레이어로 content와 padding, 테두리를 둘러싸면서 해당 박스와 다른 요소 사이의 공백 역할을 함
• content의 경우 width & height로 크기를 설정하고 결국 핵심적인 내용을 담고 있는 것임
• 이 영역들이 어우려지기 떄문에 이를 토대로 박스 영역을 이해하고 크기 및 조절하기가 좋음
  

크기 width, height

• width는 요소의 너비를, height는 높이를 지정하는 값임
• 기본값이 auto로 들어가 있음(직접 값을 지정하지 않는다면)
• 블럭 요소는 직접 width, height 속성을 통해서 원하는 가로 세로 길이를 정할 수 있음
• 하지만 인라인 요소는 width, height가 가지고 있는 콘텐츠에 따라 정해져 있기 떄문에 직접 값을 정해도 그 값대로 되지 않음
• 참고자료

크기 max-width, min-width, max-height, min-height

• 사용법은 width, height 둘 다 동일함
• min의 경우 해당 크기만큼 더이상 줄어들거나 늘어나지 않게함
• 이 떄 만약 아럐 예시처럼 부모-자식 관계에 있는 상황에서 min-width를 부모 요소보다 크게 하면 그 큰 값대로 부모 요소를 넘어선 크기가 됨
• 예시

#parent {
    width: 50px;
    height: 300px;

    background-color: lightcoral;
}

#child {
    width: 50%;
    min-width: 100px;
    height: 100px;

    background-color: lightgreen;
}

• max의 경우도 최대로 커지는 한계를 두면 마찬가지로 %를 써도 max의 값까지만 커지므로 부모 요소만큼 더 커지진 않음
• 주로 반응형 사이트에서 max, min을 많이씀
• 참고자료
• 참고자료
• 참고자료
• 참고자료

여백 margin

• 박스 모델에서 가장 바깥쪽에 위치하고 여백을 주는 것
• margin은 단축 속성으로 margin top, right, bottom, left 순으로 margin을 주고 쓸 수 있음
• 초기값이 0이고 자식 요소에 상속되지 않음
• 단일값을 적게 되면 네 면 모두의 동일한 margin 값이 적용됨, 2가지 값을 입력하게 되면 세로-가로 방향으로 값이 적용됨
• 4가지 값을 다 적게 되면 위, 오른쪽, 아래, 왼쪽 순으로 margin 값이 적용됨
• 마지막을 생략하고 3가지를 쓸 수 있는데 경우 위, 좌우, 아래 순으로 값이 적용됨
• 퍼센티지를 쓸 때는 조심해야함, 부모의 width의 %를 적용함 즉, 부모의 width 값의 %로 margin 값이 적용됨(개수를 다르게 적어도 margin 값은 무조건)
• 참고자료

여백 margin collapsing

• 마진 상쇄, 겹침, 중복 등 여러 블록 요소들의 위/아래 margin이 경우에 따라(겹칠 경우) 가장 큰 크기를 가진 margin으로 결합(상쇄)되는 현상
• 먼저 인접 형제 즉 두 형제 요소의 위/아래 여백이 만나 상쇄됨
• 아래 예시대로 만든다면 첫번째 div 태그의 아래 margin과 두번째 div 태그의 위 margin이 합쳐져서 보이게 됨, 이게 바로 margin collapsing 현상임
• 예시

    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>

body {
    margin: 0;
}

.box {
    width: 50px;
    height: 50px;
    background-color: tomato;

    margin: 20px;
}

• 그런데 2번째 예시대로 만든다면 여기서 큰 margin 값인 margin-bottom 값으로 겹쳐지면서 그려짐
• 예시

    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>

body {
    margin: 0;
}

.box {
    width: 50px;
    height: 50px;
    background-color: tomato;

    margin-top: 10px;
    margin-bottom: 20px;
}

• 이건 버그도 아니고 정상적으로 의도된 동작임, 이는 위아래 요소만 합쳐짐 즉 가로 요소 왼쪽 & 오른쪽은 적용되지 않음
• 그리고 부모 블록에 border, padding, inline content가 없어서 부모와 자식의 margin-top이 만나는 경우,
• 부모 블록에 border, padding, inline content가 없고, 부모-자식을 분리할 height 값이 지정되지 않아 부모와 자식의 margin-bottom이 만나는 경우에 margin collapsing이 일어남
• 즉 중간에 끊어줄 수 있는 border, padding이 하나라도 있다면 상쇄가 일어나지 않지만 그게 없는 경우 일어남, 그대로 부모-자식 요소가 만나기 때문에
• 아래 예시와 같이 만든 경우 child의 margin-top 값으로 본다면 parent 요소 밑으로 들어갈 것 같지만 위에서 설명한 예시대로 겹쳐지므로 요소의 변화 없이 margin이 40px로 합쳐져서 적용되는 것임
• 단, 끊어줄 수 있는 요소가 1px라도 있다면 상쇄되지 않음
• margin-bottom도 동일하게 적용됨
• 예시

    <div id="parent">
      <div id="child"></div>
    </div>

body {
    margin: 0;
}

#parent {
    width: 100px;
    height: 100px;

    margin-top: 30px;

    background-color: cadetblue;
}

#child {
    width: 30px;
    height: 30px;

    margin-top: 40px;

    background-color: indianred;
}

• 마지막으론 빈 블록 즉, border, padding, content가 없고, height 또한 존재하지 않으면, 해당 블럭의 margin-top과 margin-bottom이 상쇄됨
• 만약 margin이 정상적으로 적용되지 않을 때 원인이 margin collapsing 때문일 확률이 높음

여백 padding

• border 기준으로 안쪽 여백을 padding이라고 함, 마찬가지로 하나만 쓸 수 있는 단축 속성임
• margin과 유사하게 적용하고 쓸 수 있음, 네 면 모두 적용, 2가지, 3가지, 4가지 사용법이 똑같음
• padding은 margin과 다르게 collapsing이 일어나지 않고 정직하게 적용됨
• 그리고 퍼센티지 사용도 유의해야함 왜냐면 부모 컨테이너의 width 값을 기준으로 퍼센티지의 값이 적용되서 padding이 됨(세로에 적용되도 무조건 width 기준이 됨)
• 예시

    <div id="parent">
      <div id="child">
        <div id="grand-child"></div>
      </div>
    </div>

body {
    margin: 0;
}

#parent {
    width: 300px;
    height: 300px;

    background-color: skyblue;
}

#child {
    width: 100px;
    height: 100px;

    padding: 30px;

    background-color: orange;
}

#grand-child {
    width: 50px;
    height: 50px;

    background-color: red;
}

• 참고자료

테두리 border-style, border-width, border-color

• 3가지의 속성으로 테두리를 만들 수 있음
• border-style의 경우 키워드를 통해서 그 border의 스타일을 적용할 수 있음, 이 때 margin, padding과 같이 방향에 따라 여러 스타일을 동시에 적용할 수 있음
• border-width는 테두리의 두께를 나타내는 값임, 이 떄 키워드를 통해서도 할 수 있는데 브라우저별로 정확한 px이 계산이 안될 수도 있음, 그래서 직접 length를 적는걸 권장함
• border-color의 경우 모든 방향에 대해서 다른 색깔로 적용할 수도 있음
• 주의사항은 border-style을 none으로 하면 아무리 두께와 색깔을 줘도 보이지 않음
• 예시

.box {
    width: 300px;
    height: 300px;

    border-style: dotted solid;
    border-width: 10px;
    border-color: red blue;

    background-color: skyblue;
}

• 참고자료
• 참고자료
• 참고자료

테두리 border(shorthand)

• border는 대부분 단축속성을 활용해서 한꺼번에 작성하는 경우가 많음
• 단, 스타일을 넣지 않으면 눈에 보이지 않음 필수값은 아니어도 일단 확실하게 써줘야 border가 보임
• outline도 있는데, border와는 다름, 요소를 강조하기 위해 보이는 것이고 것임, 레이아웃에 들어가진 않음(박스모델에 해당하지 않음), border는 박스모델에 해당함
• 예시

.box {
    width: 300px;
    height: 300px;

    border: 5px solid red;

    background-color: skyblue;
}

• 참고자료

테두리 border-radius

• border 경계의 꼭짓점을 둥글게 만들 수 있음(원리는 모서리의 원을 그리고 그 원의 반지름을 기준으로 깎는다 생각하면 됨)
• length, 퍼센티지 사용이 가능함, 퍼센티지의 경우 height와 width 기준으로 계산을 하기 때문에 타원형으로도 될 수 있음(퍼센티지 기준이 width, height 값을 바탕으로 하므로)
• border-radius도 margin, padding처럼 값을 여러개 적어서 각각 적용 및 처리하는 것을 다르게 줄 수도, 마주보는 값끼리만 할 수도 있음
• 꼭 border가 있을 필요는 없음, 단순히 형태를 잡기 위해서만으로도 충분히 활용 가능함
• 예시

.box {
    width: 300px;
    height: 300px;

    border-radius: 50px;

    background-color: skyblue;
}

• 참고자료

box-sizing

• 요소의 너비와 높이를 계산하는 방법을 지정함

• 기본값은 content-box로 되어 있고 border-box로 바꿔서 처리할 수 있음

• content-box의 경우 말 그대로 content 기준으로 크기를 처리한다는 것임.

• 예를 들어 content width가 300px이 때 border가 추가된다면 보이는 크기는 border를 추가해서 볼 수 있음 하지만 content width는 딱 300px에 맞음.

• 이는 padding을 추가한 경우도 마찬가지임, 전체 크기는 커지게 됨 즉, 실제 크기는 300px이 아닌 padding과 border가 추가되서 보여진다는 것(content-box는 그럼)

• 이게 사람이 인지할 땐 그 크기를 300px로 직관적으로 받아들일 수 있음

• 이럴 때 border-box를 쓸 수 있음

• 이렇게 한다면 width, height의 의미가 달라짐, 총 가로길이, 세로길이로 진짜 요소 즉, content말고 padding, border까지의 전체 크기를 의미함

• margin은 외부영역이기 때문에 포함하지 않음

• border-box가 아닌 경우
  

• 예시

.box {
    width: 300px;
    height: 300px;

    padding: 20px;
    border: 30px solid blue;

    box-sizing: border-box;

    background-color: skyblue;
}

• 이 때 아래와 같이 와일드카드(*) 표시로 border-box 처리를 하면 모든 요소들이 크기를 border-box 기준으로 함

* {
  box-sizing: border-box;
}

• 참고자료