엘리먼트의 너비를 제어하기 위해 CSS의 width 속성을 사용한다. 평소에 자주 사용하는 속성이지만 종종 생각한대로 작동하지 않을 때가 있다. width는 ➊절대값 ➋상대값 ➌키워드 크게 3가지 설정으로 구분되며, 각 설정에 따라 너비가 다르게 결정된다.

<section>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</section>

절대값

section {
	width: 200px;
	height: 200px;
	border: 1px solid gray;
} /* 부모 */

p {
	width: 300px;
	background: Khaki;
	margin: 10px;
} /* 자식 */

<aside> 💡 가용 너비 : 부모 엘리먼트의 콘텐츠 박스 크기

</aside>

• px 같은 절대 단위를 사용해서 width를 지정하면 해당 엘리먼트는 항상 고정된 너비를 갖는다.
• 가용 너비 / 콘텐츠 크기와 상관없이 엘리먼트의 너비를 특정값으로 고정시킬 수 있다.
• 고정된 너비를 가지므로 부모 엘리먼트를 넘칠 수 있다(부모 엘리먼트보다 크다면).
• 반응형이라면 고정값(절대값)을 사용하지 않는게 좋다

상대값

section {
	width: 200px;
	height: 200px;
	border: 1px solid gray;
} /* 부모 */

p {
	width: 100%;
	background: Khaki;
	margin: 10px;
} /* 자식 */

p 요소에 margin: 10px가 지정됐으므로 부모 요소를 넘치게 된다

• % 퍼센트 같은 상대 단위를 사용하면 부모 요소의 크기에 비례한 너비를 갖는다
• p 요소의 너비는 아래처럼 계산된 후 부모 요소를 넘치게 된다.
  • width: 100% : 부모 요소(section)의 가용 너비 200px
  • margin: 10px : 좌 / 우 합해서 20px
  • p 요소의 너비 200px(width) + 20px(margin) > 부모 요소의 너비 200px

auto