웹46 [CSS] 간단하게 SVG 적용하는 법 SVG란? SVG(Scalable Vector Graphics)는 말그대로 확장 가능한 벡터 그래픽입니다. 벡터 그래픽이기 때문에 화질이 선명하며, 용량이 적습니다. 또한 SVG는 그 자체로 이미지 파일이자 소스파일이기 때문에 일러스트레이터와 같은 이미지 툴이나 코드에디터에서 바로 편집이 가능하다는 장점이 있습니다. 하지만 지원하지 않는 브라우저도 있으니 (ie 8이하 또는 안드로이드 2.3이하 버전) 참고해주세요. * SVG 이미지 다운받을 수 있는 사이트 하나 추천해드리겠습니다. Material Design Icons https://design.google.com/icons/ Material Icons Get Material Icons material.io - 구글에서 제공하는 아이콘이기 때문에 구글.. 2020. 5. 27. [Js] swiper / 스와이퍼 플러그인 기본 기능 및 사용 방법 오늘은 swiper 슬라이더 플러그인에 대해 공부해보겠습니다. swiper 플러그인은 만들기도 쉽고 다양한 기능들을 응용해 여러 가지 유형의 슬라이드를 만들 수 있습니다. ㅡ swiper 홈페이지 https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com ㅡ 먼저 swiper 간단한 사용법에 대해 알아보겠습니다. swiper 사용 방법 먼저 swiper 연결을 할 때에는 css와 js를 연결을 해주어야 합니다. *.. 2020. 5. 25. [CSS] clear 속성, float 속성, float 해제하는 방법(가상요소) clear 속성은 보통 float 속성을 해제할 때 많이 사용합니다. float은 블록요소를 강제로 좌우배치할 때 쓰이는데요, 하지만 float을 사용하게 되면 float이 설정된 요소는 브라우저가 높이 값을 인지하지 못하기 때문에 이때 clear을 사용해줍니다. clear의 속성은 clear은 취소하다라는 의미를 가지고 있는 것에 걸맞게 float 값을 해제해주어 높이 값을 인식합니다. * float 해제하는 방법 float을 해제하는 방법은 총 6가지 방법이 있습니다. 1. float된 요소의 부모태그에 강제로 높이 값을 지정해줍니다. (단점 : 반응형시 자동 높이 값 설정 불가) 2. float된 요소의 부모태그에 overflow:hidden을 적용해줍니다. (단점 : 해당 요소 안의 컨텐츠를 박스.. 2020. 4. 19. [Js] 트윈맥스(TweenMax.js) .to( )트윈맥스에서 가장 기본적으로 사용하는 것은 TweenMax.to( )입니다.animate( )와 비슷하다고 생각하시면 됩니다.TweenMax.to(taget, duration, {vars});- to : target에 적용된 값의 위치로 모션 이동- target : 대상(인자)- duration : 지속시간(몇초동안)- vars : 대상에 부여할 키 값 See the Pen TweenMax.to() .from( ) .to( )와 반대로 생각하시면 됩니다. .staggerFrom( )staggerFrom은 target(대상)이 배열 속성으로, 시작 시간을 지정된 시간만큼 엇갈리게 작동하게 하여균일하게 띄울때 유용합니다. TweenMax.to(target(Array), duration, {vars.. 2020. 3. 23. 이전 1 2 3 4 5 6 ··· 12 다음
