웹(Web)20 버튼을 누르면 컨텐츠 위치로 이동 구현(가로, 세로) X축 이동 See the Pen Untitled by JENIJUNO (@JENNIEJUNO) on CodePen. Y축 이동 See the Pen Untitled by JENIJUNO (@JENNIEJUNO) on CodePen. 2023. 12. 28. 가로스크롤 구현 HTML temp를 만들어 놓은 이유는 가로 스크롤이 끝난 뒤에도 스크롤을 계속 했을경우 자동으로 세로 스크롤이 작동하는지 보기 위해서 이다. CSS SCRIPT preventDefault(): 가로 스크롤이 작동 할 경우 세로 스크롤이 동시에 작동되는것을 방지 x = box.clientWidth === box.scrollLeft: 스크롤 바가 오른쪽 끝에 도달했는지 확인 deltaY값은 마우스 휠이 위로 향할 경우 음수를, 아래로 향할 경우 양수를 반환하기 때문에 box.scrollLeft 에 더해 줌으로서 왼쪽과 오른쪽 으로 스크롤 방향을 정할 수 있다. 이후 가로스크롤이 끝에 도달하고 그 방향으로 계속해서 스크롤을 할 경우 if문에 맞지 않으므로 자동으로 세로스크롤로 넘어간다. 2023. 12. 27. 버튼을 누르면 가로로 넘어가는 컨텐츠 만들기 다양한 웹 페이지를 보다보면 작은 버튼을 누르면 가로로 이미지가 넘어가는 요소들이 있는데 꼭 필요한 기능인것 같아 만들어 보았다. 간단하게 3개의 요소안에 요소 3개를 넣어 이미지처럼 해 놓았다. for문을 사용하여 해당 버튼에 맞는 요소의 width를 500px로 만들고 나머지 요소의 width를 0px로 만들었다. 2023. 12. 22. 유튜브 벤치마킹 반응형으로 만들어 보기 스스로 처음으로 만들어 볼 벤치마킹 사이트로 유튜브 만들기에 도전해 봤다. 처음엔 실제로 유튜브 영상들을 하나하나 링크를 걸어서 만들었는데 렉이 너무 걸려서 다양한 영상이 있는 것처럼 보이게 하기 위해 박스를 무지개 색으로 나열하였고 hover 이벤트로 마우스를 가져다 놓으면 박스 모양이 변하도록 하여 재생이 될 것처럼 만들어 보았다. (두번째 박스에 마우스를 hover시) 유튜브를 보면 스크롤을 내릴시 끝없이 계속 영상이 나오는데 이걸 재현하기 위해 스크롤을 내리면 새로운 박스 6개를 생성 되도록 만들었다. y = 수직 스크롤바 위치, max_heihgt = 윈도우의 높이, fullheight = body의 전체 요소의 길이 를 계산해서 수직 스크롤바 위치 + 윈도우의 높이가 body의 전체 요소길이 .. 2023. 10. 19. 이전 1 2 3 4 5 다음
