leeda-cloud

SVG SVG의 장점 SVG 이미지는 확대 축소 시에도 깨지지 않는다. 애니메이션을 추가할 수 있다. 용량이 적어 빠르다. SVG의 단점 IE 하위에서는 작동하지 않는다. 복잡한 svg를 구현 시 속도가 저하된다. width, height, viewBox svg 크기는 width와 height로 조정 가능하며, viewBox를 이용해 svg의 기준점과 배율을 정할 수 있다. viewBox = "min-x, min-y, width, height"를 의미하며 아래처럼 작성 시 ! 화면에 이런 식으로 나오는 걸 볼 수 있다. TEXT (fill, stroke, stroke-width, stroke-dasharray) SVG 요소는 텍스트로 구성된 그래픽 요소를 그린다 My cat is Grumpy! 위처럼 입..

background-attachment:fixed를 사용해 모바일에서 확인해 본 결과 모바일에서는 작동하지 않거나 버벅인다. 이를 잡기 위해서는 clip-path를 이용해야 한다. clip-path는 클리핑 마스크로써 다양한 모양을 만들 수 있다. 하지만 브라우저 호환성은 한번 알아만 두자. https://caniuse.com/?search=clip-path "clip-path" | Can I use... Support tables for HTML5, CSS3, etc CSS Masks Method of displaying part of an element, using a selected image as a mask caniuse.com html css .bg-fixed { position: relati..

이 css는 비표준이지만 모바일에서 많이 사용한다. 모바일에서 링크를 클릭시 해당 부분이 영역이 잡히는 것이 보이는데 이런 부분을 투명으로 만들고 싶을 때 아래처럼 많이 사용한다. -webkit-tap-highlight-color: transparent; /* for removing the highlight */ 투명이 아니라 다른 색상으로도 표현할 수 있다. -webkit-tap-highlight-color: red;