문자열이 자연스럽게 늘어나는 사이드바 애니메이션 만들기 & wrap 정리

막혔던 부분 💻

수정 전

위에 gif에서 볼 수 있듯이 버튼을 눌러서 사이드 메뉴를 열었을 때 글씨가 뭉개지는 현상을 난 없애고 싶었다 이걸 해결하기 위해 "overflow: hidden" 을 쓰면 해결되겠지? 라고 안일하게 생각한 나에게 긴장을 주는 문제였다...

우선, flex-wrap: nowrap & overflow: hidden 안 먹혔던 이유는, flex-wrap은 flex 아이템들이 flex 박스에서 넘치는 걸 다음 줄로 넘기지 않고 뚫어버린다는 CSS인데, 사이드 메뉴가 줄어들면서 안에 있던 아이템도 같이 줄어들기 때문에 효과가 없었다!
( flex-wrap 문서 바로가기 )

그렇다면 문자가 요소 밖으로 넘어갈지 정해주는 overflow-wrap (word-break과 동일) 속성은 먹히겠지? 해서 써봤지만, 이 속성은 일반적인 단어 단위로 자를지 말지를 정하는 속성이었다.
(예를 들어 dynamic이란 단어가 dy '\n' namic 처럼 두 줄로 짤릴 때 dynamic 단어를 박스 밖으로 표시할지(normal 속성값), dy namic 짤린 채로 표시할지(anywhere 속성값), dynamic 단어 통째로 다음 줄로 보낼지(break-word 속성값)
( overflow-wrap 문서 바로가기 )

해결

이 문제는 white-space: nowrap 속성을 통해 해결할 수 있었다.
( white-space에 대한 자세한 설명 )

수정 후

수정한 코드 🚩

주석은 실패한 결과들!

.side-menu {
    display: flex;
    justify-content: center;
    position: fixed;
    padding-top: 20px;
    top: 10vh;
    overflow: hidden;
    /* overflow-wrap: normal; */
    height: 100vh;
    left: 0;
    background-color: rgba(240, 248, 255, 1);
    /* z-index: 1; */
    transition: width 1s ease;
}

/*when side menu close*/
.side-menu-hidden {
    /* overflow-wrap: normal; */
    white-space: nowrap;
    width: 0vw;
}
/*when side menu open*/
.side-menu-visible {
    /* flex-wrap: nowrap; */
    width: 20vw;
    white-space: nowrap;
    /* overflow-wrap: normal; */
}