나의 코딩 기록

코딩을 기록하는 공간

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

See the Pen slick current 투명도 활성화 기본 예제 by kimyangsun (@kimyangsun) on CodePen. Slick 현재 슬라이드(current & active) 투명도 활성화 코드펜 커스텀 예제입니다. 코드펜을 누르고 들어가 상세한 코드를 볼 수 있습니다. :)

2023. 1. 25.

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

See the Pen 작업 시작시 reset 소스 코드 by kimyangsun (@kimyangsun) on CodePen. 개인 프로젝트 작업을 시작할때 기본으로 깔고 시작하는 html, css 기본 초기화 코드입니다. 저는 이 코드들을 바탕으로 작업을 시작하지만 각자의 작업방식에 따라 수정할 부분은 수정하거나 추가할 부분은 추가하여 사용하면 될 것 같습니다. :) css 코드 @charset "UTF-8"; /* 폰트 적용 (선택사항) */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700&family=Noto+Serif+KR:wght@200;300;400;500;600;700&disp..

2023. 1. 24.

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

See the Pen 접근성 자막 예시 by kimyangsun (@kimyangsun) on CodePen. 웹접근성을 위한 자막 작업 예시입니다. 코드펜 예제를 눌러 확인하실 수 있습니다.

2023. 1. 24.

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

https://cssgradient.io/ CSS Gradient — Generator, Maker, and Background As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile. cssgradient.io https://neumorphism.io/#ebebeb Neumorphism/Soft UI CSS shadow generator CSS code generator that will help with colors, gradients and shadows to adapt this new desi..

2023. 1. 24.

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

https://tinytools.design/easing Tiny Tools Tools to solve tiny repetitive design problems including an aspect ratio calculator, easing curve reference, and letterspacing utility. tinytools.design https://animista.net/ Animista - On-Demand CSS Animations Library Animista is a CSS animation library and a place where you can play with a collection of ready-made CSS animations and download only thos..

2023. 1. 24.

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

https://www.tablesgenerator.com/html_tables Paste table data... > 안에서 테이블 붙혀넣기 (Ctrl + V) > Load 누르고 Generate 버튼을 누르면 아래 코드가 나옵니다. 사이트에서 추출하다 보니까 이상한 태그가 섞일 수 있는데 vscode에서 일괄처리로 이상한 부분 제거 후 사용하면 됩니다.

2023. 1. 24.

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

See the Pen Swiper Slide - 페이지 변경시 좌우 이동버튼 텍스트 변경 (Swiper navigation text change) -not loop by kimyangsun (@kimyangsun) on CodePen. 바로 이전에 올린 글과 같은 기능을 구현한 코드입니다. 차이점은 이전글이 loop가 true인 코드라면 이번꺼는 loop가 false인 코드입니다. 해당 코드는 첫페이지나 마지막페이지에 갔을때 이전 인덱스와 다음 인덱스가 없기 때문에 해당 부분에서 오류가 나지않도록 적용했습니다. 추가로 첫 페이지일때는 이전으로 가는 버튼을 숨겨주고 마지막 버튼일때는 다음으로 가는 버튼을 숨겨주는 기능도 추가했습니다. (loop가 false이기 때문) 자세한 코드 내용은 상단 코드펜에 들어..

2022. 1. 14.

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

See the Pen Swiper Slide - 페이지 변경시 좌우 이동버튼 텍스트 변경 (Swiper navigation text change) -loop by kimyangsun (@kimyangsun) on CodePen. 저는 보통 슬라이더를 사용할 때 slick을 자주 사용하고 응용해왔었는데, 최근에 거의 5년동안 앞서던 slick이 swiper에게 다운로드 횟수가 역전당한걸 보고 swiper에 대해서도 좀 찾아봤습니다. 그 결과 저는 개인적으로 slick보다 사용할 수 있는 기본적인 기능들이 더 많은 느낌을 받았습니다. 뭐 드래그로 페이지를 이동한다던가 하는 기능들 말이죠. slick은 자체적으로 코드를 추가해서 드래그 기능을 구현하는데 swiper는 애초에 내장 기능으로 들어가져 있습니다. ..

2022. 1. 14.

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

See the Pen slick 슬라이더 안에 slick 슬라이더 (마우스 휠 스크롤 추가) by kimyangsun (@kimyangsun) on CodePen. slick 슬라이더 내부의 slick 슬라이더를 적용한 예제에 마우스 휠 스크롤 기능을 추가한 예제입니다. 슬라이더 내부에 있는 슬라이더에서는 마우스 휠 스크롤을 하게되면 내부의 슬라이드만 작동합니다. stopPrapagation()을 이용했습니다. 내부의 슬라이더 밖 그리고 외부 슬라이더의 안에서 마우스 휠을 돌리면 외부의 슬라이더가 이동합니다. 자세한 코드는 상단 codepen을 눌러서 들어가면 확인하실 수 있습니다.

2022. 1. 13.