CSS - min-inline-size 속성: 초보자 가이드
안녕하세요, 미래의 CSS 마에스트로 여러분! 오늘 우리는 흥미로운 CSS 세계로의 여행을 시작할 것입니다. 특히 min-inline-size 속성을 탐구해보겠습니다. 초보자라면 걱정하지 마세요; 저는 친절한 가이드로서, 이 주제를 단계별로 다룰 것입니다. 이 튜토리얼의 끝을 맺을 때쯤에는 이 속성을 프로처럼 다룰 수 있을 것입니다!
min-inline-size는 무엇인가요?
들어보기 전에 min-inline-size가 정확히 무엇을 의미하는지 이해해보겠습니다. 여행을 준비할 때, 확장 가능한 캐리어를 가지고 있다고 상상해보세요. min-inline-size는 그 캐리어의 주요 치수에 대한 최소 크기를 설정하는 것과 같습니다. 웹 디자인 용어로는, 이는 요소의 인라인 방향에서의 최소 크기를 설정합니다.
이제 "인라인 방향"이 무엇인지 고민할 수도 있을 겁니다. 대부분의 경우 영어와 비슷한 언어에서는 수평 방향을 의미합니다. 하지만 걱정하지 마세요, 나중에 더 깊이 탐구해보겠습니다!
가능한 값
min-inline-size에 사용할 수 있는 다양한 값을 살펴보겠습니다:
| 값 | 설명 |
|---|---|
<length> |
고정된 길이, 예를 들어 100px 또는 2em
|
<percentage> |
부모 컨테이너 크기의 백분율 |
max-content |
내재된 선호 크기 |
min-content |
내재된 최소 크기 |
auto |
브라우저가 최소 크기를 결정 |
이제 이러한 값들이 혼란스러울 수 있지만, 예제와 함께 각각을 탐구해보겠습니다!
적용 대상
min-inline-size 속성은 다음을 제외한 모든 요소에 적용할 수 있습니다:
- 인라인, 대체되지 않은 요소
- 테이블 행
- 행 그룹
문법
min-inline-size의 기본 문법은 매우 간단합니다:
min-inline-size: <value>;이제 몇 가지 예제를 통해 실제로 어떻게 작동하는지 살펴보겠습니다!
CSS min-inline-size - 값
먼저 고정 길이를 사용하는 간단한 예제를 시작해보겠습니다:
<div class="box">This is a box with min-inline-size set to 200px.</div>.box {
min-inline-size: 200px;
background-color: lightblue;
padding: 10px;
}이 예제에서 우리는 브라우저에게 "이箱子가 200픽셀 이하로 좁아지지 않도록 하라"고 말하고 있습니다. 브라우저 창을 조정해보면,箱子는 최소 너비 200px를 유지하며, 더 작게 만들려고 해도 그 이하로 좁아지지 않습니다.
CSS min-inline-size - 값
이제 백분율 값을 사용해보겠습니다:
<div class="container">
<div class="box">This box has min-inline-size set to 50%.</div>
</div>.container {
width: 400px;
background-color: lightyellow;
padding: 10px;
}
.box {
min-inline-size: 50%;
background-color: lightgreen;
padding: 10px;
}이 경우 우리는 "이箱子가 항상 부모 컨테이너의 반 크기 이상으로 만들어지도록 하라"고 말하고 있습니다.箱子는 최소 200px 너비(400px의 50%)이지만, 필요에 따라 더 커질 수 있습니다.
CSS min-inline-size - max-content 값
max-content 값은 특히 흥미롭습니다. 이는 최소 크기를 내재된 선호 크기로 설정합니다. 예제를 통해 살펴보겠습니다:
<div class="box max-content">This box will expand to fit its content.</div>
<div class="box fixed">This box has a fixed width of 150px.</div>.box {
background-color: lightpink;
padding: 10px;
margin-bottom: 10px;
}
.max-content {
min-inline-size: max-content;
}
.fixed {
width: 150px;
}max-content箱子는 모든 내용을 한 줄에 맞춰 확장하되, 고정 너비의箱子는 텍스트가 줄을 바꿀 수 있습니다.
CSS min-inline-size - 수직 텍스트와 함께
이제 정말 흥미로운 부분입니다! 인라인 방향이 일반적으로 수평인 것을 말했지만, 항상 그렇지는 않습니다. 수직 텍스트를 사용한 예제를 살펴보겠습니다:
<div class="vertical-text">This text is vertical!</div>.vertical-text {
writing-mode: vertical-rl;
min-inline-size: 100px;
background-color: lavender;
padding: 10px;
}이 경우, writing-mode를 수직으로 변경했기 때문에, min-inline-size는箱子의 최소 높이를 컨트롤하며, 너비는 아닙니다!
결론
그렇습니다, 여러분! 우리는 min-inline-size 속성을 완전히 탐구했습니다 (또는, 왼쪽에서 오른쪽으로 말하면, 위에서 아래로?). CSS는 실험하는 것입니다. 이 속성들과 놀아보고 어떤 일이 일어나는지 확인하지 마세요. 이렇게 해서 우리 모두 배웠습니다!
이제 마무리하기 전에, 제가 가르치는 해를 통해 얻은 빠른 팁을 드리겠습니다: 다양한 화면 크기에서 디자인이 어떻게 동작할지 항상 생각해보세요. min-inline-size 속성은 반응형 디자인을 만들어 великолепно 보이는 데 강력한 도구가 될 수 있습니다.
계속 연습하고, 탐구하고, 가장 중요한 것은 CSS를 즐기세요! 누가 알겠는가? min-inline-size와의 실험으로부터 다음 놀라운 웹 사이트 디자인이 오를 수 있습니다!
Credits: Image by storyset