CSS 썸네일형 리스트형 @media 쿼리 알아보기 - prefers-reduced-motion 최근에 css에 대해 조금 더 모르는 부분을 메꾸기 위한 방법으로 여러 css 관련 문서나 사이트를 찾아보던 중 처음 보는 미디어 쿼리를 보고 이게 어떤 기능인지 알아보려고 한다 여러 미디어 쿼리 중 처음보고 신기하다고 생각되는 기능들에 대해서 몇 가지 정리를 하고 하나씩 기록해 볼 예정이다 prefers-reduced-motion prefers-reduced-motion은 사용자의 운영 체제 설정을 통해 애니메이션의 강도를 제어하는 데 사용하는 데 사용을 한다고 한다 이 미디어 쿼리는 웹 개발자가 애니메이션에 대한 사용자의 선호 설정에 따라 페이지의 요소를 변경하거나 조정할 수 있도록 한다 이 미디어 쿼리는 주로 모션에 대한 민감도가 늫은 사용자들에게 도움이 된다 이 미디어 쿼리는 사용자가 모션 감소 .. 더보기 Before & After 기능 만들기 Before & After 기능 만들기 프로젝트의 목표는 사용자가 원하는 한 이미지의 배경을 도시와 숲 두가지의 배경으로 자유롭게 변환하는 기능을 만드는 것이었습니다. 이 기능을 구현하기 위해서, 사용자는 화면 중앙의 막대를 조절하여 변환 영역을 조절할 수 있도록 설계하였습니다. 이미 실사이트에는 기존에 있는 코드를 활용하여 이를 구현할 수 있었어요. 이 코드는 화면 영역 내에서 마우스를 움직이는 것만으로도 기능을 실행할 수 있게 해줬습니다. 그런데, 프로젝트를 마친 뒤에 든 생각이 있었는데요. "사용자가 막대를 클릭했을 때에만 변환이 실행되면 어떨까?"라는 생각이었습니다. 저는 이런 방식이 실제로 사용되는 경우가 더 많지 않을까 생각했어요. 그래서, 클릭 시에만 움직일 수 있는 기능을 직접 구현해보기로.. 더보기 텍스트 자동 롤링효과 만들기 이전 블로그에 게시되었던 내용입니다 (원본 게시 날짜 :2020년 4월 16일) 1. 만들게 된 배경 유명 포털사이트나 TOP10, TOP5같이 순위나 특정한 장소를 일정한 주기로 표시하는 기능을 넣고 싶은데 어떤걸 넣으면 좋을지 고민하다가 일정한 시간이 지날때마다 단어가 위로 올라가며 바뀌는 기능을 만들어보고 싶다는 생각을 가지고 바로 만들어보았습니다. 2. 만들어볼 효과 시간이 지날때 마다 지역이 바뀌는 기능입니다 롤링 될 내용의 갯수를 제한하지 않고 임의의 갯수를 정해 넣어도 돌아갈 수 있도록 만들었으며 타이머를 따로 변수로 지정하여 쉽게 수정할 수 있도록 만들었어요. 3. 코드 Html CSS JavaScript let rollingData = [ '서울', '대구', '부산', '경기', '울산.. 더보기 이전 1 2 다음
