나의 코딩 기록

코딩을 기록하는 공간

디자인 기록

시트로엥 코리아 사이트를 리디자인 해봤습니다. 기존의 사이트는 기본적인 레이아웃 위주로 이루어져 있다면 리디자인한 사이트는 좀더 모던하고 트렌디한 느낌, 오래된 역사깊은 브랜드인만큼 고급스러운 느낌을 표현해보고 싶었습니다.

2020. 3. 10.

디자인 기록

대전광역시 서구보건소를 리디자인 해봤습니다. 보건소 사이트인 만큼 눈에 내용들이 눈에 잘 들어오도록 구성해 보았습니다.

2020. 3. 10.

디자인 기록

불가리 BLV 뿌르옴므 포스터 디자인입니다.

2020. 3. 10.

디자인 기록

시원한 느낌이 드는 BEACH 타이포그래피를 만들어 보았습니다.

2020. 3. 10.

디자인 기록

일하는 엄마 '워킹맘' 인포그래픽 입니다. 인포그래픽의 취지에 맞게 내용이 눈에 잘 들어오도록 만들어 봤습니다.

2020. 3. 10.

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

See the Pen 제이쿼리 슬라이더 (PageNumber version) by kimyangsun (@kimyangsun) on CodePen. https://codepen.io/kimyangsun/pen/vYOywwB?editors=0010 제이쿼리 슬라이더 (PageNumber version) ... codepen.io 이번 슬라이더는 플러그인이 아닌 제이쿼리 자체 코드로 만든 슬라이더입니다. 해당 슬라이더에 pagenumber, 페이지에 번호가 각각 존재하는데 이 경우에 각각의 슬라이더에 번호를 각각 넣어줌으로써 쉽게 해결할 수도 있겠지만, 우리는 혹시 모를 상황에 대비하여 스크립트로 숫자를 유동적으로 바뀌게 해주어야할 수도 있습니다. 총 슬라이더의 갯수를 저장해주고 각 슬라이더의 페이지에 번호..

2020. 2. 23.

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

See the Pen slick 슬라이더 트랜지션 적용 심화 - delay 가능 by kimyangsun (@kimyangsun) on CodePen. https://codepen.io/kimyangsun/pen/RwPomGv slick 슬라이드 트랜지션 적용 (slick slide transition css) ... codepen.io slick 슬라이더 플러그인을 사용하여 transition 값을 주어서 애니메이션 효과를 만든 예제입니다. slick-slide 에 slick-active 가 들어갈 때 효과를 주도록 css 를 작성하였습니다. 단, 이 경우에 slick 특성상 창을 새로 열거나 새로고침할때 slick-active 클래스가 처음부터 들어가진 상태여서 첫번째 슬라이더에 트랜지션이 적용되지 ..

2020. 2. 23.

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