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 효과를 제거해 이미지가 돋보이지 않게 업데이트했습니다. 제목을 제외한 텍스트들의 색상을 더 어둡게 변경했습니다. 댓글 애니메이션...

이사 끝났습니다

이사 끝났습니다

어제 23시에 도착했는데, 서버 세팅하기엔 최적의 시간이 다가오는 중이라 모조리 하고 잘 생각이었습니다. 멀티 탭이 없단 사실을 깨닫기 전까지는요.점검 중이란 페이지를 띄워두고 왔으면 어떻게라도 멀티 탭을 구했겠지만, 어제 낮에 서버의 webroot 폴더, db 등을 모조리 안 쓰는 랩탑에 복제해두고 그 랩탑을 서버로 돌려두고 있어서 원래 쓰던 서버와 속도, 성능 등을 제외하면 똑같은 수준이기에 그냥 가벼운...

서버 이사 예정입니다

서버 이사 예정입니다

* 20200301 추가 : 2021.03.03으로 날짜가 변경되었습니다. 다음 주 토요일(2021.03.06)에 부산에서 서울로 이사 가게 되어 홈 서버도 이르면 다음 주 금요일이나 토요일부터 약 1 ~ 2일간 꺼질 예정입니다.상태 확인을 위한 사이트도 만들어뒀고, 이사가 끝나면 글 써서 푸시 알림도 갈 예정이니 DNS 캐시 때문에 예전 IP로 계속 접속하는 참사를 막기 위해선 그냥 금요일 저녁 즈음부턴 접속을...

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

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

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

📚 카테고리

제작일지

제작일지

Tips

Tips

작업물

작업물

잡담

잡담

갤러리

갤러리

📃 싱글 페이지

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