나의 코딩 기록

코딩을 기록하는 공간

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

See the Pen 스크롤에 유동적인 메뉴 by kimyangsun (@kimyangsun) on CodePen. 스크롤에 유동적인 풀다운 메뉴입니다. https://codepen.io/kimyangsun/pen/oNgpwGO 스크롤에 유동적인 메뉴 ... codepen.io 링크를 통해 자세히 볼 수 있습니다.

2020. 1. 8.

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

See the Pen 웹페이지 내부 앵커 이동 by kimyangsun (@kimyangsun) on CodePen. a링크의 앵커 이동에 대한 기본 코드입니다. https://codepen.io/kimyangsun/pen/xxbXJKm

2020. 1. 5.

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

See the Pen fixed header on Scroll by kimyangsun (@kimyangsun) on CodePen. 스크롤에 따라 유동적인 헤더입니다. 스크롤을 내릴땐 헤더가 감춰지고 스크롤을 올릴땐 헤더가 다시 생깁니다. https://codepen.io/kimyangsun/pen/XWJVbOe

2020. 1. 5.

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

See the Pen 좌우 슬라이더 + 버튼식 by kimyangsun (@kimyangsun) on CodePen. 좌우 이동 슬라이더와 중앙 하단 버튼식 슬라이더를 섞어놓은 기초 개념입니다. // 기존 버튼형 슬라이더 $('.slider-1 > .page-btns > div').click(function(){ var $this = $(this); var index = $this.index(); $this.addClass('active'); $this.siblings('.active').removeClass('active'); var $slider = $this.parent().parent(); var $current = $slider.find(' > .slides > div.active'); var ..

2020. 1. 5.

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

See the Pen 슬라이더 기초 개념 by kimyangsun (@kimyangsun) on CodePen. 제이쿼리 슬라이더 기초 개념입니다. 좌우 버튼식입니다. https://codepen.io/kimyangsun/pen/zYxzjdz

2020. 1. 5.

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

See the Pen 반응형 이미지 관련 by kimyangsun (@kimyangsun) on CodePen.https://codepen.io/kimyangsun/pen/ZEYXLqZ 반응형 이미지 관련...codepen.io배너 같은 사진을 구현할때 html에 img 태그로 구현하게 되면 반응형에서 비율유지가 까다롭습니다. 그렇기 때문에 background-image 즉 css 를 이용하여 배경을 만들고 그 배경에 부모요소에게 padding-top 이나 padding-bottom 을 줘서 비율을 원하는대로 변경 가능합니다. 자세한 코드는 링크를 누르면 나옵니다.

2020. 1. 5.

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

See the Pen 카운트업 by kimyangsun (@kimyangsun) on CodePen. 숫자를 세는 카운터 효과입니다.

2020. 1. 5.

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

See the Pen owl slider 기본 by kimyangsun (@kimyangsun) on CodePen.

2020. 1. 5.

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

See the Pen 스크롤시 보여지는 요소들 by kimyangsun (@kimyangsun) on CodePen. 스크롤시 요소들이 보여지는 효과입니다. https://codepen.io/kimyangsun/pen/KKwqRad 스크롤시 보여지는 요소들 ... codepen.io

2020. 1. 5.