나의 코딩 기록

코딩을 기록하는 공간

코딩 기록/코딩 소스 [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.

코딩 기록/코딩 소스 [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.

코딩 기록/코딩 소스 [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.

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

See the Pen 자바스크립트 header gnb 탑메뉴 예제 3 (PC & 모바일) by kimyangsun (@kimyangsun) on CodePen. https://codepen.io/kimyangsun/pen/YzjJgLL 자바스크립트 header gnb 탑메뉴 예제 3 (PC & 모바일) ... codepen.io 자바스크립트 header gnb 탑메뉴 예제 3 (PC & 모바일) 코드펜 소스입니다. 저번에 두번째 예제까지 올리고 나서 생각해보니까 또 다른 자주 쓰이는 방식을 깜빡해서 예제 샘플을 하나 더 만들었습니다 :) 예제 1 처럼 2차 메뉴까지 보여주는데 이건 한번에 보여주는게 아닌 각각 해당하는 1차 메뉴에 대한 2차 메뉴만 보여주는 방식입니다. "use strict"; // 헤더..

2023. 2. 1.

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

See the Pen header gnb 탑메뉴 예제 2 (자체 커스텀 코드) by kimyangsun (@kimyangsun) on CodePen. https://codepen.io/kimyangsun/pen/XWZdPbL 자바스크립트 header gnb 탑메뉴 예제 2 (PC & 모바일) ... codepen.io 자바스크립트 header gnb 탑메뉴 예제 2 (PC & 모바일) 코드펜 소스코드입니다. 이것도 탑메뉴 중에서 자주 쓰이는 형태중 하나입니다. 이건 3차메뉴까지 존재하는 경우인데 이런형식으로 작업하기에 예제를 만들어두면 좋을거 같아서 코드를 짰습니다. 물론 웹접근성도 준수하는 코드로 제작하였습니다. (ex : 키보드 접근성) 이 형태는 3차메뉴까지 보여줘야 하기에 반응형 1240px 에서..

2023. 1. 28.