팁·활용

• 목록
• 스크랩

소셜 로그인 버튼 레이아웃 문제

그누보드 로그인 페이지에 있는 소셜 로그인 버튼은 기본적으로 가로 2개씩 출력되도록 설정되어 있습니다. 하지만 소셜 로그인 종류를 홀수로 선택하여 사용할 경우 마지막 버튼 하나가 빈 공간으로 남아서 보기 깔끔하지 않은 현상이 발생할 수 있습니다. 이 수정은 버튼을 한 줄에 하나씩 배치하여 모바일과 PC 환경 모두에서 정돈된 로그인 화면을 제공하는 목적이 있습니다.

수정 전 원본 백업 및 대상 파일 확인

파일 수정 전 원본 파일을 반드시 백업하여 문제가 발생했을 때 원래 상태로 복구할 수 있도록 대비해야 합니다. 이 문제를 해결하기 위해서는 PC와 모바일 환경의 스타일 시트 파일을 각각 수정해야 합니다. 사용 중인 테마나 스킨 설정에 따라 파일 경로에 차이가 있을 수 있으므로 실제 적용 전 경로를 확인하는 것이 좋습니다.

• 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%}

위 코드를 아래와 같이 수정하여 너비를 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}

적용 후 결과 확인 및 복구

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

함께 보면 좋은 글

• 그누보드에서 소셜 로그인 상태를 확인하고 분기 처리하는 방법