100S00

Javasrcipt parallax Effect08 패럴럭스 이펙트 : 가로 세로 효과 1 2 3 4 5 6 7 8 9 01 02 03 04-1 04-2 04-3 05 06 07 08 09 scrollTop : 0px 가로 슬라이드를 시작해주고 싶은 부분의 섹션 안 쪽에 섹션을 3개 더 만들어줍니다. #section4 { background-color: #444; height: 400vh; z-index: 4000; } #section4 .sec4 { position: fixed; left: 0; top: 0; width: 400vh; height: 100%; display: flex; } #section4 .sec4 article { width: 200vh; height: 100vh; position:..

가로 패럴럭스효과 Javasrcipt parallax Effect08 패럴럭스 이펙트 : 가로효과 1 2 3 4 5 6 7 8 9 01 02 03 04 05 06 07 08 09 scrollTop : 0px 기존 있던 세로형식의 사이트를 스크롤을 내리면 가로로 넘어가게 해주는 효과이다. 기존코드에서 .parallaxs__wrap { position: fixed; left: 0; top: 0; display: flex; parallaxs__wrap에 display: flex를 주어 하위요소인 .parallaxs__item를 가로로 정렬시킵니다. scroll이라는 함수는 스크롤 이벤트 핸들러로 사용될 것을 나타냅니다. parallaxCont는 .parallaxs__wrap 클래스를 가진 요소의 참조를 할당받..

문자열 메서드 01. 문자열 메서드 : at() "문자열".at() 문자열에서 지정된 인덱스에 있는 문자를 반환합니다. 인덱스가 음수이면 문자열의 끝에서부터 거꾸로 인덱싱됩니다. const str = 'hello'; console.log(str.at(1)); // 'e' console.log(str.at(-1)); // 'o' 02. 문자열 메서드 : charAt() "문자열".charAt() 문자열에서 지정된 인덱스에 있는 문자를 반환합니다. 인덱스가 문자열의 길이보다 크거나 같으면 빈 문자열을 반환합니다. const str = 'hello'; console.log(str.at(1)); // 'e' console.log(str.at(-1)); // 'o' 03. 문자열 메서드 : charCodeAt()..

JAVASCRIPT 데이터 불러오기 01.변수 : 데이터 불러오기 변수안에 저장된 데이터 불러오는 방법. let x = 100, y = 200, z = "javascript"; console.log(x, y, z); 결과 값 : 100 200 javascript 02. 상수 : 데이터 불러오기 상수안에 저장된 데이터 불러오는 방법 const x= 100, y = 200, z = "javascript"; console.log(x, y, z); 결과 값 : 100 200 javascript 03. 배열 : 데이터 불러오기 배열 안에 저장된 데이터 불러오는 방법 const arr = [100,200,"javascript"]; console.log(arr[0]); console.log(arr[1]); conso..

0, 양수, 음수 구별 프로그램 자바스크립트를 이용하여 입력된 숫자가 양수인지, 음수인지, 또는 0인지 구분하는 예제 코드입니다. 이 코드는 prompt 함수를 이용하여 사용자로부터 숫자를 입력받습니다. 그리고 if/else 문을 이용하여 입력된 숫자가 양수인지, 음수인지, 또는 0인지를 판별하여 결과를 콘솔에 출력합니다. See the Pen Untitled by hyeonbeen97 (@hyeonbeen97) on CodePen. 두 수의 최대 공약수 구하기 function getGCD(a, b) { while (b !== 0) { let r = a % b; a = b; b = r; } return a; } let result = getGCD(234, 261); console.log(result); ..

데이터 제어하기 01. if문 if문은 조건에 따라 실행될 코드 블록을 결정하는 제어 구조입니다. if(""){ document.write("실행되었습니다.(true)") } else { document.write("실행되었습니다.(true)") } 02. if문 생략 위 if문을 아래 if문으로 생략하여 쓸수있다. const num = 100; if(num) { document.write("실행되었습니다.(true)") } else { document.write("실행되었습니다.(false)"); } if(num) document.write("실행되었습니다.(true)"); else document.write("실행되었습니다.(false)") 03. if문 삼항연산자 위의 코드와 아래 코드는 같지만 더..

함수 함수는 일련의 작업을 수행하는 코드 블록입니다. 함수는 재사용 가능한 코드를 작성하고, 코드를 구조화하며, 코드의 중복을 줄일 수 있습니다. 함수는 다양한 방법으로 선언할 수 있으며, 함수를 호출하여 코드 블록을 실행할 수 있습니다. 선언적 함수 선언적 함수는 function 키워드와 함수 이름을 사용하여 선언됩니다. function func(){ document.write("실행되었습니다. ") } func(); 익명 함수 익명 함수는 함수 이름 대신 변수에 함수를 할당하는 방식으로 작성됩니다. 이러한 함수는 일회성으로 사용되는 경우에 유용합니다. const func=function(){ document.write("실행되었습니다.! ") } func(); 매개변수 함수를 호출할 떄 전달하는 변수..

마무리 예제 따라하기 마무리 예제 1 const arr 에 있는 배열을 for문을 이용하여 반복 시키고 if문으로 10보다 큰 값이라는 조건을 부여한다. const arr = [1,3,5,7,9,11,13,15,17,19] //배열을 아용하여 숫자를 저장한다. for(i=0 ; i 10) //if문으로 예제에 맞는 조건을 추가한다. document.write(arr) //결과 값 출력. } 마무리 예제 2 prompt() 함수는 사용자에게 윈도우 창을 띄워 데이터를 입력받을 수 있는 함수입니다. for문을 이용해 입력한 값이 조건에 맞으면 그 조건까지 계속 출력시키지만 if문으로 짝수만 출력하게 설정합니다. 그 후 sum 은 1부터 i를 더한 값이 나오도록 합니다. See the Pen Untitled ..

데이터 저장하기 01. 변수 : 데이터 저장 변수는 데이터를 저장하는 저장소입니다. var x = 100; //변수 X에 숫자 100을 저장함 var y = 200; //변수 y에 숫자 200을 저정함 var z = "javascript"; //변수 z에 문자 "javascript"를 저장함 console.log(x); console.log(y); console.log(z); 결과 값 100 200 "javascript" 02. 변수 : 데이터 저장 + 데이터 변경 변수는 데이터를 저장 할수도 있지만 변경도 가능하다. let x = 100; let y = 200; let z = "javascript"; x = 300; y = 200; z = "react"; console.log(x); console.lo..

조건문 if문 자바스크립트에서는 if문을 사용하여 조건문을 작성할 수 있습니다. 기본적인 if-else문의 형태는 아래와 같습니다. if (조건식) { // 조건식이 참일 경우 실행되는 코드 블록 } else { // 조건식이 거짓일 경우 실행되는 코드 블록 } 또한, else if문을 사용하여 여러 개의 조건식을 체크할 수 있습니다. if (조건식1) { // 조건식1이 참일 경우 실행되는 코드 블록 } else if (조건식2) { // 조건식1이 거짓이고, 조건식2가 참일 경우 실행되는 코드 블록 } else { // 조건식1과 조건식2가 모두 거짓일 경우 실행되는 코드 블록 } 위 예제의 코드는 사용자가 입력한 값에 따라 다른 결과를 출력하는 예제입니다. 입력한 값이 100일 경우 "당신은 백점짜..