인쇄 도구는 컨트롤 막대에 추가된 단추와 도구를 활성화할 때 표시되는 모달 대화 상자로 구성됩니다.
인쇄 단추의 모양은 다음 CSS 클래스 선택기로 제어합니다.
.s7ecatalogsearchviewer .s7print
인쇄 단추의 CSS 속성
여백-상단 |
컨트롤 막대의 위쪽에 있는 오프셋입니다. |
왼쪽 여백 |
왼쪽에 있는 다음 단추까지의 거리 또는 이 단추가 행의 첫 번째 단추인 경우 컨트롤 막대의 왼쪽입니다. |
width |
단추의 폭입니다. |
height |
단추의 높이입니다. |
background-image |
지정된 단추 상태에 대해 표시되는 이미지입니다. |
background-position |
CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 배치합니다. 참조: CSS 스프라이트 . |
이 버튼은 state
속성 선택기: 다른 단추 상태에 다른 스킨을 적용하는 데 사용할 수 있습니다.
단추 도구 설명을 현지화할 수 있습니다. 다음을 참조하십시오 사용자 인터페이스 요소의 현지화 추가 정보.
예 - 28 x 28픽셀이며 네 가지 서로 다른 단추 상태에 대해 각각 다른 이미지를 표시하는 인쇄 단추를 설정합니다.
.s7ecatalogsearchviewer .s7print {
margin-top: 4px;
margin-left: 10px;
width:28px;
height:28px;
}
.s7ecatalogsearchviewer .s7print[state='up'] {
background-image:url(images/v2/Print_dark_up.png);
}
.s7ecatalogsearchviewer .s7print[state='over'] {
background-image:url(images/v2/Print_dark_over.png);
}
.s7ecatalogsearchviewer .s7print[state='down'] {
background-image:url(images/v2/Print_dark_down.png);
}
.s7ecatalogsearchviewer .s7print[state='disabled'] {
background-image:url(images/v2/Print_dark_disabled.png);
}
대화 상자가 활성 상태일 때 웹 페이지를 덮는 배경 오버레이는 다음 CSS 클래스 선택기로 제어됩니다.
.s7ecatalogsearchviewer .s7printdialog .s7backoverlay
후면 오버레이의 CSS 속성
불투명도 |
배경 오버레이 불투명도. |
background-color |
배경 오버레이 색상. |
예 - 배경 오버레이를 불투명도가 70%인 회색으로 설정하려면 다음을 수행합니다.
.s7ecatalogsearchviewer .s7printdialog .s7backoverlay {
opacity:0.7;
background-color:#222222;
}
기본적으로 모달 대화 상자는 데스크탑 시스템에서 화면 중앙에 표시됩니다. 대화 상자의 위치 지정 및 크기 조정은 구성 요소에서 관리합니다. 이 대화 상자는 다음 CSS 클래스 선택기로 제어됩니다.
.s7ecatalogsearchviewer .s7kprintdialog .s7dialog
대화 상자의 CSS 속성
border-radius |
대화 상자 테두리 반경입니다. |
background-color |
대화 상자 배경색; |
예 - 회색 배경이 되도록 대화 상자를 설정하려면 다음을 수행합니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialog {
background-color: #dddddd;
}
대화 상자 머리글은 아이콘, 제목 텍스트 및 닫기 단추로 구성됩니다. 헤더 컨테이너는 다음 CSS 클래스 선택기로 제어됩니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialogheader
대화 상자 헤더의 CSS 속성
패딩 |
헤더 콘텐츠에 대한 내부 패딩. |
아이콘과 제목 텍스트는 다음과 같이 제어되는 추가 컨테이너에 래핑됩니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialogheader .s7dialogline
대화 상자 라인의 CSS 속성
패딩 |
헤더 아이콘 및 제목에 대한 내부 패딩. |
헤더 아이콘은 다음 CSS 클래스 선택기로 제어됩니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialogheadericon
대화 상자 헤더 아이콘의 CSS 속성
width |
아이콘 폭. |
height |
아이콘 높이. |
background-image |
아이콘 이미지 |
background-position |
CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 배치합니다. 참조: CSS 스프라이트 . |
헤더 제목은 다음 CSS 클래스 선택기로 제어됩니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialogheadertext
대화 상자 헤더 텍스트의 CSS 속성
font-weight |
글꼴 두께. |
font-size |
글꼴 높이. |
font-family |
글꼴 모음. |
패딩 |
내부 텍스트 패딩. |
닫기 단추는 다음 CSS 클래스 선택기로 제어합니다.
.s7ecatalogsearchviewer .s7printdialog .s7closebutton
닫기 단추 속성의 CSS
최상위 |
머리글 컨테이너를 기준으로 한 세로 단추 위치입니다. |
오른쪽 |
헤더 컨테이너를 기준으로 한 가로 단추 위치. |
width |
단추 너비. |
height |
단추 높이. |
패딩 |
단추의 내부 패딩입니다. |
background-image |
각 상태에 대한 단추 이미지. |
background-position |
CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 배치합니다. 참조: CSS 스프라이트 . |
이 버튼은 state
속성 선택기: 다른 단추 상태에 다른 스킨을 적용하는 데 사용할 수 있습니다.
닫기 단추 도구 팁과 대화 상자 제목을 현지화할 수 있습니다. 다음을 참조하십시오 사용자 인터페이스 요소의 현지화 추가 정보.
예 - 패딩, 22x22픽셀 아이콘 및 굵은 16포인트 제목이 있는 대화 상자 헤더를 설정하려면 다음을 수행하십시오. 마지막으로 28 x 28 픽셀 닫기 단추는 대화 상자 컨테이너의 맨 위에서 두 픽셀과 맨 오른쪽에서 두 픽셀을 배치합니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialogheader {
padding: 10px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogheader .s7dialogline {
padding: 10px 10px 2px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogheadericon {
background-image: url("images/sdk/dlgprint_cap.png");
height: 22px;
width: 22px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogheadertext {
font-size: 16pt;
font-weight: bold;
padding-left: 16px;
}
.s7ecatalogsearchviewer .s7printdialog .s7closebutton {
top:2px;
right:2px;
padding:8px;
width:28px;
height:28px;
}
.s7ecatalogsearchviewer .s7printdialog .s7closebutton[state='up'] {
background-image:url(images/sdk/close_up.png);
}
.s7ecatalogsearchviewer .s7printdialog .s7closebutton[state='over'] {
background-image:url(images/sdk/close_over.png);
}
.s7ecatalogsearchviewer .s7printdialog .s7closebutton[state='down'] {
background-image:url(images/sdk/close_down.png);
}
.s7ecatalogsearchviewer .s7printdialog .s7closebutton[state='disabled'] {
background-image:url(images/sdk/close_disabled.png);
}
대화 상자 바닥글은 취소 단추와 인쇄로 보내기 단추로 구성됩니다. 바닥글 컨테이너는 다음 CSS 클래스 선택기로 제어됩니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter
대화 상자 바닥글 속성의 CSS
경계 |
대화 상자의 나머지 부분과 바닥글을 시각적으로 구분하는 데 사용할 수 있는 테두리. |
바닥글에는 두 단추를 모두 보관하는 내부 컨테이너가 있습니다. 다음 CSS 클래스 선택기를 사용하여 제어됩니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialogbuttoncontainer
대화 상자 버튼 컨테이너의 CSS 속성
패딩 |
바닥글과 단추 사이의 내부 패딩입니다. |
취소 단추는 다음 CSS 클래스 선택기로 제어됩니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton
대화 상자 취소 단추의 CSS 속성
width |
단추 너비. |
height |
단추 높이. |
color |
각 상태에 대한 단추 텍스트 색입니다. |
background-color |
각 상태에 대한 단추 배경색입니다. |
이 버튼은 state
속성 선택기: 다른 단추 상태에 다른 스킨을 적용하는 데 사용할 수 있습니다.
인쇄로 보내기 단추는 다음 CSS 클래스 선택기로 제어됩니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton
대화 상자 작업 버튼의 CSS 속성
width |
단추 너비. |
height |
단추 높이. |
color |
각 상태에 대한 단추 텍스트 색입니다. |
background-color |
각 상태에 대한 단추 배경색입니다. |
이 버튼은 state
속성 선택기: 다른 단추 상태에 다른 스킨을 적용하는 데 사용할 수 있습니다.
또한 두 버튼은 다른 대화 상자 버튼에 대해 동일한 CSS 설정을 포함할 수 있는 공통 CSS 클래스를 공유합니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter .s7button
단추의 CSS 속성
font-weight |
단추 글꼴 두께. |
font-size |
단추 글꼴 크기입니다. |
font-family |
단추 글꼴 모음 |
선 높이 |
단추 내부의 텍스트 높이입니다. 세로 정렬에 영향을 줍니다. |
상자 그림자 |
그림자. |
오른쪽 여백 |
오른쪽 단추 여백입니다. |
버튼 도구 팁은 현지화할 수 있습니다. 다음을 참조하십시오 사용자 인터페이스 요소의 현지화 추가 정보.
예 - 64 x 34 취소 단추 및 96 x 34 인쇄로 보내기 단추가 있는 대화 상자 바닥글을 설정하려면 텍스트 색상과 배경색이 각 단추 상태에 따라 다릅니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter {
border-top: 1px solid #909090;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogbuttoncontainer {
padding-bottom: 6px;
padding-top: 10px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter .s7button {
box-shadow: 1px 1px 1px #999999;
color: #FFFFFF;
font-size: 9pt;
font-weight: bold;
line-height: 34px;
margin-right: 10px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton {
width:64px;
height:34px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton[state='up'] {
background-color:#666666;
color:#dddddd;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton[state='down'] {
background-color:#555555;
color:#ffffff;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton[state='over'] {
background-color:#555555;
color:#ffffff;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton[state='disabled'] {
background-color:#b2b2b2;
color:#dddddd;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton {
width:96px;
height:34px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton[state='up'] {
background-color:#333333;
color:#dddddd;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton[state='down'] {
background-color:#222222;
color:#cccccc;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton[state='over'] {
background-color:#222222;
color:#cccccc;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton[state='disabled'] {
background-color:#b2b2b2;
color:#dddddd;
}
기본 대화 상자 영역(머리글과 바닥글 사이)에는 대화 상자 내용이 포함됩니다. 모든 경우 구성 요소가 이 영역의 너비를 관리하지만 CSS에서는 이 영역을 설정할 수 없습니다. 기본 대화 상자 영역은 다음 CSS 클래스 선택기로 제어됩니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialogviewarea
대화 상자 보기 영역의 CSS
height |
기본 대화 상자 영역의 높이입니다. |
background-color |
기본 대화 상자 영역의 배경색입니다. |
margin |
외부 여백. |
예 - 자동으로 계산된 높이를 갖도록 기본 대화 상자 영역을 설정하려면 10개의 픽셀 여백을 두고 흰색 배경을 사용합니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialogviewarea {
background-color:#ffffff;
margin:10px;
height:auto;
}
모든 양식 콘텐츠(예: 레이블 및 입력 필드)는 다음 CSS 클래스 선택기로 제어되는 컨테이너 내에 있습니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialogbody
대화 상자 본문의 CSS
패딩 |
내부 패딩. |
예 - 10픽셀 패딩을 갖도록 양식 콘텐츠를 설정하려면 다음을 수행합니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialogbody {
padding: 10px;
}
대화 상자 폼은 줄별로 채워지며, 각 줄에는 레이블 및 텍스트 입력 필드와 같은 양식 내용의 일부가 전달됩니다. 단일 양식 줄은 다음 CSS 클래스 선택기로 제어됩니다.
.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline
대화 상자 라인의 CSS 속성
패딩 |
안쪽 줄 패딩. |
예 - 각 줄에 대해 10픽셀 패딩을 포함하도록 대화 상자 양식을 설정하려면 다음을 수행합니다.
.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline {
padding: 10px;
}
대화 상자 콘텐츠 블록의 크기는 다음 CSS 클래스 선택기로 제어합니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialoginputwide
대화 상자 입력 너비의 CSS 속성
width |
블록 폭. |
패딩 |
안쪽 줄 패딩. |
예 - 콘텐츠 블록을 430픽셀 너비로 설정하고 맨 아래에 10픽셀 패딩을 포함하도록 설정합니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialoginputwide {
padding-bottom: 10px;
width: 430px;
}
대화 상자 양식의 모든 정적 레이블은 다음 CSS 클래스 선택기로 제어됩니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialoglabel
이 클래스는 사용자 인터페이스 형식의 다양한 위치에 있는 텍스트에 적용할 수 있으므로 레이블 크기나 위치를 제어하기에 적합하지 않습니다.
대화 상자 레이블의 CSS 속성.
font-weight |
레이블 글꼴 두께입니다. |
font-size |
레이블 글꼴 크기입니다. |
font-family |
레이블 글꼴 모음입니다. |
color |
레이블 텍스트 색입니다. |
대화 상자 레이블은 현지화할 수 있습니다. 다음을 참조하십시오 사용자 인터페이스 요소의 현지화 추가 정보.
예 - 9픽셀 글꼴을 사용하여 모든 레이블을 회색, 굵은 글꼴로 설정하려면 다음을 수행합니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialoglabel {
color: #666666;
font-size: 9pt;
font-weight: bold;
}
입력 컨트롤은 컨테이너에 래핑되고 다음 CSS 클래스 선택기로 제어됩니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialoginputcontainer
대화 상자 입력 컨테이너의 CSS 속성
패딩-왼쪽 |
내부 패딩. |
예 - 대화 상자의 왼쪽 가장자리에서 30픽셀 패딩을 설정합니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialoginputcontainer {
padding-left: 30px;
}
라디오 버튼과 해당 캡션 텍스트는 다음 CSS 클래스 선택기로 제어됩니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialogoption
대화 상자 옵션의 CSS 속성
width |
캡션이 있는 라디오 단추의 총 너비입니다. |
color |
캡션 텍스트 색입니다. |
라디오 단추와 해당 캡션 사이의 간격은 다음 CSS 클래스 선택기로 제어됩니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialogoptioninput
대화 상자 옵션 입력의 CSS 속성
오른쪽 여백 |
라디오 단추와 해당 캡션 간의 간격. |
인쇄 범위 선택을 위한 숫자 선택기는 다음 CSS 클래스 선택기로 제어됩니다
.s7ecatalogsearchviewer .s7printdialog .s7dialogrange
대화 상자 인쇄 범위의 CSS 속성
width |
숫자 선택기의 폭입니다. |
margin |
숫자 선택기 주위의 간격입니다. |
예 - 모든 라디오 단추를 150픽셀 너비에 검은색 텍스트, 10픽셀 간격 및 42픽셀 너비의 숫자 선택기를 사용하도록 설정하려면 다음을 수행합니다.
.s7ecatalogsearchviewer .s7printdialog .s7dialogoption {
color: #000000;
width: 150px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogoption input {
margin-right: 10px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogrange {
margin-left: 10px;
margin-right: 10px;
width: 42px;
}
페이지 범위 선택과 인쇄 레이아웃 섹션 사이의 가로 구분선은 다음 CSS 클래스 선택기로 제어됩니다.
.s7ecatalogsearchviewer
.s7printdialog .s7horizontaldivider
가로 분할기의 CSS 속성
경계 |
구분선 주변의 경계. |
패딩 |
내부 패딩. |
width |
구분선 폭. |
margin |
외부 여백 |
예 - 양쪽에 10픽셀 수직 패딩이 있고 맨 위에 10픽셀 여백이 있는 430픽셀 너비의 회색 구분선을 설정하려면 다음을 수행합니다.
.s7ecatalogsearchviewer .s7printdialog .s7horizontaldivider {
border-top: 1px solid #aaaaaa;
margin-top: 10px;
padding-bottom: 10px;
padding-top: 10px;
width: 430px;
}