접근성이 필요한 이유 웹 접근성(별칭: a11y)은 모두가 사용할 수 있도록 웹사이트를 디자인, 개발하는 것을 의미합니다. 보조과학기술(assistive technology)들이 웹페이지들을 해석할 수 있도록 접근성을 갖추는 것이 필요합니다. React는 접근성을 갖춘 웹사이트를 만들 수 있도록 모든 지원을 하고 있으며, 대부분은 표준 HTML 기술...

Javascript를 이용한 input value 유효성 검사 예제 value 입력 시 다음 칸으로 focus() 된다 <div class="input__wrap input__certy"> <label for="">인증번호 4자리 입력</label> <input type="tel" maxlength="1...

RegExp, 정규 표현식이란? 정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴이다. JavaScript에서는 정규 표현식도 객체로서, RegExp의 exec()와 test() 메서드를 사용할 수 있다. String의 match(), matchAll() (en-US), replace(), replaceAll(), sear...

ios mobile에 키패드 이슈 모바일 기기에서 input에 focus 되었을 때 가상 키패드가 올라오게되는데, OS에 따라 키패드가 올라왔을때의 영역이 다르게 동작해서 크로스브라우징 이슈가 있었다. ios에서 상단 fixed 헤더가 위로 밀려버리는 문제가 발생했다. 헤더가 위로 밀려버리는 현상 자체를 해결할순 없었고, 키패드가 올라왔을때 ...

navigator.userAgent user agent는 HTTP 요청을 보내는 디바이스와 브라우저 등 사용자 소프트웨어의 식별 정보를 담고 있는 request header의 한 종류이다. 지금 사용하고 있는 브라우저의 navigator.userAgent를 콘솔에 찍어보면 아래와 같이 나온다. 사용하고 있는 OS의 종류, 브라우저의 정보를 담고있다...

이슈 input type="password"는 값을 입력하면 value가 ●●●●● 형태로 출력이 되는데, 이 도트의 사이즈가 브라우저별로 상이하여 디자인적으로 value가 input 가로사이즈 영역을 넘어서는 문제, 크로스브라우징 문제가 발생했다. 검색결과 문제는 (2016년 기준) 비밀번호 입력란에 파이어폭스와 인터넷 익스플로러는 유니코드 코...

node.js로 웹 서버 만들기 node.js 설치 작업폴더 만든 후 에디터로 오픈 server.js 파일 만들고 아래 코드 작성 const express = require('express'); const path = require('path'); const app = express(); app.listen(8080, functio...

스크린리더와 브라우저별, 그리고 매해 업데이트 되는 내용들 때문에 여간 웹 접근성을 지키며 블라인드 처리하기가 쉽지 않다. 그래서 ‘이 방법 으로 해결될 수 있습니다~’ 라는 방법은 아직 없다고 봐야 한다. 이 글에서 잘못 쓰이고 있는 blind 처리 방법들과, 해외의 훌륭하신 분들이 다수의 리딩 테스트를 거쳐 공개한 코드들을 소개한다. 대체 텍스...

jQuery보다 JavaScript를 선택해야 하는 이유 웹 개발을 하다 보면 jQuery를 사용할지, JavaScript를 사용할지 고민하게 된다. 한때 jQuery는 웹 개발의 필수 도구였지만, 현대 웹 환경에서는 JavaScript가 여러 측면에서 더 나은 선택이 될 수 있다. 성능과 사용자 경험 웹 성능은 더 이상...

WAI-ARIA는 HTML의 접근성 문제를 보완하는 W3C 명세입니다. WAI-ARIA는 HTML 요소에 role 또는 aria-* 속성을 추가하여 컨텐츠의 ‘역할(roles), 상태(states), 속성(properties)’ 정보를 보조기기에 제공합니다. WAI-ARIA 속성을 모든 HTML 요소에 무분별하게 사용할 수 있는 것은 아닙니다. r...