SMALL 프론트엔드 개발자80 자바스크립트 javascript 5스크롤이벤트window --> scroll /// 스크롤이벤트 window --> scroll window.addEventListener('scroll',function() { 실행코드; }); * { margin:0; padding:0; box-sizing: border-box; } header { width: 100%; height: 150px; background-color: rgba(0,0,0,.5); font-size: 70px; text-align: center; position: fixed; left:0; top:0; } header.active { background-color: #f00; } main { width: 1000px; height: 3000px; background-color: #fc0; font-size: 300.. 2023. 4. 4. Html Css 애니메이션 사용하기 움직이는 동작법 완벽정리!!! // css keyframe rule key + frame css keyframe사용하기 1)ketframe rule 정의하기 - 애니메이션정의 @ketframes 애니메이션이름 { } 2)키프레임 정의하기 애니메이션 패턴을 작성 - % 0 ~ 100% 범위안에서 작성 - from, to을 이용하여 작성 @keyframe 애니메이션이름 { 0% { width:100px; } 50% { width:100px; } 100% { width:100px; } } 3) 선택자에서 정의한 애니메이션이름을 호출 애니메이션을 적용하고 싶은 요소에서 애니를 호출 animation-name : 애니메이션이름 animation-duration: 애니메이션 지속시간 animation-iteration-count: 반복횟수 무한.. 2023. 3. 31. 자바스크립트 javascript 4. forEach ///forEach() ---> 배열의 각요소에 함수를 한번씩 실행. 형식> 배열데이터 3개 있을경우 배열요소.forEach(funciton(매개변수1, 매개변수2, 매개변수3){ 실행코드 }); 배열0. 실행코드 배열1. 실행코드 배열2. 실행코드 매개변수1 = element 매개변수2 = index 매개변수3 = array 매개변수명은 사용자가 임의로 작성가능 ,매개변수 순서는 변경X element = e index = i array = arr forEach(funciton(e,i,ar){ }) DOCTYPE html> Document * { margin:0; padding:0; } .box, .box1 { width: 100px; height: 100px; background-color: #f00;.. 2023. 3. 31. 자바스크립트 javascript 3. 함수, 함수선언 , 매개변수 를 활용하여 이벤트 사용하기(3) 이벤트사용하기 DOCTYPE html> Document .tit { border: 2px solid #fc0; font-size: 30px; } .txt { height: 100px; font-size: 50px; background-color: aquamarine; } .tit1.active{ background-color: #f00; } .tit2.active{ background-color: rgb(20, 9, 124); } .tit3.active{ background-color: rgb(76, 192, 30); } 제목1 내용1 제목2 내용2 제목3 내용3 // for 반복문 /* for(초기값 설정; 조건설정; 증감식) { 실행코드 } */ // 1부터 10까지 콘솔창에 출력하기 for(let i =1;i <.. 2023. 3. 31. 이전 1 ··· 6 7 8 9 10 11 12 ··· 20 다음 LIST
