Login 적용 가이드(2008년 3Q 이후)
- 2008년 3Q 이후부터 적용되어야 할 개선된 코드의 보안 로그인 입니다.
- 키보드 접근성이 향상되었으며 HTML코드의 유효성이 확보되었습니다. HTML 4.01 Transitional 표준 DTD 적용됨.
- 보안 로그인 영역의 신규 디자인이나 변경 이슈가 발생하는 경우 개선된 버전의 코드를 사용하여야 합니다.
- 팝업을 제외하고 iframe 으로 삽입 됩니다. iframe 에는 title 속성을 다음과 같이 명시 합니다.
<iframe title="보안로그인"></iframe>
- CSS 코드는 문서 헤드에 포함되어 있습니다.
- 보안 1단계 인풋은 HTML으로, 2단계 인풋은 Flash로, 3단계 인풋은 Iframe+ActiveX로 처리되어 있습니다.
- 보안 각 단계에 해당하는 화면은
<div id="login_wrap" class="step2"> 엘리먼트의 class를 동적으로 변경 step1~step3 처리하면 됩니다.
- IP보안 기능의 버튼 표시는 다음과 같이 처리 합니다.
- On 일 때
<button type="button" class="on"><img src="http://static.naver.com/green/ico_ip_on.gif" alt="ON" width="18" height="12" /></button>
- Off 일 때
<button type="button" class="off"><img src="http://static.naver.com/green/ico_ip_off.gif" alt="OFF" width="18" height="12" /></button>
- 보안 2단계 플래시 오브젝트 인풋 영역의 디자인은 모두 플래시 외부에서 제어 됩니다. 문서
<head>에 포함된 <script> 코드를 참고 하세요.
- 보안 3단계 인풋 영역은 iframe 처리되어 있습니다.
- 오류 메시지가 포함되어 있으며 오류 메시지는 보안로그인의 너비와 높이를 초과할 수 없고 스킨의 너비에 따라 변경 되어야 합니다.
- 오류 메시지 출력은
<ul class="login_error" id="ex"> 엘리먼트의 id를 e1~e12 까지 동적으로 변경하면 됩니다. 오류가 없을 때 id는 ex 입니다.
로그인 목록
Login 적용 가이드(2008년 2Q 이전)
- 현재 페이지에 적용된 HTML/CSS 코드는 더 이상 사용하지 않습니다. 2008년 3Q 이후 부터는 코드 리펙토링된 버전을 사용하고 있습니다.
- 크게 기본형, VOD형, 쥬니버형, 해피빈형으로 구분되어 있으나 1개의 External CSS파일
CSS 보기
로 통합하여 UI를 제어하고 있습니다. 기존과 동일한 구조의 보안로그인 디자인이 추가되는 경우라도 새 CSS를 작성하지 않고 기존의 CSS파일에 추가 합니다.
- 적용하려는 사이트의 로그인 너비를 확인한 다음 해당 서비스의 너비 및 디자인과 일치하는 코드를 사용하여 iframe 으로 삽입합니다. iframe 사용시 반드시 다음과 같이 title 속성을 기록해 줍니다. <iframe src="#"
title="네이버 보안 로그인"></ iframe> iframe에 적힌 title 속성은 화면낭독기 도구의 탐색을 돕게 됩니다.
- HTML/CSS 코드 작성시 새로운 너비의 로그인을 추가하려면 우선 id="security" 코드가 있는 라인을 찾은 다음 <div id="security" class="s○○○"> 부분에서 강조 표시된 class="s○○○" 부분에 실제 로그인 영역의 너비값를 Class 이름으로 입력하고 해당 클래스를 이용하여 새 CSS Set를 추가합니다.
로그인 목록
