접근성 높은 웹사이트를 만들기 위해 고려해야 하는 것 중 하나는 키보드 "만" 이용해도 사이트를 정상적으로 이용할 수 있어야 한단 것입니다. 시각장애나 신체장애를 가진 사용자는 키보드(혹은 그와 비슷한 장치)만 이용해 웹사이트를 이용해야 하는 경우가 많기에, 키보드로 선택한 요소에 하이라이트를 줄 필요가 있습니다. 크롬 86 버전에 추가된 :focus-visible이란 의사 클래스(가상 클래스 / pseudo class)를 통해 이를 디자인을
다크 모드(다크 테마)란, 밝은 배경에 어두운 글자 대신 어두운 배경에 밝은 글자를 사용하는 것입니다. 눈의 피로를 줄이기 위해 선호하는 사람이 꽤 있고, 콘트라스트(Contrast)가 높아지기에 텍스트나 이미지를 강조하는 데도 효과적입니다만, 긴 글을 표시해야 할 땐 독이 될 수 있으며, 난시 등의 이유로 어두운 배경에선 글자를 읽기 어려워하는 사용자도 있어 호불호도 꽤 갈리는 편입니다.그럼에도 Windows 10, MacOS,
최근 블로그의 JS, PHP 파일보다 CSS 파일에 훨씬 많은 시간을 할애했습니다.커밋 메시지도 훑어보면 죄다 디자인 관련된 내용입니다. 기능 구현 등은, "그 기능이 정확하게 동작하는가?" 혹은 "그 기능이 얼마나 빨리 동작하는가?" 등의 채점할 수 있는 기준이 분명히 있고, 정답에 가까운 코드가 분명 있는데, 디자인은 그런 게 없어서 굉장히 고통스럽네요.물론 제가 보는 눈도, 만드는 손도 없다는 게
종종 이 더 보기 / 접기를 위해 자바스크립트(특히 jQuery)를 이용하는 케이스가 꽤 많습니다.하지만 화려한 효과 없이 이를 구현하는 건 HTML과 CSS만으로 충분합니다.
Github 요즘 간간이 포토샵도 만지작거리는데, 보정 열심히 끝내면 원본이랑 비교해보는 재미가 쏠쏠하더라고요. 그러다 이미지 비교엔 슬라이더만 한 게 없단 생각에, 슬라이더를 한 번 제작해봤습니다.이래저래 찾아보니 죄다 jQuery로 만든 것뿐이더라고요. 외부 라이브러리에 의존하지 않게 제작해봤습니다. HTML <div class="comparison-slider"> <figure> <img src="./images/before.jpg" alt="before" /> <figcaption>Before</figcaption> </figure> <figure> <img src="./images/after.jpg" alt="after" /> <figcaption>After</figcaption> </figure> </div> .comparison-slider 안에 두 개의 figure를 추가하고, 그 안에 img와 figcaption을
클린 코드 및 최적화 "나만 읽을 거고, 다 외우니 상관없다"란 안일한 생각으로 악습관을 늘려가지 않을까 걱정되기도 하고, 이제 기능 추가보단 내실을 기할 때라 판단해 코드 대청소를 시작했습니다.대충 지었던 변수명 및 함수명을 제대로 짓고, 새로 작성하는 코드엔 각주도 어지간하면 추가합니다. 또한 글로벌 변수를 줄이고, class로 다루는 게 더 낫다고 판단되는 것들은 class로 묶어뒀습니다. 일례로 배너 및
PWA(Progressive Web App)란 웹은 높은 접근성을 가진 매력적인 플랫폼입니다.한 번의 코딩으로 거의 모든 기기에서 접근할 수 있고, 검색이나 주소의 공유로 누구나 어디에서나 접속할 수 있습니다. 별도의 업데이트 또한 필요없이 접속할 때마다 최신 상태를 보여줍니다. 하지만 유저를 묶어두기 힘들단 단점이 있습니다.앱을 설치하면 단순히 아이콘 한 번 클릭하면 앱을 실행시킬 수 있지만, 웹은 브라우저를 켜고 사이트에 접속하는
6개월 전에 One Signal로 추가했던 푸시 알림 구독을 직접 구현해봤습니다! 구현을 위해 알림을 보내는 작은 서버를 하나 추가했습니다. Node.js로 https 서버 만들려다 고생만 실컷 하고 실패했는데, ssl 인증은 Nginx가 하고 proxy_pass로 Node.js 서버로 넘겨주니 간단하게 되더라고요.MongoDB도 처음 써봅니다만, 구독 정보도 JSON 형식이고, Node.js로 서버를 돌리니 제일 맞는 DB 같아 골랐습니다. 들어가기 전에, 댓글 알림 구현을
Imgur API를 사용해 이미지를 업로드하는 방법을 알아봅니다.