분류 전체보기

📌기존 프로젝트 문제점 찾기 HTML, CSS , Javascript를 통해 제작한 웹, 아모레퍼시픽 미술관에 있는 전시를 토대로 만들었다. 클론 코딩은 아니어도 처음 프론트엔드 과정을 배우고 만든 프로젝트였기에 창의성보다는 학습성에 초점을 두어 기존 웹을 참고하며 만들었다. https://spectacular-shortbread-0fa617.netlify.app/exhibtion.html EXHIBTION spectacular-shortbread-0fa617.netlify.app  시간이 흐르고 다시 봤을 때는 처음 만든 거 너무너무 티를 내는 웹이여서 부끄러워졌다. 말도 안돼는 form디자인 , main페이지는 page not found, 사용자를 전혀 고려하지 않은 브라우저까지 총제적 난국이라 수..

✅문제설명 두 정수 left와 right가 매개변수로 주어집니다. left부터 right까지의 모든 수들 중에서, 약수의 개수가 짝수인 수는 더하고, 약수의 개수가 홀수인 수는 뺀 수를 return 하도록 solution 함수를 완성해주세요. ✅입출력 예 ✅입출력 예 설명 💡내가 작성한 풀이 function solution(left, right) { let count = 0; let sum = 0; for( let k = 0; k

css의 꽃!! animation을 정리해보쟈!!! 📌animation animation은 transition과 비슷하게 다수의 스타일을 전환하는 애니메이션을 적용한다. animation: doyi_bg 4.5s cubic-bezier(0.645, 0.045, 0.355, 1) 4s 1; 단축형식 : name | duration | timing-function | delay | iteration-count | direction name 은 필수 값이다. 순서들은 크게 상관 없으나, duration 과 delay 순서는 맞춰야 한다. @keyframes doyi_bg { 0% { opacity: 0; } 60% { opacity: 0; } 70% { opacity: 1; } } transition과 다른점..

이번에 새로 만들어진 animation효과이다! scoll내리면 나오는 효과 주고 싶어서 gsap랑 이것 저것 찾아보던 중 animation-timeline을 발견했다! 너무너무 간편하게 사용할 수 있다! 📌animation-timeline : scroll() animation-timeline:scroll(root block); () 안에는 기준이 되는 스크롤바를 적어주면 된다. 오른쪽 nearest -> 가장 가까운 부모 self -> 나 자신 root -> viewpoint 왼쪽 block - 세로 inline - 가로 📌animation-timeline : view() animation-timeline:view(root block); view()는 브라우저 전체 기준이 아닌 현재 보여지는 화면이 기..

✅문제설명 어떤 문장의 각 알파벳을 일정한 거리만큼 밀어서 다른 알파벳으로 바꾸는 암호화 방식을 시저 암호라고 합니다. 예를 들어 "AB"는 1만큼 밀면 "BC"가 되고, 3만큼 밀면 "DE"가 됩니다. "z"는 1만큼 밀면 "a"가 됩니다. 문자열 s와 거리 n을 입력받아 s를 n만큼 민 암호문을 만드는 함수, solution을 완성해 보세요. ✅입출력 예 💡다른 사람들 풀이 function solution(s, n) { const answer = s.split('').map((x)=>{ const code = x.charCodeAt() if(97

GSAP는 무엇일까?! 내가 원하는 animation을 너무 자연스럽게 사용하고 있어서 정확히 알고 싶었다. 일단 ChatGPT에 검색해보았다!! GSAP(GreenSock Animation Platform) GSAP(GreenSock Animation Platform)은 강력하고 유연한 웹 애니메이션 라이브러리로, HTML, CSS, JavaScript를 사용하여 웹 페이지 및 앱에 동적인 애니메이션을 추가하는 데 사용됩니다. GSAP은 웹 개발자가 쉽게 사용하고 통제할 수 있는 다양한 애니메이션 기능을 제공합니다. 1. **크로스 브라우징:** - GSAP은 다양한 브라우저에서 일관된 애니메이션을 지원하며 크로스 브라우징 문제를 처리하는 데 용이합니다. 2. **간편한 사용법:** - GSAP은 직관..

✅문제설명 정수 배열 numbers가 주어집니다. numbers에서 서로 다른 인덱스에 있는 두 개의 수를 뽑아 더해서 만들 수 있는 모든 수를 배열에 오름차순으로 담아 return 하도록 solution 함수를 완성해주세요. ✅입출력 예 💡내가 작성한 코드 function solution(numbers) { let add = []; for(let i = 0; i a-b) } 💡다른 사람들 풀..

background-image: linear-gradient() 이용하기 배경색 똑같이 2개로 나누어 지정하기 (그라데이션 효과) background-image: linear-gradient(to right, red, yellow); 요런 효과가 있었다니!! 이쁘다. 배경색 똑같이 2개로 나누어 지정하기 (그라데이션 효과x) background-image: linear-gradient(to right, red 50%, yellow 50%); 방향은 left, right, top, bottom 다 사용가능하다. % 또한 다양하게 적용이 가능하다 !