배너 이미지

CSS Grid로 Masonry 레이아웃 만들기

CSS Grid로 Masonry 레이아웃 만들기

grid-template-rows: masonry란 스펙이 작년에 추가되어 이제 자바스크립트 한 줄 없이도 Masonry 레이아웃을 구현할 수 있는 시대가 오긴 했지만, 크롬 최신 버전에서도 layout.css.grid-template-masonry-value.enabled를 활성화해야 작동할 정도로 브라우저 지원율이 처참한 수준입니다. 모든 요소의 position을 absolute로 준 뒤 JS에서 위치 지정 (CSS + JS) (세로로 요소가 정렬되어도 상관없다면) Flex box 등으로 레이아웃 지정 (CSS) grid-auto-rows와 grid-row-end를 활용해 레이아웃...

210308 블로그 제작일지

210308 블로그 제작일지

메인 헤더 디자인 헤더의 배경에 추가되는 특성 이미지(썸네일)의 역할은 단지 제목에 적당한 시각적 즐거움을 주기 위함인데, Parallax 효과에 간혹 색이 강렬한 이미지도 쓰다 보니 본연의 역할을 하지 않고 오히려 본인이 더 돋보일 때도 있는 것 같아 그래디언트를 하나 추가하고 Parallax 효과를 제거해 이미지가 돋보이지 않게 업데이트했습니다. 제목을 제외한 텍스트들의 색상을 더 어둡게 변경했습니다. 댓글 애니메이션...

이미지 줌 라이브러리 제작일지

이미지 줌 라이브러리 제작일지

Github라이브 데모 일전에 블로그에 업데이트하고 굉장히 만족도가 높았던 이미지 줌 효과를 난생처음 npm 패키지로 만들어보고 있습니다.그간 만든 것은 대부분 코드를 복사 붙여 넣기 해야 쓸 수 있었는데, 이젠 cdn 링크를 script로 추가하는 건 물론이고, npm i smooth-zoom으로 설치까지 할 수 있습니다. webpack으로 빌드해보려다 계속 실패해서 일단 수동으로 작업해서 올려뒀는데, Rollup으로 갈아타거나 간단한 스크립트를 만들거나 해서...

210205 블로그 제작일지

210205 블로그 제작일지

이미지 줌 효과 배경색 변경 기존엔 배경에 블로그의 배경 색이 깔렸는데, 이젠 이미지에 사용된 색의 평균값이 들어갑니다.HTML5 Canvas를 활용해 이미지를 분석해서, 구글 포토에 올린 이미지들은 여전히 블로그의 배경색이 깔립니다. 이 Stackoverflow 글을 참고하시면 이미지를 분석하는 다양한 방법을 참고하실 수 있습니다. 모바일에선 줌 효과를 볼 수 없어 아쉬웠는데, 이젠 모바일에서도 눈에 띄는 효과가 생겼습니다. 하나 단점은,...

VSCode를 Syntax Hihglighter로 쓰는 방법

VSCode를 Syntax Hihglighter로 쓰는 방법

자바스크립트 라이브러리가 별로인 이유 이미 하이라이팅이 끝난 html을 사용하기에 클라이언트가 할 일이 줄어든단 점, .cshtml등의 파일은 지원하지 않는 라이브러리가 많단 점을 제외하고 단순히 하이라이팅된 결과물만 봐도 보통 VSC가 압도적으로 우세합니다.훨씬 정교한 하이라이팅에 다양한 테마까지 지원되니 한 번 써보시면 도대체 라이브러리가 왜 필요한가 싶으실 겁니다. 일렉트론을 기반으로 구동되기에, html 에디터만 있으면 하이라이팅 된 html을 복사할 수...

210129 잡다한 제작일지

210129 잡다한 제작일지

블로그 자동 재구독 2020년 결산에서 언급했던 문젠데, 저 글에 적었던 대로 2021년의 저는 해결 방법을 알아냈습니다. 푸시 알림 구독 기간이 만료되어 생기는 문제였는데, pushsubscriptionchange 이벤트의 리스너를 추가하면 해결할 수 있는 문제였습니다.짧게 첨언하면, pushsubscriptionchange 이벤트는 기간 만료 등 애플리케이션 제어 밖에서 푸시 알림 구독에 변화가 생겼을 때 발생합니다. 이제 매번 기간 만료될 때마다 다시 구독 버튼을...

WebP 업데이트

WebP 업데이트

WebP는 구글에서 만든 이미지 포맷으로, JPEG, PNG 등의 포맷보다 우월한 압축률을 자랑하는 포맷입니다.물론 IE는 읽지 못하는 포맷이고, 사파리도 부분적으로만 지원하기에 결국 기존 이미지 포맷과 병행해서 사용해야 한단 단점이 있습니다. 개인적으론 앞선 단점보다 이미지를 내려받았을 때 휴대폰에서 이미지를 볼 수 없단 단점 때문에 싫어했고요. 근데 이젠 딱히 아이돌 관련된 사진을 올리지도 않으니 블로그에 내려받을 이미지도 없고,...

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