코린이 공부장

Slider Effect4 이번에는 슬라이드 효과가 연속적으로 부드럽게 넘겨지도록 만들어보겠습니다. 코드블럭 Javascript Slider Effect04 슬라이드 이펙트: 좌로 움직이기(연속적으로) 1 2 3 4 5 6 lee3ll@naver.com 보충설명 ✨ HTML 문서 내 ".slider__wrap" 클래스를 가진 요소를 선택하여 sliderWrap 변수에 할당하고, 이하 동일한 방식으로 필요한 요소들을 선택하여 변수에 할당합니다. ✨ 슬라이더의 동작을 제어하는 함수인 sliderEffect() 함수를 선언합니다. 이 함수는 현재 이미지 인덱스currentIndex를 1 증가시키고, 선택된 이미지의 영역sliderInner에 대해 translateX() 속성을 이용하여 이동합니다. ✨ 조건문에..

Slider Effect만들기3 이번엔 Slider Effect2와 다르게 세로로 슬라이드효과를 주도록 만들어 보겠습니다. 코드블럭 Javascript Slider Effect02 슬라이드 이펙트: 좌로 움직이기 1 2 3 4 5 6 lee3ll@naver.com 보충설명 ✨ sliderInner 요소에 transition 속성을 설정하여 슬라이더가 움직일 때 애니메이션 효과가 부드럽게 적용되도록 합니다. 이 속성을 이용하여 슬라이더 이미지가 이동할 때 전환 효과가 적용되며, 0.6s 시간 동안 애니메이션 효과가 지속됩니다. ✨ setInterval() 함수를 사용하여 일정한 시간 간격으로 이미지를 변경하도록 합니다. ✨ 이미지를 변경하기 위해서는 currentIndex 값을 업데이트하고, 이를 이용하여..

Slider Effect 만들기2 Slider Effect1 페이지와 다르게 2페이지에서는 다음 프레임과 같이 옆으로 슬라이드 됩니다. 또한 효과를 주어 보다더 부드러움 넘김을 보여주도록 만들어 보겠습니다. 코드블럭 Javascript Slider Effect02 슬라이드 이펙트: 좌로 움직이기 1 2 3 4 5 6 lee3ll@naver.com 보충설명 ✨ 선택자를 사용하여 변수에 요소를 할당해 줍니다. ✨ sliderInner라는 변수를 사용하여 HTML 문서 내에서 이미지 슬라이드쇼의 이미지를 감싸고 있는 요소를 찾아 할당합니다. 그리고, transition 속성을 이용하여 이미지 전환 시간을 0.6초로 설정합니다. ✨ slidereffect1과 같이 setInterval 함수를 사용하여 일정한 시..

sliderEffect 만들기 다음 프레임과 같이 이미지가 슬라이드되어 다음이미지를 나타내는 효과를 만들어 보겠습니다. 코드블럭 Javascript Slider Effect01 슬라이드 이펙트 1 2 3 4 5 6 lee3ll@naver.com 보충설명 ✨ querySelector 메서드를 사용하여 sliderWrap, sliderImg 변수에 요소를 할당하여 선택자를 만들어 줍니다. ✨ 또한, querySelectorAll 메서드를 사용하여 HTML 문서 내에서 클래스 이름이 slider인 모든 요소를 slider 변수에 할당합니다. ✨ 현재 보이는 이미지를 나타내기 위해 currentIndex 변수를 0으로 설정하여줍니다. ✨ 이미지 갯수를 나타내기 위해 sliderCount 변수에 slider.le..

01. 결괏값을 작성하시오. { let num = 0; while(false){ num++; if( num == 3 ){ continue; } if( num > 10 ){ break; } } console.log(num); } 📝정답 0 🖋 false값이기 때문에 while문은 실행되지 않으므로 num은 그대로 0입니다. 02. 결괏값을 작성하시오. { let a = 6, b = 9, c = 3, result; result = ++a + b++ + ++c; console.log(result); console.log(a+b+c); } 📝정답 20 21 03. 결괏값을 작성하시오. { function func(){ let a = []; for(i=1; i23 은 거짓이기 때문에 else return 값으로 ..

마우스 오버하면 이미지 바뀌는 효과 코드블럭 보충설명 addEventListener를 이용하여 mouseover (마우스를 올렸을때)와 mouseout(마우스를 뺏을때) 효과를 넣어 이미지가 바뀌는 효과를 줍니다. img는 container박스를 만들어 margin 0 auto CSS를 적용해 이미지가 가운데 오게 해줍니다. 클릭하면 사이드 메뉴 나오기 코드블럭 aaa; Javascript Typescript Node.js close 보충설명 버튼을 클릭하면 메뉴가 나오도록 하는 코드입니다. 변수를 선언한 후 addEventListener("click", () => { })를 입력해 버튼을 클리하면 Btn과 Nav요소에 active 클래스가 추가됩니다.

문자열에 접근 자바스크립트에서는 간단한 텍스트를 처리하기 위해 문자열 유형을 자주 사용한다. 원시 유형과 객체 원시유형: 자바스크립트의 기본 데이터 유형으로, 숫자, 문자열, 불리언(참 또는 거짓), null, undefined 프로퍼티: 객체에서 데이터를 저장하는데 사용되는 변수. 이름과 값을 가지며 객체의 이름을 키 또는 속성이라고도 부른다. 값만 가지고 있을 경우 원시유형, 프로퍼티와 메서드르르 가지고 있을 때는 객체라고 하지만 자바스크립트에서는 원시 유형이어도 프로퍼티와 메서드를 사용할 수 있다. ex) let str = "hello" str.length //5 래퍼 객체(wrapper object) : 자바스크립트에서 number, boolean, string유형은 별도로 프로토타입객체가 만들어..

Search Effect page 만들기 다음 프레임과 같이 검색하여 매치되는 단어가 나타나는 페이지를 만들어 보겠습니다. 코드블럭 1 2 3 4 5 6 자바스크립트 자바스크립트 검색하기 indexOf() / search() 검색하기 CSS 속성 갯수 : 0개 align-contetnt : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다. align-items : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다. align-self : 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다. all : 요소의 속성을 초기화 또는 상속을 설정합니다. animation : 애니메이션과 관련된 속성을 일괄적으로 설정합니다. animation-delay : 애니메이션 지연 시간을 설정합니다. animation-d..

MouseEffect 만들기 GSAP를 이용하여 마우스커서에 라이브러리를 넣어주어 조명효과를 구현해 보겠습니다. 코드블럭 Javascript Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 6 In youth we learn, in age we understand. 우리는 젊을 때에 배우고 나이가 들어서 이해한다. lee3ll@naver.com 보충설명 🎈 document.querySelector()를 사용하여 선택자를 만들어줍니다. 선택자는".mouse__cursor"에서 정보를 가져옵니다. 🎈 getBoundingClientRect() 메서드는 DOM 요소의 크기와 위치 정보를 제공하는 메서드입니다. 이 메서드를 사용하면, 주어진 요소의 경계 상자에 대한 정보를 반환할..

Mouse Effect 만들기 다음 프레임과 같이 구역별로 마우스 커서에 이벤트효과를 넣어서 만들어 보겠습니다. 코드블럭 Javascript Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 6 Don't let yesterday take up too much of today. 어제가 오늘을 너무 많이 차지하게 하지 마세요. lee3ll@naver.com 보충설명 🎈마우스 커서효과의 움직임을 더 부드럽게 해주기 위해 GSAP를 사용하였습니다. GSAP는 GreenSock에서 만든 자바스크립트 애니메이션 라이브러리 입니다. CSS로 애니메이션 효과를 만들어 주었지만 보다 복잡한 애니메이션과 매끄러운 퍼포먼스를 구현하기 위해서 GSAP를 도구로 사용합니다. 🎈커서에 좌푯값을 할..