Codepen

UI 코드 공유사이트 Codepen

  • 코드펜 따라하기 - 다크모드 스위치

    다크모드로 변하는 토글 스위치 만들기 모바일에서 무언가를 켜고 끌 때 많이 사용하는 토글 스위치, 토글 버튼을 만들어본다. 토글 스위치는 JS말고 CSS만으로도 작업할 수도 있는데, W3Schools에 들어가면 CSS만으로 만든 토글 스위치 코드를 볼 수 있다. 이번에는 다크모드로...


  • 코드펜 따라하기 - 내비게이션 메뉴 (2)

    언더바가 움직이는 내비게이션 메뉴 만들기 이번에 만들 것은 메뉴 텍스트를 클릭하면 텍스트를 강조하는 언더바가 해당 위치로 움직이는 내비게이션 메뉴다. 이 원본 작업 링크를 클릭하면 내가 참고한 원래 작업의 코드와 구현된 UI를 볼 수 있다. 이전 포스트에는...


  • 코드펜 따라하기 - 내비게이션 메뉴 (1)

    HTML, CSS, JS를 각각 어느정도 배웠는데, 언어만 배우다보니 점점 지루해졌다. 아무래도 디자인 전공 출신이라 내가 배운 내용을 토대로 직접 화면을 구현하고 싶었다. 하지만 혼자서 웹페이지나 앱 전체를 구현한 경험은 없어서 어디서부터 시작해야할지 갈피를 잡지 못하고 있었다....