킹바구니

접근성이라는게 aria~류만 잘 써주면 되는줄 알았더니, 실제로 스크린리더 기기별로 지원하는 aria가 달랐고, 또 원래대로라면 예를들어 '목록 버튼, 랜드마크'라고 정상적으로 읽어주는 것을, 업체측 사정에 따라 알아듣기 쉽게 '목록'이라고만 읽어줘야할 때도 있었는데, 그러다보니 작업하기가 참 까다로웠음. 처음에는 그렇게 바꾸다보니 이게 접근성이 맞나 싶다가도 오히려 또 굳이 저렇게 다 길게 읽어주는걸 보니 실제 쓰려면 그래도 간결한게 맞긴맞네라는 생각도 들었음(긴거는 진짜 '텍스트 필드, 글자를 입력하려면 이중탭 하세요, 맞춤법 로터를 이용한 사용' 뭐 이런식으로 textarea하나를 저렇게 읽어댐.. 물론 이건 iOS긴 하다만) 아무튼 그와중에 select box를 태그말고 커스텀으로 만들어야하는 상..

한창 작업하고 있는데 중간에 갑자기 풀을 받아야하거나, 아니면 풀을 받았는데 원래 작업내역이 있어서 디렉토리를 먼저 정리하라는 문구가 뜰때 할수있는 방법 (아래 방법 몰랐을 때는 새로 폴더 하나 파서 git clone해서 새로 받아서 작업했던거 노가다로 복붙함ㅎㅎ) --- 1. 변경사항을 스테이징에 올려놓고 터미널에서 아래와같이 입력 git stash git stash pop 둘중에 하나만 입력하면 됨. 나는 첫번째 줄로 잘 씀. 그러면 잠깐 로딩이 있다가 변경사항에 내역이 싸악 사라짐(놀라지 말것!!) 2. 풀 받는다 3. 수정내역들을 다시 가져온다 git stash apply 그러면 다시 변경내역/스테이징 영역에 나타난다 4. stash에 있던 내역 지워주기 git stash drop 마지막으로 임시..

1. jquery 확인 - 제이쿼리가 먼저 로드가 되었나 - 경로가 제대로 설정되어서 정상적으로 불러와졌나 2. 이렇게 써보기 // 기존 $(document).ready(function() { // code }); // 이렇게 변경 $(document).ready(function($) { // code }(jQuery)); --------------- https://stackoverflow.com/questions/1857072/why-is-document-ready-not-firing-for-me/2409157

1. click $('a').click(function() { // action }) 단순한 클릭 이벤트 2. on $(document).on('click', '.addBtn', function() { // action }) 동적(기본 html에 써둔 태그말고 자바스크립트 등으로 나중에 별도로 추가된 태그들) 요소에게 줄 수 있는 이벤트. .addBtn 부분은 해당 이벤트를 주고싶은 요소의 id나 class값을 써주면 된다.

https://youtu.be/D9JrOBiy0bc 1. 안에 여러 요소를 선택해버림(초점분리현상) 쉬슬러 고농축 세제 3.05L 4개 19,900 원 저 코드를 아이폰으로 읽어보면, 빨간색 영역과 같이 3번을 나눠서 읽어버림. 안에 block요소가 들어가는 경우 발생하는 이슈임. 이해가 안되는건 아니지만 스와이프를 여러번 해야하기때문에 불편함. 방법1(추천) 대신 과 같은 inline요소로 작성 방법2 에 role="text'를 넣어줌 https://youtu.be/FVSBHQmMzIQ 2. 실제 영역을 잡지 못함 뿐이 아닌 다른 요소에서도 일어나는 문제임. 방법1(추천) 안에 요소를 등으로 감싸고, 거기에 aria-hidden줘서 못읽게 하기 (이렇게하면 자식을 잡을 수 없어서 부모요소를 잡게 됨) ..

정말 필요한 기능이지만 정말 어려운 작업이 접근성인 것 같음. 그나마 A11Y 유튜브 채널이 있긴하지만, 구글에 자료 자체도 많이 없는데다 pc, 아이폰, 안드로이드마다 읽는 방식이 다르고 이슈들도 넘쳐나서 통일화 시키기도 어려울뿐더러, 물어볼 사람도 없고 심지어 스크린리더 기기마다 읽는 방식이 다 달라서 정말..................................................... 어찌되었든 나중에 또 이런 작업을 할지 모르니 조금이라도 기록해두는 것이 좋을 것 같아 카테고리 하나 파서 만들어두는 것임. (주기적으로 업데이트됨) - IOS voiceover에서 발생하는 이슈 - input, button 등에 쓰이는 속성

접근성 관련해서 작업을 하는데 여건 까다로운게 아님. 난 그냥 단순하게 숨겨진 텍스트 같은걸로 표시해주면 되는줄 알았는데, 정작 스크린리더로 읽을 때를 적용하다보니 포커스 작업이 굉장히 중요하다는걸 알게됨. 게다가 pc랑 mobile에서 작업할 때도 다른게, pc는 tab키를 눌러서 움직이고, 태그는 포커스가 안가고, 포커스 없는 태그한테 포커스를 주려면 tabindex="0"을 적용하면 되는데, mobile은 스와이프로 움직이고, 태그는 읽고, tabindex는 통하지 않음ㅜ 1. 읽는 기준 (아이폰 기준) 봄 여름 가을 숨겨진 텍스트겨울 숨겨진 텍스트겨울 숨겨진 텍스트기상청 날씨가 나쁘다 결론은 제일 마지막 방법인 role과 aria-label을 활용하는 것이 제일 좋은 듯 하다. 실제로 개발하면 1..

단어 data-어쩌고 요소는 DOM에 정보를 저장할 수 있는 방법임. 1. data()사용 $('span').data('index', 2) // index를 2로 바꿔줌 2. attr() 사용 $('span').attr('data-index', 2) 가끔 data()로 썼을 때 안되는 경우 attr로 쓰면 된다. --------------------------------- // 전부 $('li') // $('li.active') // 첫번째 $('li').eq(0) // 의 이전 요소 $('li').prev(); // 의 다음 요소 $('li').next(); // 의 바로 위 부모 요소 (바로 위★) $('li').closest(); // 의 부모 중 .wrap이란 class명을 가진 요소 $('li'..

1. 기본 예시 // 컨트롤 + o키 눌렀을 때 $(document).keydown(function(event) { if(event.keyCode === 79 && event.ctrlKey) { alert('안녕하세요'); } }); 2. 브라우저 기본 이벤트 삭제 // 컨트롤 + o키 눌렀을 때 $(document).keydown(function(event) { if(event.keyCode === 79 && event.ctrlKey) { alert('안녕하세요'); if (event.preventDefault) event.preventDefault(); if (event.stopPropagation) event.stopPropagation(); } }); 컨트롤 o같은 경우 파일첨부창이 뜨는데, 이를..

1. mysql 설치 는 여기가 설명이 잘 되어이따. https://velog.io/@joajoa/MySQL-%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C-%EB%B0%8F-%EC%84%A4%EC%B9%98-%EB%B0%A9%EB%B2%95 MySQL 다운로드 및 설치 방법 📌Window10에 MySQL 다운로드 및 설치 하기 1. MySQL 홈페이지 접속 MySQL 링크 주소 : velog.io 2. MySQL 8.0 Command Line Client 열기 mysql 전용 cmd같은건데 열고 비밀번호 치고 들어가서 대충 데이터 넣어줌 // box라는 db를 만듬 create database box; // 지금부터 box db를 쓸꺼임 use box; // box db안에 user라..