[Day 4] 레이어 속성 창

30일간의 Framer.js 스터디

레이어 속성 창에서 값 조절해보기



<그림. 빈 레이어>

현재 레이어 코드는 생성되었지만 아무 내용도 없습니다. 레이어의 속성들은 코드로 작성해서 변경할 수도 있고 , 속성 창을 이용할 수도 있습니다. 여기서는 속성 창을 이용해서 수정해보도록 하겠습니다.

속성 창을 표시하기 위해서 위 그림 1번 항목의 layerA = new Layer 구문 왼쪽의 작은 버튼을 누릅니다. 그러면 중앙의 레이어 창이 속성 창으로 바뀌게 됩니다. 간단하게 레이어의 배경 색상을 변경해보겠습니다. 나머지 속성은 표를 참조해서 연습해보시기 바랍니다. 

<그림>에 ‘2’라고 표시된 Background 항목의 색상을 클릭합니다. 현재는 투명 표시로 되어있습니다. 파란색으로 변경해보겠습니다. 물론 원하는 색상을 선택하셔도 무방합니다. 



<그림. 배경 색상이 변경됨>

색상 선택 후 레이어의 배경색이 바뀐 걸 확인할 수 있습니다. 그리고 소스코드 창에도 코드가 추가된 것을 볼 수 있습니다. 추가된 코드를 수정해도 오른쪽의 결과창에 반영이 되니 본인에게 편한 방법으로 조절하면 됩니다. 크기나 위치의 단위는 픽셀(px)입니다.

또한 레이어에는 기본 속성들 이외에 이미지에 적용되는 필터(Filters) 속성들이 있습니다. 필터 속성들에 대해서는 이미지를 설명할 때 다시 알아보겠습니다.