레이아웃을 잡을 때에 딱딱 맞아들어가면 너무 큰 기쁨이다.
이번에도 정말 찰떡같이 레이아웃이 붙어서 너무 재미있었다.
하지만 서비스를 만드는 개발자의 입장에선, 간과하지 말아야할 것이 있다...

그것은 바로 사용자가 입력하는 값들은 우리가 상상했던 아름다운 길이가 아니라는 것
(실제로 나는 인스타그램 계정명이 25 글자인 사람을 본 적 있다)

그렇게 텍스트 내용이 길어지면 영향받는 것이 두 가지 있다. 그것은 바로 flex로 만든 레이아웃과, 박스를 뚫고 나가는 텍스트.
다행이도 이를 고치기 위해 두 가지 유용한 CSS 속성이 있어 이번에 도움을 많이 받았다.

flex-shrink

flex-wrap의 기본값은 nowrap이기 때문에, flex 안의 요소들의 길이가 늘어나면 그만큼 다른 요소들이 길이를 줄여주는 방식으로 작동한다.

짜부됐던 내 프로필 사진이 그대로 유지된다!

flex-shrink는 내가 얼마나 양보해주겠냐를 나타내는 속성이다.
만약에 flex-shrink: 0으로 설정했다면, "절대 양보 못해 못뺏겨 어딜 뺏겨!!!"이고 flex-shrink: 3;이면 아주 양보 잘하는 요소가 된다.

숫자의 의미는 줄어드는 비율이다. 만약에 한 요소를 다른 요소보다 2배 더 많이 줄이고 싶다면, flex-shrink: 2;를 준다. 그러면 flex-shrink: 1;이 적용된 요소보다 2배 더 줄어든다.

위와 같은 경우는 프로필 사진 wrap에 0을 주었다. 절대 양보 안해야하는 부분!

text-overflow

그러면 이제 레이아웃은 잡았고, 우리가 이제 줄이고 싶은 (truncate) 요소에게 깔끔하게 ... 표시로 줄어들게 하는 방법을 알아야한다.

먼저 줄이고 싶은 요소의 width값이 확정이 되어야 한다. 이는 원하는 크기를 width값으로 지정해도 되고, 아니면 max-width로 주어도 되고, 혹은 flex-shrink/flex-grow 값을 적절히 사용하여 해도 된다.

width 값이 정해지면 overflow: hidden;과 text-overflow: ellipsis;를 준다. 만약에 본문내용을 줄일 때엔 white-space: nowrap;을 통해 줄바꿈을 취소하고 계산하도록 해준다.

그러면 정해진 width값보다 내용이 길어지면 자연스럽게 ...으로 생략이 된다!

레이아웃 아직도 어려운 부분이 있다... 계속해서 어떤 속성은 필요하고 어떤 것은 불필요한지 알아가자!