EverGiver

Gradient 그래디언트(gradient)는 하나의 색상에서 다른 것으로 부드러운 전환을 의미한다. - 선형 그러데이션을 정의하는 데 사용 - 태그 내에 중첩되어야 한다. - 수평 gradients 는 y1과 y2는 동일하며, x1과 x2는 차이가 있을 때 생성 - 수직 gradients 는 x1과 x2는 동일하며, y1과 y2는 차이가 있을 때 생성 - 경사(angular) gradients 는 x1과 x2는 차이가 있으며, y1과 y2 도 차이가 있을 때 생성 - 태그의 id 속성은 그라데이션의 고유한 이름을 정의 - 태그의 x1, x2, y1,y2 속성은 그러데이션의 시작 및 끝 위치를 정의 - 그라데이션 색상 범위가 둘 이상의 색으로 구성될 수 있으며 각 색상은 태그로 지정 - offset 속성..

이미지 마스크 내부에 요소를 선언하고, 식별 가능한 id 속성을 부여한다. 요소 mask 속성 값으로 url() 함수를 사용해 마스크 ID를 설정하면 마스킹된 이미지가 화면에 렌더링 된다. 주의할 점은 마스크는 Alpha Channel을 사용하므로 하얀색(#fff)일 경우 Opacity 100%와 같고, 검은색(#000) 일 경우 Opacity 0%와 같다. mask-text SVG LESSON 마스크(mask)와 클립패스(clipPath)의 차이점 - 마스킹은 마스크의 투명도 및 회색 값을 고려하여 부드러운 가장자리를 허용한다. - 클리핑은 다른 파트에서 정의한 요소의 일부를 제거하는 것을 의미한다. (이 경우 모든 반투명 효과는 불가능)

Component 컴포넌트는 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능으로 컴포넌트 기반으로 화면을 개발하게 되면 코드의 재사용성이 올라가고 빠르게 화면을 제작할 수 있다. 컴포넌트를 등록하는 방법은 전역(Global) 방식과 지역(Local) 방식의 두 가지가 있다. 지역 컴포넌트는 특정 인스턴스에서만 유효하고 전역 컴포넌트는 모든 범위의 여러 인스턴스에서 공통으로 사용할 수 있다. 컴포넌트의 이름은 알파벳 소문자와 숫자, 하이픈(-)만 포함하는 것이 원칙이고 알파벳으로 시작해야 한다. 컴포넌트 내의 data는 반드시 함수여야 한다. Global (전역) Local (지역) Props props는 컴포넌트에서 전달되는 속성의 값을 말하며 문자열이지만 객체의 배열 형식으로 되어있다. HTML 속성..

Animation의 주요 속성 애니메이션 요소의 이름 속성 - attributeName : 애니메이션 하고자 하는 속성의 이름 - attributeType = "CSS | XML | auto" ▷ CSS : CSS 스펙에 정의된 속성 (fill, visibility,...) ▷ XML : XML namespace로 정의된 속성 (x, y, width, height, transform,...) ▷ auto : 속성의 타입을 먼저 CSS에서 찾고 없으면 XML에서 찾는다. 시간제어 속성 - begin = "시간", end = "시간" - dur = "clock 시간 | indefinite | media" - restart = "always | never" - repeatCount = "횟수" - repeat..

Perspective (원근감) perspective perspective() 유형 속성 메서드 작성 위치 부모 자신 사용 방법 perspective: 값 transform:perspective(값) transform:perspective() - 3D 공간에서 요소와 관측 점과의 거리(원근감)를 지정하는 속성 - 값이 작을수록 가깝게 보이고, 멀수록 멀게 보인다. perspective - 속성은 부모에게 사용하고, 적용 범위는 자식에게만 가능 - perspective-origin을 사용할 수 있다. transform:perspective()와 perspective의 차이 - transform:perspective()의 경우 관찰자가 사물을 한꺼번에 본다. - perspective의 경우 관찰자가 사물을 ..

SVG 요소는 텍스트로 구성된 그래픽 요소를 그린다. 속성 x - 텍스트 기준선 시작점의 x 좌표 y - 텍스트 기준선 시작점의 y 좌표 hello svg dx - 이전 텍스트 요소에서 텍스트 위치를 수평으로 이동 dy - 이전 텍스트 요소에서 세로로 텍스트 위치를 이동 rotate - 글자마다 회전을 시킬 수 있다. - 설정한 회전 값 개수와 글자 수가 일치하지 않으면, 별도의 값이 설정되지 않은 글자는 마지막 설정 값을 따른다. svg lesson3 lengthAdjust - 글자 간격, 글리프 크기가 텍스트 길이에 맞게 조정되도록 설정 ▷ spacing : 글자 간격의 공간을 채우기 위해 조정 ▷ spacingAndGlyphs : 글자 간격뿐만 아니라 글리프 크기까지 조정 textLength - 텍..