input
-
[CSS] 자동 완성 시 input 배경색 변경CSS 2022. 7. 15. 13:18
webkit 기반 브라우저에서 자동완성 기능을 사용할 때 배경색이 바뀐다. 이를 해결하기 위해선 :autofill 의사 클래스를 사용하면 된다. 🤔 :autofill 요소의 value가 브라우저에 의해 자동으로 채워질 때 동작한다. 사용자가 입력하면 동작하지 않는다. ❗NOTE 많은 브라우저의 user agent style sheets(각 브라우저 마다 CSS 기본 규칙)는 :-webkit-autofill 스타일 선언에서 !important를 사용한다. ex) 크롬의 내부 스타일 시트 background-color: rgb(232, 240, 254) !important; background-image: none !important; color: -internal-light-dark(black, white..
-
[HTML] form 태그와 웹접근성HTML 2022. 7. 7. 00:10
🏷️ 태그 사용하지 않더라도 필수로 과 같이 빈값으로 속성을 넣어줌 🏷️ 태그 폼 요소에 레이블을 붙이기 위한 태그 태그 사용시 폼 요소와 레이블 텍스트가 서로 연결되어 있는 점을 브라우저에게 알림 태그 사용 1. 명시적 작성 방법 요소와 폼 요소를 따로 사용하고 의 for 속성과 폼 요소의 id 속성을 이용해 연결 레이블 2. 암시적 작성 방법 태그 안에 폼 요소를 넣는 방법 레이블 placeholder 속성을 label로 사용? placeholder는 label을 대신하여 제공할 수 없다. 입력 시 내용의 사라짐 스크린리더에서 읽히지 않을 수 있음 번역 시 브라우저에서 건너뜀 디자인 상의 이유로 label를 화면에 명시하지 못할 경우 title 속성 활용 스크린리더는 label과 title을 둘 다 ..