view See the Pen textarea by yeojin (@yeojin512) on CodePen. html <!-- textarea --> <textarea class="o-input o-input--textarea" title="댓글" placeholder="댓글을 입력하세요."></text...
input - text 외
view See the Pen input - text 외 by yeojin (@yeojin512) on CodePen. html <!-- text --> <input type="text" class="o-input o-input--text" placeholder="text"> <!-- text + re...
toggle layer
Web Accessibility Role & Attribute aria-controls aria-expanded aria-labelledby Screen Reader 지원 Role & Attribute Sense Reader NVDA VoiceOver ...
tab
Web Accessibility Tabs Role & Attribute aria-label aria-labelledby aria-selected aria-controls Screen Reader 지원 Role & Attribute Sense Reader NVDA ...
button
html <a href="#" class="o-button o-button--1x o-button--gray">a태그</a> <button type="button" class="o-button o-button--1x o-button--gray">button 태그</button> css /*-------...
Internet Explorer 브라우저로 접속 시 안내 화면 노출 방법
2022년 6월 15일부터 인터넷 익스플로러(Internet Explorer) 서비스가 종료됨에 따라, 익스플로러로 접속 시 안내 화면을 노출 1. 제공 사이트 이용 안내 화면을 노출할 브라우저별 버전 설정이 가능하며, 설정 버전보다 낮을 경우 현재 접속중인 브라우저 확인 및 최신 브라우저를 다운 받는 사이트 안내 browser-upda...
CSS 방법론
BEM BEM 공식사이트 BEM - naming convention - Two Dashes style BEMIT More Transparent UI Code with Namespaces 참고 [CSS방법론] SMACSS, BEM, OOCSS BEM CSS와의 전쟁: 10가지 일반적인 문제와 이를 피하는 방법
layout
html <body> <div id="skipNavigation" class="skip-navigation"> <a href="#content" class="skip-navigation__anchor">본문 바로가기</a> </div> <div class="l-wrap"> ...
step
Web Accessibility Role & Attribute aria-label aria-current Sense Reader Role & Attribute Sense Reader aria-label O ...
status (toast message)
Web Accessibility status Role & Attribute role="status" aria-live aria-atomic Screen Reader 지원 방식 Sense Reader NVDA VoiceOver TalkBack ...