if else vs if if 차이 if { // 조건1 } else if() { // 조건2 } else if() { // 조건3 } 얘는 조건1만 만족하면 그거 실행하고 끝남. 조건3이 만족해도 조건1만 하고 끝남. if { // 조건1 } if { // 조건2 } if { // 조건3 } 얘는 만족하는 조건 있으면 다 들어감. Javascript 2022.06.10
기본태그 어디까지 아니? 인라인 태그 모든 태그 정리한것 아님. 필요한것만 빼서 정리. 1. https://developer.mozilla.org/ko/docs/Web/HTML/Element/a - HTML: Hypertext Markup Language | MDN HTML 요소(앵커 요소)는 href 특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만듭니다. developer.mozilla.org - 기본적으로 링크(href)를 위한 태그이나 href요소는 필수가 아님. - href에 #를 쓰면 페이지가 새로고침/최상단으로 이동하는데 개발/접근성 처리시 주의(링크할 필요없으면 href를 없애고, 버튼으로 사용할꺼면 role=button 추가) - 안에 또다른 를 .. html_css 2022.06.08
나만 헷갈림? style.left, offsetWidth, clientWidth, scrollWidth 총정리 1. HTMLElement.style document.querySelector('div').style.left = '100px'; document.querySelector('div').style.width = '200px'; 어떤 element을 css말고 javascript로 변경하고 싶다면 이렇게 쓰면 됨. 그런데, width값을 알고싶어서 저걸 쓰면 값이 제대로 나오지 않음 그 이유는 css나 인라인코드로 width값 등이 설정되어있더라도, 자바스크립트로 별도로 지정되지 않았다면 style.width형태로는 요소의 값을 뽑아낼 수 없음. 즉 css로 display: none을 해서 화면상에는 없어도 자바스크립트로 별도로 값을 지정해줬다면 그 값을 출력함. 자바스크립트로 width를 10000px로 .. Javascript 2022.06.03
jqeury에서 focus()가 안먹힐때 태그 예를들어 이런 태그가 있는데 focus를 줘도 안먹는 경우가 있음. 뭐 css적으로 display: none한것도 아니고, $('p').get(0).focus()이렇게도 해보고 그랬는데 결론은 그냥 셋타임아웃이 제일 효과적임. $('p').focus(); setTimeout(function() { $('p').focus(); }, 100); 난 혹시 몰라서 저런 경우 발생시 두개를 다 써놓곤 함. 시간초는 보통 100~200정도 다들 하는듯.. jquery focus() not working html_css 2022.06.02
안드로이드, 아이폰 접근성 자막패널 열기 접근성 기능 빠르게 켰다끄기 단축키는 이곳에서 확인 가능 [https://peamexx.tistory.com/134] ----------------------------------------------------- 귀로만 듣다보면 문장을 잘못 듣거나, 단어가 헷갈리는 경우가 있음. 이럴때 자막 패널을 켜두면 텍스트로 확인하기 용이함. 안드로이드 (voice assistant) 1. 설정 - 접근성 - 스크린 리더 - 설정 - 개발자 옵션 - TTS출력 표시 아이 편해 !! 안드로이드 (talkback) 1. 설정 - 접근성 - 설치된 서비스 - talkback - 설정 - 고급 설정 - 개발자 설정 - 음성 출력 표시 생긴거는 위에 voice assistant의 자막패널과 똑같이 생김. 아이폰 1. 설정.. 접근성 2022.05.25
안드로이드, 아이폰 접근성 버튼 빨리 여는법, 단축키, 빠른실행, 숏컷 접근성 테스트를 하려면 빨리 켜고 빨리 꺼야하는데 매번 설정에 들어가서 켜서 다시 빠져나오는게 너무 불편했었음. 그러다가 빠른실행 방법을 알게되서 정리함. ----------------------------------------- 참고로 talkback과 voice assistant 차이점도 정리해봄. talkback은 안드로이드 기존 스크린리더이며, voice assistant는 삼성에서 만든 스크린리더로 갤럭시 s6부터 이용 가능함. 둘다 기본적으로 안드로이드에 설치되어있음 [https://nuli.navercorp.com/community/article/1132808]. ※ 그런데 안드로이드 11, One UI 3.0이후 업데이트로 talkback과 voice assistant을 통합하여 새로운 (.. 접근성 2022.05.24
console.log찍었는데 [object Object]라고 출력될때 가끔 로그찍을때 요로코롬 나올때 있음. 객체형태라서 그런데 방법은 2가지 1. JSON.stringify console.log(JSON.stringify(data)) 2. console.dir console.dir(data) Javascript 2022.05.23
modal이 떠있을때 background focus못하게 하기 부트스트랩 모달을 쓰고 있었기때문에 기본적으로 role='dialog', aria-modal='true'이런게 다 기본적으로 되어있는데도 안드로이드에서만 스와이프하다보면 뒷배경에 focus가 가능했었음. 위 스크린샷처럼 떠있는 'save changes'가 focus된 상태에서 오른쪽으로 스와이프하면 뒷 background에 있는 다른 요소에 focus가 가버림 개빡 방법 $('header, footer').attr('aria-hidden', 'true'); 다행히도 aria-hidden을 뒷 요소들한테 다 주면 된다. modal이 켜졌을땐 true, 꺼졌을땐 false로 해주면 뒤에 안잡음. display none이나 visibility hidden이런것도 해봤는데 얘네는 자칫하면 화면이 밀려버리는 경우.. 접근성 2022.05.23
ie9에서도 쓰는 promise polyfill 코드 promise, asnyc, await 이런 최신 문법들이 나왔지만 현실적으로 ie를 맞춰야한다거나 하는 상황이 벌어지면 쓸수가 없음. 그럼 콜백함수를 쓸수밖에 없는데 어쩌다보면 막 너무 지저분해지고 길어지고 하는 상황들이 벌어짐. 그래서 polyfill을 찾아보다가 유튜브에서 한번 보고 따라해봄. https://codepen.io/pmx/pen/XWZJzGM promise polyfill (IE9 맞춤) ... codepen.io ---------------------------- 아니면 이를 지원하는 라이브러리같은게 있는데 하나 아는거는 rsvp.js라서 이걸로도 한번 해봄. https://codepen.io/pmx/pen/abErVqx RSVP.js (IE9 맞춤) ... codepen.io Javascript 2022.05.03
bootstrap modal, offcanvas에 transition 효과 지우기 modal 열때 스무스하게 열림/닫힘 효과 없애는 방법 modal은 class에 .fade 삭제 offcanvas는 css 추가 .offcanvas { transition: transform 0s; } modal은 css줘보고 난리쳤는데 그냥 저게 직빵임. class없애도 열고 닫는데 지장없음. 접근성 작업한다면 꼭 저런 스무스 애니메이션 빼길 바람(스무스한 그 찰나에 focus를 잃어버리는 등 별짓이 다 일어남) html_css 2022.04.29
