나의 코딩 기록

코딩을 기록하는 공간

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

See the Pen slick 슬라이드 애니메이션 적용 (slick slide animation css) by kimyangsun (@kimyangsun) on CodePen. https://codepen.io/kimyangsun/pen/bGdBJOy slick 슬라이더의 내부 텍스트에 애니메이션을 준 소스코드입니다. 여기서 주의할 점은 애니메이션을 slick-slide에 slick-active 클래스가 들어갈때마다 넣어주었기 때문에 slick-active 와 연관지어서 css를 작성해야 합니다. 단, 주의할 점이 있습니다. 각각 문장마다 애니메이션 딜레이를 다르게 주거나 하고싶다면 각각 animation-delay css를 주어야 한다는 부분입니다.

2020. 2. 23.

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

See the Pen form search by kimyangsun (@kimyangsun) on CodePen. https://codepen.io/kimyangsun/pen/oNXYoxN?editors=1010 form search ... codepen.io form 태그를 사용한 search 검색창 기본 예제입니다. 이 코드 또한 자주사용하는 만큼 기본적인 틀을 꼭 외워두어야 할 것 같습니다.

2020. 2. 23.

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

See the Pen form by kimyangsun (@kimyangsun) on CodePen. https://codepen.io/kimyangsun/pen/ZEGBabj?editors=1010 form ... codepen.io form 태그를 사용하여 만든 응용 예제입니다. from 아래에는 fieldset, legend 도 포함시켰고 div 를 하나 넣고 그안에 input이나 textarea등의 요소를 label로 감싸줬습니다. 기본기에 있어서 중요한 코드이고 정말 많이 사용하는 만큼 꼭 숙지해야할 것 같습니다.

2020. 2. 23.

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

See the Pen 유령 2차메뉴 내려오기 메뉴 by kimyangsun (@kimyangsun) on CodePen. https://codepen.io/kimyangsun/pen/ExjNbyM 유령 2차메뉴 내려오기 메뉴 ... codepen.io 엔제리너스 상단 메뉴바 구현 소스입니다. 1차 메뉴에 마우스를 올리면 2차메뉴가 유령처럼 안에서 아래로 쭉 내려오는 형태의 메뉴바입니다. 적절한 상황에서 응용하여 잘 사용할 수 있을 것 같습니다. 자세한 코드는 링크를 통해 들어가서 확인 가능합니다.

2020. 2. 23.

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

See the Pen 스크롤 슬라이더 심화 (어려움) by kimyangsun (@kimyangsun) on CodePen. https://codepen.io/kimyangsun/pen/xxGxeaE?editors=1100 스크롤 슬라이더 심화 (어려움) ... codepen.io 가끔가다 이런 페이지가 있습니다. 사이트 중간이나 상단 등 특정 위치에 컨텐츠 박스처럼 있고 그 박스안에 슬라이더가 있는데 보통의 슬라이더가 아니고 페이지들이 스크롤을 해야만 넘어가는 책느낌으로 이루어져 있는 경우입니다. 꼭 슬라이더 뿐만이 아니고 특정 컨텐츠 박스 안에서 스크롤로 요소들 하나하나를 넘기거나 보여줄때도 해당 코드를 사용하여 응용이 가능할 것 같습니다. 자세한 코드는 링크를 통해 확인하실 수 있습니다.

2020. 2. 17.

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

See the Pen float 정렬시 높이 공유하는 height-sync (반응형 가능) by kimyangsun (@kimyangsun) on CodePen. https://codepen.io/kimyangsun/pen/YzXwYby?editors=1010 float 정렬시 높이 공유하는 height-sync (반응형 가능) ... codepen.io 이번 코드는 float으로 셀들을 정렬시 내부에 글자나 사진등이 높이가 다를경우에는 각각 셀들의 높이가 달라질 수가 있습니다. 이 경우에 다른 옆에 셀들의 높이도 동일하게 맞춰주기 위해서는 display table 그리고 table-cell 로 해결하는 방법도 있지만 이 경우에는 반응형으로 적용하려면 css를 일일이 전부 수정해줘야 하는 번거로움이 있을..

2020. 2. 17.

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

See the Pen 중앙 컨텐츠 3차 - visual story 1차 by kimyangsun (@kimyangsun) on CodePen. https://codepen.io/kimyangsun/pen/xxGGKWL 중앙 컨텐츠 3차 - visual story 1차 ... codepen.io slick 슬라이더 플러그인을 사용하여 슬라이더를 만든 후 centerMode 를 사용하여 중앙에 아이템이 위치하고 양옆으로 슬라이더가 돌아가는 형식으로 만들어 보았습니다. 여기서 중요한점은 슬라이더에 transition 이 들어갈 경우 slick 슬라이더를 사용하면 슬라이더 마지막 페이지에서 첫페이지로 넘어가거나 첫페이지에서 마지막 페이지로 넘어갈때 이상하게 트랜지션이 적용이 안되는 경우가 있어서 이 부분을 sl..

2020. 2. 17.

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

See the Pen Scrollmagic - set pin by kimyangsun (@kimyangsun) on CodePen. https://codepen.io/kimyangsun/pen/gObQXXw Scrollmagic - set pin Trying to set a pin with scrollmagic and resizing it, when the window resizes... codepen.io 스크롤 매직 플러그인을 사용한 예제입니다. 스크롤 매직 스크립트에서 setPin 을 이용하여 요소를 고정시키면서 스크롤이 되도록 하였습니다. (요소는 고정시키면서 스크롤은 가능하도록) 지정한 수만큼 요소가 고정되고 그 후에는 다시 요소는 내려갑니다. (밑에 요소들과 겹치지 않습니다. - 그만큼 스크롤..

2020. 2. 9.

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

See the Pen slick dots custom -2 by kimyangsun (@kimyangsun) on CodePen. https://codepen.io/kimyangsun/pen/QWbLZGy slick dots custom -2 ... codepen.io slick 슬라이더 플러그인을 사용하여 슬라이더를 구현 후 dots, 즉 페이지 버튼 각각에 글자들을 삽입하려면 보통 자바스크립트로 slick 함수 안에서 customPaging 을 사용하여 넣습니다. 여기서 i 를 이용하여 1부터 쭉 나열하기는 쉽지만 각각 전혀 다른 글자로 이루어져 있다면 어떻게 해야하나 생각해봤습니다. html 에 요소를 직접 넣어주고 그 요소들에 각각의 다른 글자들을 직접 써주고 그 요소들을 자바스크립트로 불러와서 ..

2020. 2. 9.