1. CSS의 background 속성 사용 .image { background-image: url(bg.gif); } 2. 태그에 alt 속성을 빈 값으로 사용 <img src="spacer.git" alt=""> 3. aria-hidden=”true” 사용 <img src="bg.jpg" aria-hidden="true"...

ARIA role (역할) 특정 요소에 역할 정의, 사용자에게 정보 제공, 부여한 역할 동적 변경 불가 ARIA role 속성 role="application" 동일요소x, div 요소와 같이 그룹역할을 하는 요소로 대체 role="banner" 비슷한 의미로 <header>사...

숨김 제목과 같이 일부 컨텐츠를 숨길 필요가 있다. 컨텐츠를 숨기는 방법으로는 CSS를 활용해 display:none, visibility:hidden을 활용할 수 있다. 이러한 기술은 웹 페이지에서 보이지 않을 뿐만 아니라 스크린 리더와 같은 보조 기술로도 탐색이 불가능하다. aria-hidden aria-hidden은 스크린 리더와 같은 보조 ...

이전 포스팅에서 WAI-ARIA의 기본적인 내용에 대해 알아봤다면 이번엔 자주 사용하는 ARIA 속성에 대해서 알아보려 한다. ARIA는 HTML요소에 접근 가능한 설명용 텍스트를 넣을 수 있다. 그 방법이 바로 ARIA의 속성 중 label과 관련된 속성을 사용하는 것이다. 간단하게 설명을 먼저 하자면 aria-label은 화면에 현재 요소...

WAI-ARIA 란? WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications)는 W3C에서 만든 기술로, WAI-ARIA 혹은 ARIA로 불린다. 마우스와 같은 포인팅 장비를 사용하기 힘든, 스크린 리더를 사용하는 사용자들에게 동적 컨텐츠, JavaScript, ...

git을 쓰다보면 간혹 config 미스, 환경 변경으로 push/pull 등 기능 실행 시 계정과 패스워드를 물어보는 경우가 발생합니다. credential 설정이 되어있지 않다면 계정정보를 요청하는게 당연하지만 한창 개발하고 있는 과정에서는 굉장히 귀찮고 번거로워집니다. 아래 코드를 터미널에 입력하면 로그인 정보가 캐시에 저장돼 반영구적으로 인...

input maxlength 값 만큼 입력 후 다음 input에 자동으로 focusing 된다. 카드번호 입력, 비밀번호 1글자씩 입력 등에 사용된다. <form class=""> <div class="form__group"> <div class="form__item"> <label>카...

html { font-size:calc(100vw*10/360); } @media (min-width: 360px) { html{ font-size: 10px; } } /* or */ html { font-size: calc(100vw*11.66/420); } @media (min-width:420px) { html { ...

모바일 디바이스를 체크하여 PC웹 환경인지, mobile 환경인지 알아낼 수 있다. 이 코드를 활용해 모바일용, 또는 PC화면용 동작을 다르게 할 수 있다. function detectMobileDevice(agent) { const mobileRegex = [/Android/i, /iPhone/i, /iPad/i, /iPod/i, /Blac...

react 18 버전에서 새롭게 추가된 hook이 있다. useTransition useTransition을 사용하면 동작이 느린 컴포넌트들을 혁신적으로 빠르게 동작시킬 수가 있다. // App.js import { useState } from "react"; function App(){ let [name, setName] = useState(...