입력폼 버튼 크기 변경하기 (코드)

코드 위젯을 사용하면 입력폼의 버튼 및 버튼 텍스트의 크기를 변경할 수 있습니다.

설정방법

디자인 모드에 접속합니다.
입력폼 위젯을 추가한 메뉴로 이동합니다.
왼쪽 상단의 위젯 추가 ＋ 아이콘을 클릭하고, 코드 위젯을 클릭합니다.
코드 위젯을 마우스로 클릭 후 드래그하여 적당한 위치로 이동시킵니다.
참고: 코드 위젯은 실제 웹사이트에서는 노출되지 않습니다. 차후 코드 관리를 위해 관련된 위젯 근처에 배치해 주시길 바랍니다.
코드 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
컨텍스트 메뉴가 나오면 코드 설정을 클릭합니다.

코드 설정 빈 칸에 아래의 코드를 복사해 붙여넣습니다.

<style>   
/* 입력폼 버튼 및 텍스트 크기 */   
#섹션ID div.form .btn-primary {         
	width: 180px !important; /* 버튼 가로 크기 */         
	height: 64px !important; /* 버튼 세로 크기 */         
	font-size: 20px !important; /* 버튼 텍스트 크기 */         
	line-height: 1.8 !important; /* 세로 정렬 */   
} 
</style>

아래 그림과 설명을 참고해 섹션ID, 버튼 텍스트 크기, 버튼 가로 크기, 버튼 가로 크기를 수정합니다.
참고: 입력폼 버튼 디자인은 공통 디자인 설정에서 설정된 버튼 스타일을 따라가므로, 공통 디자인 설정에서 수정해 주세요. 버튼의 정렬(왼쪽, 가운데, 오른쪽, 가득참)은 입력폼 설정에서 수정할 수 있습니다.
- 섹션ID: 코드에 작성된 #섹션ID는 삭제하고, 입력폼 위젯이 삽입된 섹션의 ID값을 입력합니다. 섹션ID를 확인하는 방법은 섹션ID 확인하기 도움말에서 확인해 주세요.
- 버튼 가로 크기: 버튼의 가로 크기를 픽셀(px) 단위로 입력합니다.
- 버튼 세로 크기: 버튼의 세로 크기를 픽셀(px) 단위로 입력합니다.
- 버튼 텍스트 크기: 버튼 텍스트의 크기를 픽셀(px) 단위로 입력합니다.
- 세로 정렬: 버튼 텍스트가 버튼 중앙에 위치하지 않는 경우에만 소수점 한 자리 단위로 변경해 맞춰 보세요. (예: 1.4, 1.6 등)
코드 설정 창 오른쪽 하단의 저장 버튼을 클릭합니다.
디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭해 입력폼 버튼이 정상적으로 수정됐는지 확인합니다.
문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.