웹(Web)51 SVG svg는 백터(vector) 이미지를 표현하기 위한 포맷으로 w3c에서 만든 백터 이미지 표준입니다. SVG 자체는 CSS가 아닙니다만 CSS를 이용해서 다양한 효과를 줄 때 SVG를 활용하는 경우가 많기 떄문에 여기서는 SVG에 대해서 간략하게 언급만하겠습니다. (사실은 어렵게 수업을 만들고 나니까 이건 CSS가 아니잖아라는 생각을 나중에 하게 되었습니다. 만들어진 수업을 버릴까하다가 못 버리고 포함시켰습니다. 보셔도 좋고 안보셔도 좋습니다. ^^;; ) 벡터와 비트맵의 차이 비트맵은 이미지가 깨지는 현상이 있지만 벡터는 이미지가 깨지지 않는다 jpg,png,jpeg들이 비트맵 the noun project라고 하는 사이트는 다양한 프로그램 아이콘들을 제공 Bitmap(png) Vector(svg) b.. 2021. 4. 15. Transform Hello Transform! transform은 엘리먼트의 크기, 위치, 모양을 변경하는 속성입니다. display:inline-block을 하면 블록과 인라인의 속성을 모두 갖는다 transform:scale(2)는 두배로 늘렸다는 뜻이다 scaleX는 X축의 변화 scaleY는 Y축의 효과를 주는 것이다 scale(0.5,0.5)는 x축과 y축을 1/2씩 줄였다는 뜻이다 transform2 트랜스폼을 하기 위해서는 단위가 필요하다 deg=degrees rad=radians turn=회전수 translate=이동 length-percentage:길이의 비율 px em rem 등이 있다 transform-origin은 세자리를 쓸 수 있는데 100 0 0 0 100 0 0 0 100 등이 있다 tran.. 2021. 4. 15. 혼합(blend) 블랜드는 이미지와 이미지를 혼합해서 새로운 이미지를 만들어내는 기법입니다. background-blend-mode 배경이미지와 배경색을 혼합한다 background-size를 cover로 하면 전체이미지가 다 보인다 background-blend-mode를 color color-burn color-dodge darken difference exclusion 등으로 설정할 수 있다 .blend hover를 선택자로 주면 마우스를 댔을 때 효과를 설정할 수 있다 transition은 장면전환 mix-blend-mode Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, maiores! Lorem ipsum dolor sit amet, consec.. 2021. 4. 15. 필터 이미지에 다양한 효과를 주는 기능 Mountain 부드럽게 장면전환을 하는 transition 올리면 변하는 것이 hover 2021. 4. 15. 이전 1 2 3 4 5 6 ··· 13 다음