Studio Two 에디터: 스타일 요소 사용하기

1. 사용자 지정할 버튼을 클릭합니다.

2. 디자인할 버튼 영역을 선택합니다.

   • 버튼:

     • 상태: 기본, 마우스오버 또는 비활성화 상태 중 사용자 지정할 버튼 상태를 선택합니다.

     • 채우기: 버튼 배경에 적용할 새 색상을 선택합니다.

     • 테두리: 버튼에 테두리를 추가합니다. 버튼 전체의 색상, 두께 및 스타일을 설정하거나, 개별 테두리 편집 아이콘을 클릭해 각 면을 변경할 수 있습니다.

     • 모서리: 버튼 모서리를 더 둥글거나 각지게 조정합니다(px 단위). 버튼 전체에 동일한 값을 적용하거나, 개별 모서리 편집 아이콘을 클릭해 각 모서리를 개별적으로 조정할 수 있습니다.

     • 음영: 음영을 적용하고 원하는 대로 조정합니다. 크기, 색상 등을 사용자 지정할 수 있습니다.

     • 간격: 다음 옵션을 사용해 버튼의 간격을 사용자 지정합니다.

       • 여백: 버튼의 가로 및 세로 여백을 조정합니다. 버튼 전체에 동일한 값을 적용하거나 각 면을 개별적으로 조정할 수 있습니다.

       • 간격: 버튼 텍스트와 아이콘 사이의 간격을 조정합니다.

     • 동작: 버튼의 정렬을 설정합니다.

   • 텍스트:

     • 상태: 기본, 마우스오버 또는 비활성화 상태 중 사용자 지정할 텍스트 상태를 선택합니다.

     • 텍스트 스타일: 패널에서 텍스트에 적용할 스타일을 선택합니다.

     • 글꼴: 드롭다운에서 글꼴을 선택한 후 굵기(기본, 굵게 등)를 선택합니다.
       참고: 일부 글꼴에서는 굵기를 선택할 수 없습니다.

     • 크기: 입력란에 텍스트 크기(px 단위)를 입력합니다.

     • 색상: 텍스트에 적용할 새 색상을 선택합니다.

     • 여백: 텍스트의 가로 및 세로 여백을 조정합니다.

     • 스타일: 텍스트에 굵게, 기울임꼴 등의 포맷팅 옵션을 적용합니다.

     • 대소문자: 텍스트를 모두 대문자, 모두 소문자 또는 각 단어의 첫 글자를 대문자로 표시할지 선택합니다.

     • 음영: 음영을 적용하고 원하는 대로 조정합니다. 크기, 색상 등을 사용자 지정할 수 있습니다.

1. 사용자 지정할 선을 클릭합니다.

2. 다음 옵션을 사용해 편집합니다.

   • 채우기: 선 색상을 선택합니다. 사이트 색상을 선택하거나 사용자 지정 색상을 추가할 수 있습니다.

   • 스타일: 선의 너비를 px 단위로 설정합니다.

1. 해당 컨테이너를 클릭합니다.

2. 다음 옵션을 사용해 사용자 지정합니다.

   • 채우기: 컨테이너의 새 색상을 선택합니다.

   • 테두리: 컨테이너에 테두리를 추가합니다. 전체 컨테이너의 테두리 색상, 너비 및 스타일을 설정하거나, 개별 테두리 편집 아이콘을 클릭해 각 면을 개별적으로 변경할 수 있습니다.

   • 모서리: 컨테이너의 모서리를 더 둥글거나 각지게 조정합니다(px 단위). 전체 컨테이너에 같은 값을 적용하거나, 개별 모서리 편집 아이콘을 클릭해 각 모서리를 개별적으로 조정할 수 있습니다.

   • 음영: 음영을 적용하고 원하는 대로 조정합니다. 크기, 위치 등을 사용자 지정할 수 있습니다.

   • 효과: 컨테이너에 배경 효과를 적용하고 슬라이더로 강도를 조정합니다.

1. 에디터 왼쪽에서 사이트 스타일 아이콘을 클릭합니다.

2. 패널의 탭을 스크롤하거나 화살표 아이콘을 클릭합니다.

3. 버튼, 선, 컨테이너 중 해당 탭을 선택합니다.

4. 추가 아이콘을 클릭합니다.

5. 입력란에 요소 이름을 입력합니다.

6. 옵션을 사용해 사용자 지정 디자인을 설정합니다.

1. 해당 요소를 클릭합니다.

2. 액션바에서 사용자 지정 스타일을 클릭합니다.

3. 패널에서 저장을 클릭합니다. 이 버튼은 사용자 지정 스타일 옆에 있습니다.

4. 요소를 저장할 방법을 선택합니다.

   • 스타일 업데이트: 디자인을 적용할 스타일을 선택한 후 저장을 클릭합니다.

   • 새 스타일 추가: 스타일 이름을 입력한 후 저장을 클릭합니다.

사이트의 기본 스타일 요소는 삭제할 수 없습니다. 기본 디자인이 사이트에 추가하는 다른 앱과 요소에 자동으로 적용되기 때문입니다. 하지만 필요에 따라 디자인을 변경할 수 있습니다.

예. 사용자 지정 디자인에 새로 사용한 색상이나 글꼴은 모두 패널에 저장됩니다.

예를 들어, 사용자 지정 글꼴과 색상으로 버튼을 추가해 스타일 요소로 저장하면 해당 글꼴과 색상이 사이트 스타일 패널에 추가됩니다.