[UI] 화면 중앙에 레이어 띄우기 (floating layer)

Layer 레이어는 css :target 셀렉터와 opacity 속성을 이용하여 css만으로 구현이 가능하다. 간단한 레이어 팝업의 경우에는 해당 방법으로 구현하는 것이 리소스 요청을 줄일 수 있어 좋다. 이 스니핏은 스크립트와 함께 작동하는 방식의 레이어를 표현한다. 화면 고정식 기본 팝업 레이어와 플로우 레이어, 토글식 레이어, 레이어 닫기(닫기 버튼 클릭시 닫기, 딤레이어 클릭시 닫기)등을 구현하였다. 1. Component 1) open layer .btn-layer : 레이어를 팝업시키기 위해 클릭하는 링크, 버튼 요소에 사용. data-layer 어트리뷰트를 지정하여 해당 값의 id를 가진 레이어를 열도록 함. .focus-layer : 레이어를 팝업시키 위해 포커싱하는 input 요소에 사용..
[UI] Carousel, Slider

carousel 버튼 클릭, 네비게이션 클릭, 스와이프 모션을 이용해 조종할 수 있는 캐러셀입니다. 플레이/정지 버튼을 이용하여 자동으로 슬라이드를 보여줄 수 있습니다. 1. Component .carousel-container[data-num] : 캐러셀을 포함하는 컨테이너 .carousel-prev : 이전 슬라이드 선택 버튼 .carousel-next : 다음 슬라이드 선택 버튼 .carousel-nav-wrap : 슬라이드 네비게이션 컨테이너 .carousel-autoplay : 슬라이드 자동재생 토글 버튼 2. Script 다음 스크립트를 추가한 후 사용해야 합니다. 3. Function 1) 슬라이드 넘기기 좌우 버튼, 네비게이션 버튼, 스와이프 모션을 이용하여 슬라이드를 좌우로 넘길 수 있습..
리스트 정렬 (masonry)

리스트 정렬 (masonry) 1. CSS만 사용한 방법 See the Pen masonry by leeYura (@2yulrang) on CodePen. column- 프로퍼티를 이용한 masonry IE10 이상! 2. JS를 사용한 방법 See the Pen list by leeYura (@2yulrang) on CodePen. 파라미터로는 열의 갯수, 각 리스트의 너비, gutter 값을 입력해주면 된다. masonry 플러그인도 있다고 하니까 쓰실분들은 찾아보시는 것도 좋을 듯! 18.10.03 15:30 18.10.13 15:10 ​
[SVG] 파이차트 애니메이션

pie 차트 애니메이션 See the Pen drawing donut by yulrang (@2yulrang) on CodePen. stroke-dasharray와 stroke-dashoffset을 활용하여 파이 차트 애니메이션을 제작했다. stroke-dasharray 속성은 dash와 gap의 길이를 지정할 수 있으며, stroke-dashoffset은 dash의 오프셋 위치를 조정할 수 있다. 애니메이션 키프레임에서 stroke-dashoffset 속성을 사용해 대시의 오프셋 위치를 조정해줌으로써 차트의 움직임을 표현했다. 퍼센트 값을 남은 부분의 퍼센트 값으로 바꾸고, 각도로 치환하고, 부채꼴의 호의 길이를 구하여 stroke-dashoffset 값으로 넣어준다. 파이의 너비는 stroke의 두께..
1 2