CSS - max-inline-size 속성: 초보자 가이드

안녕하세요, 미래의 CSS 마법사 여러분! 오늘 우리는 흥미로운 max-inline-size 속성의 세상으로 뛰어들어 볼 거예요. 초보자라면 걱정 마세요; 이 CSS 모험을 함께 안내해 드릴게요. 커피 한 잔 (또는 당신이 좋아하는 차 한 잔)을 손에 쥐고, 시작해 보세요!

CSS - Max Inline Size

max-inline-size는 무엇인가요?

자, 구체적인 내용으로 들어가기 전에 max-inline-size에 대해 이해해 보겠습니다. 매우 긴 단어를 작은 상자에 맞추려고 할 때를 상상해 보세요. 이게 바로 CSS에서 max-inline-size가 도와주는 역할입니다. 이 속성은 요소의 가로 방향(inline 방향)의 최대 크기를 설정합니다.

"하지만 기다리세요,"라고 물으실 수도 있습니다. "inline 방향이 뭐죠?" 훌륭한 질문입니다! 영어와 많은 다른 언어에서는 inline 방향이 수평 방향, 즉 왼쪽에서 오른쪽으로입니다. 하지만 아랍어나 히브리어와 같은 언어에서는 오른쪽에서 왼쪽으로입니다. 그리고 수직 작성 모드에서는 상에서 아래로도 될 수 있습니다!

가능한 값

이제 max-inline-size에 사용할 수 있는 다양한 값을 살펴보겠습니다. 다음 표를 참고하세요:

값	설명
`<length>`	`300px`나 `20em`과 같은 고정 길이
`<percentage>`	포함 블록의 크기의 백분율
`none`	크기에 제한이 없음 (기본값)
`max-content`	내재된 선호 크기
`min-content`	내재된 최소 크기
`fit-content`	사용 가능한 공간을 사용하지만 min-content보다 적지 않고 max-content보다 많지 않음

이 중 몇 가지는 현재 혼란스러울 수 있지만, 예제를 통해 하나씩 탐구해 보겠습니다!

적용 대상

max-inline-size 속성은 다음 요소를 제외한 모든 요소에 적용됩니다:

비치환된 인라인 요소
표 행
행 그룹

문법

max-inline-size의 기본 문법은 매우 간단합니다:

max-inline-size: value;

이렇게 쉬운 거죠? 이제 몇 가지 특정 예제로 들어가 보겠습니다!

CSS max-inline-size - 값

먼저 고정 길이를 사용하는 간단한 예제를 시작해 보겠습니다:

.box {
max-inline-size: 300px;
background-color: lightblue;
padding: 10px;
}

<div class="box">
This is a box with max-inline-size set to 300px. The content will wrap if it exceeds this width.
</div>

이 예제에서 우리는 max-inline-size를 300 픽셀로 설정했습니다. 이제 .box에 들어있는 내용이 어떻게 되든, 가로 방향(이 경우 수평 방향)에서 300px를 넘지 않습니다. 내용이 너무 길다면 다음 줄로 넘어갑니다.

CSS max-inline-size - 값

이제 백분율 값을 사용해 보겠습니다:

.container {
width: 500px;
border: 2px solid black;
}

.box {
max-inline-size: 50%;
background-color: lightgreen;
padding: 10px;
}

<div class="container">
<div class="box">
This box has max-inline-size set to 50% of its container's width.
</div>
</div>

이 경우 .box는 그 컨테이너의 너비의 50%를 최대 크기로 가집니다. 따라서 컨테이너가 500px 너비라면, 상자는 250px 너비를 넘지 않습니다.

CSS max-inline-size - 값

max-content 값은 매우 흥미롭습니다. 이 값은 내재된 선호 크기로 최대 inline 크기를 설정합니다. 예제를 통해 보겠습니다:

.box {
max-inline-size: max-content;
background-color: lightyellow;
padding: 10px;
}

<div class="box">
This box will expand to fit its content, but won't wrap unless forced to.
</div>

max-content를 사용하면 상자가 모든 내용을 한 줄에 맞춰 확장하지만, 강제로 넘어가지 않는 한 줄로 맞춰지지 않습니다.

CSS max-inline-size - 수직 텍스트와 함께

이제 약간 다른 것을 보겠습니다! 수직 텍스트와 max-inline-size가 어떻게 작동하는지 살펴보겠습니다:

.vertical-box {
writing-mode: vertical-rl;
max-inline-size: 100px;
background-color: lightpink;
padding: 10px;
}

<div class="vertical-box">
This text is vertical, and max-inline-size limits its height!
</div>

이 예제에서 우리는 writing-mode: vertical-rl을 사용하여 텍스트를 수직으로 오른쪽에서 왼쪽으로 설정했습니다. 이제 max-inline-size는 실제로 상자의 높이를 제한합니다. 수직 작성 모드에서는 inline 방향이 수직이기 때문입니다!

결론

그렇죠, 친구들! 우리는 max-inline-size 속성을 완전히 탐구했습니다. CSS는 실험하는 것입니다. 이 속성들을 자유롭게 시험해 보세요. 우리 모두가 그렇게 배웠습니다!

이제 여러분을 놓치기 전에, max-inline-size를 기억할 수 있는 작은 이야기를 들려드릴게요: 왜 CSS 속성이 체육관에 갔을까요? 물론 max-inline-size를 연습하기 위해서입니다!

행복한 코딩을 하고, 레이아웃이 항상 유연하며, 내용이 항상 딱 맞게 맞춰지길 바랍니다!

Credits: Image by storyset