view See the Pen code - anchor scroll by yeojin (@yeojin512) on CodePen. html <div class="anchor-scroll"> <div class="anchor-scroll-list"> <a href="#anchor-scroll-1" clas...
scroll watcher
Cross Browsing animation-timeline view See the Pen scroll watcher by yeojin (@yeojin512) on CodePen. css .scroll-watcher { position: fixed; top: 0; z-index: 800; width: 100%;...
typography line
view See the Pen typography line by yeojin (@yeojin512) on CodePen. css .text { font-size: 200px; font-weight: 700; color: #fff; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, ...
accordion
Web Accessibility Accordion Role & Attribute role="region" aria-expanded aria-controls aria-labelledby view See the Pen accordion by yeojin (@yeojin512) on CodePen. html...
:is , :where
Cross Browsing :is :where view See the Pen :is , :where by yeojin (@yeojin512) on CodePen. css :is와 :where은 유사한 구문을 사용 :is와 :where의 차이점은 특이성 :is는 특이성이 있으며, 재정의 할 때 i...
:focus-visible
Cross Browsing :focus-visible view See the Pen :focus-visible by yeojin (@yeojin512) on CodePen. css 디자인을 해치지 않기 위해 outline(외곽선) 을 없애야 하는 경우, 마우스 클릭 및 터치를 할 경우에는 outline을 없애고 키보드로...
:focus-within
Cross Browsing :focus-within view See the Pen :focus-within by yeojin (@yeojin512) on CodePen. css 해당 요소의 하위 항목에 포커스가 있는 경우, 해당 요소에 스타일을 지정할 수 있음 form 요소에 사용하면 좋을듯 하나, 하위 버튼 요소 등...
product card
Web Accessibility Role & Attribute aria-labelledby Screen Reader 지원 Role & Attribute Sense Reader NVDA VoiceOver TalkBack ...
form - floating labels
view See the Pen form - floating labels by yeojin (@yeojin512) on CodePen. html test page <div class="c-form"> <!-- 기본 --> <div class="c-form__field"> ...
form - validation
Web Accessibility Role & Attribute aria-describedby aria-invalid aria-errormessage ※ aria-invalid, aria-errormessage가 1.2에서 전역 상태로 더이상 사용 되지 않음 w3c - aria-invalid w3c - aria-err...
Recently Updated