로딩 스켈레톤 UI(Skeleton UI) HTML과 CSS로 간단하게 구현해본 스켈레톤 UI 입니다. 로딩 화면에서 보여줄 수 있는 대표적인 UI로는 스피너나 프로그래스바 등이 있는데, 개인적으로 저는 스켈레톤 UI가 좋습니다. See the Pen Untitled by junheeleeme (@junheeleeme) on CodePen. 게시글 목록의 레이아웃으로 만들어봤고, 글 상세페이지나 다른 페이지의 레이아웃에 따라 만들어야하는 단점이 있습니다. 로딩 시간에 따라 keyframe 속도를 조절하면 좋습니다.
2022.04.05 3
로그인 폼 예제 보이는대로 그냥 구현해본 로그인 폼 See the Pen by junheeleeme (@junheeleeme) on CodePen.
2021.07.10
카드 오버 효과 See the Pen 퀄리티 카드오버 효과 by junheeleeme (@junheeleeme) on CodePen.
2021.01.16
직접 만든 리스트 호버 효과 PC See the Pen Hover effect for li list by junheeleeme (@junheeleeme) on CodePen. Mobile See the Pen Hover effect for li list (Mobile ver) by junheeleeme (@junheeleeme) on CodePen. CSS의 가상 선택자 Before를 사용하여 hover 효과를 주었습니다.
2021.01.01
탭메뉴(TabMenu) See the Pen 20201231_탭메뉴 by junheeleeme (@junheeleeme) on CodePen. 자바스크립트(JS) Element.classList.add() Element.classList.remove() 제이쿼리(JQuery) Element.addClass() Element.removeClass() CSS menu1.on ~ board1{ display: block;} menu2.on ~ board2{ display: block;}
2020.12.31
간단한 아코디언 메뉴(Accodian menu) See the Pen BazpBrr by junheeleeme (@junheeleeme) on CodePen. 정말 간단하고 심플한 아코디언 메뉴 siblings()를 이용하여 하나씩만 열리게해주면 심플 그 자체
2020.10.23 14
CSS만 활용한 사이드 메뉴 See the Pen MWeeOKp by junheeleeme (@junheeleeme) on CodePen. checkbox와 태그를 활용한 사이드 메뉴 사용자와 개발자의 체크박스 사용 용도가 달라도 너무 다르다.
2020.10.19
CSS로만 만든 모달 레이어 팝업 See the Pen eYzZQyr by junheeleeme (@junheeleeme) on CodePen. 중요한 포인트 HTML : + CSS : transition + transition-delay
2020.10.18
새로운 블로그로 이사했습니다. 😆
Home | 꾸생 블로그
프론트엔드 개발 블로그입니다. 사소한 것도 기록합니다 :)
kku.dev