전자 메일 공유

이메일 공유 도구는 소셜 공유 패널에 추가된 버튼과 도구가 활성화될 때 표시되는 모달 대화 상자로 구성됩니다. 단추의 위치는 소셜 공유 도구에서 완전히 관리됩니다.

전자 메일 공유 단추의 모양은 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogviewer .s7emailshare

전자 메일 공유 도구의 CSS 속성

width	단추의 폭입니다.
height	단추의 높이입니다.
배경 이미지	지정된 단추 상태에 대해 표시되는 이미지입니다.
배경 위치	CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 위치를 지정합니다. 참조 - CSS Sprite .

Social 공유 패널에서 단추를 제거하려면 display:none CSS 클래스의 CSS 속성입니다.

단추 도구 팁은 현지화할 수 있습니다. 자세한 내용은 사용자 인터페이스 요소의 로컬라이제이션 추가 정보.

예 - 28 x 28픽셀인 이메일 공유 단추를 설정하고 네 개의 서로 다른 단추 상태에 대해 다른 이미지를 표시합니다.

.s7ecatalogviewer .s7emailshare {
 width:28px;
 height:28px;
}
.s7ecatalogviewer .s7emailshare[state='up'] {
background-image:url(images/v2/EmailShare_dark_up.png);
}
.s7ecatalogviewer .s7emailshare[state='over'] {
background-image:url(images/v2/EmailShare_dark_over.png);
}
.s7ecatalogviewer .s7emailshare[state='down'] {
background-image:url(images/v2/EmailShare_dark_down.png);
}
.s7ecatalogviewer .s7emailshare[state='disabled'] {
background-image:url(images/v2/EmailShare_dark_disabled.png);
}

대화 상자가 활성 상태일 때 웹 페이지를 다루는 배경 오버레이는 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogviewer .s7emaildialog .s7backoverlay

후면 오버레이의 CSS 속성

불투명도	배경 오버레이 불투명도.
배경색	배경 오버레이 색상.

예 - 70% 불투명도를 사용하여 회색 오버레이를 설정하려면 다음을 수행합니다.

.s7ecatalogviewer .s7emaildialog .s7backoverlay {
 opacity:0.7;
 background-color:#222222;
}

기본적으로 모달 대화 상자는 데스크톱 시스템의 화면 가운데에 표시되고 터치 장치의 전체 웹 페이지 영역을 가져옵니다. 모든 경우 대화 상자의 위치 지정 및 크기 조절은 구성 요소에서 관리합니다. 대화 상자는 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogviewer .s7emaildialog .s7dialog

대화 상자의 CSS 속성

테두리 반경	대화 상자 테두리 반경(대화 상자가 전체 브라우저 창을 가져오지 않는 경우);
배경색	대화 상자 배경색;
너비	이 모드는 설정이 해제되거나 100%로 설정해야 합니다. 이 경우 대화 상자는 전체 브라우저 창을 표시합니다(터치 장치에서 이 모드가 선호됨).
높이	이 모드는 설정이 해제되거나 100%로 설정해야 합니다. 이 경우 대화 상자는 전체 브라우저 창을 표시합니다(터치 장치에서 이 모드가 선호됨).

예 - 전체 브라우저 창을 사용하고 터치 장치에 흰색 배경을 포함하도록 대화 상자를 설정하려면 다음을 수행하십시오.

.s7ecatalogviewer .s7touchinput .s7emaildialog .s7dialog {
 width:100%;
 height:100%;
background-color: #ffffff;
}

대화 상자 헤더는 아이콘, 제목 텍스트 및 닫기 단추로 구성됩니다. 헤더 컨테이너는 다음 CSS 클래스 선택기로 제어됩니다

.s7ecatalogviewer .s7emaildialog .s7dialogheader

대화 상자 헤더의 CSS 속성

패딩	헤더 컨텐츠에 대한 내부 패딩.

아이콘 및 제목 텍스트는

.s7ecatalogviewer .s7emaildialog .s7dialogheader .s7dialogline

대화 상자의 CSS 속성

패딩	헤더 아이콘 및 제목에 대한 내부 패딩.

헤더 아이콘은 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogviewer .s7emaildialog .s7dialogheadericon

대화 상자 헤더 아이콘의 CSS 속성

너비	아이콘 너비.
높이	아이콘 높이.
배경 이미지	아이콘 이미지.
배경 위치	CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 위치를 지정합니다. 참조 - CSS Sprite .

헤더 제목은 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogviewer .s7emaildialog .s7dialogheadertext

대화 상자 헤더 텍스트의 CSS 속성

font-weight	글꼴 가중치입니다.
font-size	글꼴 높이.
font-family	글꼴 패밀리.
패딩	내부 텍스트 패딩.

닫기 단추는 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogviewer .s7emaildialog .s7closebutton

닫기 단추의 CSS 속성 ​

최상위	헤더 컨테이너에 대한 세로 단추 위치입니다.
오른쪽	헤더 컨테이너에 대한 가로 단추 위치입니다.
너비	단추 너비.
높이	단추 높이.
패딩	단추의 내부 패딩.
배경 이미지	각 상태에 대한 단추 이미지입니다.
배경 위치	CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 위치를 지정합니다. 참조 - CSS Sprite .

닫기 단추 도구 팁과 대화 상자 제목을 현지화할 수 있습니다. 자세한 내용은 사용자 인터페이스 요소의 로컬라이제이션 추가 정보.

예 - 패딩, 24 x 17픽셀 아이콘 및 굵은 16포인트 제목을 사용한 대화 상자 헤더를 설정하려면 다음을 수행하십시오. 마지막으로, 28x28픽셀 닫기 단추가 위쪽에서 2픽셀, 대화 상자 컨테이너 오른쪽에서 2픽셀로 배치됩니다.

.s7ecatalogviewer .s7emaildialog .s7dialogheader {
 padding: 10px;
}
.s7ecatalogviewer .s7emaildialog .s7dialogheader .s7dialogline {
 padding: 10px 10px 2px;
}
.s7ecatalogviewer .s7emaildialog .s7dialogheadericon {
    background-image: url("images/sdk/dlgemail_cap.png");
    height: 17px;
    width: 24px;
}
.s7ecatalogviewer .s7emaildialog .s7dialogheadertext {
    font-size: 16pt;
    font-weight: bold;
    padding-left: 16px;
}
.s7ecatalogviewer .s7emaildialog .s7closebutton {
 top:2px;
 right:2px;
 padding:8px;
 width:28px;
 height:28px;
}
.s7ecatalogviewer .s7emaildialog .s7closebutton[state='up'] {
 background-image:url(images/sdk/close_up.png);
}
.s7ecatalogviewer .s7emaildialog .s7closebutton[state='over'] {
 background-image:url(images/sdk/close_over.png);
}
.s7ecatalogviewer .s7emaildialog .s7closebutton[state='down'] {
 background-image:url(images/sdk/close_down.png);
}
.s7ecatalogviewer .s7emaildialog .s7closebutton[state='disabled'] {
 background-image:url(images/sdk/close_disabled.png);
}

대화 상자 바닥글은 취소 및 전자 메일 보내기 단추로 구성됩니다. 바닥글 컨테이너는 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogviewer .s7emaildialog .s7dialogfooter

대화 상자 바닥글의 CSS 속성 ​

경계	대화 상자의 나머지 부분과 바닥글을 시각적으로 구분하는 데 사용할 수 있는 테두리입니다.

바닥글에는 두 단추를 모두 유지하는 내부 컨테이너가 있습니다. 이 컨트롤은 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogviewer .s7emaildialog .s7dialogbuttoncontainer

대화 상자 단추 컨테이너의 CSS 속성

패딩	바닥글과 단추 사이의 내부 패딩.

취소 단추는 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogviewer .s7emaildialog .s7dialogcancelbutton

대화 상자의 CSS 속성 취소 단추

너비	단추 너비.
높이	단추 높이.
color	각 상태에 대한 단추 텍스트 색입니다.
배경색	각 상태에 대한 단추 배경색입니다.

이메일 전송 단추는 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogviewer .s7emaildialog .s7dialogactionbutton

대화 상자 작업 단추의 CSS 속성

너비	단추 너비.
높이	단추 높이.
색상	각 상태에 대한 단추 텍스트 색입니다.
배경색	각 상태에 대한 단추 배경색입니다.

또한 두 단추 모두 다른 대화 상자 단추와 동일한 CSS 설정을 포함할 수 있는 일반적인 CSS 클래스를 공유합니다.

.s7ecatalogviewer .s7emaildialog .s7dialogfooter .s7button

단추의 CSS 속성

font-weight	단추 글꼴 가중치입니다.
font-size	단추 글꼴 크기입니다.
font-family	단추 글꼴 모음입니다.
라인 높이	단추 내부의 텍스트 높이. 세로 정렬에 영향을 줍니다.
상자 그림자	그림자.
순익	오른쪽 단추 여백.

이 단추의 도구 설명은 현지화할 수 있습니다. 자세한 내용은 사용자 인터페이스 요소의 로컬라이제이션 추가 정보.

예 - 64 x 34 취소 단추와 82 x 34 전자 메일 보내기 단추가 있는 대화 상자 바닥글을 설정하려면 다음을 수행하십시오. 텍스트 색상 및 배경색은 각 단추 상태에 대해 다릅니다.

.s7ecatalogviewer .s7emaildialog .s7dialogfooter {
    border-top: 1px solid #909090;
}
.s7ecatalogviewer .s7emaildialog .s7dialogbuttoncontainer {
    padding-bottom: 6px;
    padding-top: 10px;
}
.s7ecatalogviewer .s7emaildialog .s7dialogfooter .s7button {
    box-shadow: 1px 1px 1px #999999;
    color: #FFFFFF;
    font-size: 9pt;
    font-weight: bold;
    line-height: 34px;
    margin-right: 10px;
}
.s7ecatalogviewer .s7emaildialog .s7dialogcancelbutton {
 width:64px;
 height:34px;
}
.s7ecatalogviewer .s7emaildialog .s7dialogcancelbutton[state='up'] {
 background-color:#666666;
 color:#dddddd;
}
.s7ecatalogviewer .s7emaildialog .s7dialogcancelbutton[state='down'] {
 background-color:#555555;
 color:#ffffff;
}
.s7ecatalogviewer .s7emaildialog .s7dialogcancelbutton[state='over'] {
 background-color:#555555;
 color:#ffffff;
}
.s7ecatalogviewer .s7emaildialog .s7dialogcancelbutton[state='disabled'] {
 background-color:#b2b2b2;
 color:#dddddd;
}
.s7ecatalogviewer .s7emaildialog .s7dialogactionbutton {
 width:82px;
 height:34px;
}
.s7ecatalogviewer .s7emaildialog .s7dialogactionbutton[state='up'] {
 background-color:#333333;
 color:#dddddd;
}
.s7ecatalogviewer .s7emaildialog .s7dialogactionbutton[state='down'] {
 background-color:#222222;
 color:#cccccc;
}
.s7ecatalogviewer .s7emaildialog .s7dialogactionbutton[state='over'] {
 background-color:#222222;
 color:#cccccc;
}
.s7ecatalogviewer .s7emaildialog .s7dialogactionbutton[state='disabled'] {
 background-color:#b2b2b2;
 color:#dddddd;
}

머리글과 바닥글 사이에 있는 기본 대화 상자 영역에는 스크롤 가능한 대화 상자 콘텐츠와 오른쪽의 스크롤 패널이 있습니다. 모든 경우 구성 요소는 이 영역의 너비를 관리하므로 CSS로 설정할 수 없습니다. 기본 대화 상자 영역은 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogviewer .s7emaildialog .s7dialogviewarea

대화 상자의 CSS 속성 보기 영역 ​

높이	주 대화상자 영역의 높이입니다. 대화 상자가 데스크탑 모드에서 작동하는 경우에만 지정해야 합니다. 대화 상자의 크기가 전체 브라우저 창을 차지하도록 지정된 경우에는 적용할 수 없습니다.
배경색	기본 대화 상자 영역의 배경색입니다.
margin	외부 여백.

예 - 확인 메시지가 표시될 때 기본 대화 상자 영역을 처음에 300픽셀 높이 및 100픽셀 높이로 설정하려면 10픽셀 여백을 사용하고 흰색 배경을 사용합니다.

.s7ecatalogviewer .s7emaildialog .s7dialogviewarea {
 background-color:#ffffff;
 margin:10px;
 height:300px;
}
.s7ecatalogviewer .s7emaildialog .s7dialogviewarea[state='sendsuccess'] {
 height:100px;
}

모든 양식 컨텐츠(예: 레이블 및 입력 필드)는 다음 CSS 클래스 선택기를 사용하여 제어되는 컨테이너 내에 있습니다.

.s7ecatalogviewer .s7emaildialog .s7dialogbody

이 컨테이너의 높이가 기본 대화 상자 영역보다 큰 것으로 나타나면 구성 요소에 의해 자동으로 세로 스크롤이 활성화됩니다.

대화 상자 본문의 CSS 속성

패딩

내부 패딩.

예 - 양식 컨텐츠에 10개의 픽셀 패딩이 있도록 설정하려면 다음을 수행합니다.

.s7ecatalogviewer .s7emaildialog .s7dialogbody {
    padding: 10px;
}

대화 상자 양식은 라인별로 채워져 있으며 각 줄에는 양식 컨텐츠의 일부(레이블 및 텍스트 입력 필드 등)가 포함되어 있습니다. 단일 양식 선은 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogviewer .s7emaildialog .s7dialogbody .s7dialogline

대화 상자 줄의 CSS 속성

패딩

내부 라인 패딩.

예 - 각 행에 10픽셀 패딩이 있도록 대화 상자 양식을 설정하려면 다음을 수행합니다.

.s7ecatalogviewer .s7emaildialog .s7dialogbody .s7dialogline {
    padding: 10px;
}

대화 상자 양식의 모든 정적 레이블은 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogviewer .s7emaildialog .s7dialoglabel

이 클래스는 양식 사용자 인터페이스의 여러 위치에서 텍스트에 적용할 수 있으므로 레이블 크기 또는 위치를 제어하는 데 적합하지 않습니다.

대화 상자 레이블의 CSS 속성입니다. ​

font-weight	레이블 글꼴 가중치입니다.
font-size	레이블 글꼴 크기입니다.
font-family	글꼴 패밀리에 레이블을 지정합니다.
색상	텍스트 색상을 레이블 지정합니다.

대화 상자 레이블은 현지화할 수 있습니다. 자세한 내용은 사용자 인터페이스 요소의 로컬라이제이션 추가 정보.

예 - 9픽셀 글꼴로 회색, 굵게 모든 레이블을 설정하려면 다음을 수행합니다.

.s7ecatalogviewer .s7emaildialog .s7dialoglabel {
    color: #666666;
    font-size: 9pt;
    font-weight: bold;
}

양식 입력 필드의 왼쪽에 표시되는 모든 정적 레이블은 다음과 같이 제어됩니다.

.s7ecatalogviewer .s7emaildialog .s7dialoginputlabel

대화 상자 입력 레이블의 CSS 속성

너비	정적 레이블의 폭입니다.
text-align	가로 텍스트 정렬.
여백	정적 레이블 여백입니다.
패딩	정적 레이블 패딩.

예 - 입력 필드 레이블을 50픽셀 너비로 설정하고, 오른쪽 맞춤을 수행하며, 10픽셀의 패딩과 오른쪽에 10픽셀 여백을 설정하려면 다음을 수행합니다.

.s7ecatalogviewer .s7emaildialog .s7dialoginputlabel {
    margin-right: 10px;
    padding: 10px;
    text-align: right;
    width: 50px;
}

각 양식 입력 필드는 입력 필드 주위에 사용자 지정 테두리를 적용할 수 있도록 컨테이너에 래핑됩니다. 이 컨트롤은 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogviewer .s7emaildialog .s7dialoginputcontainer

대화 상자 입력 컨테이너의 CSS 속성

경계	입력 필드 컨테이너 주위에 테두리가 표시됩니다.
패딩	내부 패딩.

대화 상자 본문의 오른쪽 가장자리까지(시작 필드 및 메시지 필드를 포함함) 레이블에서 스프레드되는 대부분의 입력 필드는 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogviewer .s7emaildialog .s7dialoginputwide

대화 상자의 입력 범위 필드의 CSS 속성

너비

입력 필드 너비.

받는 사람 필드는 오른쪽의 전자 메일 제거 단추에 대한 공간을 할당하므로 좁습니다. 이 컨트롤은 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogviewer .s7emaildialog .s7dialoginputshort

대화 상자의 CSS 속성 입력 단축키 필드

너비

입력 필드 너비.

예 - 모든 입력 필드 주위에 9픽셀의 패딩이 있는 1픽셀 회색 테두리를 갖도록 양식을 설정하려면 다음을 수행합니다. 유효성 검사에 실패한 필드에 대해 동일한 테두리를 빨간색 색상으로 표시하려면 다음 단계를 수행합니다. 폭 250픽셀인 끝 필드입니다. 마지막으로, 나머지 입력 필드의 너비는 300픽셀입니다.

.s7ecatalogviewer .s7emaildialog .s7dialoginputcontainer {
    border: 1px solid #CCCCCC;
    padding: 9px;
}
.s7ecatalogviewer .s7emaildialog .s7dialoginputcontainer[state="verifyerror"] {
    border: 1px solid #FF0000;
}
.s7ecatalogviewer .s7emaildialog .s7dialoginputshort {
    width: 250px;
}
.s7ecatalogviewer .s7emaildialog .s7dialoginputwide {
    width: 300px;
}

전자 메일 메시지 입력 필드는 다음과 같이 제어됩니다.

.s7ecatalogviewer .s7emaildialog .s7dialogmessage

이 클래스를 사용하면 원본으로 사용하는 특정 속성을 설정할 수 있습니다 TEXTAREA 요소를 생성하지 않습니다.

대화 상자 메시지의 CSS 속성

높이	메시지 높이.
자동 줄 바꿈	자동 줄바꿈 스타일입니다.

예 - 이메일 메시지 높이를 50픽셀로 설정하고 사용하려면 break-word 자동 줄바꿈:

.s7ecatalogviewer .s7emaildialog .s7dialogmessage {
    height: 50px;
    word-wrap: break-word;
}

다른 이메일 주소 추가 단추를 사용하면 사용자가 전자 메일 양식에 둘 이상의 수신자를 추가할 수 있습니다. 이 컨트롤은 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogviewer .s7emaildialog .s7dialogaddemailbutton

대화 상자의 CSS 속성 추가 전자 메일 주소 단추

높이	단추 높이.
색상	각 상태에 대한 단추 텍스트 색입니다.
배경 이미지	각 상태에 대한 단추 이미지입니다.
배경 위치	단추 영역 내의 단추 이미지 위치입니다.
font-weight	단추 글꼴 가중치입니다.
font-size	단추 글꼴 크기입니다.
font-family	단추 글꼴 모음입니다.
라인 높이	단추 내부의 텍스트 높이. 세로 정렬에 영향을 줍니다.
text-align	가로 텍스트 정렬.
패딩	내부 패딩.

단추 도구 팁은 현지화할 수 있습니다. 자세한 내용은 사용자 인터페이스 요소의 로컬라이제이션 추가 정보.

예 - "다른 전자 메일 주소 추가" 단추를 25픽셀 높이로 설정하려면 오른쪽 맞춤으로 12포인트 굵은 글꼴과 각 상태에 대해 다른 텍스트 색상 및 이미지를 사용합니다.

.s7ecatalogviewer .s7emaildialog .s7dialogaddemailbutton {
 text-align:right;
 font-size:12pt;
 font-weight:bold;
 background-position:left center;
 line-height:25px;
 padding-left:30px;
 height:25px;
}
.s7ecatalogviewer .s7emaildialog .s7dialogaddemailbutton[state='up'] {
 color:#666666;
 background-image:url(images/sdk/dlgaddplus_up.png);
}
.s7ecatalogviewer .s7emaildialog .s7dialogaddemailbutton[state='down'] {
 color:#000000;
 background-image:url(images/sdk/dlgaddplus_over.png);
}
.s7ecatalogviewer .s7emaildialog .s7dialogaddemailbutton[state='over'] {
 color:#000000;
 text-decoration:underline;
 background-image:url(images/sdk/dlgaddplus_over.png);
}
.s7ecatalogviewer .s7emaildialog .s7dialogaddemailbutton[state='disabled'] {
 color:#666666;
 background-image:url(images/sdk/dlgaddplus_up.png);
}

제거 단추를 사용하면 사용자가 이메일 양식에서 추가 주소를 제거할 수 있습니다. 이 컨트롤은 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogviewer .s7emaildialog .s7dialogremoveemailbutton

대화 상자의 CSS 속성 - 이메일 제거 단추

너비	단추 너비.
높이	단추 높이.
배경 이미지	각 상태에 대한 단추 이미지입니다.
배경 위치	CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 위치를 지정합니다. 참조 - CSS Sprite .

단추 도구 팁은 현지화할 수 있습니다. 자세한 내용은 사용자 인터페이스 요소의 로컬라이제이션 추가 정보.

예 - 제거 단추를 25 x 25픽셀로 설정하고 각 상태에 대해 다른 이미지를 사용하려면

.s7ecatalogviewer .s7emaildialog .s7dialogremoveemailbutton {
 width:25px;
 height:25px;
}
.s7ecatalogviewer .s7emaildialog .s7dialogremoveemailbutton[state='up'] {
 background-image:url(images/sdk/dlgremove_up.png);
}
.s7ecatalogviewer .s7emaildialog .s7dialogremoveemailbutton[state='over'] {
 background-image:url(images/sdk/dlgremove_over.png);
}
.s7ecatalogviewer .s7emaildialog .s7dialogremoveemailbutton[state='down'] {
 background-image:url(images/sdk/dlgremove_over.png);
}
.s7ecatalogviewer .s7emaildialog .s7dialogremoveemailbutton[state='disabled'] {
 background-image:url(images/sdk/dlgremove_up.png);
}

공유되는 컨텐츠는 대화 상자 본문의 하단에 표시되며 축소판, 제목, 원본 URL 및 설명을 포함합니다. 이 레이아웃은 다음 CSS 클래스 선택기로 제어되는 컨테이너에 래핑됩니다.

.s7ecatalogviewer .s7emaildialog .s7dialogbody .s7dialogcontent

대화 상자 콘텐츠의 CSS 속성

경계	컨테이너 테두리.
패딩	내부 패딩.

예 - 픽셀 점선 테두리가 있고 패딩이 없도록 하단 컨테이너를 설정하려면 다음을 수행합니다.

.s7ecatalogviewer .s7emaildialog .s7dialogbody .s7dialogcontent {
    border: 1px dotted #A0A0A0;
    padding: 0;
}

축소판 이미지는 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogviewer .s7emaildialog .s7dialogthumbnail

다음 background-image 속성은 구성 요소 논리로 설정됩니다.

대화 상자 축소판 이미지의 CSS 속성

너비	축소판 너비.
높이	축소판 높이.
수직 정렬	세로 정렬 축소판.
패딩	내부 패딩.

예 - 축소판 그림을 90 x 60픽셀로 설정하고 10픽셀의 패딩과 함께 위에 정렬하려면 다음을 수행합니다.

.s7ecatalogviewer .s7emaildialog .s7dialogthumbnail {
    height: 60px;
    padding: 10px;
    vertical-align: top;
    width: 90px;
}

컨텐츠 제목, 원본 및 설명은 컨텐츠 축소판 오른쪽 패널에 추가로 그룹화됩니다. 이 컨트롤은 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogviewer .s7emaildialog .s7dialoginfopanel

대화 상자 정보 패널의 CSS 속성

너비

패널 너비.

예 - 컨텐츠 정보 패널의 너비를 300픽셀로 설정하려면 다음을 수행합니다.

.s7ecatalogviewer .s7emaildialog .s7dialoginfopanel {
    width: 300px;
}

컨텐츠 제목은 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogviewer .s7emaildialog .s7dialogtitle

대화 상자 제목의 CSS 속성

여백	외부 여백.
font-weight	글꼴 가중치입니다.
font-size	글꼴 크기입니다.
font-family	글꼴 패밀리.

예 - 굵은 글꼴을 사용하고 10픽셀 여백을 사용하도록 컨텐츠 제목을 설정하려면 다음을 수행하십시오.

.s7ecatalogviewer .s7emaildialog .s7dialogtitle {
    font-weight: bold;
    margin: 10px;
}

콘텐츠 원본은 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogviewer .s7emaildialog .s7dialogorigin

대화 상자 콘텐츠 원본의 CSS 속성 ​

여백	외부 여백.
font-weight	글꼴 가중치입니다.
font-size	글꼴 크기입니다.
font-family	글꼴 패밀리.

예 - 10개의 픽셀 여백이 있도록 컨텐츠 원본을 설정하려면 다음을 수행합니다.

.s7ecatalogviewer .s7emaildialog .s7dialogorigin {
    margin: 10px;
}

컨텐츠 설명은 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogviewer .s7emaildialog .s7dialogdescription

대화 상자 컨텐츠 설명의 CSS 속성

여백	외부 여백.
font-weight	글꼴 가중치입니다.
font-size	글꼴 크기입니다.
font-family	글꼴 패밀리.

예 - 10픽셀 여백을 사용하고 9포인트 글꼴을 사용하도록 컨텐츠 설명을 설정하려면 다음을 수행하십시오.

.s7ecatalogviewer .s7emaildialog .s7dialogdescription {
    font-size: 9pt;
    margin: 10px;
}

사용자가 잘못된 입력 데이터를 입력하면 인라인 유효성 검사가 실패합니다. 또는 양식을 제출할 때 대화 상자에서 오류 또는 확인 메시지를 렌더링해야 하는 경우 대화 상자 본문의 맨 위에 메시지가 표시됩니다. 이 컨트롤은 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogviewer .s7emaildialog .s7dialogerrormessage

대화 상자 오류 메시지의 CSS 속성

배경 이미지	오류 아이콘. 기본값은 느낌표입니다.
배경 위치	메시지 영역 내의 오류 아이콘 위치입니다.
색상	메시지 텍스트 색입니다.
font-weight	글꼴 가중치입니다.
font-size	글꼴 크기입니다.
font-family	글꼴 패밀리.
라인 높이	메시지 내부의 텍스트 높이입니다. 세로 정렬에 영향을 줍니다.
패딩	내부 패딩.

단추 도구 팁은 현지화할 수 있습니다. 자세한 내용은 사용자 인터페이스 요소의 로컬라이제이션 추가 정보.

예 - 10포인트 굵은 글꼴을 사용하도록 메시지를 설정하려면 25픽셀 라인 높이, 왼쪽에 20픽셀 패딩이 있고 느낌표 아이콘을 사용합니다. 그리고 마지막으로, 오류가 있으면 빨간색 텍스트가 있고, 성공할 경우 아이콘과 녹색 텍스트가 없습니다.

.s7ecatalogviewer .s7emaildialog .s7dialogerrormessage[state="verifyerror"] {
    background-image: url("images/sdk/dlgerrimg.png");
    color: #FF0000;
}
.s7ecatalogviewer .s7emaildialog .s7dialogerrormessage[state="senderror"] {
    background-image: url("images/sdk/dlgerrimg.png");
    color: #FF0000;
}
.s7ecatalogviewer .s7emaildialog .s7dialogerrormessage[state="sendsuccess"] {
    background-image: none;
    color: #00B200;
}
.s7ecatalogviewer .s7emaildialog .s7dialogerrormessage {
    background-position: left center;
    font-size: 10pt;
    font-weight: bold;
    line-height: 25px;
    padding-left: 20px;
}

세로 스크롤이 필요한 경우 스크롤 막대가 대화 상자의 오른쪽 가장자리 근처에 있는 패널에서 렌더링되며, 스크롤 막대는 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogviewer .s7emaildialog .s7dialogscrollpanel

대화 상자 스크롤 패널의 CSS 속성

너비	스크롤 패널 너비.

예 - 스크롤 패널을 너비 44픽셀로 설정하려면 다음을 수행합니다.

.s7ecatalogviewer .s7emaildialog .s7dialogscrollpanel {
    width: 44px;
}

스크롤 막대 영역의 모양은 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogviewer .s7emaildialog .s7scrollbar

스크롤 막대의 CSS 속성

너비	스크롤 막대 폭입니다.
최상위	스크롤 패널의 맨 위에서 수직 스크롤 막대가 오프셋됩니다.
하단	스크롤 패널의 아래쪽에서 오프셋되는 세로 스크롤 막대
오른쪽	스크롤 패널의 오른쪽 모서리에서 오프셋된 가로 스크롤 막대형

예 - 스크롤 막대의 가로 28픽셀과 스크롤 패널의 위쪽, 오른쪽 및 아래쪽에서 8픽셀 여백을 설정하려면 다음을 수행합니다.

.s7ecatalogviewer .s7emaildialog .s7scrollbar {
    bottom: 8px;
    right: 8px;
    top: 8px;
    width: 28px;
}

스크롤 막대 트랙은 위쪽 및 아래쪽 스크롤 단추 사이의 영역입니다. 구성 요소는 트랙의 위치와 높이를 자동으로 설정합니다. 트랙은 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrolltrack

스크롤 트랙의 CSS 속성

너비	트랙 폭입니다.
배경색	트랙 배경색입니다.

예 - 가로 28픽셀이고 회색 배경을 갖는 스크롤 막대 트랙을 설정하려면 다음을 수행합니다.

.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrolltrack {
width:28px;
background-color: #B2B2B2;
}

스크롤 막대 엄지손가락이 스크롤 트랙 영역 내에서 세로로 이동합니다. 세로 위치는 구성 요소 로직에 의해 완전히 제어되지만 엄지 높이 는 컨텐츠 양에 따라 동적으로 변경되지 않습니다. 다음 CSS 클래스 선택기를 사용하여 엄지 높이 및 기타 측면을 구성할 수 있습니다.

.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollthumb

스크롤 막대 경험의 CSS 속성

너비	엄지 폭.
높이	엄지 높이.
패딩 탑	트랙 위쪽 사이의 수직 안쪽 여백입니다.
패딩 하단	트랙 아래쪽 사이의 수직 안쪽 여백입니다.
배경 이미지	주어진 경험 상태에 대해 표시되는 이미지입니다.
배경 위치	CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 위치를 지정합니다. 참조 - CSS Sprite .

예 - 28 x 45픽셀인 스크롤 막대 엄지를 설정하려면 위쪽과 아래쪽에 10픽셀 여백이 있고 각 상태에 대해 서로 다른 아트웍을 사용합니다.

.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollthumb {
    height: 45px;
    padding-bottom: 10px;
    padding-top: 10px;
    width: 28px;
}
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="up"] {
 background-image:url("images/sdk/scrollbar_thumb_up.png");
}
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="down"] {
 background-image:url("images/sdk/scrollbar_thumb_down.png");
}
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="over"] {
 background-image:url("images/sdk/scrollbar_thumb_over.png");
}
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="disabled"] {
 background-image:url("images/sdk/scrollbar_thumb_disabled.png");
}

위쪽 및 아래쪽 스크롤 단추의 모양은 다음 CSS 클래스 선택기를 사용하여 제어됩니다.

.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollupbutton

.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton

CSS를 사용하여 스크롤 단추를 배치할 수 없습니다 top, left, bottom, 및 right 속성을 사용합니다. 대신 뷰어 논리에서 자동으로 위치가 지정됩니다.

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

너비	단추 너비입니다.
높이	단추 높이입니다.
배경 이미지	지정된 단추 상태에 대해 표시되는 이미지입니다.
배경 위치	CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 위치를 지정합니다. 참조 - CSS Sprite .

단추 도구 팁은 현지화할 수 있습니다. 자세한 내용은 사용자 인터페이스 요소의 로컬라이제이션 추가 정보.

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

.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollupbutton {
 width:28px;
 height:32px;
}
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='up'] {
background-image:url(images/sdk/scroll_up_up.png);
}
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='over'] {
 background-image:url(images/sdk/scroll_up_over.png);
}
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='down'] {
 background-image:url(images/sdk/scroll_up_down.png);
}
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='disabled'] {
 background-image:url(images/sdk/scroll_up_disabled.png);
}
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton {
 width:28px;
 height:32px;
}
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='up'] {
 background-image:url(images/sdk/scroll_down_up.png);
}
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='over'] {
 background-image:url(images/sdk/scroll_down_over.png);
}
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='down'] {
 background-image:url(images/sdk/scroll_down_down.png);
}
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='disabled'] {
 background-image:url(images/sdk/scroll_down_disabled.png);
}