본문 바로가기

프로그래밍184

사이트유형 - 배너유형2 배너 유형2 이번 배너유형은 position을 이용해 이미지 파일의 구간을 설정했습니다. 1.HTML 코드 코드 보기 배너 영역 오늘은 좋아! 오늘날씨는 너무 좋아요! 제블로그!. 구독과 좋아요! 부탁드립니다. 바로가기 2.CSS 코드 코드 보기 /* fonts */ @import url("https://webfontworld.github.io/gmarket/GmarketSans.css"); .gmark { font-family: "GmarketSans"; font-weight: 500; } /* reset */ * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } img { width: 100%; } h1, h2, h3, h4, .. 2022. 9. 29.
배열 메서드 응용2 배열 매서드 응용2 배열 매서드를 응용 해보았습니다. 배열 ["a", "b", "c", "d", "e", "f", "g", "h", "i", "k"] 을 이용하여, b,d,f,h,k 만 출력하게했습니다. 매서드 응용 const num1 = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "k"]; let result1 = num1 .map((e, i) => { if ((i + 1) % 2 == 0) return e; }) .filter((e) => e != null); console.log(result1.join()); 결과 확인하기 const num2 = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "k"]; let result2 .. 2022. 9. 29.
이펙트 응용편 - 서치 오번째 검색 이펙트 이번 이펙트는 별점이 있으며 별점을 누르면 속성을 볼수있습니다. JS코드 객체에 star 을 추가하고 switch문을 이용하여 별을 넣어줬습니다만, 별이들어있는 ul 태그안에 클래스 star 을 주어 li 순번과 data.star 이 일치하면 li안에있는 텍스트를 불러와서 넣어주기로 했습니다 그후 click 이벤트에서 star.innerText.slice(0, 1); 을 이용하여 n개 이상인것을 출력하게 했습니다. 코드 보기 { star: 1, name: "visibility", desc: "태그의 가시성을 결정합니다." }, const updateList = (list) => { listCSS = ""; for (const data of list) { let starCount = searc.. 2022. 9. 29.
이펙트 응용편 - 페럴럭스 육번째 페럴럭스 이펙트6 이번 페럴럭스 이펙트는 사이드 메뉴의 버튼을 클릭하면 해당하는 섹션으로 이동하며, 해당하는 섹션의 위치에 도달하면 버튼의 모양이 바뀜니다. js 코드 설명 글자 하나하나마다 효과를주기위해서 split를 이용하여 자르고 join을 이용하여 span 태그를 주었습니다. 스크롤시 해당하는 위치값이 되면 애니메이션 효과를주기위해 item.querySelector(`.split span:nth-child(${index + 1})`).style.transitionDelay = `${index * 100}ms`; 이용했습니다. //글씨 나누기 document.querySelectorAll(".split").forEach((text) => { let splitText = text.innerText; .. 2022. 9. 29.
이펙트 응용편 - 마우스 육번째 마우스 이펙트6 이번 이펙트는 마우스가 움직일때 글씨가 움직입니다. JS 설명 gsap를 이용한 애니메이션을 구성하였으며 positionSlow, positionFast는 현재 마우스 커서의 위치값 - 브라우저의 위치값 으로 구했습니다. 코드 보기 const mouseMove = (e) => { let positionSlow = (e.pageX - window.innerWidth / 2) * 0.1; let positionFast = (e.pageX - window.innerWidth / 2) * 0.2; gsap.to(".spanSlow", { duration: 0.4, x: positionSlow }); gsap.to(".spanFast", { duration: 0.4, x: -positionFast.. 2022. 9. 29.
배열 메서드 응용 배열 매서드 응용! 배열 매서드를 응용 해보았습니다. 배열 [100, 200, 300, 400, 500, 600, 700, 800, 900] 을 이용하여, 400,500만 출력되게 해보았습니다. 매서드 응용 const number = [100, 200, 300, 400, 500, 600, 700, 800, 900]; const result1 = number.slice(3, 5).join(","); console.log(result1); 결과 확인하기 const number2 = [100, 200, 300, 400, 500, 600, 700, 800, 900]; const result2 = number2.splice(3, 2).join(","); console.log(result2); 결과 확인하기 con.. 2022. 9. 28.
728x90
반응형

자바스크립트 사진

JavaScript

자세히보기