김낭만

재밌거나 필요하다고 생각하는 걸 만듭니다.

css box-sizing 0

Intro

간단한 html 문서를 만들 일이 있어서 만들던 중, 검색창을 구현할 일이 있었다.
height를 같게 해주었음에도 input 요소와 button 요소의 높이가 다른 크기를 가지는 것을 볼 수 있었는데, 처음엔 여백 문제일까 싶었지만, margin이나 padding 등에도 문제가 없음을 파악했다.
CSS에는 같은 크기로 명시된 두 요소의 크기가 달랐던 것인데, 이는 바로 box-sizing 때문이었다.

CSS Box Model

html 요소의 크기에는 무엇이 관여하는가?
요소 그 자체의 크기(높이와 너비), Padding(안쪽 여백), Border(경계선), 그리고 Margin(바깥쪽 여백)이다.
이를 CSS Box Model이라 하는데, 사실 여기까지만 생각하면 저 값들이 전부 같은 요소들은 크기가 같으리라고 추측할 수 있다.
그러나, 실제로는 그렇지 않은데, 왜냐하면 요소에 따라 크기를 정하는 방식이 다를 수 있기 때문이다.

box-sizing

크기를 정하는 방식이라, 말이 조금 어렵게 느껴지니 실제 예시를 생각해 보자.

button {
    width: 100px;
    padding: 10px;
    border: 10px solid;
}

button.content {
    box-sizing: content-box;
}

button.border {
    box-sizing: border-box;
}

위와 같은 두 개의 버튼이 있다고 했을 때, 두 버튼의 가로 크기는 같을 것 같지만, 실제로는 box-sizing의 차이로 인해 다른 크기를 지니게 된다.
먼저, content 버튼은 요소 그 자체의 너비가 100px이며, 양 옆으로 padding과 border가 더해지므로 전체 너비는 140px가 될 것이다.
한편, border 버튼은 padding과 border가 모두 더해진 전체 너비가 100px이고, 요소 그 자체의 원래 너비는 60px로 쪼그라들 것이다.

즉, box-sizing: content-box인 요소는 padding과 border를 제외한 높이와 너비를 설정할 때 사용하고, box-sizing: border-box인 요소는 padding과 border를 더했을 때의 높이와 너비를 설정할 때 사용한다.

box-sizing의 기본값

참고로, MDN에 따르면 요소별 box-sizing의 기본값은 아래와 같다.

  • content-box: 일반적인 모든 요소들의 기본값.
  • border-box: <table>, <select>, <button> 및 radio, checkbox, reset, button, submit, color, search 타입의 <input> 요소의 기본값.

결론

html 요소의 크기 및 여백이 예상과 다른 경우, box-sizing을 확인하는 것이 해답이 될 수 있다.
box-sizing: content-box인 경우 요소의 크기는 순수하게 요소 자체의 크기만을 의미한다.
box-sizing: border-box인 경우 요소의 크기는 padding과 border를 포함한 값이다.

box-sizing : content-box | border-box ;

참조

2024

맨 위로 이동 ↑

2023

세그먼트 트리

개요 선형적인 자료구조에서는 값에 접근하는 데에 \(O(1)\)이면 충분하지만, 대신 부분합을 구하는 데에는 \(O(N)\)이 필요하다. 그렇다면 이 자료구조를 이진 트리로 구성하면 어떨까? 값에 접근하는 데에 걸리는 시간이 \(O(\lg N)\)으로 늘어나지만 대신 부분합을 구하...

벨만-포드 알고리즘

개요 다익스트라 알고리즘과 함께 Single Sourse Shortest Path(SSSP) 문제를 푸는 알고리즘이다. 즉, 한 노드에서 다른 모든 노드로 가는 최단 경로를 구하는 알고리즘이다. 다익스트라 알고리즘보다 느리지만, 음수 가중치 간선이 있어도 작동하며, 음수 가중치 사...

다익스트라 알고리즘

개요 다익스트라 알고리즘은 Single Sourse Shortest Path(SSSP) 문제를 푸는 알고리즘 중 하나이다. 즉, 한 노드에서 다른 모든 노드로 가는 최단 경로를 구하는 알고리즘이다. 단, 다익스트라 알고리즘은 음수 가중치 엣지를 허용하지 않는다. 이 경우에는 벨만-...

맨 위로 이동 ↑