나의 코딩 기록

코딩을 기록하는 공간

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

See the Pen 제이쿼리 멜로디언 메뉴 by kimyangsun (@kimyangsun) on CodePen. 제이쿼리 아코디언 다운 메뉴바입니다. 해당 코드는 메뉴를 클릭시 밑에 메뉴는 밀리고 위에 메뉴의 2차메뉴 혹은 3차메뉴가 나오게 되는 메뉴에 사용하면 유용할 것 같습니다. 특히 모바일 메뉴들에 이런 메뉴들이 많은데 가려져 있는 2차메뉴 3차메뉴가 나오면서 밑에 메뉴를 밀어내야 하기 때문에 css 만으로 하려면 힘들어지곤 합니다. 제이쿼리 자바스크립트를 사용하여 손쉽게 만들면 될 것 같습니다. https://codepen.io/kimyangsun/details/QWwVdoo 제이쿼리 아코디언 메뉴 ... codepen.io

2020. 1. 19.

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

See the Pen 나이키 모바일 사이드 바 by kimyangsun (@kimyangsun) on CodePen. https://codepen.io/kimyangsun/pen/LYErvZm 나이키 모바일 사이드 바 ... codepen.io 모바일 사이드바 응용입니다. 자세한 내용은 링크를 누르면 나옵니다. 나이키 모바일 사이드바와 똑같이 만들었습니다.

2020. 1. 14.

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