로그인 버튼 마크업

인쇄
공유
PDF

로그인 버튼 마크업

인쇄
공유
PDF

기사 요약

이 요약이 도움이 되었나요?

의견을 보내 주셔서 감사합니다.

사용자의 Application에 자체 디자인 가이드가 없는 경우 아래 제공되는 마크업을 활용해 로그인 버튼을 배치하는 방법을 설명합니다.

심볼 다운로드

마크업을 활용해 로그인 버튼을 배치하기 전에 아래 심볼 이미지 파일을 다운로드해 주십시오.

심볼 다운로드: icon-ncloud-symbol.zip

로그인 버튼 배치

로그인 버튼 배치 시 버튼의 형태에 따라 마크업에 차이가 있습니다. 화면 구현 환경에 따라 아래 3가지 형태 중에서 하나를 선택하여 사용해 주십시오.

기본형 로그인 버튼
축약형 로그인 버튼
심볼형 로그인 버튼

기본형 로그인 버튼

기본형 로그인 버튼은 가장 기본적인 버튼 형태로 색상 테마에 따라 light 버전과 color 버전으로 구분됩니다.

네이버 클라우드 플랫폼 로그인

CSS 작성

CSS에 로그인 버튼과 심볼을 적용하는 방법은 다음과 같습니다.
imagePath에 심볼 이미지 저장 경로를 대입해 주십시오.

light 버전

.button-basic-wrapper {
    position: relative;
    display: inline-flex;    
    align-items: center;        
    border-radius: 4px;
    background-color: #f9f9f9;
    font-size: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Roboto',-apple-system,BlinkMacSystemFont,'Malgun Gothic','맑은 고딕',helvetica,'Apple SD Gothic Neo',sans-serif;
    cursor: pointer;
}
.button-basic-wrapper.lang-ja {
    font-family: 'Roboto',-apple-system,BlinkMacSystemFont,'メイリオ','Meiryo','Yu Gothic','Hiragino Kaku Gothic Pro','Hiragino Sans',sans-serif;
}
.button-basic-wrapper.lang-zh {
    font-family: 'Roboto',-apple-system,BlinkMacSystemFont,'Microsoft Yahei',sans-serif;
}
.button-contents .button-text{
    display: inline-block;
    vertical-align: top;
}
.button-basic-wrapper::after {
    content: '';
    position: absolute;
    top:0;
    left:0;
    right: 0;
    bottom: 0;
    border: 1px solid #aaa;
    border-radius: 4px;
}
.button-basic-wrapper:hover {
    background: #f0f0f0;
}
.button-basic-wrapper:hover::after {
    border-color: #222;
}
.button-basic-wrapper:hover .button-icon-wrap {
    border-color: #222;
}
.button-basic-wrapper .button-icon-wrap {
    height: 44px;
    line-height: 44px;
    padding: 0 6px 0 10px;
    border-right: 1px solid #aaa;
    background-color: #fff;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.button-contents {
    font-size: 16px;
    line-height: 44px;
    color: #222;
    font-weight: bold;
    padding: 0 31px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.button-contents.button-small-type {
    padding: 0 22px;
}
.button-basic-wrapper .buttoniconimage {
    background: url(imagePath/icon-ncloud-symbol-light.png) no-repeat;
    background-size: 28px 14px;
    display: inline-block;
    vertical-align: middle;
    width: 28px;
    height: 14px;
}

color 버전

.button-basic-wrapper.color-type {
    position: relative;
    background-image: linear-gradient(98deg, #00e25d, #00d1c8);
}
.button-basic-wrapper.color-type:after {
    border-color: transparent;
}
.button-basic-wrapper.color-type:hover .button-icon-wrap ,.button-basic-wrapper.color-type:hover .button-contents {       
    background-color: rgba(0, 0, 0, 0.15);           
}
.button-basic-wrapper.color-type .button-icon-wrap {
    position: relative;
    background-color: transparent;
    border-color: rgba(0, 0, 0, 0.15);
}
.button-basic-wrapper.color-type .button-contents {
    position: relative;
    color: #fff;
}
.button-basic-wrapper.color-type .buttoniconimage {
    background: url(imagePath/icon-ncloud-symbol-color.png) no-repeat;
    background-size: 28px 14px;    
}

HTML 작성

HTML에 로그인 버튼과 심볼을 적용하는 방법은 다음과 같습니다.

light 버전

<div class="button-basic-wrapper">
  <div class="button-icon-wrap">
    <span class="buttoniconimage"></span>
  </div>
  <div class="button-contents">
    <span class="button-text">네이버 클라우드 플랫폼 로그인</span>
  </div>
</div>

color 버전

<div class="button-basic-wrapper color-type">
  <div class="button-icon-wrap">
    <span class="buttoniconimage"></span>
  </div>
  <div class="button-contents">
    <span class="button-text">네이버 클라우드 플랫폼 로그인</span>
  </div>
</div>

축약형 로그인 버튼

축약형 로그인 버튼은 버튼을 배치할 영역이 좁은 경우 사용할 수 있는 버튼 형태로 색상 테마에 따라 light 버전과 color 버전으로 구분됩니다.

Ncloud로 로그인

CSS 작성

CSS에 로그인 버튼과 심볼을 적용하는 방법은 다음과 같습니다.
imagePath에 심볼 이미지 저장 경로를 대입해 주십시오.

light 버전

.button-basic-wrapper {
    position: relative;
    display: inline-flex;    
    align-items: center;        
    border-radius: 4px;
    background-color: #f9f9f9;
    font-size: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Roboto',-apple-system,BlinkMacSystemFont,'Malgun Gothic','맑은 고딕',helvetica,'Apple SD Gothic Neo',sans-serif;
    cursor: pointer;
}
.button-basic-wrapper.lang-ja {
    font-family: 'Roboto',-apple-system,BlinkMacSystemFont,'メイリオ','Meiryo','Yu Gothic','Hiragino Kaku Gothic Pro','Hiragino Sans',sans-serif;
}
.button-basic-wrapper.lang-zh {
    font-family: 'Roboto',-apple-system,BlinkMacSystemFont,'Microsoft Yahei',sans-serif;
}
.button-contents .button-text{
    display: inline-block;
    vertical-align: top;
}
.button-basic-wrapper::after {
    content: '';
    position: absolute;
    top:0;
    left:0;
    right: 0;
    bottom: 0;
    border: 1px solid #aaa;
    border-radius: 4px;
}
.button-basic-wrapper:hover {
    background: #f0f0f0;
}
.button-basic-wrapper:hover::after {
    border-color: #222;
}
.button-basic-wrapper:hover .button-icon-wrap {
    border-color: #222;
}
.button-basic-wrapper .button-icon-wrap {
    height: 44px;
    line-height: 44px;
    padding: 0 6px 0 10px;
    border-right: 1px solid #aaa;
    background-color: #fff;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.button-contents {
    font-size: 16px;
    line-height: 44px;
    color: #222;
    font-weight: bold;
    padding: 0 31px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.button-contents.button-small-type {
    padding: 0 22px;
}
.button-basic-wrapper .buttoniconimage {
    background: url(imagePath/icon-ncloud-symbol-light.png) no-repeat;
    background-size: 28px 14px;
    display: inline-block;
    vertical-align: middle;
    width: 28px;
    height: 14px;
}

color 버전

.button-basic-wrapper.color-type {
    position: relative;
    background-image: linear-gradient(98deg, #00e25d, #00d1c8);
}
.button-basic-wrapper.color-type:after {
    border-color: transparent;
}
.button-basic-wrapper.color-type:hover .button-icon-wrap ,.button-basic-wrapper.color-type:hover .button-contents {       
    background-color: rgba(0, 0, 0, 0.15);           
}
.button-basic-wrapper.color-type .button-icon-wrap {
    position: relative;
    background-color: transparent;
    border-color: rgba(0, 0, 0, 0.15);
}
.button-basic-wrapper.color-type .button-contents {
    position: relative;
    color: #fff;
}
.button-basic-wrapper.color-type .buttoniconimage {
    background: url(imagePath/icon-ncloud-symbol-color.png) no-repeat;
    background-size: 28px 14px;    
}

HTML 작성

HTML에 로그인 버튼과 심볼을 적용하는 방법은 다음과 같습니다.

light 버전

<div class="button-basic-wrapper">
  <div class="button-icon-wrap">
    <span class="buttoniconimage"></span>
  </div>
  <div class="button-contents button-small-type">
    <span class="button-text">Ncloud로 로그인</span>
  </div>
</div>

color 버전

<div class="button-basic-wrapper color-type">
  <div class="button-icon-wrap">
    <span class="buttoniconimage"></span>
  </div>
  <div class="button-contents button-small-type">
    <span class="button-text">Ncloud로 로그인</span>
  </div>
</div>

심볼형 로그인 버튼

심볼형 로그인 버튼은 텍스트없이 심볼로 구성된 버튼 형태로 색상 테마에 따라 light 버전과 color 버전으로 구분됩니다.

CSS 작성

CSS에 로그인 버튼과 심볼을 적용하는 방법은 다음과 같습니다.
imagePath에 심볼 이미지 저장 경로를 대입해 주십시오.

light 버전

.button-symbol-wrapper {
    position: relative;  
    display: inline-flex;    
    align-items: center;        
    font-size: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Roboto', sans-serif;
    cursor: pointer;
}
.button-symbol-wrapper:after {
    content: '';
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid #aaa;
    border-radius: 50%;
}
.button-symbol-wrapper:hover::after {
    border-color: #222;
}
.button-symbol-wrapper:hover .button-icon-wrap {
    background-color: #f0f0f0;
}
.button-symbol-wrapper .button-icon-wrap {
    position: relative;
    height: 44px;
    line-height: 44px;      
    border-radius: 50%;
    padding: 0 7px 0 9px;
}
.button-symbol-wrapper .buttoniconimage {
    background: url(imagePath/icon-ncloud-symbol-light.png) no-repeat;
    background-size: 28px 14px;  
    display: inline-block;
    vertical-align: middle; 
    width: 28px;
    height: 14px;
}

color 버전

.button-symbol-wrapper.color-type{
    background-image: linear-gradient(98deg, #00e25d, #00d1c8);
    border-radius: 50%;
}
.button-symbol-wrapper.color-type::after{
    border: 0;
}

.button-symbol-wrapper.color-type:hover .button-icon-wrap {
    background-color: rgba(0, 0, 0, 0.15);    
}

.button-symbol-wrapper.color-type .button-contents {
    color: #fff;
}

.button-symbol-wrapper.color-type .buttoniconimage {      
    background: url(imagePath/icon-ncloud-symbol-color.png) no-repeat;
    background-size: 28px 14px;   
}

HTML 작성

HTML에 로그인 버튼과 심볼을 적용하는 방법은 다음과 같습니다.

light 버전

<div class="button-symbol-wrapper">
  <div class="button-icon-wrap">
    <span class="buttoniconimage"></span>
  </div>
</div>

color 버전

<div class="button-symbol-wrapper color-type">
  <div class="button-icon-wrap">
    <span class="buttoniconimage"></span>
  </div>    
</div>

이 문서가 도움이 되었습니까?

What's Next

Ncloud Single Sign-On 권한 관리

심볼 다운로드
로그인 버튼 배치

태그

Ncloud Single Sign-On