반응형 JAVASCRIPT42 패럴랙스 이펙트(Parallax Effect) : 가로 효과, 세로/가로 효과 패럴랙스 이펙트(Parallax Effect) : 가로 효과, 세로/가로 효과 수업 시간에 배운 내용을 복습하면서 해보겠습니다. 가로 효과 코드 보기: HTML, JAVASCRIPT / CSS1 / CSS2 / 완성화면 코드 블럭 Javascript parallax Effect09 패럴랙스 이펙트 : 가로/세로 효과 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 구성 header 태그를 사용해서 제목과 목록을 태그를 사용해 각각 만들어줍니다. nav 태그를 사용해서 메뉴 목록을 태그를 사용해서 만들어줍니다. main 태그를 사용해서 구역 안에 section 태그를 사용해서 각각 알맞는 구성의 태그와 텍스트를 입력해줍니다... 2023. 5. 31. 패럴랙스 이펙트(Parallax Effect) : 리빌 효과 패럴랙스 이펙트(Parallax Effect) : 리빌 효과 수업 시간에 배운 내용을 복습하면서 해보겠습니다. 코드 보기(HTML, JAVASCRIPT / CSS1 / CSS2) / 완성화면 코드 블럭 Javascript parallax Effect07 패럴랙스 이펙트 : 리빌 효과 1 2 3 4 5 6 7 01 Section01 삶이 있는 한 희망은 있다. 02 Section02 산다는것 그것은 치열한 전투이다. 03 Section03 언제나 현재에 집중할수 있다면 행복할것이다. 04 Section04 신은 용기있는자를 결코 버리지 않는다. 05 Section05 먼저 자신을 비웃어라. 다른 사람이 당신을 비웃기 전에 06 Section06 한번의 실패와 영원한 실패를 혼동하지 마라. 07 Sectio.. 2023. 5. 17. 메인 페이지 인덱스 꾸미기 메인 페이지 인덱스 꾸미기 제 공부 메인 페이지 입니다. https://dongjin6539.github.io/web2023/ 기존에 공부하기 전에 받았던 페이지를 자신의 것으로 수정해봤습니다!!! 기존 페이지 색상 바꾸기 먼저 해당 부분에 코드 구성이 어떻게 되어있는지 확인을 해봐야합니다. 그러기 위해서 오른쪽 마우스 버튼를 누르면 검사가 나옵니다. 그것을 클릭해봅니다. 단축키는 F12입니다. 나오면 위와 같은 순서대로 해봅니다. 1번처럼 해당 버튼을 클릭하면 화면의 부분을 클릭할 수 있습니다. 2번처럼 화면에 알고 싶은 부분을 클릭을 해봅니다. 그러면 해당 부분의 코드가 나오고 밑에 css가 어떻게 되어있는지 나옵니다. 3번처럼 해당 부분의 css를 확인하고 3번의 오른쪽 위에 부분을 보시면 해당 폴.. 2023. 5. 7. 자바스크립트 게임 이펙트01 : 음악 효과(2) 자바스크립트 게임 이펙트01 : 음악 효과(2) 수업 시간에 배운 내용을 복습하면서 해보겠습니다. 반복(한곡 반복, 랜덤 반복, 전체 반복), 뮤직 리스트에 대한 자바스크립트를 추가했습니다. 코드 보기(HTML, JAVASCRIPT / CSS1 / CSS2 / MUSIC.CSS / JS) / 완성화면 반복(한곡 반복, 랜덤 반복, 전체 반복) JAVASCRIPT // 반복 버튼 클릭 musicRepeat.addEventListener("click", () => { let getAttr = musicRepeat.getAttribute("class"); switch(getAttr){ case "repeat" : musicRepeat.setAttribute("class", "repeat_one"); music.. 2023. 5. 5. 자바스크립트 콜백 지옥 해결 : GSAP 라이브러리 자바스크립트 콜백 지옥 해결 : GSAP 라이브러리 길라잡이 https://dongjin6539.tistory.com/101 콜백 함수 블로그에서 확인 할 수 있는 콜백 지옥을 해결하기 위해 GSAP 라이브러리를 사용해서 가성이 좋도록 해결할 수 있습니다. 콜백 함수를 해결하려는 이유는 콜백 함수를 중첩해서 사용하면서 코드가 복잡해지고 가독성이 떨어지는 현상을 말합니다. 비동기적으로 수행되는 작업이 많아지면서 콜백 함수가 중첩되어 사용되면서 코드가 복잡해지고, 디버깅이 어려워지고, 유지보수가 어려워지는 문제점이 발생하기 때문입니다. 예시 코드 구성 DJ's PORTFOLIO work about let's introduce frontend developer's all works of portfolio do.. 2023. 5. 4. 자바스크립트 함수 : 콜백(callback) 함수 자바스크립트 함수 : 콜백(callback) 함수 콜백(callback) 함수란? 콜백(Callback) 함수는 간단히 말하면 매개변수로 함수 객체를 전달해서 호출 함수 내에서 매개변수 함수를 실행하는 것을 말한다. 즉, 콜백 함수란 파라미터로 일반적인 변수나 값을 전달하는 것이 아닌 함수 자체를 전달하는 것을 말한다고 보면 된다. 또한 어차피 매개변수에 함수를 전달해 일회용으로 사용하기 때문에 굳이 함수의 이름을 명시할 필요가 없어 보통 콜백 함수 형태로 함수를 넘겨줄때 함수의 이름이 없는 '익명 함수' 형태로 넣어주게 된다. 콜백 함수는 비동기적인 상황에서 특히 유용합니다. 예를 들어, 서버에서 데이터를 가져와서 처리하는 경우, 서버로부터 데이터를 가져오는 데 시간이 걸리기 때문에 콜백 함수를 사용하.. 2023. 5. 3. 이전 1 2 3 4 ··· 7 다음 반응형
