참고:
Spry 위젯은 Dreamweaver CC 이상에서 jQuery 위젯으로 바뀌었습니다. 페이지의 기존 Spry 위젯을 수정할 수는 있지만 새 Spry 위젯을 추가할 수는 없습니다.
Spry 유효성 검사 선택 위젯은 사용자가 항목을 선택하면 그 선택이 유효한지 여부를 표시하는 드롭다운 메뉴입니다. 예를 들어 여러 섹션별로 그룹화되고 수평선으로 분할된 상태 목록이 포함된 유효성 검사 선택 위젯을 삽입할 수 있습니다. 사용자가 실수로 상태가 아니라 분할 선을 선택하면 해당 선택이 잘못되었음을 사용자에게 알리는 메시지가 유효성 검사 선택 위젯에 표시됩니다.
다음은 확장된 유효성 검사 선택 위젯과 다양한 상태에서 축소된 형태의 위젯을 보여 주는 예입니다.
A. 포커스가 주어진 유효성 검사 선택 위젯 B. 선택 위젯, 유효한 상태 C. 선택 위젯, 필수 상태 D. 선택 위젯, 유효하지 않은 상태
유효성 검사 선택 위젯에는 유효함, 잘못됨, 값 필요 등의 여러 가지 상태가 포함됩니다. 속성 관리자를 사용하여 원하는 유효성 검사 결과에 따라 이러한 상태의 속성을 변경할 수 있습니다. 유효성 검사 선택 위젯을 사용하면 사용자가 위젯 바깥쪽을 클릭할 때, 항목을 선택할 때, 양식을 전송하려 할 때 등의 다양한 시점에서 유효성을 검사할 수 있습니다.
사용자와 상호 작용을 통해 유효성 검사 선택 위젯이 이러한 상태 중 하나로 전환될 때마다 런타임에 Spry 프레임워크 논리를 통해 특정 CSS 클래스가 위젯의 HTML 컨테이너에 적용됩니다. 예를 들어 사용자가 메뉴에서 항목을 선택하지 않은 채로 양식을 전송하려고 하면 "항목을 선택하십시오."라는 오류 메시지가 위젯에 표시되도록 하는 클래스가 Spry를 통해 위젯에 적용됩니다. 오류 메시지의 스타일과 표시 상태를 제어하는 규칙은 이 위젯과 관련된 CSS 파일인 SpryValidationSelect.css에 있습니다.
일반적으로 form 태그 안에 포함되는 유효성 검사 선택 위젯의 기본 HTML은 컨테이너 <span> 태그 및 이 태그로 둘러싸인 텍스트 영역의 <select> 태그로 구성됩니다. 문서의 헤드 내부와 위젯의 HTML 마크업 아래에 있는 script 태그도 유효성 검사 선택 위젯의 HTML에 포함됩니다.
유효성 검사 선택 위젯의 코드에 대한 자세한 분석을 비롯하여 유효성 검사 선택 위젯이 작동하는 방식에 대한 포괄적인 설명은 www.adobe.com/go/learn_dw_spryselect_kr을 참조하십시오.
참고:
[삽입] 패널에서 [Spry] 범주를 사용하여 유효성 검사 선택 위젯을 삽입할 수도 있습니다.
Dreamweaver를 통해 유효성 검사 선택 위젯을 삽입하여 웹 페이지에 게시한 경우 기본적으로 사용자는 특정 값과 연결되어 있는 메뉴 항목을 선택해야 합니다. 그러나 원하는 경우 이 옵션을 해제할 수도 있습니다.
사용자가 메뉴 항목을 선택하면 잘못된 것으로 등록될 값을 지정하여 메뉴 항목에 연결할 수 있습니다. 예를 들어 유효하지 않은 값으로 -1을 지정하고 이 값을 option 태그에 할당한 경우 사용자가 해당 메뉴 항목을 선택하면 위젯에서 오류 메시지를 반환합니다.
<option value="-1"> ------------------- </option>
속성 관리자를 사용하면 유효성 검사 선택 위젯을 간단히 편집할 수 있지만 사용자 정의된 스타일 지정 작업은 이 관리자에서 지원하지 않습니다. 유효성 검사 선택 위젯의 CSS를 변경하여 원하는 대로 스타일 지정된 위젯을 만들 수 있습니다.
다음 항목의 모든 CSS 규칙은 SpryValidationSelect.css 파일에 있는 기본 규칙을 가리킵니다. Spry 유효성 검사 선택 위젯을 만들 때마다 Dreamweaver를 통해 SpryValidationSelect.css 파일이 해당 사이트의 SpryAssets 폴더에 저장됩니다. 이 파일의 주석에는 위젯에 적용되는 다양한 스타일에 대한 정보가 포함되어 있으므로 필요한 정보를 찾는 데 유용하게 참조할 수 있습니다.
참고:
관련 CSS 파일에서 직접 유효성 검사 선택 위젯의 규칙을 간단히 편집할 수 있지만 [CSS 스타일] 패널을 사용하여 이 위젯의 CSS를 편집할 수도 있습니다. [CSS 스타일] 패널을 사용하면 위젯의 각 부분에 할당된 CSS 클래스를 쉽게 찾을 수 있습니다. 이는 패널의 [현재] 모드를 사용하는 경우에 특히 유용합니다.
-
변경할 배경색
관련 CSS 규칙
변경할 관련 속성
유효한 상태의 위젯 배경색
.selectValidState select, select.selectValidState background-color: #B8F5B1;
잘못된 상태의 위젯 배경색
select.selectRequiredState, .selectRequiredState select, select.selectInvalidState, .selectInvalidState select background-color: #FF9F9F;
포커스가 주어진 위젯 배경색
.selectFocusState select, select.selectFocusState background-color: #FFFFCC;
Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.