- 퍼블가이드
Notice: Undefined offset: 2 in /var/www/html/html/_skin/seil/layout/inc_navigation_middle.php on line 60
Notice: Undefined offset: 2 in /var/www/html/html/_skin/seil/layout/inc_navigation_middle.php on line 86
Notice: Undefined offset: 3 in /var/www/html/html/_skin/seil/layout/inc_navigation_middle.php on line 86
폰트
// 폰트 사이즈 .fs_100 .fs_80 .fs_70 .fs_65 .fs_60 .fs_55 .fs_50 .fs_48 .fs_45 .fs_43 .fs_40 .fs_38 .fs_35 .fs_33 .fs_32 .fs_30 .fs_25 .fs_22 .fs_20 .fs_18 .fs_17 .fs_16 .fs_15 .fs_14 .fs_13 .fs_0 // 폰트 굵기 .fw_300 {font-weight: 300 !important;} // light .fw_400 {font-weight: 400 !important;} // regular .fw_500 {font-weight: 500 !important;} // medium .fw_600 {font-weight: 600 !important;} // semibold .fw_700 {font-weight: 700 !important;} // bold light, regular, medium, semibold, bold 을 제외한 폰트 굵기는 디자인에 되어있더라도 적용하지 않는다. // line-height .lh_1_8 {line-height: 1.8;} .lh_1_5 {line-height: 1.5;} .lh_1_4 {line-height: 1.4;} .lh_1_3 {line-height: 1.3;} .lh_1_2 {line-height: 1.2;} .lh_1 {line-height: 1;} ex) <p class="fs_20 fw_500">font-size 20px, font-weight Midium</p> // font-family .ff_noto {font-family: $font-family-noto;} // Noto Sans KR .ff_pre {font-family: $font-family-pre;} // Pretendard .ff_g {font-family: $font-family-g;} // GmarketSans 현재 사이트 기본폰트는 Noto Sans KR 입니다. 폰트를 적용하지 않으면 Noto Sans KR 폰트가 적용됩니다.
<ul class="bullet_ul fs_18 fw_400"> <li>Cloud Infra 에서 성능 저하 및 병목 등의 성능 및 보안 취약성 진단 및 개선</li> <li>Cloud Infra 에서 성능 저하 및 병목 등의 성능 및 보안 취약성 진단 및 개선</li> </ul>
- Cloud Infra 에서 성능 저하 및 병목 등의 성능 및 보안 취약성 진단 및 개선
- Cloud Infra 에서 성능 저하 및 병목 등의 성능 및 보안 취약성 진단 및 개선
<ul class="bullet_ul color_fff fs_18 fw_400"> <li>Cloud Infra 에서 성능 저하 및 병목 등의 성능 및 보안 취약성 진단 및 개선</li> <li>Cloud Infra 에서 성능 저하 및 병목 등의 성능 및 보안 취약성 진단 및 개선</li> </ul>
- Cloud Infra 에서 성능 저하 및 병목 등의 성능 및 보안 취약성 진단 및 개선
- Cloud Infra 에서 성능 저하 및 병목 등의 성능 및 보안 취약성 진단 및 개선
<ul class="bullet_ul color_666 fs_18 fw_400"> <li>Cloud Infra 에서 성능 저하 및 병목 등의 성능 및 보안 취약성 진단 및 개선</li> <li>Cloud Infra 에서 성능 저하 및 병목 등의 성능 및 보안 취약성 진단 및 개선</li> </ul>
- Cloud Infra 에서 성능 저하 및 병목 등의 성능 및 보안 취약성 진단 및 개선
- Cloud Infra 에서 성능 저하 및 병목 등의 성능 및 보안 취약성 진단 및 개선
// 테이블 안에 넣을때는 fs_18 fw_400 등과 같은 폰트관련 클래스 뺄것 <ul class="bullet_hypen_ul fs_18 fw_400"> <li>Cloud Infra 에서 성능 저하 및 병목 등의 성능 및 보안 취약성 진단 및 개선</li> <li>Cloud Infra 에서 성능 저하 및 병목 등의 성능 및 보안 취약성 진단 및 개선</li> </ul>
- Cloud Infra 에서 성능 저하 및 병목 등의 성능 및 보안 취약성 진단 및 개선
- Cloud Infra 에서 성능 저하 및 병목 등의 성능 및 보안 취약성 진단 및 개선
테이블
<div class="ctable"> <table> <colgroup> <col style="width: 33.333333%;" /> <col style="width: 33.333333%;" /> <col style="width: 33.333333%;" /> </colgroup> <thead> <tr> <th></th> <th>PC Client</th> <th>CLDA stream</th> </tr> </thead> <tbody> <tr> <td>탐색기 연동</td> <td>O</td> <td>O</td> </tr> <tr> <td>파일 관리 방식</td> <td>모든 파일 다운로드</td> <td>목록만 동기화하고 파일 사용시 다운로드</td> </tr> <tr> <td>인터넷 오프라인 작업 가능 여부</td> <td>O</td> <td>X</td> </tr> <tr> <td>로컬 드라이브 용량 차지</td> <td>많음</td> <td>없음</td> </tr> <tr> <td>hwp 버저닝</td> <td>O</td> <td>X</td> </tr> </tbody> </table> </div>
PC Client | CLDA stream | |
---|---|---|
탐색기 연동 | O | O |
파일 관리 방식 | 모든 파일 다운로드 | 목록만 동기화하고 파일 사용시 다운로드 |
인터넷 오프라인 작업 가능 여부 | O | X |
로컬 드라이브 용량 차지 | 많음 | 없음 |
hwp 버저닝 | O | X |
<div class="ctable"> <table> <colgroup> <col style="width: 16%;" /> <col /> </colgroup> <tbody> <tr> <th>탐색기 연동</th> <td class="t_l"> <ul class="bullet_hypen_ul"> <li>Cloud Infra 에서 성능 저하 및 병목 등의 성능 및 보안 취약성 진단 및 개선</li> </ul> </td> </tr> <tr> <th>주요업무</th> <td class="t_l"> <ul class="bullet_hypen_ul"> <li>Linux</li> </ul> </td> </tr> </tbody> </table> </div>
탐색기 연동 |
|
---|---|
주요업무 |
|
버튼종류(글씨 + 이미지)
<a class="blob-btn" href="#"> <span class="txt ff_pre">흰색배경+노란글씨</span> <img src="/html/_skin/seil/img/sub/products/ico_btn_arrow_yellow.png" alt="" /> <span class="blob-btn__inner"> <span class="blob-btn__blobs"> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> </span> </span> </a>흰색배경+노란글씨
<a class="blob-btn type_base_color" href="#"> <span class="txt ff_pre">노란배경+검정글씨</span> <img src="/html/_skin/seil/img/sub/products/ico_btn_arrow_black.png" alt="" /> <span class="blob-btn__inner"> <span class="blob-btn__blobs"> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> </span> </span> </a>노란배경+검정글씨
<a class="blob-btn type_base_color bor_black" href="#"> <span class="txt ff_pre">노란배경+검정글씨+검정테두리</span> <img src="/html/_skin/seil/img/sub/products/ico_btn_arrow_black.png" alt="" /> <span class="blob-btn__inner"> <span class="blob-btn__blobs"> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> </span> </span> </a>노란배경+검정글씨+검정테두리
<a class="blob-btn bor_base" href="#"> <span class="txt ff_pre">흰색배경+노란글씨+노란테두리</span> <img src="/html/_skin/seil/img/sub/products/ico_btn_arrow_black.png" alt="" /> <span class="blob-btn__inner"> <span class="blob-btn__blobs"> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> </span> </span> </a>흰색배경+노란글씨+노란테두리
버튼종류(글씨 가운데정렬)
<a class="blob-btn j_c" href="#"> <span class="txt ff_pre">흰색배경+노란글씨</span> <span class="blob-btn__inner"> <span class="blob-btn__blobs"> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> </span> </span> </a>흰색배경+노란글씨
<a class="blob-btn j_c type_base_color" href="#"> <span class="txt ff_pre">노란배경+검정글씨</span> <span class="blob-btn__inner"> <span class="blob-btn__blobs"> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> </span> </span> </a>노란배경+검정글씨
<a class="blob-btn j_c type_base_color bor_black" href="#"> <span class="txt ff_pre">노란배경+검정글씨+검정테두리</span> <span class="blob-btn__inner"> <span class="blob-btn__blobs"> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> </span> </span> </a>노란배경+검정글씨+검정테두리
<a class="blob-btn j_c bor_base" href="#"> <span class="txt ff_pre">흰색배경+노란글씨+노란테두리</span> <span class="blob-btn__inner"> <span class="blob-btn__blobs"> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> </span> </span> </a>흰색배경+노란글씨+노란테두리
버튼 레이아웃
<div class="mt40"> <ul class="btn_col_box"> <li> <a class="blob-btn" href="#"> <span class="txt ff_pre">흰색배경+노란글씨</span> <img src="/html/_skin/seil/img/sub/products/ico_btn_arrow_yellow.png" alt="" /> <span class="blob-btn__inner"> <span class="blob-btn__blobs"> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> </span> </span> </a> </li> <li> <a class="blob-btn type_base_color" href="#"> <span class="txt ff_pre">노란배경+검정글씨</span> <img src="/html/_skin/seil/img/sub/products/ico_btn_arrow_black.png" alt="" /> <span class="blob-btn__inner"> <span class="blob-btn__blobs"> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> </span> </span> </a> </li> <li> <a class="blob-btn type_transparent_color" href="#"> <span class="txt ff_pre">노란배경+검정글씨</span> <img src="/html/_skin/seil/img/sub/products/ico_btn_arrow_black.png" alt="" /> <span class="blob-btn__inner"> <span class="blob-btn__blobs"> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> </span> </span> </a> </li> </ul> </div>
<div class="mt40"> <ul class="btn_col_box"> <li> <a class="blob-btn type_base_color" href="#"> <span class="txt ff_pre">버튼이 하나일 경우</span> <img src="/html/_skin/seil/img/sub/products/ico_btn_arrow_black.png" alt="" /> <span class="blob-btn__inner"> <span class="blob-btn__blobs"> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> </span> </span> </a> </li> </ul> </div>
<div class="mt40"> <ul class="btn_col_box"> <li> <a class="blob-btn j_c type_base_color bor_black" href="#"> <span class="txt ff_pre">서비스 소개 보러가기</span> <span class="blob-btn__inner"> <span class="blob-btn__blobs"> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> </span> </span> </a> </li> <li> <a class="blob-btn j_c type_base_color bor_black" href="#"> <span class="txt ff_pre">부가서비스 보러가기</span> <span class="blob-btn__inner"> <span class="blob-btn__blobs"> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> </span> </span> </a> </li> </ul> </div>
배경없는 링크
<div class="d_f mt40"> <a class="btn_normal" href="/products/extra-service/client/clda-stream"> <span>자세히보기</span> <img src="/html/_skin/seil/img/sub/products/ico_btn_arrow_black.png" alt="" /> </a> </div>
팝업
호출함수 : DATA_POPUP_OPEN.init('sample'); // sample 대신 실제 data-conts="" 값을 넣는다.
팝업닫기 : DATA_POPUP_CLOSE.init(); // 모든팝업 닫기함수
<a href="javascript: DATA_POPUP_OPEN.init('sample');">팝업호출버튼</a> <!-- 팝업 --> <div class="page_wrap type_alert" data-conts="sample"> <div class="page_inner transition--popup"> <form> <div class="page_pop_body"> <!-- 팝업 내용이 들어갈 영역 --> <h3 class="fs_30 fw_700 t_c lh_1_4">파트너사 신청<br />접수 완료</h3> <p class="fs_18 fw_400 t_c color_333_80 mt20"> 파트너사 신청서가 정상적으로 제출되었습니다.<br /> 담당자를 배정 중이니 잠시만 기다려주세요. </p> <!-- // 팝업 내용이 들어갈 영역 --> </div> <div class="mt40"> <ul class="btn_col_box"> <li> <a class="blob-btn type_base_color" href="javascript: DATA_POPUP_CLOSE.init();"> <span class="txt ff_pre">확인</span> <img src="/html/_skin/seil/img/sub/products/ico_btn_arrow_black.png" alt="" /> <span class="blob-btn__inner"> <span class="blob-btn__blobs"> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> </span> </span> </a> </li> </ul> </div> </form> </div> </div> <!-- // 팝업 -->팝업호출버튼