CSS (4) 썸네일형 리스트형 [css] 사용자의 입력에 따라 높이가 조절되는 textarea 만들기 (input 줄바꿈하기, textarea 높이 자동 조절하기, textarea 아래에 여백 생길 때) input과 같은 모습을 하고 있지만, 그 형태를 유지하면서 줄바꿈을 할 수 있는 UI를 만들고 싶을 때 ? 자동으로 높이가 조절되는 textarea를 만들어 구현이 가능하다. 자동 높이 조절 textarea ? 기본적인 형태의 textarea는 고정된 높이를 가지고 높이 이상의 줄바꿈이 일어나면 스크롤이 생기는 방식으로 되어있다. 자동 높이 조절 textarea는 고정된 높이값 없이 사용자가 입력하는대로 줄바꿈에 따라 높이가 자동 조절되는 textarea다 자동 높이 조절 textarea 만들기 const textarea = useRef(); const handleResizeHeight = () => { textarea.current.style.height = 'auto'; //height 초기화 te.. [css] iOS 모바일에서 scroll-behavior smooth 속성이 적용되지 않을 때, 부드러운 스크롤 효과 적용하기 CSS에서 scroll-behavior에 smooth 속성을 직접 지정하거나, 자바스크립트에서 scrollTo 메서드 사용 시 behavior 속성을 추가 해주면 스크롤 이동 시 부드럽게 이동하는 효과를 줄 수 있다. 1. CSS scroll-behavior:smooth; 2. JS에서 코드로 적용 window.scrollTo({ top: 0, left: 0, behavior: "smooth" }); 하지만, 브라우저에서는 분명히 잘 작동이 되는데, 모바일에서는 scroll-behavior:smooth 속성이 적용되지 않는 문제가 생겼다. 모바일 스크롤 smooth를 검색해보았더니, iOS나 OSX에서의 safari에서는 Smooth Scrolling이 적용되지 않아,이를 해결하기 위해서는 자바스크립트 .. [React] useRef로 transition이 동적으로 적용되지 않는 문제 해결 추천 책 리스트를 보여주는 무한 캐러셀을 만들던 중 transition 관련 문제가 발생했다. 설명을 위해 필요한 대략적인 컴포넌트 구조는 아래와 같다. const BookCarousel = () => { return ( ... ) }; export default BookCarousel; BookCarousel에서 무한 캐러셀을 구현하기 위해 마지막 페이지에서 index값을 변경시켜주는데, 이 때는 transiton 효과를 없애야 유저에게 무한으로 캐러셀이 넘어가는 느낌을 준다. (자세한 무한 캐러셀 구현 방식은 나중에 포스팅할 예정이다) BookImageList가 이동하면서 그 하위에 있는 Cover 컴포넌트의 scale사이즈도 변경되는데 여기에도 transition을 적용시켜놓았기 때문에 BookIm.. [css] rotate3d를 하면 z-index가 적용되지 않을 때, roatate3d와 z-index 충돌 에러 해결 현재 진행 중인 프로젝트에 rotate3d를 이용해 책을 입체적으로 회전시키는 기능을 추가했다. 개발하는 동안 크롬 개발자 도구에서 확인했을 때는 별다른 문제가 없었는데, 배포한 후 모바일 화면으로 회전 기능을 실행해보니 아래와 같은 문제가 발견되었다. 책이 rotate3d로 회전하면서 Header 영역을 뚫고 나오는 문제였다. 혹시나 하고 책이 회전하는 동안 사이드 메뉴도 눌러봤더니, 역시나 책이 SideDrawer 영역을 뚫고 나왔다. 해결방법 1 ( X ) 처음엔 z-index를 이용해 해결해보기로 하고, Header의 Navbar 컴포넌트와 SideDrawer 컴포넌트에 엄청나게 큰 z-index 값을, 회전하는 책 컴포넌트에는 z-index 값을 1로 적용시켜보았다. 그래도 책 컴포넌트가 Hea.. 이전 1 다음
