autumn-code 님의 블로그

JS Animation $("selector").animate(properties) properties : border, margin, padding, height, font-size, bottom, left, top, right, line-height, opacity, border-radisu (transformX) Effect Property Description .hide() 선택한 요소를 숨깁니다. .show() 선택한 요소를 보여줍니다. .tog..

GSAP Animation 사이트 : https://greensock.com/ CDN : TweenMax.to(target, duration, {vars}); Position : 버튼 클릭하면 오른쪽으로 이동하기Start box box box //jquery$(".btn1").on("click",function(){ $(".box1_1,.box1_2,.box1_3").animate({ ..

SVG SVG(Scalable Vector Graphic)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식입니다. Rect Rect : border-radius ..

CSS Reference box-shadow : {h-shadow} {v-shadow} {blur} {spread} {color} {inset} / none; Porperty Description h-shadow 그림자의 수평(X) 축 거리를 나타냅니다. ..

border-radius border-radius : border-top-left-radius | border-top-right-radius | border-bottom-right-radius | border-bottom-left-radius border-radius: 5px 6px 7px 8px; = border-top-left-radius : 5px; = border-top-right-radius : 6px; = border-bottom-right-radius : 7px; = border-bottom-left-radiu..

background-blend-mode normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity Porperty Description normal 배경색의 기본 값을 정의합니다. multiply 더 어두운 색으로 변경됩니다. screen 더 밝은 색으로 변경됩니다. overlay 원래 색상의 농도와 밝기를 변경합니다. ..

background Porperty Sample Description background background : #000 url(경로) no-repeat top / cover 배경 속기형 작성법 background-image background-image : url("경로"); 배경 이미지 설정 ..

Animation Animation animation : {name} {duration} {timing-function} {delay} {itration-count} {direction} {fill-mode} {play-state} Porperty Description animation-name @keyframes에 지정된 이름을 설정합니다. animation-duration 애니에이션이 실행되는 시간을 설정합니다. animation-timing-function 애니에이션 키프레임을 설..

CSS ReferenceCSSCSS HTML을 꾸며주는 스타일 시트입니다.HTML은 웹 사이트의 몸체를 담당한다면, CSS는 옷과 액세사리 같은 꾸미는 역할을 담당합니다.CSS Selector TageTypeDescriptionVersion..class{color:#fff;}클래스 선택자CSS1##id{color:#fff;}아이디 선택자CSS1**{margin:0; padding:0;}전체 선택자CSS2elementdiv{backfround:#fff;}요소 선택자CSS1element > elementdiv > p{color:#fff;}자식 선택자CSS1element + elementdiv + p{color:#fff;}형제 선택자CSS2[attribute]div[class] {color: #fff;..