본문 바로가기

#IT #react7

[react] react Framer-motion 리액트 프레이머 활용하기 (애니메이션을 간편하게!) 프로그래밍 세계를 탐구합시다. react Framer-motion 리액트 프레이머 모션 활용하기 React Framer Motion은 주로 다음과 같은 역할을 합니다: 애니메이션 제어: 사용자가 정의한 컴포넌트나 DOM 요소를 애니메이션화할 수 있습니다. 움직임, 크기 조절, 회전 등 다양한 애니메이션 효과를 구현할 수 있습니다. 제스처 처리: 터치, 클릭 등의 제스처 이벤트를 감지하고 이에 따른 애니메이션을 쉽게 추가할 수 있습니다. 컴포넌트 간 통신: 다양한 컴포넌트 간의 통신을 촉진하며, 애니메이션을 통한 사용자 경험 향상에 기여합니다. react Framer-motion 리액트 프레이머 모션 구현 예시 구현 예시 화면입니다. 밑줄 효과, 마우스 hover 시 box가 커지는 효과, 버튼이 나타나는.. 2024. 1. 10.

[react] CKEditor 라이브러리 활용하여 게시판 구성하기 (최소 높이 설정하기, CSS Module) 프로그래밍 세계를 탐구합시다. CKEditor 라이브러리 활용하여 게시판 구성하기 CKEditor 라이브러리를 활용하여 게시판을 효과적으로 구성할 수 있습니다. HTML, CSS를 전부 활용해서 구현하려면 어려운 게시판 요소를 간편하게 출력할 수 있습니다. 아래는 구현 예시입니다. CKEditor 라이브러리 1. CKEditor 란? CKEditor는 웹 기반의 텍스트 에디터로, HTML로 작성된 문서를 편집할 수 있습니다. 이는 웹사이트의 사용자가 브라우저에서 직접 콘텐츠를 편집할 수 있게 해줍니다. 이 에디터는 JavaScript로 작성되었으며, 다양한 웹 브라우저와 호환됩니다. CKEditor 사이트 URL https://ckeditor.com/ckeditor-5/ CKEditor 5 | Power.. 2024. 1. 9.

[react] React-Player를 활용하여 YouTube 영상을 페이지 배경으로 설정하기 프로그래밍 세계를 탐구합시다. React 애플리케이션에서 동영상 및 오디오를 플레이하려면 React Player 라이브러리를 활용하면 간단하게 구현할 수 있습니다. 이 블로그 글에서는 React Player를 활용하여 동영상을 페이지에 쉽게 통합하고 제어하는 방법을 자세히 살펴보겠습니다. react 구현 화면 1. react-player 설치 먼저, react-player를 설치해야 합니다. 터미널(Ctrl + J)에 다음과 같은 명령어를 입력하여 설치할 수 있습니다. npm install react-player 2. import react-player를 설치한 후에는, 원하는 컴포넌트에 import 해줍니다. import ReactPlayer from 'react-player/youtube' 3. 코드.. 2023. 10. 27.

이전 1 2 다음

티스토리툴바