나의 코딩 기록

코딩을 기록하는 공간

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

See the Pen header gnb 탑메뉴 예제 1 (자체 커스텀 코드) by kimyangsun (@kimyangsun) on CodePen. https://codepen.io/kimyangsun/pen/BaYKPXm 자바스크립트 header gnb 탑메뉴 예제 1 (PC & 모바일) ... codepen.io 자바스크립트 header gnb 탑메뉴 예제 1 (PC & 모바일) 코드펜 소스코드입니다. 탑메뉴 중에서도 자주 쓰이는 형태인데 2차메뉴까지 존재하는 경우 대부분 이런형식으로 작업하기에 예제를 만들어두면 좋을거 같아서 코드를 짰습니다. 물론 웹접근성도 준수하는 코드로 제작하였습니다. (ex : 키보드 접근성) 모바일 메뉴도 작업해뒀기에 새창으로 들어가서 화면을 조절해가며 확인하면 될 거 같..

2023. 1. 28.

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

See the Pen video tag 동영상 재생 정지 상호작용 버튼 기능 (영상 여러개 적용 가능) by kimyangsun (@kimyangsun) on CodePen. 자바스크립트 제이쿼리 video 태그 동영상 재생 정지 상호작용 버튼 기능 코드펜 예제 소스코드입니다. 실무에서 작업하면서 이 기능은 기록해두는게 좋을거 같아서 저장해둔 소스인데 블로그에 올립니다. :) // 메타버스 콘텐츠 비디오 재생, 정지 let videoBox = $('.video-box'); let video = videoBox.find('video'); $('.video-box .video-buttons .play-button').on('click', function(){ var targetVideoBox = $(this..

2023. 1. 28.

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

See the Pen 모바일 사이드 바 예제 by kimyangsun (@kimyangsun) on CodePen. 자바스크립트 제이쿼리 모바일 사이드 메뉴 예제 (jQuery Mobile Sidebar) 코드펜 소스코드 입니다. 제가 옛날에 퍼블리싱 공부를 시작할때 차근차근 만들어본 모바일 메뉴 기능인데 오랜만에 이 코드들을 보니까 예전에 공부할때 생각이 나면서, 예전 코드들을 보니까 고쳐줘야할 부분들이 막 보이고 그러는거 같아요 ㅋㅋㅋ 사이드 메뉴 안에는 3차메뉴까지 모두 열리도록 작업이 되어 있습니다. 또 예전에 공부할때 짠 코드라 그런가 주석으로 자세하게 설명을 적어가면서 작업한게 보이네요. 요새는 이렇게까지 자세하게 주석을 남기진 않는거같아요... 초심을 찾아야 할 거 같습니다.. :) /* 토..

2023. 1. 28.

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

자바스크립트 제이쿼리 beforeAfter 이미지 slide 기능 예제 코드펜 소스코드입니다. 작업시 이러한 기능을 사용하는 페이지가 종종 들어오는데 그럴때 사용하면 유용합니다. See the Pen 자바스크립트 제이쿼리 beforeAfter 이미지 slide 기능 예제 by kimyangsun (@kimyangsun) on CodePen.

2023. 1. 28.

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

See the Pen jquery datetimepicker vs jquery-ui datepicker (날짜표시 기능 사용 예시) by kimyangsun (@kimyangsun) on CodePen. jquery datetimepicker vs jquery-ui datepicker (날짜표시 기능 사용 예시) 코드펜 소스코드입니다. input에 날짜를 표시하는 자바스크립트 제이쿼리 플러그인중에 가장 많이 쓰인다는 두가지를 각각 사용한 예제입니다. 각각 장단점이 있는거 같은데 기능은 비슷하니까 둘중 선택해서 사용하시면 좋을 거 같습니다. :) // 제이쿼리 datetimepicker $(function(){ $.datetimepicker.setLocale('kr'); $('.datetimepicker'..

2023. 1. 28.

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

See the Pen 아코디언 메뉴 자바스크립트 (커스텀 코드) by kimyangsun (@kimyangsun) on CodePen. 자바스크립트 제이쿼리 아코디언 메뉴 기능 예제 (JavaScript & jQuery Accordion menu) 코드펜 소스코드입니다. 여기서 특이한 점은 자바스크립트 코드를 보면 위에 있는 코드와 아래 주석해둔 코드가 있는데 내용은 똑같습니다. 차이점은 페이지 로드 후에 동적으로 아코디언 메뉴가 생성되는 경우에, 위에 있는 코드 대신 사용하는 코드입니다. (ex : 페이지 로드 후에 어떤 상호작용을 통해 데이터에서 새로운 아코디언 메뉴가 생성되는 경우 등..) // 아코디언 메뉴 (어떤 곳에서든 클래스명만 맞춰서 추가로 넣어주면 전부 적용됨 - 응용 편함) $(func..

2023. 1. 28.

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

See the Pen 탭 메뉴 자바스크립트 (커스텀 코드) by kimyangsun (@kimyangsun) on CodePen. 자바스크립트 제이쿼리 탭 메뉴 기능 예제 (JavaScript & jQuery Tab menu) 코드펜 소스코드입니다. html 구조와 data-num을 맞춰주고 탭버튼 ul에 tab-js를 넣고 tab-item, tab-contents, tab-inner 등 클래스만 맞춰주면 여러개를 사용하거나 탭 안에 다시 탭을 넣어도 전부 작동합니다. 여기서 특이한 점은 자바스크립트 코드를 보면 위에 있는 코드와 아래 주석해둔 코드가 있는데 내용은 똑같습니다. 차이점은 페이지 로드 후에 동적으로 탭이 생성되는 경우에, 위에 있는 코드 대신 사용하는 코드입니다. (ex : 페이지 로드 후..

2023. 1. 28.

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

See the Pen 자바스크립트 제이쿼리 자체제작 마우스 휠 슬라이드 심화 by kimyangsun (@kimyangsun) on CodePen. 자바스크립트 제이쿼리 슬라이더 - 마우스 휠 스크롤 기능 (JavaScript & jQuery Slider - mouse wheel scroll) 코드펜 예제입니다. 화면을 스크롤 하면 슬라이더 콘텐츠가 나오는데 콘텐츠 안에 마우스를 갖다 대고 마우스 휠 스크롤을 하면 하나씩 넘어가게 됩니다. 다 넘어가면 페이지 전체 스크롤이 다시 넘어가는 형태입니다. :) /* 전역변수 */ // 페이지들 var Page__$pages; // 페이지 개수 var Page__pagesCount; /* 초기화 함수들 */ // 페이지 관련 요소들을 초기화 한다. functio..

2023. 1. 28.

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

See the Pen 세로 슬라이드 자체 제작 코드 by kimyangsun (@kimyangsun) on CodePen. 자바스크립트 제이쿼리 세로 슬라이더 예제 (JavaScript & jQuery Vertical Slider) 코드펜 소스코드입니다. $('.slider-box-1 > .side-btns > div').click(function() { var $this = $(this); var isUp = $this.index() == 0; var $slider = $this.closest('.slider-box-1'); if ( $slider.attr('data-slider-box-1-now-work') === 'Y' ) { return; } $slider.attr('data-slider-box-..

2023. 1. 28.