bkdragon's log

... 이런 html 구조가 있다. tailwind로 간단히 작성했다..div1 { flex : 1; display : flex; flex-direction : column; overflow : auto;}첫번째 div는 이런 스타일이 적용이 되어 있는 상태이다.flex : 1 은 간단하게 설명해서 기본 크기를 0으로 설정하고, 유연하게 늘어나거나 줄어들 수 있게 된다.두번째 div 에는 해당 속성이 적용이 안되어있어서 첫번째 div가 두번째 div를 제외한 크기를 차지하게 된다.이렇게만 보면 첫번째 div는 전체에서 가능한 만큼의 공간을 차지하고 내부 컨텐츠가 늘어남에 따라 스크롤이 생길 것으로 예상이 되는데 실제론 그렇게 안된다. https://stackoverf..

flex-item에 사용하는 속성들이 헷갈려서 정리 좀 해두려고 한다. flex-basis flex 아이템의 기본 크기를 설정한다. flex-direction에 따라 width(row)와 height(column)를 설정한다. 다만 단순히 width, height가 아닌 min-width, min-height 처럼 동작한다. .item { flex-basis: 100px; } 만약 이렇게 설정했다면 원래 100px가 안되던 아이템은 100px로 늘어나고 100px 넘는 아이템은 컨텐츠의 길이만큼 설정된다. .item { flex-basis: 100px; word-break: break-word; } 100px 넘어가던 item이 100px이 넘어가지 않게 하고 싶으면 word-break를 통해 컨텐츠를 ..

classnames는 조건부로 스타일링을 편하게 할 수 있는 라이브러리이다. {클래스명 : 조건식} 형태로 조건식이 참일 경우 클래스명을 추가할 수 있다. 공식 문서 예제를 몇가지 살펴보자. https://www.npmjs.com/package/classnames 기본 형태 {클래스명 : 조건식} 의 형태이나 조건식 생략이 가능하며 그 경우에는 true이다. classNames('foo', 'bar'); // => 'foo bar' classNames('foo', { bar: true }); // => 'foo bar' classNames({ 'foo-bar': true }); // => 'foo-bar' classNames({ 'foo-bar': false }); // => '' classNames({..