속성패널
속성패널의 요소에 대해 알아보고 각 요소의 사용법을 안내합니다.
속성패널이란?
에디터 오른쪽에 위치한 속성패널을 활용하여 섹션 및 콘텐츠의 기본 디자인 속성을 설정할 수 있습니다.
속성패널의 사이트 설정이 되어있더라도 섹션과 콘텐츠 각각의 요소에 배경색, 여백, 라운드 등의 기본 속성 설정 및 애니매이션, 클릭 이벤트와 같은 고급 설정을 하실 수 있습니다.
1. 사이트
페이지에 공통으로 적용이 될 섹션의 너비, 간격 텍스트의 글꼴과 크기, 기본 배경색, 버튼 및 도형의 디자인을 설정할 수 있습니다.
설정 방법
에디터의 헤더 섹션 위 캔버스 영역을 클릭합니다.
오른쪽 속성 패널의 컬러 / 폰트 / 레이아웃 중 설정을 하려는 항목을 선택합니다.
아래 상세가이드를 참고하여 설정을 합니다.
1-1. 컬러
사이트의 콘텐츠에 공통으로 적용이되는 배경색, 텍스트 색상 등을 설정합니다.
다양한 컬러 팔레트 중 선택하여 사용을 하실 수 있으며, 아래 표를 참고하여 위치에 맞는 컬러값을 개별적으로 수정하여 사용을 할 수 있습니다.
컬러 팔레트는 크게 글자색과 배경색의 영역으로 나뉘게 되며, 총 7가지 색상으로 나눠 지정이 가능합니다.
각 요소마다 개별적으로 색상 수정이 가능합니다.
설정방법
디자인 에디터에 접속합니다 (에디터 접속하기)
캔버스 영역을 클릭 한 후 오른쪽 속성패널의 컬러 항목을 클릭합니다.
현재 적용 된 컬러 팔래트 중 색상 설정을 원하는영역의 설정 버튼을 클릭하여 색상표를 통해 색상을 지정하시거나, 색상값을 입력하여 설정합니다.
추천 컬러셋을 통해 일괄적으로 색상 지정이 가능합니다.
1-2. 폰트
페이지에 공통으로 적용이되는 글꼴, 크기 등을 설정합니다. 글꼴을 미리 지정하여, 페이지 디자인 시 보다 편하게 사용이 가능합니다.
각 콘텐츠마다 개별적으로 글꼴 수정이 가능합니다.
설정방법
기본 텍스트 블록
디자인 에디터에 접속합니다 (에디터 접속하기)
캔버스 영역을 클릭 한 후 오른쪽 속성패널의 폰트 항목을 클릭합니다.
설정하려는 항목에 마우스를 올린 후 오른쪽 끝 [설정 아이콘]을 클릭합니다.
글꼴 및 크기, 자간 등을 설정합니다.
기본 텍스트 블록은 이름 변경 및 목록 삭제가 불가능 합니다.
사용자 글꼴
[사용자 텍스트 추가] 버튼을 클릭합니다.
추가 된 텍스트에 마우스를 올린 후 오른쪽 끝 [설정 아이콘]을 클릭합니다.
관리를 위한 이름등록을 한 후 서체 크기 자간 등을 설정합니다.
1-3. 레이아웃_간격
섹션에 공통으로 적용이 되는 전체 너비와 격자 간격을 조절합니다.
전체 너비에 따라 작업 영역와 여백 영역이 갖는 크기가 달라지게 되며, 격자 간격에 따라 블록 사이의 간격이 달라지게 됩니다.
특정 섹션의 간격 및 너비를 개별 설정하는것은 불가능합니다.
설정 방법
디자인 에디터에 접속합니다 (에디터 접속하기)
캔버스 영역을 클릭 한 후 오른쪽 속성패널의 레이아웃 항목을 클릭합니다.
전체 너비 / 격자 간격의 토글을 드래그&드랍 방식으로 px값을 설정합니다.
px값을 직접 입력하여 설정을 할 수 있습니다.
1-2. 레이아웃_모양
콘텐츠 블록 중 버튼, 입력폼, 미디어의 모양을 설정할 수 있습니다.
라운딩, 원형 스타일 선택 시 사각 형태의 콘텐츠 구성은 불가능합니다.
2. 섹션
배경, 여백 등 기본 속성 설정을 섹션 마다 개별적으로 설정이 가능합니다.
각 항목의 사용안함 선택을 하면, 설정이 초기화 됩니다.
3. 블록
콘텐츠의 배경, 여백 등 기본설정과 애니메이션, 클릭이벤트의 고급 설정을 할 수 있습니다.
각 항목의 사용안함 선택을 하면, 설정이 초기화 됩니다.
Last updated
