블로그 10주년

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

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

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

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

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