- 인쇄
- PDF
로그인 버튼 마크업
- 인쇄
- PDF
Classic/VPC 환경에서 이용 가능합니다.
사용자의 애플리케이션에 자체 디자인 가이드가 없는 경우 아래 제공되는 마크업을 활용해 로그인 버튼을 배치하는 방법을 설명합니다.
심볼 다운로드
마크업을 활용해 로그인 버튼을 배치하기 전에 아래 심볼 이미지 파일을 다운로드해 주십시오.
- 심볼 다운로드: 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 버전으로 구분됩니다.
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>