nana_log

좋아하는 걸 좋아하는 나나 🤟

Blog/CSS

프롤로그 시안 상에 얼핏 보기에는 비슷한 꺽쇄 아이콘이 여러 개가 있습니다. 하지만 자세히 살펴보면... 서로 색도 미묘하게 다르고 크기도 달라요..!! 이걸 표현하려면 총 세 개의 이미지가 필요합니다. 저 아이콘을 위해 이미지를 세 장이나 불러와야 한다니.... 스프라이트로 저장해서 사용하는 방법도 있긴 하지만, 만약 수정사항이 생기면 어떨까요? 이렇게 형태는 같지만 크기가 더 크고 색이 다른 아이콘이 필요해졌다고 해봅시다. 스프라이트 이미지를 가져다 쓰려고 해도 기존 거는 크기랑 색이 달라서 대응할 수가 없..죠......ㅠ_ㅠ 만약 저 아이콘이 픽셀이 아니라 코드라면 수정하기 참 편할 텐데요! 그럼 필요할 때마다 이미지의 색상 값과 크기 값을 변경해서 사용할 수도 있을 거고요. 이럴 때 필요한 게 ..

2021. 4. 11.

Blog/Web Animation

[글 출처] The Gooey Effect - Lucas Bebber from CSS-TRICKS 요약: 대충 SVG를 가지고 구이구이한 효과를 만드는 이야기 1. SVG 필터 자, SVG 필터는 다음과 같이 작성합니다. caniuse.com에 따르면 IE 10, Android 4.4 부터 지원하는 기능입니다. 필요한 경우 -webkit-filter 처럼 프리픽스를 넣어 주세요, 모든 SVG 필터는 요소 안에 정의됩니다. (defs = definitions 거든요!) 만들어 둔 필터를 적용하려면 아래와 같이 작성합니다 ;^) .selector { filter: url('#filter-id'); } /* * 또는 아래처럼 외부 SVG의 필터를 적용할 수도 있어요! * (대신 IE와 Edge는 미지원인 듯 ..

2019. 9. 18.

Blog/etc.

Document html, body { height: 100%; margin: 0; } body { font-family: Monaco; font-size: 12px; color: rgba(0, 0, 0, .7); } svg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; width: 100%; height: 100%; } ..

2019. 9. 17.

Blog/Web Animation

1. SVG란? SVG는, 확장 가능한 벡터 그래픽(Scalable Vector Graphics)을 말합니다. 2차원 그래픽을 표현하기 위해 만들어진 XML파일 형식의 마크업 언어인데요, 텍스트 편집기에서 CSS나 JS로 수정이 가능하다는 점이 가장 큰 장점이라 할 수 있습니다. 또, 확장이 가능하다는 점에서 확대해도 품질이 떨어지지 않습니다. 레티나나 모바일에 대응하기 위한 추가 작업도 필요 없고, 시각 장애가 있는 사용자들이 웹을 확대하더라도 품질 저하의 문제가 없죠! 단, 미지원 브라우저가 몇몇 있습니다. IE 8이라던가 IE 8이라던가 뭐 IE 같은 거요(ㅠㅠ) 2. SVG 사용하기 SVG는 도형과 선으로 이루어져 있고, 직접 path의 값을 입력해 뭔가를 그려낼 수도 있어요! 하지만 그걸 배우고..

2019. 9. 16.