![]()
📚 Today I Learned svg 이미지 다루기 색상변경 크기조정 keyframe 애니메이션 🎨색상변경 1. style or fill 속성 사용 태그에 style="fill:___" 속성을 사용하거나, 더 간단하게 fill="___" 속성을 사용하여 svg 이미지의 색상을 제어할 수 있다. 색상은 rgb형태, hex 값, 또는 색상의 이름을 직접 정의할 수도 있다. style="fill:rgb(42,169,224)" fill="#689edf" fill="green" 2. css로 변경하기 html css .img-box .green { fill: green; } 에 class를 주고 css로 색상을 변경할 수 있다. 📏크기조정 svg 태그 내부에 width와 height 속성을 명시하면 쉽게 크기를..
![]()
지난 글을 쓸때 jsFiddle을 본문에 삽입했었는데, 미리보기 페이지에서는 제대로 작동했지만 실제 보여지는 부분에서는 내용이 보이지 않았다. 링크나 삽입 방법이 잘못되었을지도 모른다고 생각해서 여러번 시도해봤지만 잘 되지 않았다. 그래서 찾아본 결과, 아무래도 jsFiddle은 벨로그에 삽입할 수 있는 기능이 아직 지원되지 않는것 같다. 그래도 다행히 CodePen은 개체 삽입 기능이 지원된다고 해서 금방 수정할 수 있었다😙 1. CodePen 회원가입 트위터, 깃허브, 페이스북, 이메일 중 편한것으로 가입하면 된다. 이메일로 가입하려고 했는데 이미 깃허브 계정으로 쓰고있더라...🤦♀️ 2. 코드 작성 및 저장 3. 소스코드 복사 우측 하단의 Embed 버튼을 누르고 Iframe 탭을 눌러 코드를 복..
![]()
html 0 count 1 0 count 2 0 count 3 css body { background: #FDFFCF; } .flex { display: flex; justify-content: space-between; margin: 100px auto; width: 50%; } .count-num { text-align: center; font-size: 35px; font-weight: 700; } JS $('.count-num').each(function() { // .count-num에 각각 적용 var $this = $(this), countTo = $this.attr('data-count'); // $this = 첫번째~세번째 .count-num // countTo = 첫번째~세번째 .cou..
