그누보드 로그인 페이지 소셜 로그인 버튼 가로 100% 레이아웃 수정 방법

• 목록
• 스크랩

그누보드 로그인 페이지 소셜 로그인 버튼 가로 100% 레이아웃 수정 방법

그누보드 로그인 페이지에서 홀수로 배치된 소셜 로그인 버튼 때문에 발생하는 빈 공간 문제를 해결하고, PC와 모바일 환경에서 버튼을 가로 100%로 정돈하여 출력하는 구체적인 방법을 안내합니다.

그누보드 소셜 로그인 버튼 가로 100% 레이아웃 수정

소셜 로그인 버튼이 비어 보이는 이유

그누보드 로그인 페이지의 소셜 로그인 버튼은 기본적으로 가로 2개씩 출력되도록 설정되어 있습니다. 따라서 소셜 로그인 종류를 홀수로 선택해 사용할 경우 마지막 버튼 하나가 빈 공간으로 남게 되어 보기 깔끔하지 않은 현상이 발생합니다.

수정 대상 파일 확인

이 문제를 해결하려면 PC와 모바일 환경의 스타일 시트 파일을 각각 수정해야 합니다. 사용 중인 테마나 스킨 설정에 따라 파일 경로에 차이가 있을 수 있으므로 실제 적용 전에 아래 경로를 먼저 확인해야 합니다.

• PC 버전: skin/member/basic/style.css
• 모바일 버전: mobile/skin/member/basic/style.css

파일을 수정하기 전에는 반드시 원본 파일을 백업하여 문제가 발생했을 때 원래 상태로 복구할 수 있도록 대비해야 합니다.

CSS 코드 변경 방법

상세한 수정 코드는 아래 Q2 항목을 참고하십시오.

적용 후 결과 확인 및 복구

수정을 완료한 후에는 브라우저에서 로그인 페이지를 새로고침하여 소셜 로그인 버튼이 세로로 정돈되어 출력되는지 확인하고, 홀수 개 배치 시 발생하던 빈 공간이 제거되고 버튼 너비가 화면에 맞게 확장된 실제 결과를 체감해야 합니다. 만약 문제가 발생한 경우 사전에 백업해 둔 원본 파일로 복구하여 안전하게 원래 상태로 돌릴 수 있습니다.

스타일 시트 파일 수정 방법

그누보드 로그인 페이지의 소셜 로그인 버튼 너비를 100%로 변경하려면 지정된 스타일 시트 파일에서 기존 소셜 로그인 아이콘 관련 코드를 찾아 너비와 여백 속성을 변경해야 합니다. 사용 중인 테마나 스킨 설정에 따라 파일 경로에 차이가 있을 수 있으므로 실제 적용 전 경로를 확인하는 것이 좋습니다.

대상 파일 경로

• PC 버전: skin/member/basic/style.css
• 모바일 버전: mobile/skin/member/basic/style.css

*참고: 사용 중인 테마나 스킨 설정에 따라 파일 경로가 다를 수 있습니다.

기존 CSS 코드

#mb_login #sns_login .sns-icon {width:49% !important;float:left !important}
#mb_login #sns_login .sns-icon:nth-child(odd) {margin-right:2%}

수정할 CSS 코드

위 코드를 아래와 같이 수정하여 너비를 100%로 넓히고 오른쪽 여백을 없애줍니다.

#mb_login #sns_login .sns-icon {width:100% !important;float:left !important}
#mb_login #sns_login .sns-icon:nth-child(odd) {margin-right:0}

함께 보면 좋은 글

• 그누보드5 소셜 로그인 연동을 위한 네이버 및 카카오 개발자 센터 설정 방법
• 그누보드5 페이스북 및 카카오 소셜 로그인 API 연동 설정 방법
• 그누보드에서 소셜 로그인 상태를 확인하고 분기 처리하는 방법

참고자료

기타 참고자료

• mercury-seed.com — 그누보드 로그인 페이지 소셜 로그인 버튼 가로 100% 레이아웃 수정 방법