ios mobile fix item + keypad 이슈

ios mobile에 키패드 이슈 모바일 기기에서 input에 focus 되었을 때 가상 키패드가 올라오게되는데, OS에 따라 키패드가 올라왔을때의 영역이 다르게 동작해서 크로스브라우징 이슈가 있었다. ios에서 상단 fixed 헤더가 위로 밀려버리는 문제가 발생했다. 헤더가 위로 밀려버리는 현상 자체를 해결할순 없었고, 키패드가 올라왔을때 스크롤이 되지않게 input blur를 해주는 방향으로 작업되었다. 우선 모바일일 때 body에 mobile 클래스를 넣어준 후 키보드가 올라올만한 input에 focus 시 keyboard-on 클래스를 body에 추가해줬다. 그리고 그 상태에서 input이 아닌 다른곳을 터치하게 되면 input에 focus를 blur처리해줬다. 모달팝업 내에 가상키패드도 문제였기..

2023.04.06

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

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

2023.04.06

node + Express 서버에 리엑트 프로젝트 띄우기

node.js로 웹 서버 만들기 1. node.js 설치 2. 작업폴더 만든 후 에디터로 오픈 3. server.js 파일 만들고 아래 코드 작성 const express = require('express'); const path = require('path'); const app = express(); app.listen(8080, function(){ console.log('listening on 8080'); }); 4. 터미널 열어서 npm init -y 입력 5. npm install express 입력 이렇게 하면 웹 서버 만들기 끝 서버 미리보기를 띄우고 싶으면 터미널에 nodemon server.js 입력 nodemon이 설치되어 있지 않다면 node server.js 입력 리액트 프로젝트..

2023.02.25

[CSS] 웹 접근성을 고려한 .blind .hidden 처리

스크린리더와 브라우저별, 그리고 매해 업데이트 되는 내용들 때문에 여간 웹 접근성을 지키며 블라인드 처리하기가 쉽지 않다. 그래서 '이 방법 으로 해결될 수 있습니다~' 라는 방법은 아직 없다고 봐야 한다. 이 글에서 잘못 쓰이고 있는 blind 처리 방법들과, 해외의 훌륭하신 분들이 다수의 리딩 테스트를 거쳐 공개한 코드들을 소개한다.  대체 텍스트(숨긴 텍스트)는 언제 사용할까?화면상에는 나타나지 않지만 구조성 숨겨진 제목을 넣어줘야 하는 경우디자인상 아이콘을 사용하면서 적절한 대체 텍스트(숨긴 텍스트)를 제공해줘야 하는 경우 잘못된 방법1. 화면상 영역을 지니지 않게 하는 방법.hidden{display:none;}// 또는.hidden{visibility:hidden;}우선, 기본적으로 displ..

2023.02.24

vanilla JS로 siblings 구현하기

jQuery의 메소드 중 하나인 siblings()는 선택한 자신 요소를 제외한 형제 요소들을 모두 고르는 메소드다. 이를 바닐라 자바스크립트로 구현하려면 filter() 를 사용해 비교적 간단하게 구현할 수 있다. 예제코드 HTML one two three jQuery $(".one").siblings(); JavaScript const siblings = (el) => [...el.parentElement.children].filter(node => node != el); const one = document.querySelector('.one'); console.log(siblings(one)); // 함수에 엘리먼트를 넣으면 그 엘리먼트의 형제 요소들을 배열로 반환한다. // > (2) [li.t..

2023.02.13

WAI-AREA 실무 예제 코드로 적용하기

WAI-ARIA는 HTML의 접근성 문제를 보완하는 W3C 명세입니다. WAI-ARIA는 HTML 요소에 role 또는 aria-* 속성을 추가하여 컨텐츠의 '역할(roles), 상태(states), 속성(properties)' 정보를 보조기기에 제공합니다. WAI-ARIA 속성을 모든 HTML 요소에 무분별하게 사용할 수 있는 것은 아닙니다. role 또는 aria-* 속성을 특정 HTML 요소에 사용할 수 있는지 ARIA in HTML 명세를 검토하면서 적용해야 합니다. ARIA in HTML : https://www.w3.org/TR/html-aria/ 0. 선택된 요소를 표현하는 방법으로 ::after WAI-ARIA를 사용할 수 없는 경우, 선택된 요소를 표현하는 방법으로 ::after 를 이용..

2023.01.28