input2 [HTML_CSS] 파일 업로드 버튼 만들기 안녕하세요 :)오늘은 사실 간단해 보이는 ui인데 꽤 고민을 하게 만든 파일 업로드 버튼 ui에 대해 포스팅하려고 합니다. react와 tailwind를 사용하는 프로젝트라 아래와 같이 컴포넌트를 만들었습니다. 여기서 저는 업로드 아이콘에서 꽤 애를 먹었는데요, 아이콘이 이벤트 버블을 일으키지 않아서 아이콘 위를 클릭하면 아무런 일이 발생하지 않는 문제가 있었습니다. 찾아보니 css에 pointer-events: none이라는 스타일 속성이 있더라구요. 해당 스타일은 어떤 상황에서 그래픽 엘리먼트가 이벤트의 타깃이 될 수 있는지를 결정할 수 있는 속성입니다. 여기서 저는 none값을 줘서 svg 아이콘이 이벤트 타깃이 아니니 그 뒤에 있는 이벤트를 트리거 시키도록 했습니다. {label && {.. 2024. 5. 10. [React] textarea input에서 shift+enter로 줄 바꾸기 안녕하세요 :) 오늘은 input에서 enter가 아닌 shift+enter를 눌렀을 때 줄 바꿈이 되도록 input 엘리먼트를 변경하는 방법에 대해 포스팅하려고 합니다. 바닐라 자바스크립트를 이용했을경우와 리엑트를 이용했을 때 코드 패턴이 약간은 달라질 수 있는데요, 저의 경우 리엑트를 이용한 예제를 공유하려고 합니다. 우선 필요한 이벤트 핸들러는 키가 눌러졌을 때 트리거되는 onKeyDown과 키가 떼어졌을 때 트리거되는 onKeyUp 그리고 안의 내용이 변경되었을 때 트리거 되는 onChange입니다. 우선 아래와 같이 input 컴포넌트를 준비합니다. const InputArea = ({ value, onChange, onKeyDown, onKeyUp, }:Props) => { return ( ).. 2023. 7. 3. 이전 1 다음
