ux dev

  • 홈
  • 태그
  • 미디어로그
  • 위치로그
  • 방명록

2019/10/14 1

Reduced/비애니메이션 이슈/디바이스 대응 CSS 작성법

CSS 애니메이션 테스팅 in 애니메이션 저하 환경 디바이스 및 OS의 설정에서 애니메이션을 감소시키는 설정이 켜져 있는 경우가 있습니다. 이 경우 웹브라우저에도 영향을 주어 CSS 애니메이션이 일부 작동하지 않게 됩니다. 특히 opacity를 0에서 1로 바꿔서 컨텐츠를 표시하는 애니메이션을 구성한 경우, 자칫 웹사이트의 컨텐츠 자체가 표현되지 않는 문제가 발생할 수 있습니다. 특히 유명한 라이브러리 중 하나인 animate.css를 활용한 애니메이션을 구성할 때 이러한 구성이 자주 발생합니다. 이같은 문제에 대응하기 위해서는 애니메이션이 저하된 디바이스에 대응하기 위해 구성된 미디어쿼리를 설정해 주어야 합니다. 이는 다음 코드에서 확인하실 수 있습니다. 비애니메이션 대응은 단순히 특정 환경이라고 치부..

UX 개발/CSS 2019.10.14
이전
1
다음
더보기
프로필사진

ux dev

UX의 개발방법을 고민합니다.

  • 전체보기 (309)
    • UX 콜렉션 (5)
      • 디자인 프레임워크 (1)
      • 디자인 시스템 (0)
      • 아이콘 (3)
      • 폰트 (1)
    • UX 리서치 (40)
      • 디자인 시스템 가이드 (1)
      • 디자인 시스템 컴포넌트 (2)
      • 디자인 이론과 리서치 (16)
      • 디자인 트렌드와 문화 (1)
      • 디자인 케이스스터디 (15)
      • 디자인 리소스 (5)
    • UX 디자인 (54)
      • 피그마 (15)
      • 피그마 - 무료 템플릿 (3)
      • 피그마 - 무료 플러그인 (7)
      • 피그마 - 무료 리소스 (2)
      • 어피니티디자이너 (4)
      • 포토샵 (2)
      • 일러스트레이터 (9)
      • 색상과 디스플레이 (3)
      • 인쇄 (1)
      • 아이콘 디자인 (4)
      • 이메일 디자인 (1)
      • 스케치 (3)
    • UX 개발 (156)
      • HTML (8)
      • CSS (27)
      • CSS - 타이포그래피 (2)
      • CSS - 3D (3)
      • CSS - Selector (1)
      • CSS - Flex & Grid (7)
      • CSS - SASS & SCSS (1)
      • CSS - TailwindCSS (7)
      • CSS - 라이브러리 (2)
      • JS (7)
      • UX - 폼 (Forms) (1)
      • UX - 스크롤 애니메이션 (10)
      • UX - 슬라이더 (롤링배너) (1)
      • UX - 트랜지션 효과 (1)
      • UX - 반응형 (RWD) (1)
      • UX - 커서 & 클릭 & 키보드 (3)
      • Jekyll (1)
      • 노션 (0)
      • 티스토리 (2)
      • 지도API (2)
      • ChatGPT (1)
      • Git (1)
      • SEO (4)
      • 테스팅 (1)
      • Shell Script (Bash) (7)
      • 웹서버 (2)
      • 개발도구와 환경 (53)
    • 정보 접근성 (20)
      • 접근성 (A11Y) (6)
      • 접근성 (A11Y) - 웹 접근성 지침 (7)
      • 접근성 (A11Y) - 컴포넌트 (7)
    • UX 리뷰 (14)
      • 디지털디바이스 (11)
      • 음식과 공간 (0)
      • 거의 모든 것 리뷰 (3)
    • 웹디자인기능사 (17)
      • 웹디자인기능사 정보 (1)
      • 웹디자인기능사 필기 요약 (11)
      • 웹디자인기능사 필기 기출 (0)
      • 웹디자인기능사 실기 (5)
    • 프로젝트 (3)
      • 무료 웹 도구 (3)

Tag

디자인시스템, 웹디자인기능사, 어피니티, 아이콘, figma, 웹디자인기능사필기요약, 피그마, 일러스트레이터, 맥OS, UI, MacOS, 로고디자인, UI디자인, ux디자인, 웹디자인기능사필기, UX, html, CSS, 디자인, 어피니티디자이너,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

Archives

Calendar

«   2019/10   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31

방문자수Total

  • Today :
  • Yesterday :

uxdev.org

  • siimplelab
  • siimply

티스토리툴바