최근 글

블로그 10주년

현재 쓰는 중인 블로그와 홈서버는 아직 생후 483일밖에 되지 않았지만, 예전에 네이버에 블로그를 만들고 포스팅을 시작한 지는 어언 10년이 다 되었네요. 제 만 나이가 아직 스물둘인데, 블로그 만 나이가 열 살이니 거의 인생의 반을 블로깅에 부었습니다. 근데 사실 중간에 쉰 기간도 꽤 있는 편이라 실감이 잘 나진 않습니다. 어제와 같은 오늘, 오늘과 같은 내일이 반복되기도...
:focus-visible로 접근성 높이기

:focus-visible로 접근성 높이기

접근성 높은 웹사이트를 만들기 위해 고려해야 하는 것 중 하나는 키보드 '만' 이용해도 사이트를 정상적으로 이용할 수 있어야 한단 것입니다. 시각장애나 신체장애를 가진 사용자는 키보드(혹은 그와 비슷한 장치)만 이용해 웹사이트를 이용해야 하는 경우가 많기에, 키보드로 선택한 요소에 하이라이트를 줄 필요가 있습니다. 크롬 86 버전에 추가된 :focuis-visible이란 의사 클래스(가상 클래스 / pseudo class)를 통해 이를 디자인을...
웹에서 다크 모드 구현하기

웹에서 다크 모드 구현하기

다크 모드(다크 테마)란, 밝은 배경에 어두운 글자 대신 어두운 배경에 밝은 글자를 사용하는 것입니다. 눈의 피로를 줄이기 위해 선호하는 사람이 꽤 있고, 콘트라스트(Contrast)가 높아지기에 텍스트나 이미지를 강조하는 데도 효과적입니다만, 긴 글을 표시해야 할 땐 독이 될 수 있으며, 난시 등의 이유로 어두운 배경에선 글자를 읽기 어려워하는 사용자도 있어 호불호도 꽤 갈리는 편입니다.그럼에도 Windows 10, MacOS,...
201007 블로그 제작일지

201007 블로그 제작일지

최근 블로그의 JS, PHP 파일보다 CSS 파일에 훨씬 많은 시간을 할애했습니다.커밋 메시지도 훑어보면 죄다 디자인 관련된 내용입니다. 기능 구현 등은, '그 기능이 정확하게 동작하는가?' 혹은 '그 기능이 얼마나 빨리 동작하는가?' 등의 채점할 수 있는 기준이 분명히 있고, 정답에 가까운 코드가 분명 있는데, 디자인은 그런 게 없어서 굉장히 고통스럽네요.물론 제가 보는 눈도, 만드는 손도 없다는 게...
JS 없이 더보기 / 접기 구현하기

JS 없이 더보기 / 접기 구현하기

종종 이 더 보기 / 접기를 위해 자바스크립트(특히 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...
200928 민주공원

200928 민주공원

부산시에서 밀어주는 꽃인가 싶을 정도로 없는 곳이 없는 꽃입니다.공원부터 아파트 단지, 골목에 작은 화단까지 전부 꽃무릇이 있더라고요. 이런 사진 건지려고 반드시 사진을 RAW로 찍습니다.포토샵에서 RAW 프로파일 좀 건드리다 보면 사진이 확 살아날 때가 많더라고요.이 사진도 역광이 강해 거의 꽃이 안 보이는 수준이었는데, 프로파일 좀 건드려 살렸습니다. 날갯짓이며 움직임이며 무진장 빠르던 나비입니다.수동으로 초점 잡다 보니 잡으면...
Before / After 이미지 슬라이더

Before / After 이미지 슬라이더

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을...

📚 카테고리

📃 싱글 페이지

카카오페이 qr코드 모바일이시라면 클릭