뭐라도 기억하기 위한 블로그

💡 스니펫을 미리 설정해두면 빠르고 일관된 방식으로 코드를 작성할 수 있어 코드 작성 효율성을 증가시킬 수 있다. (나는 현재까지 실무에서 주석을 달때 사용해보았다. 협업에서는 코드의 통일성이 중요하니까...) 📌 스니펫 설정하는 방법ctrl(cmd) + shift + p 단축키를 사용하여 명령 팔레트를 연다.Configure User Snippets를 검색 후 클릭특정 언어에 대한 스니펫 파일 선택ex) html일 경우 html, css일 경우 css 선택  스니펫 만들기html을 선택하면 좌측에 html.json이란 json 파일이 생기는 것을 확인 할 수 있다.//html.json 주석 스니펫 만들기{  "comment": {    "prefix" : "comment",    "body": [ ..

📌 윈도우 호스트 파일 경로C:\Windows\System32\drivers\etc\hosts 📌 호스트 파일의 특징파일 확장자 없음.관리자 권한으로 실행.메모장과 같은 VSCode, 워드패드등 텍스트 편집기로 열기 가능 📌 호스트 파일 열기텍스트 편집기(메모장) 등 마우스 우클릭 ➡️ 관리자 권한으로 실행파일 > 열기 선택후 윈도우 호스트 파일 경로로 이동파일 형식을 ‘텍스트 문서(*.txt*)’에서 ‘모든 파일 (*.*)’로 수정수정 사항 수정수정 내역 저장 * 호스트 파일의 수정은 시스템 동작에 있어서 영향을 줄 수 있기 때문에 주의해서 수정 필요

✅ aria 속성이란?웹, 앱 콘텐츠의 접근성 향상을 위해 사용되는 속성.ARIA 속성은 접근성 트리를 수정 ➡️보조 기술이 사용자에게 콘텐츠를 제공하는 방식을 변경.요소의 실제 기능이나 동작은 바뀌지 않는다.✅ aria의 중요성스크린리더 사용자 지원키보드(tab) 사용자 지원코드 가독성 향상WCAG(Web Content Accessibility Guidelines) 준수 ✅ aria 속성 예시📍 role : 요소의 역할을 정의 X 안내 메세지 선택  📍 aria-label : 요소에 대한 설명 제공메뉴 버튼  📍 aria-hidden : 요소를 보조 기술에서 숨긴다화면 UI에는 그려지지만 스크린 리더에서는 읽지 않는다.포커스가 불필요한 영역에 주로 쓰인다.  📍 aria-expanded :..

ios처럼 android도 하단에 자막패널 나오게 설정하기 가능하다.안드로이드가 ios보다 절차가 살짝 더 복잡한듯...✅ AOS TalkBack 하단에 자막패널 성절하기 1. [설정] 앱에 들어간다. 2. [접근성] 메뉴로 이동3. [TalkBack] 메뉴로 이동4. TalkBack 페이지에서 [설정] 메뉴로 이동 5. 하단에 있는 [고급 설정] 메뉴로 이동 6. [개발자 설정] 메뉴로 이동 7. [음성 출력 표시] 스위치 활성화   📍 음성출력 표시 스위치를 활성화 시키면 아래와 같이 토크백이 실행 될때 자막 패널이 하단에 나타나는걸 확인 할 수 있다.

테스트를 하다보면 일일이 설정에 들어가서 토크백 (talkback)을 껐다켰다 하기 엄청 번거롭다. 이번에는 안드로이드 접근성 관련해서 간편하게 단축키 또는 간편 아이콘 버튼으로 설정하는 방법!(사실 매번 내가 까먹어서 정리함...)   ✅ AOS Talkback 간편 아이콘 버튼으로 설정하기 1. [설정앱] 들어가기   2. [접근성] 목록 선택    3. [고급 설정] 목록 선택  4. [접근성 버튼] 목록 선택  5. 접근성 버튼에서 [내비게이션 바] 옵션을 선택하면 제일 화면 하단 네비게이션 바에 talkback (토크백) 아이콘이 생기고,[다른 앱 위에 표시] 옵션을 선택하면 우측 하단 사이드에 아이콘 버튼이 생긴다.해당 버튼들을 누르면 토크백이 자동 실행된다.    ✅ AOS Talkback ..

접근성 테스트를 할때, 스크린 리더기가 뭐라고 읽히는지 잘 안들릴 때가 종종 있다. (나는 오로지 테스터의 마인드... ) 그럴 때 설정하기 좋은 VoiceOver 자막 패널 설정하기 ✅ iOS VoiceOver 하단에 자막패널 성절하기 1. [설정] 앱 실행 2. [손쉬운 사용] 목록 탭 3. [VoiceOver] 메뉴 탭 4. [재막 패널] 활성화 자막패널을 활성화 시키면 보이스오버 실행시 하단에 보이스 오버 음성이 자막으로 나타난다.

접근성 관련 테스트를 할때, 제일 어려운게(?)iOS의 경우 VoiceOver, AOS의 경우 TalkBack 크고 끄기 아닐까 싶은데,실상 단축키만 설정해놓으면 완전 편하다. ✅ iOS VoiceOver 단축키 설정하기  1. [설정] 앱으로 들어간다.2. [설정]에서 스크롤을 조금 내리면 보이는 [손쉬운 사용] 클릭. (또는 " 손쉬운 사용 " 검색)3. [손쉬운 사용] 에서 조금 스크롤 하면 보이는 [손쉬운 사용 단축키] 클릭4. [손쉬운 사용 단축키] 페이지에서 제일 하단에 위치한 [VoiceOver] 활성화   5. 손쉬운 사용의 기능을 켜고 끄기 위해 토글하려면 측면 버튼(전원버튼)을 3번 연속 탭하면 VoiceOver를 간편하게 켰다껐다 할 수 있다.

페이지가 로딩 될 때, 이미지 영역은 뒤늦게 로딩 되면서 덜컹- 하는 느낌이 들때가 있다.(실제로 프로젝트할 때 해당 결함이 많았다.)  ⭐해당 문제를 해결하기 위한 방법 정리! 1. 이미지를 감싸는 컨테이너에 크기를 지정 - 실제로 내가 제일 많이 사용했던 방법 중 하나    2. 또는 이미지 컨테이너에 최소 높이값을 지정 위 처럼 마크업 자체에 사용해도 되고, CSS에 적용해도 됨.  3. loading="lazy" 속성을 사용- 이미지의 지연 로딩(lazy loading)을 구현하는 HTML 속성- 이미지가 뷰포트(화면에 보이는 영역)에 들어올 때까지 이미지 로딩 지연- 페이지 초기 로딩 시 이미지 요청을 줄여 로딩 속도를 향상- 사용자가 스크롤하여 이미지가 뷰포트에 가까워지면 이미지를 로드- 불필..

✅ Android 기기 화면크기Android 모델명해상도 pt화면 크기 inchZ Fold 5, 4345x883 (접힌 상태)691x829 (펼친 상태)6.2인치 (접힌 상태)7.6인치 (펼친 상태)Z Fold 3320x872 (접힌 상태)674x842 (펼친 상태)6.2인치 (접힌 상태)7.6인치 (펼친 상태)Z Fold 2414x736 (접힌 상태)590x736 (펼친 상태)6.2인치 (접힌 상태)7.6인치 (펼친 상태)Z Flip 3, 4, 5360x880 (접힌 상태)384x939 (펼친 상태)6.7인치 (펼친 상태)S23, S22360x7806.1S23+, S22+384x832 또는 412x8926.6S23 Ultra, S22 Ultra384x8246.8S21360x8006.2S21+384x85..

회사에서 마크업 작업을 하다가 아래와 같이 a태그 안에 이미지 태그를 넣으니 이미지 사이사이 여백이 생기는 현상이 생겼다.해당 작업을 하면서 새롭게 알게 된 사실을 정리해본다!    ✅ 여백이 생기는 이유1. 인라인 요소의 특성 태그는 기본적으로 인라인 요소.인라인 요소는 텍스트와 같은 방식으로 취급되어 베이스라인(baseline)을 기준으로 정렬된다. 2. 베이스라인과 여백 인라인 요소는 베이스라인 위에 배치되며, 베이스라인 아래에는 소문자 g, p, y 등을 위한 여분의 공간이 존재한다.이미지는 이 공간을 사용하지 않지만, 여전히 그 공간이 남아있어 여백으로 보이게 된다.  3. HTML 코드의 공백 여러 이미지를 나란히 배치할 때, HTML 코드에서 태그 사이의 줄바꿈이나 공백이 브라우..