분류 전체보기(401)
-
WAI-ARIA 접근성: aria-rable, aria-labelledby
이전 포스팅에서 WAI-ARIA의 기본적인 내용에 대해 알아봤다면 이번엔 자주 사용하는 ARIA 속성에 대해서 알아보려 한다. ARIA는 HTML요소에 접근 가능한 설명용 텍스트를 넣을 수 있다. 그 방법이 바로 ARIA의 속성 중 label과 관련된 속성을 사용하는 것이다. 간단하게 설명을 먼저 하자면 aria-label은 화면에 현재 요소를 설명할 텍스트가 없을 경우에 사용하는 설명용 텍스트를 담고 있고, aria-labelledby는 화면에 현재 요소를 설명할 텍스트가 있을 경우에 해당 텍스트 영역과 현재 요소를 연결할 때 사용한다. aria-label 1. aria-label은 모든 html태그에서 사용할 수 있다. 2. 이미지를 사용해 시각적 표현을 할 경우에 대체 텍스트 역할을 한다. 일반적인..
2023.01.03
-
WAI-ARIA 접근성: role
WAI-ARIA 란? WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications)는 W3C에서 만든 기술로, WAI-ARIA 혹은 ARIA로 불린다. 마우스와 같은 포인팅 장비를 사용하기 힘든, 스크린 리더를 사용하는 사용자들에게 동적 컨텐츠, JavaScript, Ajax, Vue, React 등과 같이 페이지를 새로고침 하지 않고도 페이지의 내용과 데이터가 바뀌는 영역에 역할, 속성, 상태 정보를 추가하여 동적인 컨텐츠에 보다 원활하게 접근하고 페이지에 접근성을 높여 여러 사용자들에게 원활한 페이지 이용을 도와준다. ex) 버튼을 클릭하여 페이지를 새로고침이나 링크 이동으로 전환되는 것이 아닌 컨텐츠 내용이나 구조가 바..
2023.01.03
-
Git pull/push 시 Password 물어보지 않도록 설정하기(credential.helper)
git을 쓰다보면 간혹 config 미스, 환경 변경으로 push/pull 등 기능 실행 시 계정과 패스워드를 물어보는 경우가 발생합니다. credential 설정이 되어있지 않다면 계정정보를 요청하는게 당연하지만 한창 개발하고 있는 과정에서는 굉장히 귀찮고 번거로워집니다. 아래 코드를 터미널에 입력하면 로그인 정보가 캐시에 저장돼 반영구적으로 인증 절차가 생략됩니다. // terminal git config credential.helper store git config credential.helper cache git config credential.helper 'cache --timeout=00000' git config credential.helper store --global 설명 1. Crede..
2022.12.26
-
input 글자수 입력 후 다음 칸에 focus
input maxlength 값 만큼 입력 후 다음 input에 자동으로 focusing 된다. 카드번호 입력, 비밀번호 1글자씩 입력 등에 사용된다. 카드번호 취소 취소 취소 취소 유효기간 취소 $(".section__joincard .form__item-input.flex input").keyup (function () { var charLimit = $(this).attr("maxlength"); if (this.value.length >= charLimit) { $(this).parent().next().find('input').focus(); return false; } });
2022.12.23
-
mobile font size
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{font-size:11.66px} } 위 코드처럼 font-size를 주게 되면 브라우저 가로 사이즈에 따라 자동으로 폰트사이즈가 조절되고, rem으로 작성된 스타일의 크기가 자동으로 도절된다. 간단한 모바일 웹 페이지에서 사용하기 용이하다. 계산식은 아래와 같다. 10 : 360 = X : 420 10 : 360 = X : 390
2022.12.21
-
모바일 디바이스 체크
모바일 디바이스를 체크하여 PC웹 환경인지, mobile 환경인지 알아낼 수 있다. 이 코드를 활용해 모바일용, 또는 PC화면용 동작을 다르게 할 수 있다. function detectMobileDevice(agent) { const mobileRegex = [/Android/i, /iPhone/i, /iPad/i, /iPod/i, /BlackBerry/i, /Windows Phone/i] return mobileRegex.some(mobile => agent.match(mobile)) } const isMobile = detectMobileDevice(window.navigator.userAgent) if(isMobile){ // 모바일 } else { // PC }
2022.12.12