나의 코딩 기록

코딩을 기록하는 공간

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

See the Pen slick slider 마우스 휠 스크롤 + 내부 콘텐츠 스크롤 by kimyangsun (@kimyangsun) on CodePen. slick 슬라이더에서 스크롤 기능을 추가한 예제입니다. 슬라이더 자체에 onwheel 이벤트를 사용하여 deltaY 값을 이용하여 슬라이드가 넘어가고 되돌아가는 기능을 구현한 상태입니다. 그리고 슬라이더 안에 스크롤이 있는 콘텐츠가 있는 경우도 넣어뒀는데 innerText에 stopPrapagation()을 줘서 상위요소의 스크롤이벤트가 적용되지 않도록 막아주었습니다. 여기서 추가로 추가해볼 수 있는 기능은 내부 콘텐츠의 스크롤이 최하단이나 최상단에 위치할때 slickPrev or slickNext로 슬라이드가 이동될 수 있도록 하는 부분이 있을 ..

2022. 1. 13.

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

See the Pen 이미지 팝업 커스텀 코드 (접근성 준수) by kimyangsun (@kimyangsun) on CodePen. 자바스크립트를 이용한 이미지 팝업 만들기 자체 코드입니다. 라이브러리는 제이쿼리를 이용했고 자세한 코드는 위에 코드펜에 들어가서 확인하시면 됩니다. 포인트는 웹접근성 준수를 위해 키보드 접근성에 맞게 작업을 하였습니다. 즉, 키보드 탭을 누르면서도 팝업을 활성화 및 팝업창 닫기를 이용할 수 있도록 하였고 팝업창이 활성화되면 초점이 해당 팝업 내부로 이동됩니다. 그 후 x버튼을 누르게되면 팝업이 닫히면서 초점은 해당 이미지 팝업 목록으로 다시 되돌아갑니다.

2021. 12. 13.

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

See the Pen 스크롤시 보여지는 요소들 + 숫자 카운터 by kimyangsun (@kimyangsun) on CodePen. 스크롤시 보여지는 요소들과 그 요소들 안에 숫자가 카운터되도록 하는 코드입니다. 숫자가 카운터되는 함수를 요소가 보일때 발동하는 곳에 같이 넣어서 요소가 보이는 순간 나타나면서 숫자도 같이 카운터됩니다. 여러 상황에서 유용하게 쓰일 수 있는 코드일 것 같습니다.

2020. 3. 26.

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

See the Pen tab menu slick 자체 코드 by kimyangsun (@kimyangsun) on CodePen. https://codepen.io/kimyangsun/pen/jOPerPR?editors=1010 tab menu slick 자체 코드 ... codepen.io 탭메뉴를 제이쿼리로 만들어서 그 안에 각각 다른 slick 슬라이더를 넣는경우에 탭메뉴를 클릭하면 탭메뉴가 display : none 에서 display : block 으로 될텐데 이때 slick 슬라이더의 너비와 높이가 지정되지 않는 오류가 생긴다. 이 경우에 slick이 첫페이지에 있지 않으면 slick의 첫번째 이미지가 보이지 않고 2번째 부터 도는것을 확인 할 수 있다. 해당 문제는 탭이 active가 된 후..

2020. 3. 24.

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

See the Pen slick 안에 slick by kimyangsun (@kimyangsun) on CodePen. https://codepen.io/kimyangsun/pen/ZEGMMzy?editors=0100 slick 안에 slick ... codepen.io 제이쿼리 slick 을 사용하면서 slick 슬라이더 안에 slick 슬라이더가 들어가야하는 경우를 대비하여 만들어 보았습니다. 코드는 기존 slick 슬라이더 적용 코드 안에 새로운 슬라이더 요소에 slick 을 또 다시 적용해주면 됩니다. 자세한 코드는 링크나 위에 코드펜을 통해 확인할 수 있습니다.

2020. 3. 24.

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

See the Pen 지정되지 않은 a 링크 return false by kimyangsun (@kimyangsun) on CodePen. https://codepen.io/kimyangsun/pen/GRJEXOq?editors=1010 지정되지 않은 a 링크 return false ... codepen.io 지정되지 않은 a 링크, href="#" 일때 보통은 클릭을 하면 기본 홈화면으로 가게 됩니다. 이런 경우를 대비하여 자바스크립트 코드로 // 모든 a링크 새창열기로 전환 $('a').attr('target', '_blank'); // 지정되지 않은 a 링크 return false $('a').click(function(e) { if ( $(this).attr('href') == '#' ) { //..

2020. 3. 10.

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

See the Pen slick 기본 margin by kimyangsun (@kimyangsun) on CodePen. https://codepen.io/kimyangsun/pen/mdJRVwX?editors=1100 slick 기본 margin ... codepen.io slick 슬라이더에 아이템 사이의 margin 을 준 기본 예제입니다. owl 캐러셀 플러그인은 스크립트 자체 코드에 패딩을 주는 코드가 있는데, 그거와는 다르게 slick 슬라이더는 css로 아이템 사이에 margin을 넣어주어야 합니다. slick 을 적용하면 자체적으로 생겨나는 .slick-slide 클래스에 마진을 넣어주고 줄어든 전체 너비를 다시 보정해주기 위해 .slcik-slide 의 부모인 .slick-list 에 m..

2020. 3. 10.

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

See the Pen 제이쿼리 슬라이더 (PageNumber version) by kimyangsun (@kimyangsun) on CodePen. https://codepen.io/kimyangsun/pen/vYOywwB?editors=0010 제이쿼리 슬라이더 (PageNumber version) ... codepen.io 이번 슬라이더는 플러그인이 아닌 제이쿼리 자체 코드로 만든 슬라이더입니다. 해당 슬라이더에 pagenumber, 페이지에 번호가 각각 존재하는데 이 경우에 각각의 슬라이더에 번호를 각각 넣어줌으로써 쉽게 해결할 수도 있겠지만, 우리는 혹시 모를 상황에 대비하여 스크립트로 숫자를 유동적으로 바뀌게 해주어야할 수도 있습니다. 총 슬라이더의 갯수를 저장해주고 각 슬라이더의 페이지에 번호..

2020. 2. 23.

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

See the Pen slick 슬라이더 트랜지션 적용 심화 - delay 가능 by kimyangsun (@kimyangsun) on CodePen. https://codepen.io/kimyangsun/pen/RwPomGv slick 슬라이드 트랜지션 적용 (slick slide transition css) ... codepen.io slick 슬라이더 플러그인을 사용하여 transition 값을 주어서 애니메이션 효과를 만든 예제입니다. slick-slide 에 slick-active 가 들어갈 때 효과를 주도록 css 를 작성하였습니다. 단, 이 경우에 slick 특성상 창을 새로 열거나 새로고침할때 slick-active 클래스가 처음부터 들어가진 상태여서 첫번째 슬라이더에 트랜지션이 적용되지 ..

2020. 2. 23.