CSS linear-gradient 배경에 transition 트랜지션 적용시키기

일반적으로 background에 linear-gradient 적용하는 법 .element { background: linear-gradient(red, blue); } 일반적으로 linear-gradient는 위와같이 작성합니다. 하지만 background 속성은 transition에 적용되지 않습니다. .element { background: linear-gradient(red, blue); transition: background 0.2s ease; //적용안됨 } linear-gradient 속성을 transition 적용하는 법 간단하게 background-image 속성을 이용하면 됩니다. .element { background-image: linear-gradient(red, blue); tr..

• format_list_bulleted CSS
• · 2023. 6. 30.
• textsms

React Swiper.js Swiper 컴포넌트 바깥에서 useSwiper()훅 사용하는 법

Swiper useSwiper()훅 useSwiper()훅은 Swiper 컴포넌트 내부에서 사용할 수 있는 훅으로, Swiper에 관련된 메서드를 제공합니다. 그런데 Swiper 컴포넌트 외부에서는 어떻게 불러올 수 있을까요? 기존 Swiper 컴포넌트 내부에서 사용하는 방법 아래 코드와 같이 버튼 컴포넌트를 하나 만듭니다. 컴포넌트 내부에 useSwiper()훅을 불러와 메서드를 사용한 다음, 버튼 컴포넌트를 Swiper 컴포넌트 내부에 불러옵니다. import { useSwiper } from "swiper/react"; export default function SlideNextButton() { const swiper = useSwiper(); return ( swiper.slideNext()}>..

• format_list_bulleted Front End/React
• · 2023. 6. 30.
• textsms

백준 node.js 18809번 Gaaaaaaaaaarden 백트래킹 JavaScript JS

18809번: Gaaaaaaaaaarden 첫째 줄에 정원의 행의 개수와 열의 개수를 나타내는 N(2 ≤ N ≤ 50)과 M(2 ≤ M ≤ 50), 그리고 초록색 배양액의 개수 G(1 ≤ G ≤ 5)와 빨간색 배양액의 개수 R(1 ≤ R ≤ 5)이 한 칸의 빈칸을 사이에 두 www.acmicpc.net 풀이 방법 배양액을 뿌릴 수 있는 케이스를 모두 찾습니다. 케이스를 순회하며 꽃이 피는 개수를 BFS를 통해 구합니다. DFS가 아닌 BFS로 구하는 이유는, 꽃이 핀다면 시간이 지나도 배양액은 흘러가지 않고, 꽃이 핀 자리에서 확산이 멈추기 때문입니다. 따라서 DFS로 구하면 정답을 구할 수 없다고 판단했습니다. 아래 코드 주석을 통해 확인해주세요 let fs = require('fs'); let inp..

• format_list_bulleted 알고리즘/백준
• · 2023. 6. 30.
• textsms

백준 node.js 9663번 N-Queen 백트래킹 JavaScript JS

9663번: N-Queen N-Queen 문제는 크기가 N × N인 체스판 위에 퀸 N개를 서로 공격할 수 없게 놓는 문제이다. N이 주어졌을 때, 퀸을 놓는 방법의 수를 구하는 프로그램을 작성하시오. www.acmicpc.net N-Queen문제 풀이 복습차원에서 적습니다. let fs = require('fs'); let input = fs.readFileSync('/dev/stdin').toString().trim() const N = +input; let answer = 0; next(0, Array(N).fill(0)) console.log(answer) function next(row,board) { if(row === N){ answer++ return } for(let i=0; i

• format_list_bulleted 알고리즘/백준
• · 2023. 6. 30.
• textsms

백준 node.js 16987번 계란으로 계란치기 백트래킹 JavaScript JS

풀이 방법 dfs를 통한 백트래킹 문제입니다. 코드는 아래와 같습니다. let fs = require('fs'); let input = fs.readFileSync('/dev/stdin').toString().trim().split("\\n"); const N = +input.shift(); const data = input.map((v) => v.split(" ").map(Number)); const eggsState = data.map((v) => v[0]); let answer = 0; dfs(0, eggsState); console.log(answer); function dfs(index, arr) { //순회를 마치면 탈출 if (index === N) { const count = arr.fil..

• format_list_bulleted 알고리즘/백준
• · 2023. 6. 30.
• textsms

백준 node.js 1941번 소문난 칠공주 백트래킹 JavaScript JS

1941번: 소문난 칠공주 총 25명의 여학생들로 이루어진 여학생반은 5×5의 정사각형 격자 형태로 자리가 배치되었고, 얼마 지나지 않아 이다솜과 임도연이라는 두 학생이 두각을 나타내며 다른 학생들을 휘어잡기 시작 www.acmicpc.net 문제풀이 방법 25명중 무작위로 7명을 뽑습니다. 7명중 4명 이상이 ‘이다솜파’라면 dfs함수를 실행합니다. dfs함수는 무작위로 뽑힌 7명이 인접한 자리에 앉아있는지 확인하는 함수입니다. dfs를 활용하여 인접한지 확인할 수 있습니다. let fs = require('fs'); let input = fs.readFileSync('/dev/stdin').toString().trim().split("\\n") .map((v) => v.split("")); let a..

• format_list_bulleted 알고리즘/백준
• · 2023. 6. 30.
• textsms