이동식 저장소

지난 글에서도 이야기했지만, 이미지를 볼 수 없는 상황을 대비하여 대체 텍스트를 제공해야 한다. 보통 ``img`` 태그의 ``alt`` 속성에 대체 텍스트를 작성한다. 그런데 대체 텍스트가 일개 속성으로 적기에 너무 길다면? 이미지를 ``img`` 태그가 아니라 ``background``로 넣었다면? 마크업 태그로 대체 텍스트를 작성한다. 이 기법을 Image Replacement, 줄여서 IR이라고 한다. Investor Relationship 아니다. 배경 이미지? 아니, 그냥 배경 넣고 ``alt``도 넣으면 안 돼요? 배경 이미지가 계속 바뀌는 경우 ``alt``로 대응하기 쉽지 않다. 이런 경우에는 보통 이미지 바로 다음에 ``p`` 또는 ``span``으로 대체 텍스트를 작성한다. // 어떤..

인식의 용이성 적절한 대체 텍스트 제공 텍스트로 표현할 수 없는 콘텐츠(이미지 등)에는 스크린 리더가 읽을 수 있도록 대체 텍스트를 제공해야 한다. 멀티미디어 대체 수단 동영상의 음성을 대체할 수 있는 수단(자막, 스크립트, 원고 등)을 제공해야 한다. 음성이 없는 동영상의 경우 스크린 리더가 읽을 수 있는 자막이나 원고를 제공해야 한다. 콘텐츠의 명료성 콘텐츠는 색에 무관하게 구분되어야 한다. 굵기, 모양, 테두리 등을 이용하여 콘텐츠를 구별할 수 있다. 운용의 용이성 명확한 지시사항 제공 지시사항을 단일 감각으로만 제공해서는 안 된다. 모양, 굵기, 소리 등을 이용하여 지시사항을 명확히 표현해야 한다. 텍스트의 명도 대비 텍스트와 배경색 간의 명도는 4.5:1 이상으로 구현해야 한다. 페이지를 확대 ..

CSS에서 사용되는 길이는 크게 절대 길이와 상대 길이로 나눌 수 있다. 절대 길이 절대 길이란 어디에서나 같은 크기로 표현되는 길이를 말한다. 세상의 화면은 크기가 모두 다르기 때문에 절대 길이를 화면에 보여주기는 부적합하지만, 화면의 크기가 고정되어 있다면(ex: A4용지) 절대 길이를 사용하는 게 편하다. ``cm``: 센티미터 ``mm``: 밀리미터 ``in``: 인치 *``px``: 픽셀 (1px = $\frac{1}{96}$ in) ``pt``: 포인트 (1pt = $\frac{1}{72}$ in) ``pc``: 피카 (1pc = $\frac{1}{12}$ pt) * ``px``는 화면의 크기에 따라 상대적이다. 예를 들어 저해상도 장치에서는 1``px``이 화면의 점(픽셀) 하나를 의미할 수..

10월부터 프론트엔드 공부를 하고 있다. 맛보기로 Jetbrains Academy에서 HTML, CSS, JS 기초를 공부했다. 블로그에 HTML의 역사 따위를 적고 싶지는 않아서.. 한동안 뜸했다;; 이제부터는 실제로 페이지를 만들어 볼 계획이다. 만들면서 공부한 내용을 블로그에 올릴 계획.

MyVoca 2.0 완전히 새로운 UI Android의 새로운 UI 툴킷 Jetpack Compose를 사용하여 UI를 완전히 재작성하였다. Jetpack Compose를 사용하면 선언형 프로그래밍 기법으로 UI를 작성할 수 있으며, UI를 함수로 작성하는 특성상 Kotlin의 장점을 그대로 가져올 수 있다. 모듈화, 재사용성, 함수형 프로그래밍 등을 UI에 적용할 수 있는 것이다. 데이터에 따른 UI의 상태를 서술함으로서 데이터와 UI를 분리하며, 더 직관적인 코드를 작성할 수 있다. UI는 데이터를 보여주는 도구일 뿐이다. Navigation, ViewModel 등 Jetpack 라이브러리를 그대로 사용할 수 있다. 화면 설명 홈 화면: 오늘의 단어를 볼 수 있는 화면이다. 단어가 10개 이상일 때만..