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

접근성 관련 테스트를 할때, 제일 어려운게(?)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 코드에서 태그 사이의 줄바꿈이나 공백이 브라우..

모바일 화면 개발을 하다보니,디바이스별 해상도를 간단하게 알아두는게 좋겠다 싶어서 정리하게 되었다.✅ iOS 기기 화면크기 iOS 모델명 해상도 pt 화면 크기 inch아이폰 16 프로 맥스440x9566.9아이폰 16 프로402x8746.3아이폰 16 플러스430x9326.7아이폰 16393x852 6.1아이폰 15 프로 맥스430x932  6.7 아이폰 15 프로393x8526.1아이폰 15 플러스430x9326.7아이폰 15393x8526.1아이폰 14 프로 맥스430x932 6.7아이폰 14 프로393x852 6.1아이폰 14 플러스428x9266.7아이폰 14390x8446.1아이폰 13 프로 맥스428x9266.7아이폰 13 프로390x8446.1아이폰 13390x8446.1아이폰 13 미니..