Dreamweaver에서 Spry 유효성 검사 암호 위젯 삽입

검색
참고:

Spry 위젯은 Dreamweaver CC 이상에서 jQuery 위젯으로 바뀌었습니다. 페이지의 기존 Spry 위젯을 수정할 수는 있지만 새 Spry 위젯을 추가할 수는 없습니다.

유효성 검사 암호 위젯 정보

Spry 유효성 검사 암호 위젯은 암호 규칙을 강화하는 데 사용할 수 있는 암호 텍스트 필드(예: 숫자 및 문자 유형)입니다. 위젯은 사용자의 입력 내용에 따라 경고 또는 오류 메시지를 표시합니다.

참고:

암호 위젯 작업을 수행하기 전에 Spry 유효성 검사 위젯 개념을 이해하고 있어야 합니다. Spry 유효성 검사 위젯에 익숙하지 않은 경우 계속하기 전에 Spry 유효성 검사 텍스트 필드 위젯 작업 또는 기타 유효성 검사 위젯 개요를 참조하십시오. 이 개요에 모든 기본 유효성 검사 위젯 개념이 수록되어 있는 것은 아닙니다.

다음은 여러 가지 상태의 유효성 검사 암호 위젯을 보여 주는 예입니다.

여러 가지 상태의 유효성 검사 암호 위젯

A. 암호 위젯, 최소 문자 수 상태 B. 암호 위젯, 최대 문자 수 상태 C. 암호 위젯, 필수 상태 

유효성 검사 암호 위젯에는 유효함, 필수, 최소 문자 수 등의 여러 가지 상태가 포함됩니다. 해당 CSS 파일(SpryValidationPassword.css)을 편집하여 원하는 유효성 검사 결과에 따라 이러한 상태의 속성을 변경할 수 있습니다. 유효성 검사 암호 위젯을 사용하면 사이트 방문자가 텍스트 필드 바깥쪽을 클릭할 때, 텍스트를 입력할 때, 양식을 전송하려 할 때 등의 다양한 시점에서 유효성을 검사할 수 있습니다.

초기 상태

브라우저에 페이지가 로드될 때 또는 사용자가 양식을 새로 고칠 때의 위젯 상태입니다.

포커스 상태

사용자가 위젯에 삽입 포인터를 놓을 때의 위젯 상태입니다.

유효한 상태

사용자가 정보를 올바르게 입력하여 양식을 전송할 수 있는 경우의 위젯 상태입니다.

잘못된 복잡성 상태

사용자가 암호 텍스트 필드의 복잡성 조건과 일치하지 않는 텍스트를 입력하는 경우의 위젯 상태입니다. (예를 들어 암호에는 최소 두 개의 대문자를 포함하도록 지정했는데 입력한 암호에는 대문자가 포함되어 있지 않거나 한 개만 포함되어 있는 경우입니다.)

필수 상태

사용자가 텍스트 필드에 필요한 텍스트를 입력하지 않을 때의 위젯 상태입니다.

최소 문자 수 상태

사용자가 입력한 문자 수가 암호 텍스트 필드에 필요한 최소 문자 수보다 적은 경우의 위젯 상태입니다.

최대 문자 수 상태

사용자가 입력한 문자 수가 암호 텍스트 필드에 허용되는 최대 문자 수보다 많은 경우의 위젯 상태입니다.

유효성 검사 암호 위젯이 작동하는 방식에 대한 자세한 분석을 비롯하여 위젯 구조에 대한 추가 정보는 www.adobe.com/go/learn_dw_sprypassword_kr을 참조하십시오.

유효성 검사 암호 위젯 삽입 및 편집

유효성 검사 암호 위젯 삽입

  1. [삽입] > [Spry] > [Spry 유효성 검사 암호]를 선택합니다.
  2. [입력 태그 액세스 가능성] 대화 상자에서 원하는 옵션을 설정하고 [확인]을 클릭합니다.
참고:

[삽입] 패널에서 [Spry] 범주를 사용하여 유효성 검사 암호 위젯을 삽입할 수도 있습니다.

유효성 검사 암호 위젯의 필수 상태 변경

Dreamweaver를 통해 삽입하여 웹 페이지에 게시한 모든 유효성 검사 암호 위젯은 기본적으로 사용자로부터 데이터를 입력받아야 합니다. 그러나 원하는 경우 암호 텍스트 필드 입력을 선택 사항으로 만들 수도 있습니다.

  1. 파란색 탭을 클릭하여 문서 창에서 [유효성 검사 암호] 위젯을 선택합니다.
  2. 속성 관리자([윈도우] > [속성])에서 필요에 따라 [필수] 옵션을 선택하거나 선택 취소합니다.

디자인 뷰에 위젯 상태 표시

  1. 파란색 탭을 클릭하여 문서 창에서 [유효성 검사 암호] 위젯을 선택합니다.
  2. 속성 관리자([윈도우] > [속성])의 [상태 미리 보기] 팝업 메뉴에서 표시하려는 상태를 선택합니다. 예를 들어 유효한 상태의 위젯을 표시하려면 [유효함]을 선택합니다.

유효성 검사 실시 시간 지정

사이트 방문자가 위젯 바깥쪽을 클릭할 때, 텍스트를 입력할 때 또는 양식을 전송하려 할 때 등의 다양한 시점에서 유효성 검사를 실시하도록 설정할 수 있습니다.

  1. 파란색 탭을 클릭하여 문서 창에서 [유효성 검사 암호] 위젯을 선택합니다.
  2. 속성 관리자([윈도우] > [속성])에서 유효성 검사를 실시할 시간을 나타내는 옵션을 선택합니다. 모든 옵션을 선택하거나 [onSubmit]만 선택할 수 있습니다.

    흐림 효과

    사용자가 암호 텍스트 필드 바깥쪽을 클릭할 때마다 유효성 검사를 합니다.

    바꾸기

    사용자가 암호 텍스트 필드의 텍스트를 변경할 때 유효성 검사를 합니다.

    onSubmit

    사용자가 양식을 전송하려 할 때 유효성 검사를 합니다. [onSubmit] 옵션은 기본적으로 선택되어 있으며 선택 취소할 수 없습니다.

암호 복잡성 설정

암호 복잡성은 특정 문자 조합이 암호 텍스트 필드의 요구 사항을 만족시키는 정도를 참조합니다. 예를 들어 사용자가 암호를 선택하는 양식을 만든 경우 암호에 특정 개수의 대문자, 특수 문자 등을 포함하도록 사용자에게 요구할 수 있습니다.

참고:

기본적으로 암호 위젯에는 사용 가능한 옵션이 설정되어 있지 않습니다.

  1. 유효성 검사 암호 위젯의 파란색 탭을 클릭하여 선택합니다.

  2. 속성 관리자([윈도우] > [속성])에서 옵션을 원하는 대로 설정합니다. 옵션 필드에 입력하는 숫자는 위젯에서 유효성 검사를 하기 위해 필요한 수입니다. 예를 들어 최소 문자 상자에 8을 입력하는 경우 사용자가 암호 텍스트 필드에 8자 이상을 입력하지 않으면 위젯은 유효성 검사를 하지 않습니다.

최소/최대 문자 수

유효한 암호에 필요한 최소 및 최대 문자 수를 지정합니다.

최소/최대 글자 수

유효한 암호에 필요한 최소 및 최대 글자(a, b, c...) 수를 지정합니다.

최소/최대 숫자 개수

유효한 암호에 필요한 최소 및 최대 숫자(1, 2, 3...)의 개수를 지정합니다.

최소/최대 대문자 수

유효한 암호에 필요한 최소 및 최대 대문자(A, B, C...) 수를 지정합니다.

최소/최대 특수 문자 수

유효한 암호에 필요한 최소 및 최대 특수 문자(!, @, #...) 수를 지정합니다.

위의 옵션 중 하나의 옵션이라도 비워두면 위젯은 해당 기준으로 유효성 검사를 하지 않습니다. 예를 들어 최소/최대 숫자 개수 옵션을 비워두면 위젯은 암호 문자열에서 숫자 개수를 검사하지 않습니다.

유효성 검사 암호 위젯 사용자 정의

속성 관리자를 사용하면 유효성 검사 암호 위젯을 간단히 편집할 수 있지만 사용자 정의된 스타일 지정 작업은 이 관리자에서 지원하지 않습니다. 유효성 검사 암호 위젯의 CSS를 변경하여 원하는 대로 스타일 지정된 위젯을 만들 수 있습니다. 더 구체적인 스타일 지정 작업의 목록은 www.adobe.com/go/learn_dw_sprypassword_custom_kr을 참조하십시오.

다음 항목의 모든 CSS 규칙은 SpryValidationPassword.css 파일에 있는 기본 규칙을 가리킵니다. Spry 유효성 검사 암호 위젯을 만들 때마다 Dreamweaver를 통해 SpryValidationPassword.css 파일이 해당 사이트의 SpryAssets 폴더에 저장됩니다. 이 파일의 주석에는 위젯에 적용되는 다양한 스타일에 대한 정보가 포함되어 있으므로 필요한 정보를 찾는 데 유용하게 참조할 수 있습니다.

참고:

관련 CSS 파일에서 직접 유효성 검사 암호 위젯의 규칙을 간단히 편집할 수 있지만 [CSS 스타일] 패널을 사용하여 이 위젯의 CSS를 편집할 수도 있습니다. [CSS 스타일] 패널을 사용하면 위젯의 각 부분에 할당된 CSS 클래스를 쉽게 찾을 수 있습니다. 이는 패널의 [현재] 모드를 사용하는 경우에 특히 유용합니다.

유효성 검사 암호 위젯 스타일 지정(일반 지침)

  1. SpryValidationPassword.css 파일을 엽니다.

  2. 위젯의 변경할 부분에 해당하는 CSS 규칙을 찾습니다. 예를 들어 암호 위젯 필수 상태의 배경색을 변경하려면 SpryValidationPassword.css 파일에서 input.passwordRequiredState 규칙을 편집합니다.

  3. CSS를 변경하고 파일을 저장합니다.

SpryValidationPassword.css 파일에는 코드 및 특정 규칙의 목적을 설명하는 광범위한 주석이 들어 있습니다. 자세한 내용은 파일의 주석을 참조하십시오.

유효성 검사 암호 위젯 오류 메시지 텍스트 스타일 지정

기본적으로 유효성 검사 암호 위젯의 오류 메시지는 빨간색으로 표시되고 텍스트 주위에는 1픽셀의 실선 테두리가 함께 표시됩니다.

  1. 유효성 검사 암호 위젯 오류 메시지의 텍스트 스타일을 변경하려면 다음 표를 사용하여 해당 CSS 규칙을 찾은 다음 기본 속성을 변경하거나 원하는 텍스트 스타일 속성과 값을 추가합니다.

    변경할 텍스트

    관련 CSS 규칙

    변경할 관련 속성

    오류 메시지 텍스트

    		 .passwordRequiredState .passwordRequiredMsg, .passwordMinCharsState .passwordMinCharsMsg, .passwordMaxCharsState .passwordMaxCharsMsg, .passwordInvalidStrengthState .passwordInvalidStrengthMsg, .passwordCustomState .passwordCustomMsg

    color: #CC3333; border: 1px solid #CC3333;

유효성 검사 암호 위젯 배경색 변경

  1. 유효성 검사 암호 위젯의 상태별 배경색을 변경하려면 다음 표를 사용하여 해당 CSS 규칙을 찾은 다음 기본 배경색 값을 변경합니다.

    변경할 색상

    관련 CSS 규칙

    변경할 관련 속성

    유효한 상태의 위젯 배경색

    		 .passwordValidState input, input.passwordValidState

    background-color: #B8F5B1;

    잘못된 상태의 위젯 배경색

    		 input.passwordRequiredState, .passwordRequiredState input, input.passwordInvalidStrengthState, .passwordInvalidStrengthState input, input.passwordMinCharsState, .passwordMinCharsState input, input.passwordCustomState, .passwordCustomState input, input.passwordMaxCharsState, .passwordMaxCharsState input

    background-color: #FF9F9F;

    포커스가 주어진 위젯 배경색

    		 .passwordFocusState input, input.passwordFocusState

    background-color: #FFFFCC;

유사 검색

Adobe 로고

내 계정 로그인

빠른 링크

내 플랜 모두 보기 내 플랜 관리

법적 고지 사항    |    온라인 개인정보 처리방침