input type=password ios/aos 폰트 크로스브라우징 이슈

이슈`input type="password"`는 값을 입력하면 value가●●●●● 형태로 출력이 되는데, 이 도트의 사이즈가 브라우저별로 상이하여디자인적으로 value가 input 가로사이즈 영역을 넘어서는 문제, 크로스브라우징 문제가 발생했다. 검색결과문제는 (2016년 기준) 비밀번호 입력란에 파이어폭스와 인터넷 익스플로러는 유니코드 코드포인트를 사용하는 '검은 동그라미'(●) 문자를 사용하지만, 크롬은 ' 25CF불렛'(•) 문자를 사용한다는 점이다. ios safari 에서도 큰 검은 동그라미 형태로 출력되어, 디자인적으로 input 가로사이즈 영역을 넘어서는 문제가 발생하게 되었다.  해결방법'pass' 라는 base64 사용자정의 글꼴을 사용하여 도트의 사이즈를 통일했다.placeholde..

2023.04.06

벤더 프리픽스 (Vendor Prefix)

Vendor Prefix? 세계적으로 가장 많이 사용되는 웹 브라우저에는 익스플로러, 크롬, 파이어폭스, 사파리, 오페라 등이 있다. 벤더프리픽스(vendor prefix)란 이러한 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 버전의 웹 즈라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미한다. 즉, 아직 CSS 권고안에 포함되지 못한 기능이나, CSS 권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 벤더 프리픽스를 사용하게 된다. 그렇게 하면 해당 기능이 포함되어 있지 않은 이전 버전의 웹 브라우저에서도 그 기능을 사용할 수 있다. 주요 웹 브라우저의 벤더 프리픽스 (vendor prefix) 주요 웹 브라우저가 사용하고 있는 벤..

2021.11.17

웹표준과 웹접근성

웹표준(Web Standards)이란? 웹 표준이란, ‘웹에서 표준적으로 사용되는 기술이나 규칙’을 의미하는데, 이는 우리가 흔히 생각하는 표준(standard)과는 조금 다릅니다. 웹에서의 표준은 W3C의 토론을 통해 나온 권고안(recomendation)을 말하며, 권고안 이외 단계 수준의 스펙은 비표준이거나 독자확장 요소를 의미하기 때문에 구분하여 사용해야 합니다. - 웹에서 표준적으로 사용되는 기술이나 규칙 - 표준화 단체인 W3C가 권고한 표준안에 따라 웹사이트를 작성할 때 이용하는 HTML, CSS, JavaScript 등에 대한 규정이 담겨있다. - 어떤 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상 작동해야 함을 의미 - 표준 스펙을 잘 지키는 것 뿐만 아니라 구조적 마..

2021.09.29