참고:

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

유효성 검사 라디오 그룹 위젯 정보

유효성 검사 라디오 그룹 위젯은 선택 항목에 대한 유효성 검사를 지원하는 라디오 버튼 그룹입니다. 이 위젯을 사용하면 라디오 버튼 그룹에서 하나의 라디오 버튼을 선택해야 합니다.

다음은 여러 가지 상태의 유효성 검사 라디오 그룹 위젯을 보여 주는 예입니다.

여러 가지 상태의 유효성 검사 라디오 그룹 위젯
여러 가지 상태의 유효성 검사 라디오 그룹 위젯

A. 유효성 검사 라디오 그룹 위젯 오류 메시지 B. 유효성 검사 라디오 그룹 위젯 그룹 

유효성 검사 라디오 그룹 위젯에는 초기 상태 외에도 유효함, 잘못됨, 값 필요와 같은 세 가지 상태가 포함됩니다. 해당 CSS 파일(SpryValidationRadio.css)을 편집하여 원하는 유효성 검사 결과에 따라 이러한 상태의 속성을 변경할 수 있습니다. 유효성 검사 라디오 그룹 위젯을 사용하면 사용자가 위젯 바깥쪽을 클릭할 때, 항목을 선택할 때, 양식을 전송하려 할 때 등의 다양한 시점에서 유효성을 검사할 수 있습니다.

초기 상태

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

유효한 상태

사용자가 항목을 선택하여 양식을 전송할 수 있는 경우의 위젯 상태입니다.

필수 상태

사용자가 필요한 만큼의 항목을 선택하지 않은 경우의 위젯 상태입니다.

잘못된 상태

사용할 수 없는 라디오 버튼 값을 선택한 경우의 위젯 상태입니다.

사용자와 상호 작용을 통해 유효성 검사 라디오 그룹 위젯이 이러한 상태 중 하나로 전환될 때마다 런타임에 Spry 프레임워크 논리를 통해 특정 CSS 클래스가 위젯의 HTML 컨테이너에 적용됩니다. 예를 들어 사용자가 항목을 선택하지 않은 채로 양식을 전송하려고 하면 "항목을 선택하십시오."라는 오류 메시지가 위젯에 표시되도록 하는 클래스가 Spry를 통해 위젯에 적용됩니다. 오류 메시지의 스타일과 표시 상태를 제어하는 규칙은 이 위젯과 관련된 파일인 SpryValidationRadio.css에 있습니다.

일반적으로 양식 안에 포함되는 유효성 검사 라디오 그룹 위젯의 기본 HTML 코드는 라디오 그룹의 input type="radio" 태그로 둘러 싸인 컨테이너 span 태그로 구성됩니다. 문서의 헤드 내부와 위젯의 HTML 코드 아래에 있는 script 태그도 유효성 검사 라디오 그룹 위젯의 HTML 코드에 포함됩니다.

유효성 검사 라디오 그룹 위젯의 코드에 대한 세부 분석을 비롯하여 유효성 검사 라디오 그룹 위젯이 작동하는 방식에 대한 자세한 설명은 www.adobe.com/go/learn_dw_spryradio_kr을 참조하십시오.

유효성 검사 라디오 그룹 위젯 삽입 및 편집

유효성 검사 라디오 그룹 위젯 삽입

  1. [삽입] > [Spry] > [Spry 유효성 검사 라디오 그룹]을 선택합니다.
  2. [이름] 텍스트 상자에 라디오 그룹의 이름을 입력합니다.
  3. 플러스(+) 버튼 또는 마이너스(-) 버튼을 클릭하여 그룹에서 라디오 버튼을 추가하거나 제거합니다.
  4. [레이블] 열에서 각 라디오 버튼의 이름을 클릭하여 필드를 편집 가능하게 만들고 각 라디오 버튼에 고유한 이름을 지정합니다.
  5. [값] 열에서 각 값을 클릭하여 필드를 편집 가능하게 만들고 각 라디오 버튼에 고유한 값을 지정합니다.
  6. (선택 사항) 라디오 버튼 또는 그 값을 클릭하여 특정 행을 선택한 다음 위쪽 또는 아래쪽 화살표를 클릭하여 행을 위아래로 이동합니다.
  7. 라디오 그룹의 레이아웃 형식을 선택합니다.

    행 분리

    행 분리(br 태그)를 사용하여 각 라디오 버튼을 별도의 행에 배치합니다.

    표의 개별 행(tr 태그)을 사용하여 각 라디오 버튼을 별도의 행에 배치합니다.

  8. [확인]을 클릭합니다.

참고:

[삽입] 패널에서 [Spry] 범주를 사용하여 [라디오 그룹] 위젯을 삽입할 수도 있습니다.

유효성 검사 실시 시간 지정

사용자가 위젯 바깥쪽을 클릭할 때, 항목을 선택할 때 또는 양식을 전송하려 할 때 등의 다양한 시점에서 유효성 검사를 실시하도록 설정할 수 있습니다.

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

    흐림 효과

    사용자가 라디오 그룹 바깥쪽을 클릭할 때마다 유효성 검사를 합니다.

    바꾸기

    사용자가 항목을 선택할 때 유효성 검사를 합니다.

    onSubmit

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

디자인 뷰에 위젯 상태 표시

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

라디오 버튼의 필수 상태 변경

기본적으로 [유효성 검사 라디오 그룹] 위젯은 사용자가 양식을 전송하기 전에 항목을 선택하도록 합니다. 그러나 원하는 경우 항목 선택을 선택 사항으로 만들 수도 있습니다.

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

빈 값 또는 잘못된 값 지정

사용자가 라디오 버튼을 선택하면 빈 값 또는 잘못된 값으로 등록될 값을 지정하여 라디오 버튼에 연결할 수 있습니다. 사용자가 빈 값을 가진 라디오 버튼을 선택하면 브라우저에서는 “항목을 선택하십시오.”라는 오류 메시지를 반환합니다. 사용자가 잘못된 값을 가진 라디오 버튼을 선택하면 브라우저에서는 “유효한 값을 선택하십시오.”라는 오류 메시지를 반환합니다.

빈 값 라디오 버튼이 있는 라디오 그룹 위젯
빈 값 라디오 버튼이 있는 라디오 그룹 위젯

  1. [라디오 그룹] 위젯에서 빈 값 또는 잘못된 값 라디오 버튼에 사용할 라디오 버튼을 선택합니다. 위젯에 빈 값 또는 잘못된 값을 지정할 때에는 그러한 값이 이미 지정된 해당 라디오 버튼이 있어야 합니다.
  2. [라디오 버튼 속성 관리자]([윈도우] > [속성])에서 라디오 버튼에 체크값을 지정합니다. 빈 값이 있는 라디오 버튼을 만들려면 [체크값] 상자에 none을 입력합니다. 잘못된 값이 있는 라디오 버튼을 만들려면 [체크값] 상자에 invalid를 입력합니다.
  3. 위젯의 파란색 탭을 클릭하여 전체 [유효성 검사 라디오 그룹] 위젯을 선택합니다.
  4. [속성 관리자]에서 빈 값 또는 잘못된 값을 지정합니다. “항목을 선택하십시오.”라는 빈 값 오류 메시지를 표시하는 위젯을 만들려면 [빈 값] 상자에 none을 입력합니다. "유효한 값을 선택하십시오."라는 잘못된 값 오류 메시지를 표시하는 위젯을 만들려면 [잘못된 값] 상자에 invalid를 입력하십시오.

    오류 메시지가 제대로 표시되도록 하려면 라디오 버튼 및 라디오 그룹 위젯에 none 또는 invalid 값을 반드시 지정해야 합니다.

라디오 그룹 위젯 사용자 정의

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

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

참고:

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

유효성 검사 라디오 그룹 위젯 스타일 지정(일반 지침)

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

  2. 위젯의 변경할 부분에 해당하는 CSS 규칙을 찾습니다. 예를 들어 라디오 그룹 위젯 필수 상태의 배경색을 변경하려면 SpryValidationRadio.css 파일에서 radioRequiredState 규칙을 편집합니다.

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

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

유효성 검사 라디오 그룹 위젯 오류 메시지 텍스트 스타일 지정

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

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

    스타일 지정할 텍스트

    관련 CSS 규칙

    변경할 관련 속성

    오류 메시지 텍스트

    .radioRequiredState .radioRequiredMsg, .radioInvalidState .radioInvalidMsg

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

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책