writing-mode 를 이용해서 텍스트를 세로로 나열할 수 있습니다. div { /* 가로 방향, 기본 값 */ writing-mode: horizontal-tb; /* 세로 방향, 왼쪽에서 오른쪽으로 */ writing-mode: vertical-lr; /* 세로 방향, 오른쪽에서 왼쪽으로 */ writing-mode: vertical-rl; } .en { /* 영문일 경우, 해당 속성을 추가해주지 않으면 자동으로 각도가 조절됩니다. */ text-orientation: upright; } See the Pen writing-mode by FE4902 (@fe4902) on CodePen. 해당 포스팅은 이 글을 참고하여 작성했습니다.

:is() 와 :where() 는 요소를 그룹화하는 기능적인 의사 클래스 선택자입니다. 두 선택자의 사용법은 같지만 명시도에 차이가 있습니다. :where() 은 명시도가 없습니다. :where() 은 매개변수로 전달된 선택자 목록의 모든 명시도를 무시합니다. :is() 는 가장 구체적인 선택자의 명시도를 따라갑니다. :is(a, div, #id) 의 명시도는 ID의 명시도인 100점입니다. /* 선택자 처음 */ :where(h1, h2, h3, h4, h5, h6) > b { color: hotpink; } /* 선택자 중간 */ article :is(header, footer) > p { color: gray; } /* 선택자 끝 */ .dark-theme :where(button, a) { col..

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. 해당 포스팅은 이 글을 참고하여 작성했습니다.