Box model

• Content: 실제 내용이 들어가는 영역. width와 height가 기본적으로 지정하는 영역.
• Padding: 콘텐츠와 테두리 사이의 여백인데 배경색은 이 영역까지 적용됨.
• Border: 패딩을 감싸는 선.
• Margin: 테두리 바깥의 공간으로, 다른 요소와의 간격을 벌릴 때 사용. 배경색이 적용되지 않는 투명한 영역

box-sizing

• content-box : 컨텐츠 영역만 width 로 잡겠다.
  • width: 100px, padding: 20px인 경우 : 전체 너비는 140px이 된다.
• border-box : 테두리까지 포함한 크기가 width 이다. (margin 은 아님)
  • 전체 너비가 100px 이고 컨텐츠 영역이 60px 로 줄어든다.

1줄 말줄임

.line-clamp-1-normal {
  overflow: hidden;
  text-overflow: ellipsis;
}

부모의 width 가 결정되어 있는 경우에는 white-space: nowrap 이 없어도 말줄임이 발생한다.

<div class="w-80 overflow-hidden">
    <div class="flex items-center">
        <div class="w-6 h-6">1</div>
        <div class="flex-1 min-w-0">
            <div class="text-overflow-ellipsis overflow-hidden">white-space: nowrap 없어서 줄바꿈되고 말줄임도 안일어남</div>
        </div>
        <div>2024.01.01</div>
    </div>
    <div class="flex items-center">
        <div class="w-6 h-6">2</div>
        <div class="flex-1 min-w-0">
            <div class="truncate">의도한대로 줄바꿈이 일어난 경우입니다람쥐</div>
        </div>
        <div>2024.01.02</div>
    </div>
    <div class="flex items-center">
        <div class="w-6 h-6">3</div>
        <div class="flex-1">
            <div class="truncate">min-width: 0 없어서 줄어들지 않음</div>
        </div>
        <div>2024.01.03</div>
    </div>
</div>

flexbox 내부에서는 자식 컴포넌트의 말줄임을 할 땐, 너비에 맞춰서 자동으로 줄바꿈이 되기 때문에 white-space: nowrap 속성이 필요해진다. flexbox 안의 다른 요소와 함께 너비가 결정되는 경우 min-width: 0px; 가 필요하기도 하다.

min-w-0

기본적으로 min-width : auto; 로 작동한다. 이는 최소한의 너비를 보장하라는 뜻이다. 보통을 글자의 경우 자동 줄바꿈이 되는데, whitespace-nowrap 과 만나게 되면 자신의 너비를 유지하기 위해서 overflow 가 발생한다. 부모 컨테이너의 너비가 한정되어 있어도 줄바꿈을 절대 하지 않기 때문에 벗어나면서 컨텐츠 영역이 보장되기 때문에 overflow 가 발생하지 않는다.

min-width: 0px; 를 주게되면. 0px 까지 줄어들 수 있어 라는 뜻이 된다. 그래서 최소 너비를 보장하지 않아도, 줄어들 수 있고, nowrap 과 만나도, 줄어들 수 있기 때문에 text overflow 가 발생할 수 있게 된다.

2줄 말줄임

.text-over {
    max-width: 253px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

이렇게만 했을 때는 분명 2줄 말줄임이었는데 1줄 말줄임으로 표시되었다. css 만 봐서는 문제가 없어보였다.

.text-over {
    max-width: 253px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal; // 이게 들어가야 함
}

그런데 나도 모르게 상속된 white-space 속성이 줄바꿈을 방지해서 1줄까지만 표시되고 말줄임이 일어났던 것이다.

-webkit-line-clamp 가 2이상 작동하려면 일단 줄바꿈이 일어나야 한다. white-space 를 지정해주어야 정해진 줄 수에서 말줄임이 일어난다. white-space: nowrap; 인 경우는 애초에 줄바꿈이 일어나지 않기 때문에 2줄이 되지 않는다.

알아두면 좋을 다른 auto 속성들

다른 auto 속성이 어떻게 작동하는지 몇개 찾아봤다.

width

width 는 element 가 block 이냐 inline 이냐에 따라서 다르다.

• block : 가로 전체 100%
• inline : 컨텐츠의 너비만큼

100% 와의 차이점

• width: 100% : border, padding 제외 컨텐츠 영역만 100%
  • box-sizing: border-box; 를 주면 auto 와 마찬가지로 작동함
• width: auto : 해당 요소의 전체 너비(margin + border + padding + content)가 부모 요소의 콘텐츠 영역(content area)에 맞춰진다. padding 값을 추가하면 컨텐츠 영역은 줄어든다는 것.

table

table-layout

<table> 의 열 너비값을 어떻게 정할지 정한다. auto 가 기본이라서 가장 넓은 콘텐츠에 맞춰서 자동으로 지정된다. -> 컨텐츠의 크기를 모두 게산하고 나서야 열의 너비를 알고 렌더링하기 때문에 속도가 조금 느릴 수 있음.

fixed 를 사용하면 첫 행의 너비만으로 결정한다.