인쇄

인쇄 도구는 컨트롤 막대에 추가된 단추와 도구를 활성화할 때 표시되는 모달 대화 상자로 구성됩니다.

인쇄 단추의 모양은 다음 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;
}

이 페이지에서는