나의 코딩 기록

코딩을 기록하는 공간

코딩 기록/코딩 소스 [HTML & CSS & JS]

자바스크립트 전광판 기능 - Marquee 효과 커스텀 (Vanilla JS Marquee) 예제입니다. 함수로 짜서 파라미터에 인자를 넣어서 사용할 수 있도록 만들었습니다. See the Pen 바닐라 자바스크립트 Marquee 효과 (Vanilla JS Marquee) by kimyangsun (@kimyangsun) on CodePen. // Marquee 커스텀 함수 : 파라미터는 (선택자, 속도, 방향전환 여부) function Marquee(selector, speed, reverse) { const parentSelector = document.querySelector(selector); // 클래스명을 인자로 받은 매개변수 const clone = parentSelector.innerHTM..

2023. 8. 8.

코딩 기록/자바스크립트

자바스크립트 여러가지 종류의 좌표 찾기 (Vanilla JavaScript Coordinates) 입니다. 자바스크립트에서 좌표의 종류는 크게 4가지로 분류됩니다. 1. screenX, screenY 사용자의 모니터 화면을 기준으로 한 좌표를 표시 사용자의 모니터의 왼쪽 상단 모서리가 (0, 0) 2. pageX, pageY 브라우저 전체 페이지를 기준으로 좌표를 표시 가로나 세로 스크롤이 생기는 경우 스크롤이 될때마다 해당 pageX, pageY의 좌표값은 변경 3. clientX, clientY 브라우저에서 사용자에게 웹페이지가 보여지는 영역을 기준으로 좌표를 표시 스크롤바가 움직여도, 특정 지점의 clientX, clientY의 값은 동일 4. offsetX, offsetY 좌표를 출력하도록 하는 ..

2023. 8. 8.

코딩 기록/코딩 소스 [HTML & CSS & JS]

바닐라 자바스크립트 D-day 계산 (Vanilla JS D-day) 코드입니다. 자세한 코드는 하단의 코드펜 소스로 확인하시면 됩니다. :) See the Pen 바닐라 자바스크립트 D-day 계산 (Vanilla JS D-day) by kimyangsun (@kimyangsun) on CodePen.

2023. 8. 8.

코딩 기록/코딩 소스 [HTML & CSS & JS]

스크롤트리거 예제 + 부드러운 스크롤 (ScrollTrigger Smooth Scroll (locomotive-scroll) ) 입니다. 스크롤트리거는 정말 자주 쓰이는데 그때 부드러운 스크롤 효과와 함께 사용할 경우 locomotive-scroll.js 와 함께 사용하면 편합니다. 하단에 스크롤트리거를 이용한 애니메이션 예제와 부드러운 스크롤 효과를 함께준 코드가 있습니다. :) ※ 하단의 코드펜 아이프레임에서 스크롤할때 블로그 페이지 스크롤과 함께 작동하는 오류가 있습니다. 예제를 정확히 확인하시려면 코드펜 로고를 눌러 새창으로 열고 확인해주시면 됩니다. See the Pen GSAP 스크롤트리거 부드러운 스크롤 (ScrollTrigger Smooth locoScroll) by kimyangsun (..

2023. 8. 8.

코딩 기록/자바스크립트

자바스크립트 - PC, 모바일 (아이폰 ios, 안드로이드) 기기 환경 구분 특정 상황에 기기 환경이 pc인지, 모바일인지, 모바일이면 ios 환경인지 안드로이드 환경인지 구분해주는 코드입니다. navigator.userAgent 를 이용하여 구분해줍니다. 자세한 코드는 하단 코드펜을 참고하시면 됩니다. See the Pen 자바스크립트 - PC, 모바일 (아이폰 ios, 안드로이드) 기기 환경 구분 체크 by kimyangsun (@kimyangsun) on CodePen.

2023. 8. 7.

코딩 기록/코딩 소스 [HTML & CSS & JS]

input type text 휴대전화 번호 양식, 날짜 양식에 맞게 작성하는 스크립트 입니다. 생각보다 필요한 상황이 종종 있어서 작성해둡니다. 정규표현식으로 숫자 외에 다른 문자, 글자들을 입력시 제거하는 코드를 넣었고, 각각에 올바른 위치에 - (하이픈, 대시)를 추가하는 코드, 마지막으로 입려값을 업데이트하는 코드를 넣었습니다. 자세한 코드는 아래 코드펜에서 확인 가능합니다. See the Pen input type text 휴대전화 번호 양식, 날짜 양식에 맞게 작성하는 스크립트 by kimyangsun (@kimyangsun) on CodePen.

2023. 8. 7.

코딩 기록/코딩 소스 [HTML & CSS & JS]

보통 웹사이트에서 자주 사용하는 3가지 타입의 상단 헤더 기능입니다. 저번에 제이쿼리를 이용해서 만든 코드를 업로드했는데, 상황에 따라 제이쿼리 없이 자바스크립트 만으로도 작업이 필요한 경우가 있는 경우도 많아 만들어 봤습니다. :) 예제 1 See the Pen 자바스크립트 header gnb 탑메뉴 예제 1 (PC & 모바일) with Vanilla JS by kimyangsun (@kimyangsun) on CodePen. https://codepen.io/kimyangsun/pen/WNaOyKJ 자바스크립트 header gnb 탑메뉴 예제 1 (PC & 모바일) 코드펜 소스코드입니다. 탑메뉴 중에서도 자주 쓰이는 형태인데 2차메뉴까지 존재하는 경우 대부분 이런형식으로 작업하기에 예제를 만들어두면 ..

2023. 5. 2.

코딩 기록/코딩 소스 [HTML & CSS & JS]

See the Pen 자바스크립트 Input type File 파일명, 확장자만 나오게 커스텀 by kimyangsun (@kimyangsun) on CodePen. 자바스크립트 Input type File 파일명, 확장자만 나오게 커스텀한 코드 예제입니다. 파일 업로드를 누르면 파일을 첨부하는 창이 뜨고 파일을 선택하고 업로드시 파일명과 확장자까지만 표시되도록 작업한 코드입니다. 일반적인 input type="file"은 현재 파일의 경로까지 쭉 보여지는데 때에 따라서 파일명과 확장자만 표시되도록 하고 싶을때 사용하면 될 것 같습니다. :) ▶HTML 파일업로드 ▶CSS input { -webkit-border-radius: 0; border-radius: 0; -webkit-appearance: no..

2023. 3. 29.

코딩 기록/코딩 소스 [HTML & CSS & JS]

See the Pen 자바스크립트 셀렉트박스 드롭다운 기능 (Javascript Selectbox Dropdown) by kimyangsun (@kimyangsun) on CodePen. 자바스크립트 제이쿼리 셀렉트 박스 드롭다운 기능 (Javascript Selectbox Dropdown) 퍼블리싱 소스입니다. 보통 셀렉트 박스를 css로만 커스텀하기에는 한계가 있습니다. 그래서 자바스크립트로 저런식으로 작업하는 경우가 많아요. 추가로 드롭다운 열리고 드롭다운 메뉴가 아닌 다른곳을 클릭했을때 드롭다운이 닫히는 기능도 넣어뒀습니다. 코드펜으로 살펴보시면 이해가 빠르게 되실거라 생각해요. :) // 드롭다운 (공통) let dropdownLabel = $('.dropdown .dropdown-label')..

2023. 2. 16.