yeha day

마크업을 진행하다보면 아이콘을 CSS로 그리거나, 이미지로 표현하는 경우가 있다. 중요한 의미를 담고 있는 아이콘일 경우, 스크린리더 사용자들을 위해 아이콘의 대체 텍스트를 넣어주는 것은 중요하다. 그렇다면 대체 텍스트를 어떻게 넣어주는 것이 좋을까? 1. 태그 안에 대체 텍스트를 넣어주기 [HTML] 더보기 [CSS] .icon_arrow { ... } .blind { position: absolute; overflow: hidden; clip: rect(0 0 0 0); margin: -1px; width: 1px; height: 1px; } 첫 번째는 태그를 만들어 그 안에 대체 텍스트를 표현한 후, 텍스트 숨김을 처리하는 스타일을 넣는 방식이다. 주로 blind 클래스와 같은 스타일을 넣어서 텍스..

overflow-wrap / word-wrap 인라인 요소에 적용되는 속성으로 단어가 박스 밖으로 넘치지 않게 줄 바꿈을 설정할 때 사용하는 속성. 즉, 한 라인에서 단어가 넘칠 경우 이를 어떻게 처리할지에 대해 설정하는 속성. 초기에 표준이 아닌 word-wrap 속성으로 대부분의 브라우저에서 구현되었는데, overflow-wrap으로 속성명을 재정의 하여 word-wrap과 overflow-wrap은 동일한 속성명으로 사용되고 있다. 값 /* 1. overflow-wrap */ overflow-wrap: normal; overflow-wrap: anywhere; overflow-wrap: break-word; /* 2. word-wrap */ word-wrap: normal; word-wrap: br..

업무 중 input에 값 입력 시 불필요한 배경색이 적용된다는 qa가 올라와서 찾아보다 발견했다. 살펴보니 자동완성 값을 넣었을 때만 스타일링한 배경색이 아닌 다른 배경색이 들어가서 찾아보다 :autofill을 발견했다. :autofill 브라우저에 의해 값이 자동 채워질 때 스타일을 제어하는 속성. input:autofill { border: 5px solid #f00; } input:-webkit-autofill { border: 5px solid #f00; } ⚠️ 주의할 점 많은 브라우저들이 user agent style에 :-webkit-autofill 스타일에 !important를 사용하여 적용해두었기 때문에 background-color, background-image, color 등의 스타..