영역에 비해 글자 수가 넘치면 ( "..." ) 로 말줄임표를 사용하는 경우가 있다. javascript로 일정글자 수 이상일 때 slice 함수를 활용 할 수도 있지만 css로도 제어 말줄임표를 줄 수 있다. 아래 코드와 이미지는 글자들이 width값에 맞춰 자동으로 줄바꿈이 이뤄지고 있는 상태이다. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. The generated Lorem Ipsum is therefore always free from repetition, inje..

Notion Api notion API를 사용하던 중 이미지를 가지고 올 때 크기 값을 보내주지 않는 것을 알고 이미지 크기를 유동적으로 가져오고 싶어서 원본 이미지 크기 값을 가져오는 방법에 대해 알아보았다.개발자 도구에서 img 태그에 있는 srcset에 있는 이미지 주소에 마우스를 올리면 아래와 같은 이미지가 나온다 rendered size : 렌더링 되는 이미지 크기intrinsic (본질적인) size : 불러오는 이미지의 원본 크기여기서 naturalWidth, naturalHeight 활용하면 이미지의 원본 크기를 알아 낼 수 있다.   기본 html 태그 폭은 100, 높이는 200 인 A.jpg 라는 이미지가 있을 경우 width, height 값이 있으면 해당 크기로 naturalWi..

useState의 상태 값이 css에 적용 해야 될 때가 있다.문제는 tailwind에서 “ w-[${width}px] “ 이런 식으로 지정하면 class는 정상적으로 render되었지만, css가 적용되지 않는다.이러한 경우 **style(인라인 스타일)**을 이용해야 한다.한 개 이상의 스타일을 지정해야 할 경우 { } 안에 다 적용하면 된다. style(인라인 스타일) export default function Item() { const [imageSize, setImageSize] = useState({ width: 100, height: 100 }); const containerStyle = { height: imageSize.height width: imageSize.wi..