나의 코딩 기록

코딩을 기록하는 공간

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

디자인 기록

상단 메인 배너를 슬라이더 형식 으로 디자인하였고 좌측 사이드 gnb 는 고정하는 형식으로 디자인하였습니다. 방탈출 카페 특유의 공포감과 심리적 압박감 등을 표현하며 디자인 해보았습니다.

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.

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

See the Pen 삼성 메인 배너 슬라이더 2차 (slick) by kimyangsun (@kimyangsun) on CodePen. https://codepen.io/kimyangsun/pen/vYOBgoJ 삼성 메인 배너 슬라이더 2차 (slick) ... codepen.io 삼성 공식 사이트의 메인 슬라이더를 연습삼아 따라 만들어봤습니다. 사용한 슬라이더 플러그인은 slick 입니다. 해당 코드는 반응형으로 제작하였으며 모바일 버전은 또 다르게 구현됩니다. 게이지바가 시간에 맞춰 차고 재생 및 정지 버튼을 클릭하면 그에 따라 멈춥니다. 그리고 슬라이더 내용쪽에 마우스를 올려놓으면 또다시 그에 따라 멈춥니다. 마우스를 슬라이더 바깥으로 움직이면 다시 재생이 됩니다. 자세한 코드는 링크를 통해 확인..

2020. 2. 9.