dialog 요소를 이용해서 접근성 좋은 대화 상자를 간단하게 만들 수 있습니다. 대화상자를 닫거나 값을 전송하기 위한 모든 키보드 이벤트와 모바일 OS의 네이티브 이벤트가 구현되어 있습니다. 네이티브 이벤트가 구현되어있다는 것은 iOS에서 VoiceOver로 두 손가락 문지르기를 통해 대화상자를 닫거나 하는 행위가 가능함을 말합니다. 모달로 열린 대화상자는 닫기 전까지는 대화상자 내부에서만 탐색이 가능합니다. 키보드 초점뿐만 아니라, 스크린리더의 가상커서 또한 마찬가지입니다. 모달로 열린 대화상자는 닫기버튼 외에 ESC 키를 눌러도 닫을 수 있습니다. 기본 속성 dialog 요소는 기본적으로 숨겨져 있으며, 표시여부는 open 속성에 따라 달라집니다. /* 브라우저들은 유저 에이전트 스타일에 다음의 C..

아래 태그를 선언하고 content 에 원하는 색상을 넣어주는 것으로 크롬 기반 브라우저 툴바 색상을 변경할 수 있습니다. 해당 포스팅은 이 글을 참고하여 작성했습니다.

mix-blend-mode 속성을 사용하여 포토샵의 블렌딩 모드와 비슷한 효과를 낼 수 있습니다. div { mix-blend-mode: normal; mix-blend-mode: multiply; mix-blend-mode: screen; mix-blend-mode: overlay; mix-blend-mode: darken; mix-blend-mode: lighten; mix-blend-mode: color-dodge; mix-blend-mode: color-burn; mix-blend-mode: hard-light; mix-blend-mode: soft-light; mix-blend-mode: difference; mix-blend-mode: exclusion; mix-blend-mode: hue; ..

색상 커스텀 input { accent-color: #fe4902; } See the Pen 체크박스 - 1 by FE4902 (@fe4902) on CodePen. 전체 커스텀 See the Pen 체크박스 - 2 by FE4902 (@fe4902) on CodePen. 토글 스위치 See the Pen 체크박스 - 3 by FE4902 (@fe4902) on CodePen. 해당 포스팅은 이 글을 참고하여 작성했습니다.

overscroll-behavior 을 사용해 스크롤 체이닝을 제어할 수 있습니다. div { /* 스크롤 체이닝이 발생합니다. */ overscroll-behavior: auto; /* 인접한 스크롤 영역에서 스크롤 체이닝이 발생하지 않습니다. */ overscroll-behavior: contain; /* 모든 영역에서 스크롤 체이닝이 발생하지 않습니다. */ overscroll-behavior: none; } See the Pen 스크롤 체이닝 by FE4902 (@fe4902) on CodePen.

scroll-behavior: smooth 속성을 사용해 스크롤을 부드럽게 이동시킬 수 있습니다. html { scroll-behavior: smooth; } See the Pen Untitled by FE4902 (@fe4902) on CodePen.