본문 바로가기

개인프로젝트/unitedPrompt4

예전 아이콘 2024. 1. 20.
ContentSectionThree 눈 내리기 추가 ContentSectionThree에 눈내리기를 추가하였다. snow.jsx import React, { useEffect, useRef } from 'react'; class SnowItem { static defaultOptions = { color: 'white', radius: [0.5, 3.0], speed: [1, 3], wind: [-0.5, 3.0] }; constructor(canvas, options = {}) { this.canvas = canvas; this.ctx = canvas.getContext('2d'); this.options = { ...SnowItem.defaultOptions, ...options }; this.initialize(); } initialize() { t.. 2024. 1. 20.
ContentSectionTwo 1. 왼쪽에 4개씩의 이미지를 보여주고 클릭하면 오른쪽에 그 이미지에 대한 설명을 나타나게 해야함. 2. 이미지가 5개가 넘어가면 페이징처리를 해야함. 3. 클릭을 했을 때, 어떤 이미지가 클릭되었는지 확인할 수 있어야함. 밝기 조절을 해서 클릭한 이미지가 무엇인지 눈에 띄게 보이게 만들었음. 테두리 색상 변경과 박스 그림자 강조 배경색 변경 등 여러가지 시도 했지만 밝기 조절이 가장 이뻐보였음. 1번쨰 이미지를 클릭해서 1번째 이미지는 "ListPlz"라는 데스크탑 어플리케이션을 만들예정이기에 그림과 같이 해놓았다. 글자의 배치같은 경우 대부분 position: absolute을 이용했기 때문에 나중에 쉽게 다시 배치를 변경 가능하다. 설명과 다른 부분이 완성되면 제대로 배치할 생각이다. Content.. 2024. 1. 19.
ContentSectionThree 오늘은 강의보단 개인적으로 만들고 싶었던 작업물을 만들었다. 홈페이지의 3번째 세션을 만들었고 글은 아무거나 가져온 것이기 때문에 수정할 예정이다. 1번째와 2번째 세션을 아직 지속적으로 작업중이므로 블로그에 올리기에 부끄러운 수준이라 나중에 올릴 듯 싶다. REACT를 이욯했으며 사용된 라이브러리는 react-icons,antd 가 있다. ContentSectionThree.jsx import React, { useState, useEffect } from 'react'; import { Layout } from 'antd'; import { FaDiscord, FaBloggerB, FaEnvelope } from 'react-icons/fa'; import { FaArrowLeft, FaArrowRi.. 2024. 1. 18.

티스토리툴바