CSS 요소 크기 변경 관련

CSS 속성 중 요소의 크기를 변경하는 속성들 있음

---

padding, border …

본래는 이런 속성들을 사용할 경우 변경되는 요소들의 크기를 직접 계산해서 해야 하지만 box-sizing 속성을 통해 자동계산으로 하는 방식을 자주 사용한다.

div {
  width: 200px;
  heigh: 200px;
  padding: 10px 20px;
  border: 1px solid lightgray;
  box-sizing: border-box;
}

추가적으로 본래 display: inline 속성은 본래 크기 관련 속성 width, height, padding, margin이 적용되지 않음

그래서 inline-block 속성을 사용

/* input tag는 기본이 inline-block 값을 가지나 예시로 작성 */
input {
  display: inline-block;
  width: 200px;
  height: 200px;
  margin: 10px;
}