접근성 높은 웹사이트를 만들기 위해 고려해야 하는 것 중 하나는 키보드 '만' 이용해도 사이트를 정상적으로 이용할 수 있어야 한단 것입니다. 시각장애나 신체장애를 가진 사용자는 키보드(혹은 그와 비슷한 장치)만 이용해 웹사이트를 이용해야 하는 경우가 많기에, 키보드로 선택한 요소에 하이라이트를 줄 필요가 있습니다. 크롬 86 버전에 추가된 :focus-visible이란 의사 클래스(가상 클래스 / pseudo class)를 통해 이를 디자인을...
다크 모드(다크 테마)란, 밝은 배경에 어두운 글자 대신 어두운 배경에 밝은 글자를 사용하는 것입니다. 눈의 피로를 줄이기 위해 선호하는 사람이 꽤 있고, 콘트라스트(Contrast)가 높아지기에 텍스트나 이미지를 강조하는 데도 효과적입니다만, 긴 글을 표시해야 할 땐 독이 될 수 있으며, 난시 등의 이유로 어두운 배경에선 글자를 읽기 어려워하는 사용자도 있어 호불호도 꽤 갈리는 편입니다.그럼에도 Windows 10, MacOS,...
종종 이 더 보기 / 접기를 위해 자바스크립트(특히 jQuery)를 이용하는 케이스가 꽤 많습니다.하지만 화려한 효과 없이 이를 구현하는 건 HTML과 CSS만으로 충분합니다. HTML <details> <summary>Click me</summary> <div> Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia eum fugiat, dignissimos exercitationem, dicta quidem iste quia voluptatum iusto vel, eius maiores distinctio cupiditate optio laborum natus architecto...
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을...
PWA(Progressive Web App)란 웹은 높은 접근성을 가진 매력적인 플랫폼입니다.한 번의 코딩으로 거의 모든 기기에서 접근할 수 있고, 검색이나 주소의 공유로 누구나 어디에서나 접속할 수 있습니다. 별도의 업데이트 또한 필요없이 접속할 때마다 최신 상태를 보여줍니다. 하지만 유저를 묶어두기 힘들단 단점이 있습니다.앱을 설치하면 단순히 아이콘 한 번 클릭하면 앱을 실행시킬 수 있지만, 웹은 브라우저를 켜고 사이트에 접속하는...
시작하기 전에 Imgur에서 앱을 추가하시고 클라이언트 ID를 발급받으셔야 합니다.회원가입을 진행하셨으면 클라이언트 추가 페이지로 가주세요. Authorization callback URL은 API 키를 발급받을 때 쓰는 주소입니다.그냥 운영하시는 웹사이트의 주소를 써넣으시면 됩니다만, 그냥 네이버 주소 같은 것 치셔도 작동은 합니다. 성공적으로 클라이언트 추가를 마치시면 위 페이지가 나옵니다.Client ID: 아래에 적힌 문자열을 복사해둬 주세요.혹시 Client ID를 잊으시거나 클라이언트 설정을 변경하시려면...
![[워드프레스] 한글이 없는 댓글 자동으로 삭제하기](https://marshallku.com/wp-content/uploads/2020/07/comment-removed-400x279.png)
워드프레스 블로그를 운영하다 보면 하루에 10개가 넘게도 쌓이는 스팸 댓글 때문에 골머리를 앓는 게 한두 번이 아닙니다.블랙리스트를 사용해 특정 단어들만 차단해둬도 9할은 차단하긴 합니다만, 가끔 괴상한 내용으로 블랙리스트를 피하는 댓글이 있습니다. Akismet 등의 스팸 차단 플러그인도 괜찮은 선택지일 수 있겠지만, 한글로 블로그를 운영하면 굳이 무거운 플러그인 붙여다 스팸을 차단할 필요가 있나 싶습니다.글 작성자도 한글을 쓰니,...
![[티스토리] 댓글에 링크 및 이미지 추가하기](https://marshallku.com/wp-content/uploads/2020/06/comment-updated-400x231.png)
업데이트 2020.07.03 - innerHTML을 사용하지 않고 댓글 내용을 업데이트합니다. 단순히 텍스트밖에 적을 수 없는 티스토리 댓글에 링크, 이미지, 비디오, 유튜브 등을 추가해 화려하게 꾸미는 스크립트입니다. HTML 수정 <s_rp_container> 바로 아래에 있는 요소에 id가 없다면 하나 추가해주세요.방명록에도 사용하시려면 <s_guest_container> 아래에 있는 요소에 같은 id를 추가하시면 됩니다. [##_rp_rep_desc_##]을 감싼 요소에 class가 없다면 하나 추가해주세요. 댓글용과 답글용 2개가...
Windows의 개발 환경은 예전부터 최악이란 평가가 많았지만, 작년 5월 WSL의 등장으로 옛말이 되었습니다.많이 불안정하고 느리단 평이 많아 설치를 꺼렸으나, 지난 12일에 WSL 2가 나오며 꽤 괜찮아졌단 평이 많길래 저도 설치해봤습니다. 물론 리눅스의 개발 환경이 최강인 이유 중 하나인 '그것밖에 할 게 없다'는 이유는 Windows가 앞으로 아무리 발전해도 도달할 수 없겠지만요. Windows 하위 시스템 활성화 윈도우...
