Develop Log/효과 만들어보기 썸네일형 리스트형 효과 만들기 - 1. 로딩 효과 만들기 효과 만들기 FrontEnd 개발을 하다보면 API를 적용하는 컴포넌트나 반복적인 작업을 하기 위한 컴포넌트등이 있지만, 가장 기본적인 형태의 독립적이고 재사용이 가능한 컴포넌트들이 있다. 예를 들어, 로딩중인 상태를 알려줄 수 있는 컴포넌트나, 데이터를 가져오기 직전의 데이터 표, 이미지등의 영역을 잡아 보여줄 수 있는 스켈레톤, 가장 많이 사용하고 기본적인 버튼, 입력 컴포넌트등이 있다. 이런 컴포넌트는 외부 라이브러리를 이용하여 사용할 수 있지만 직접 만들어보며 어떤 구조로 컴포넌트가 이루어져 있는지, 이벤트를 어떻게 넘겨주면 좋은 건지 이해하고 라이브러리에 너무 의존하지 않기 위해서 직접 간단한 컴포넌트를 만들어보기로 했다. 어떻게 만들까 처음엔 가장 기본적인 HTML로 만들까 고민을 했었지만, .. 더보기 Before & After 기능 만들기 Before & After 기능 만들기 프로젝트의 목표는 사용자가 원하는 한 이미지의 배경을 도시와 숲 두가지의 배경으로 자유롭게 변환하는 기능을 만드는 것이었습니다. 이 기능을 구현하기 위해서, 사용자는 화면 중앙의 막대를 조절하여 변환 영역을 조절할 수 있도록 설계하였습니다. 이미 실사이트에는 기존에 있는 코드를 활용하여 이를 구현할 수 있었어요. 이 코드는 화면 영역 내에서 마우스를 움직이는 것만으로도 기능을 실행할 수 있게 해줬습니다. 그런데, 프로젝트를 마친 뒤에 든 생각이 있었는데요. "사용자가 막대를 클릭했을 때에만 변환이 실행되면 어떨까?"라는 생각이었습니다. 저는 이런 방식이 실제로 사용되는 경우가 더 많지 않을까 생각했어요. 그래서, 클릭 시에만 움직일 수 있는 기능을 직접 구현해보기로.. 더보기 텍스트 자동 롤링효과 만들기 이전 블로그에 게시되었던 내용입니다 (원본 게시 날짜 :2020년 4월 16일) 1. 만들게 된 배경 유명 포털사이트나 TOP10, TOP5같이 순위나 특정한 장소를 일정한 주기로 표시하는 기능을 넣고 싶은데 어떤걸 넣으면 좋을지 고민하다가 일정한 시간이 지날때마다 단어가 위로 올라가며 바뀌는 기능을 만들어보고 싶다는 생각을 가지고 바로 만들어보았습니다. 2. 만들어볼 효과 시간이 지날때 마다 지역이 바뀌는 기능입니다 롤링 될 내용의 갯수를 제한하지 않고 임의의 갯수를 정해 넣어도 돌아갈 수 있도록 만들었으며 타이머를 따로 변수로 지정하여 쉽게 수정할 수 있도록 만들었어요. 3. 코드 Html CSS JavaScript let rollingData = [ '서울', '대구', '부산', '경기', '울산.. 더보기 이전 1 다음
