가이드/콘텐츠 생성/블록/디자인 블록/버튼 디자인

버튼 디자인

색상, 글꼴, 테두리, 음영 등을 조정하여 사이트의 버튼을 사용자 정의하세요. 이 가이드에서는 사용 가능한 스타일링 옵션과 적용 방법을 안내합니다.

버튼 스타일 사용자 정의

버튼 스타일을 사용자 정의하려면 다음 단계를 따르세요.

  1. 목록 보기를 사용하여 버튼 블록을 선택합니다.
"목록 보기"가 열리고 "버튼 블록"이 강조 표시됩니다.
  1. 오른쪽 사이드바의 블록 설정에서 스타일 아이콘을 클릭합니다.
스타일 아이콘이 강조 표시된 버튼 블록의 블록 설정 사이드바.
  1. 버튼 블록의 다음 스타일을 사용자 정의합니다.
    • 색상: 버튼 블록의 배경 색상을 선택합니다. 색상에 대해 자세히 알아보세요.
    • 타이포그래피: 버튼 글꼴 유형 및 크기를 변경합니다. 타이포그래피에 대해 더 자세히 알아보세요.
    • 크기: 안쪽 여백, 여백, 블록 간격을 설정합니다. 크기에 대해 자세히 알아보세요.
    • 테두리: 테두리 색상과 반지름을 사용자 정의합니다. 테두리에 대해 자세히 알아보세요.

개별 버튼 스타일

버튼 블록의 개별 버튼에 스타일을 적용하려면 다음 단계를 따르세요.

  1. 목록 보기를 사용하여 버튼 블록 내의 개별 버튼을 선택합니다.
페이지 편집기의 목록 보기가 열리고 목록 보기 아이콘에서 버튼 블록 목록을 가리키는 화살표가 표시됩니다.
  1. 오른쪽 사이드바의 블록 설정에서 스타일 아이콘을 클릭합니다.
개별 버튼의 스타일 아이콘.
  1. 다음 스타일을 사용자 정의합니다.
    • 스타일: 버튼 스타일의 채우기윤곽 중에서 선택합니다.
    • 색상: 버튼의 텍스트배경 색상을 선택합니다. 색상에 대해 자세히 알아보세요.
    • 타이포그래피: 버튼 글꼴 유형, 스타일, 크기를 변경합니다. 타이포그래피에 대해 더 자세히 알아보세요.
    • 크기: 개별 버튼 주위의 안쪽 여백을 설정합니다. 크기에 대해 자세히 알아보세요.
    • 테두리 및 음영: 테두리 색상과 반경을 사용자 정의하거나 버튼에 음영을 추가합니다. 테두리에 대해 자세히 알아보세요.

버튼 텍스트 서식 지정

블록 스타일에서 사용할 수 있는 타이포그래피 옵션과 함께 다음 단계에 따라 버튼 텍스트에 서식을 적용할 수 있습니다.

  1. 목록 보기를 사용하여 버튼 블록 내의 개별 버튼을 선택합니다.
  2. 서식을 지정할 버튼 텍스트의 일부 또는 전체를 강조 표시합니다. 
강조된 버튼 텍스트와 도구 모음의 텍스트 서식 지정 옵션을 가리키는 화살표.
  1. 서식 옵션에서 다음 옵션 중 선택합니다.
    • 텍스트 정렬(왼쪽, 가운데, 오른쪽)
    • 링크 추가
    • 굵게
    • 이탤릭
    • 더 보기 아이콘은 다음 항목을 포함합니다.
      • 강조: 텍스트와 텍스트의 배경색만 변경합니다. 버튼 색상을 변경하려면 스타일을 사용합니다.
      • 인라인 코드
      • 인라인 이미지
      • 키보드 입력 스타일
      • 언어 속성
      • 취소선
      • 아래첨자
      • 위첨자
Copied to clipboard!