레이아웃 설정

너비

실제 인터페이스와 약간 다를 수 있습니다.

포인트:
버튼 폭을 제어해 줄바꿈과 배치 안정성을 맞춥니다.

설정 항목

• 너비 사용
• 너비 + 단위(px / % / vw / vh / fit-content)
• Use min width / Min 너비
• Use max width / Max 너비
• 반응형

높이

실제 인터페이스와 약간 다를 수 있습니다.

포인트:
버튼 높이를 조정해 텍스트/아이콘 밀도를 맞춥니다.

설정 항목

• 높이 사용
• 높이 + 단위(px / % / vw / vh)
• Use min height / Min 높이
• Use max height / Max 높이
• 반응형

터치 영역은 44px 이상 권장입니다.

마진

실제 인터페이스와 약간 다를 수 있습니다.

포인트:
버튼 외부 간격을 조정해 콘텐츠 흐름을 정리합니다.

설정 항목

• 개별 설정 사용
• 일괄: 마진 + 단위(px / % / vw / vh / auto)
• 개별: 상 / 우 / 하 / 좌
• 반응형

패딩

실제 인터페이스와 약간 다를 수 있습니다.

포인트:
버튼 내부 여백을 조정해 눌림감과 가독성을 개선합니다.

설정 항목

• 개별 설정 사용
• 일괄: 패딩 + 단위(px / % / vw / vh)
• 개별: 상 / 우 / 하 / 좌
• 반응형

위치

실제 인터페이스와 약간 다를 수 있습니다.

포인트:
요소 배치 위치를 조정해 주변 요소와 정렬을 맞춥니다.

설정 항목

• 위치 Type (static / relative / absolute / fixed)
• 상단 / 오른쪽 / 하단 / 왼쪽
• 단위(px / % / vw / vh)
• 반응형

레이어 순서

실제 인터페이스와 약간 다를 수 있습니다.

포인트:
z-index를 조정해 겹침 순서를 제어합니다.

설정 항목

• z-index
• 반응형

클릭 가능한 요소가 다른 레이어에 가려지지 않도록 실제 프런트엔드에서 확인하세요.