CSS - max-block-size 속성: 초보자를 위한 친절한 가이드

안녕하세요, 미래의 CSS 마법사 여러분! 오늘 우리는 흥미로운 CSS 세계로의 여행을 떠나게 될 것입니다. 특히 max-block-size 속성을 탐구해보겠습니다. 초보자이시라도 걱정 마세요; 저는 여러분의 친절한 가이드가 되겠습니다. 단계별로 이 주제를 공부해보겠습니다. 그럼 좋아하는 음료를 한 잔 들고 편안하게 앉아, 시작해보겠습니다!

CSS - Max Block Size

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

이제부터 본격적으로 다루기 전에 max-block-size에 대해 이해해보겠습니다. 블록을 사용하여 타워를 짓는다고 상상해보세요. max-block-size 속성은 타워의 높이를 제한하는 것과 같습니다. CSS 용어로는, 블록 방향에서 요소의 최대 크기를 정의합니다.

"하지만 기다리세요," 여러분이 물을 수도 있습니다. "블록 방향이 뭐죠?" 훌륭한 질문입니다! 블록 방향은 수평으로 쓰는 언어(영어와 같은)에서는 수직 방향, 수직으로 쓰는 언어(전통적인 일본어와 같은)에서는 수평 방향입니다.

문법과 가능한 값

이제 max-block-size를 CSS에서 어떻게 사용할 수 있는지 살펴보겠습니다:

.my-element {
max-block-size: value;
}

"값"의 자리에 무엇을 넣을 수 있을까요? 다음과 같은 모든 가능한 값을 담은 유용한 표를 제공합니다:

값	설명
`<length>`	고정된 길이, 예를 들어 `300px` 또는 `20em`
`<percentage>`	포함 블록의 크기에 대한 백분율
`none`	제한 없음(기본값)
`max-content`	내적 선호 최대 크기
`min-content`	내적 최소 크기
`fit-content`	`auto`와 유사하지만 차이가 있음
`auto`	브라우저가 최대 크기를 결정

적용 대상

모든 CSS 속성이 모든 HTML 요소에 적용되는 것은 아닙니다. max-block-size 속성은 다음을 제외한 모든 요소에 적용됩니다:

비치환된 인라인 요소
테이블 행
행 그룹

아직 이 용어에 익숙하지 않으시다면 걱정 마세요. CSS 여정을 계속하면서 이를 만나게 되고 이유를 이해하게 될 것입니다.

CSS max-block-size - writing-mode 효과

이제 흥미로운 부분으로 넘어가보겠습니다! max-block-size 속성은 텍스트의 writing-mode에 따라 행동이 달라집니다. 몇 가지 예제를 살펴보겠습니다:

예제 1: 수평 작성 모드

.box {
writing-mode: horizontal-tb;
max-block-size: 200px;
background-color: lightblue;
padding: 10px;
}

<div class="box">
This is a box with horizontal writing mode and max-block-size set to 200px.
</div>

이 예제에서 max-block-size는 블록 방향이 수직인 수평 작성 모드에서 박스의 높이를 200ピクセル로 제한합니다.

예제 2: 수직 작성 모드

.box {
writing-mode: vertical-rl;
max-block-size: 200px;
background-color: lightgreen;
padding: 10px;
}

<div class="box">
This is a box with vertical writing mode and max-block-size set to 200px.
</div>

이 경우 max-block-size는 블록 방향이 수평인 수직 작성 모드에서 박스의 너비를 200ピクセル로 제한합니다.

CSS max-block-size - 값

길이 값을 사용할 때, 우리는 고정된 최대 크기를 설정하고 있습니다. 다음과 같이 작동하는 예제를 보겠습니다:

.fixed-size {
max-block-size: 150px;
background-color: lightyellow;
padding: 10px;
}

<div class="fixed-size">
This box has a max-block-size of 150px. If the content exceeds this height, it will overflow.
</div>

이 예제에서 div에 들어 있는 내용이 얼마든지 많아도 높이가 150ピクセル 이상이 되지 않습니다.

CSS max-block-size - 값

백분율은 포함 블록의 크기에 상대적입니다. 다음과 같이 작동합니다:

.parent {
height: 300px;
background-color: lightgray;
}

.child {
max-block-size: 50%;
background-color: lightpink;
padding: 10px;
}

<div class="parent">
<div class="child">
This child div has a max-block-size of 50% of its parent's height.
</div>
</div>

이 경우 자식 div는 부모 div의 높이의 절반 이상이 되지 않습니다.

CSS max-block-size - 값

max-content 값은 요소가 필요한 크기만큼 커지지만 더 이상 커지지 않도록 하고 싶을 때 특히 유용합니다. 예제를 보겠습니다:

.max-content-box {
max-block-size: max-content;
background-color: lightcoral;
padding: 10px;
}

<div class="max-content-box">
This box will expand to fit its content, but no more than that.
</div>

이 박스는 내용을 수용할 만큼 확장되지만 그 이상은 아닙니다.

CSS max-block-size - 수평 및 수직 텍스트와 함께

마지막으로 수평과 수직 텍스트를 결합한 예제를 보여드리겠습니다:

.mixed-text {
max-block-size: 200px;
background-color: lavender;
padding: 10px;
}

.vertical-text {
writing-mode: vertical-rl;
max-block-size: 100px;
background-color: lightsalmon;
margin-top: 10px;
}

<div class="mixed-text">
This is horizontal text with max-block-size of 200px.
<div class="vertical-text">
This is vertical text with max-block-size of 100px.
</div>
</div>

이 예제에서 우리는 수평 텍스트와 최대 높이가 200ピクセル인 박스를 가진 컨테이너를 가지고 있습니다. 그 안에 수직 텍스트와 최대 너비가 100ピクセル인 다른 div가 있습니다.

그리고 여기까지입니다! 우리는 max-block-size 속성을 다양한 각도에서 탐구했습니다. CSS를 완벽하게 습득하는 열쇠는 연습입니다. 그러니 이 예제들을 실험해보고 수정해보세요. 행복하게 코딩하시고, 항상 완벽한 크기의 블록을 만들어보세요!

Credits: Image by storyset