box model 의 inline 상태에서의 높이와 너비 조정

box model에서 inline 요소에 대해서는 width 와 height 가 적용되지 않나?

 

Bard

네, 맞습니다. CSS box model에서 inline 요소에 대해서는 width와 height가 적용되지 않습니다. inline 요소는 한 줄에 표시되기 때문에 너비와 높이가 고정되지 않습니다. inline 요소의 너비와 높이는 콘텐츠의 크기에 따라 결정됩니다.

예를 들어, 다음 HTML 코드가 있습니다.

<div>
  <span>This is an inline element.</span>
</div>

이 코드에 다음 CSS 코드를 적용하면 `span` 태그가 빨간색으로 바뀝니다.

span {
  color: red;

}

그러나 `span` 태그의 너비와 높이는 설정되지 않습니다. `span` 태그의 너비와 높이는 콘텐츠의 크기에 따라 결정됩니다. 따라서 `span` 태그에 텍스트가 많으면 `span` 태그의 너비와 높이가 커집니다.

inline 요소의 너비와 높이를 설정하려면 `display` 속성을 `inline-block`으로 설정해야 합니다. `inline-block` 속성을 설정하면 inline 요소가 블록 요소처럼 너비와 높이를 가질 수 있습니다.

예를 들어, 다음 HTML 코드가 있습니다.

<div>
  <span style="display: inline-block;">This is an inline-block element.</span>
</div>

이 코드에 다음 CSS 코드를 적용하면 `span` 태그의 너비와 높이가 100px로 설정됩니다.

span {
  display: inline-block;
  width: 100px;
  height: 100px;
  color: red;
}

이 CSS 코드는 `span` 태그의 너비와 높이를 100px로 설정합니다. 따라서 `span` 태그의 너비와 높이는 100px로 고정됩니다.

---

처음엔 block 요소이던 것을 display: flex;를 통해 가로로 배열한 경우에도  width 와 height 가 적용되지 않나?

 

Bard
네, 맞습니다. 처음엔 block 요소이던 것을 `display: flex;`를 통해 가로로 배열한 경우에도 `width`와 `height`가 적용되지 않습니다. `display: flex;`를 설정하면 요소가 `flex`로 변환되고, `flex` 요소는 `width`와 `height` 속성을 무시합니다. `flex` 요소의 너비와 높이는 `flex-basis` 속성으로 설정합니다. `flex-basis` 속성의 기본값은 `auto`로, 요소의 콘텐츠 크기에 따라 너비와 높이가 결정됩니다.

예를 들어, 다음 HTML 코드가 있습니다.

<div style="display: flex;">
  <div>This is a flex item.</div>
  <div>This is another flex item.</div>
</div>

이 코드에 다음 CSS 코드를 적용하면 `flex` 요소의 너비와 높이가 `auto`로 설정됩니다. 따라서 `flex` 요소의 너비와 높이는 콘텐츠의 크기에 따라 결정됩니다.

div {
  display: flex;
}

이 CSS 코드는 `div` 요소를 `flex`로 변환합니다. 따라서 `div` 요소의 너비와 높이는 `auto`로 설정됩니다.

`flex` 요소의 너비와 높이를 특정 크기로 설정하려면 `flex-basis` 속성을 사용합니다. 예를 들어, 다음 CSS 코드는 `flex` 요소의 너비와 높이를 100px로 설정합니다.

div {
  display: flex;
  flex-basis: 100px;
}

이 CSS 코드는 `div` 요소의 너비와 높이를 100px로 설정합니다. 따라서 `div` 요소의 너비와 높이는 100px로 고정됩니다.

---

그럼 인라인 요소 아이템1, 아이템2, 아이템3 이 있는데, 이 각각에 대해 높이와 너비를 부여하려면? 먼저 display:inline-bock;으로 선언한 다음 진행해야 하나?

 

네, 맞습니다. 인라인 요소 아이템1, 아이템2, 아이템3 이 있는데, 이 각각에 대해 높이와 너비를 부여하려면 먼저 `display: inline-block;`으로 선언한 다음 진행해야 합니다.

예를 들어, 다음 HTML 코드가 있습니다.

<div>
  <span>아이템1</span>
  <span>아이템2</span>
  <span>아이템3</span>
</div>


이 코드에 다음 CSS 코드를 적용하면 `span` 요소의 너비와 높이가 `auto`로 설정됩니다. 따라서 `span` 요소의 너비와 높이는 콘텐츠의 크기에 따라 결정됩니다.

span {
  display: inline-block;
}

이 CSS 코드는 `span` 요소를 `inline-block`로 변환합니다. 따라서 `span` 요소의 너비와 높이는 `auto`로 설정됩니다.

`span` 요소의 너비와 높이를 특정 크기로 설정하려면 `width`와 `height` 속성을 사용합니다. 예를 들어, 다음 CSS 코드는 `span` 요소의 너비와 높이를 100px로 설정합니다.

span {
  display: inline-block;
  width: 100px;
  height: 100px;
}

이 CSS 코드는 `span` 요소의 너비와 높이를 100px로 설정합니다. 따라서 `span` 요소의 너비와 높이는 100px로 고정됩니다.

---

아이템 1, 2, 3의 너비에 대해 부모 컨테이너의 가로 사이즈에 대한 백분율로 각각 다르게 적용하려면?

 

1. 부모 컨테이너의 가로 사이즈가 설정되어야 함. 동시에 display:inline-block;이 선언되어야 함.

2. 그 다음 각각의 하위 아이템(1,2,3)을 선택하여, width: 숫자 %; 식으로 작성하면 됨.

 

※맞춤제작 견적서 테스트 제작 중 계속 display:inline-block; 이 아닌 display:flex;라고 선언해서 문제가 해결되지 않았던 듯싶다.