킹바구니

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라..

https://codepen.io/pmx/pen/yLXQPrG 커스텀 체크박스, 라디오 버튼 ... codepen.io 디자인 시안이 오면 라디오박스나 체크박스는 90% 기존꺼를 안쓴다고 보면 되기때문에, 이참에 정리함.

scss란 css를 좀 더 편하게 쓸 수 있는 css 전처리기인데, 이를 어떻게 vscode에서 쓰고 css 파일로 컴파일화(브라우저에서는 scss 모르니까 css로 바꿔줘야함) 하는지 정리함. 2023년 버전으로 다시 씀. 1. vscode 확장 프로그램 설치 Live Sass Compiler을 설치한다. 그러면 IDE 하단에 아래와같이 watch sass라는 버튼이 나타나는데, 저걸 누르고 scss파일에서 저장할때마다 컴파일된 css파일이 생긴다. 이게 끝인데 사용자에 따라 css파일이 생성되는 위치, 압축된 css파일 유무 등이 다를 수 있음. 아래는 이후 설정 방법임. 2. settings.json 열기 컨트롤 + , 또는 파일-기본설정-설정을 클릭 한 뒤 우측 상단에 있는 전환용 아이콘을 누르면..

일하다가 쓰게 되었는데 헷갈려서 헤맸던 것들 정리함. 1. 기본 doc문서 https://getbootstrap.com/docs/5.0/components/offcanvas/#offcanvas-components Offcanvas Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin. getbootstrap.com 기본적인건 여기서 다 찾아서 쓰면 됨. 2. offcanvas 열기/닫기를 제이쿼리로 나타내기 $('.offcanvas').offcanvas('show'); $('.offcanvas').offcanvas('hide'); 이거..