검색 결과 패널

검색 결과 패널은 맨 위에 있는 검색 입력 상자와 정보 메시지 또는 검색 결과가 표시되는 기본 영역으로 구성됩니다.

기본 뷰어 영역의 CSS 속성

패널이 활성화되어 있으면 뷰어 사용자 인터페이스가 반투명 채우기로 표시됩니다. 이 채우기의 색상 및 불투명도는 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogviewer .s7searchpanel .s7backoverlay

CSS 속성

설명

배경색

오버레이의 색입니다.

불투명도

색상의 불투명도입니다.

검색 결과 패널은 항상 사용 가능한 모든 뷰어 높이를 차지합니다. 그러나 너비를 구성할 수 있습니다. 너비를 중간 및 큰 크기 중단점에 대한 기본 설정인 절대 픽셀 값으로 설정할 수 있습니다. 또는 너비를 100%로 설정하여 검색 결과 패널이 전체 뷰어 영역을 차지하도록 할 수 있습니다. 패널 너비는 다음 CSS 클래스 선택기에 의해 제어됩니다.

.s7ecatalogsearchviewer .s7searchpanel .s7searchresultspace

검색 결과 공간의 CSS 속성

width

검색 결과 공간의 너비입니다.

예 - 크고 중간 크기 중단점에 250픽셀 전체 검색 결과 패널을 설정하고 작은 크기 중단점에서 전체 크기 패널을 사용하려면 다음을 수행하십시오.

.s7ecatalogsearchviewer.s7size_large .s7searchpanel .s7searchresultspanel, .s7ecatalogsearchviewer.s7size_medium .s7searchpanel .s7searchresultspanel { 
 width:250px; 
} 
.s7ecatalogsearchviewer.s7size_small .s7searchpanel .s7searchresultspanel { 
 width:100%; 
}

검색 결과 패널의 맨 위에는 검색 입력 상자가 표시됩니다. 입력 상자의 측면에 있는 패딩은 다음 CSS 클래스 선택기에 의해 제어됩니다.

.s7ecatalogsearchviewer .s7searchpanel .s7searchinputcontainer

검색 입력 컨테이너의 CSS 속성

패딩

입력 상자 주위에 패딩됩니다.

검색 입력 필드는 다음 CSS 클래스 선택기에 의해 제어됩니다.

.s7ecatalogsearchviewer .s7searchpanel .s7searchinput

검색 입력 필드의 CSS 속성

height

검색 입력 필드의 높이입니다.

왼쪽 패딩

입력 필드 한도와 입력 텍스트 사이의 내부 패딩입니다.

경계

검색 입력 필드의 테두리입니다.

margin

검색 입력 필드의 여백입니다

font-size

텍스트 글꼴의 크기입니다.

예 - 0픽셀 높이 및 14픽셀 텍스트 글꼴로 검색 입력 필드를 설정하려면 다음을 수행합니다.

.s7ecatalogsearchviewer .s7searchpanel .s7searchinput { 
 padding-left:5px; 
 height:30px; 
 font-size:14px; 
}

검색 입력 필드의 왼쪽에 있는 검색 버튼은 기본적으로 "유리 보기" 형태로, 다음 CSS 클래스 선택기에서 제어합니다.

 .s7ecatalogsearchviewer .s7searchpanel .s7searchinputbutton

검색 입력 단추의 CSS 속성

너비

검색 입력 단추의 폭입니다.

높이

검색 입력 단추의 높이입니다.

배경 이미지

"보이는 유리" 아이콘 이미지의 URL입니다.

배경 크기

"보기 유리" 아이콘의 크기입니다.

경계

검색 입력 단추의 테두리입니다.

여백

검색 입력 단추의 여백입니다.

예 - 26 x 26 픽셀 "유리" 아이콘이 있는 검색 단추를 설정하려면 다음을 수행합니다. 1픽셀 테두리가 있는 30픽셀 크기:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinputbutton { 
 width:30px; 
 height:30px; 
 background-size:26px 26px; 
 background-image: url(images/v2/Search_form_field.png); 
 font-size:14px; 
 border: 1px solid #696969; 
}

기능을 처음 호출하면 검색 결과 패널에 텍스트 프롬프트가 표시될 수 있습니다. 또한 검색에서 결과를 반환하지 않은 경우 사용자에게 메시지가 표시됩니다. 모든 경우 텍스트는 검색 결과 패널의 주 부분에 나타나고 다음 CSS 클래스 선택기에 의해 제어됩니다.

.s7ecatalogsearchviewer .s7searchpanel .s7searchinfo

검색 정보의 CSS 속성

color

텍스트 색상.

font-family

텍스트 글꼴의 이름입니다.

font-align

가로 텍스트 정렬.

font-size

글꼴 텍스트의 크기입니다.

노트

이 텍스트 패널은 state 속성 선택기를 지원하며, 이 선택기를 사용하여 다른 텍스트 메시지에 다른 스타일을 적용할 수 있습니다. 특히 state='prompt' 은 패널을 처음 호출할 때 표시되는 텍스트 프롬프트에 해당합니다. state='results' 은 검색 히트에 대한 정보가 있는 텍스트에 해당합니다. 및 state='no_results' 는 검색 쿼리에서 결과를 반환하지 않을 때 표시되는 텍스트에 해당합니다.

메시지 텍스트를 현지화할 수 있습니다. 자세한 내용은 사용자 인터페이스 요소 현지화를 참조하십시오.

예 - 회색 18픽셀 글꼴을 사용하는 텍스트 패널을 설정하려면 다음을 수행합니다.

.s7ecatalogsearchviewer .s7searchpanel .s7searchinfo { 
 font-size: 18px; 
 color: #696969; 
}

검색 결과는 검색 히트가 있는 페이지의 단일 열 또는 단일 축소판 행으로 렌더링됩니다. 검색 결과 축소판 간의 간격은 다음 CSS 클래스 선택기로 제어됩니다.

.ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumbcell

축소판 셀의 CSS 속성

여백

각 축소판 주위의 세로 여백 크기입니다. 실제 축소판 간격은 .s7thumbcell 에 대해 설정된 위쪽 및 아래쪽 여백의 합계와 같습니다.

예 - 10픽셀 간격을 설정하려면 다음을 수행합니다.

.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumbcell { 
 margin: 5px; 
}

개별 축소판의 모양은 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumb

축소판의 CSS 속성

너비

축소판의 폭입니다.

높이

축소판의 높이입니다.

경계

축소판의 테두리입니다.

예 - 215 x 129픽셀로 축소판을 설정하려면 밝은 회색의 기본 테두리와 어두운 회색으로 선택한 테두리를 사용합니다.

.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumb { 
 width: 215px; 
 height: 129px; 
}

축소판 레이블의 모양은 다음 CSS 클래스 선택기로 제어됩니다.

 .s7ecatalogsearchviewer 
.s7searchpanel .s7swatches .s7label

레이블의 CSS 속성

색상

텍스트 색상.

font-family

텍스트 글꼴의 이름입니다.

font-size

텍스트 글꼴의 크기입니다.

예 - 12픽셀, 회색, Helvetica 글꼴을 사용하는 레이블을 설정하려면 다음을 수행합니다.

.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7label { 
 font-family: Helvetica,sans-serif; 
 color: #4c4c4c; 
 font-size: 12px; 
}

마우스 입력을 사용하는 시스템에서는 검색 결과 패널 아래에 두 개의 스크롤 버튼이 나타나고 사용자가 검색 결과를 스크롤합니다. 위쪽 및 아래쪽 스크롤 단추의 모양은 다음 CSS 클래스 선택기를 사용하여 제어됩니다.

.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton 
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton

CSS 위쪽, 왼쪽, 아래쪽 및 오른쪽 속성을 사용하여 스크롤 단추를 배치할 수 없습니다. 대신 뷰어 논리에서 자동으로 위치를 지정합니다.

스크롤 위쪽 및 아래쪽 단추의 CSS 속성

너비

스크롤 단추의 폭입니다.

높이

스크롤 단추의 높이입니다.

배경 이미지

지정된 단추 상태에 대해 표시되는 이미지입니다.

배경 위치

CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 위치를 지정합니다.

CSS Sprite 도 참조하십시오.

노트

이 단추는 state 속성 선택기를 지원합니다. 이 선택기는 다른 스킨을 "up", "down", "over""disabled" 단추 상태에 적용하는 데 사용할 수 있습니다.

단추 도구 설명은 현지화할 수 있습니다. 자세한 내용은 사용자 인터페이스 요소 현지화를 참조하십시오.

예 - 125 x 35픽셀이고 각 상태에 대해 서로 다른 아트웍을 갖는 스크롤 업 단추를 설정하려면 다음을 수행합니다.

.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton { 
 width:125px; 
 height:35px; 
} 
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton[state='up'] { 
 background-image:url(images/sdk/searchpanel_scroll_up_up.png); 
} 
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton[state='over'] { 
 background-image:url(images/sdk/searchpanel_scroll_up_over.png); 
} 
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton[state='down'] { 
 background-image:url(images/sdk/searchpanel_scroll_up_down.png); 
} 
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton[state='disabled'] { 
 background-image:url(images/sdk/searchpanel_scroll_up_disabled.png); 
} 
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton { 
 width:125px; 
 height:35px; 
} 
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton[state='up'] { 
 background-image:url(images/sdk/searchpanel_scroll_down_up.png); 
} 
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton[state='over'] { 
 background-image:url(images/sdk/searchpanel_scroll_down_over.png); 
} 
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton[state='down'] { 
 background-image:url(images/sdk/searchpanel_scroll_down_down.png); 
} 
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton[state='disabled'] { 
 background-image:url(images/sdk/searchpanel_scroll_down_disabled.png);

이 페이지에서는