로그인 버튼 마크업
    • PDF

    로그인 버튼 마크업

    • PDF

    기사 요약

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

    심볼 다운로드

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

    로그인 버튼 배치

    로그인 버튼 배치 시 버튼의 형태에 따라 마크업에 차이가 있습니다. 화면 구현 환경에 따라 아래 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로 로그인
    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>
    

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

    Changing your password will log you out immediately. Use the new password to log back in.
    First name must have atleast 2 characters. Numbers and special characters are not allowed.
    Last name must have atleast 1 characters. Numbers and special characters are not allowed.
    Enter a valid email
    Enter a valid password
    Your profile has been successfully updated.