HTML 양식 웹 파트를 사용하여 다른 웹 파트의 데이터 필터링 및 표시

중요:  본 문서는 기계 번역된 문서이므로 고지 사항을 확인하십시오. 이 문서의 영문 버전은 여기서 확인할 수 있습니다.

HTML 양식 웹 파트를 사용하여 목록 보기 웹 파트 등의 다른 웹 파트에 연결한 다음 데이터를 전달할 수 있습니다.

이 문서의 내용

양식 웹 파트를 사용 하 여

페이지에 웹 파트 추가

HTML 양식 웹 파트를 다른 웹 파트 연결

HTML 양식 웹 파트를 사용자 지정

기본 HTML 양식 웹 파트를 사용자 지정

여러 줄 텍스트 상자를 사용 하 여

옵션 단추를 사용 하 여

선택 항목의 드롭다운 목록을 사용 하 여

사용 확인란

웹 파트의 일반 속성 구성

표시 형식

레이아웃

고급

양식 웹 파트 사용

HTML 양식 웹 파트를 사용하여 다른 웹 파트에 연결한 다음 데이터를 전달할 수 있습니다. 예를 들어 기본 HTML 양식 웹 파트를 사용하여 지역 이름을 입력하고 고객 데이터가 포함된 목록 보기 웹 파트로 값을 전달한 다음 해당 지역을 기준으로 데이터를 필터링할 수도 있습니다. 사용자가 드롭다운 목록에서 지역 이름을 선택할 수 있도록 HTML 양식 웹 파트를 사용자 지정할 수도 있습니다. HTML 양식 웹 파트에서는 텍스트 상자, 드롭다운 목록, 여러 줄 텍스트 상자, 확인란 또는 옵션 단추를 사용할 수 있습니다.

다른 웹 파트에 필드를 연결하는 방법은 다른 웹 파트가 웹 파트 연결을 사용하도록 정의된 방식에 따라 달라집니다.

양식에 여러 요소(텍스트 상자, 라디오 단추 등)를 포함할 수는 있지만 목록 보기 웹 파트에는 한 필드만 연결할 수 있습니다. 그러나 여러 필드를 여러 웹 파트에 동시에 연결할 수 있습니다. 예를 들어 텍스트 상자와 옵션 단추 집합을 포함한 HTML 양식 웹 파트에서 텍스트 상자를 한 목록 보기 웹 파트에 연결하고 옵션 단추를 다른 목록 보기 웹 파트에 연결할 수 있습니다. 사용자가 이동 단추를 클릭하면 두 목록 보기 웹 파트가 모두 HTML 양식 웹 파트에 입력한 정보에 따라 필터링됩니다.

여러 매개 변수를 허용하는 웹 파트에는 HTML 양식 웹 파트에 있는 둘 이상의 필드를 연결할 수 있습니다. 이 경우에는 SharePoint Designer 2010 등의 SharePoint 호환 웹 디자인 프로그램에서 연결을 완료해야 할 수 있습니다.

맨 위로 이동

페이지에 웹 파트 추가

페이지를 편집하려면 최소한 사이트의 기본 SharePoint 그룹인 <사이트 이름> 구성원에 추가되는 경우 부여되는 사용 권한이 있어야 합니다.

  1. 페이지의 리본 메뉴에서 페이지 탭을 클릭한 다음 편집 명령을 클릭합니다.

    편집 탭의 편집 명령

    편집 명령을 사용할 수 없는 경우 페이지 편집 권한이 없는 것일 수 있습니다. 관리자에게 문의하세요.

  2. 페이지에서 웹 파트를 추가할 위치를 클릭하고 삽입 탭을 클릭한 다음 웹 파트를 클릭합니다.

    웹 파트 명령

  3. 범주에서 목록 및 라이브러리 등의 범주를 선택하고 공지 사항 등 페이지에 추가할 웹 파트를 선택한 다음 추가를 클릭합니다.

    웹 파트 선택

  4. 웹 파트를 선택하면 웹 파트 정보가 웹 파트 정보에 표시됩니다.

  5. 페이지 편집을 완료한 후 페이지 탭을 클릭한 다음 저장 후 닫기를 클릭합니다.

맨 위로 이동

다른 웹 파트에 HTML 양식 웹 파트 연결

HTML 양식 웹 파트를 사용 하려면 연결 하기를 목록 보기 웹 파트와 같은 웹 파트 연결을 통해 받는 값의 수 있는 다른 웹 파트입니다. 필터링 할 목록 및 열을 필터링 할 HTML 양식 웹 파트와 같은 페이지에서 웹 파트에 표시 되어야 합니다. HTML 양식 웹 파트 페이지에 추가 하는 방법에 대 한 정보를 페이지에 웹 파트 추가참조 하십시오.

  1. 필터링할 웹 파트가 포함된 페이지로 이동합니다.

  2. 리본 메뉴에서 페이지 탭을 클릭하고 편집 명령을 클릭합니다.

    편집 명령을 사용할 수 없는 경우 페이지 편집 권한이 없는 것일 수 있습니다. 관리자에게 문의하세요.

  3. HTML 양식 웹 파트를 가리키고 아래쪽 화살표를 클릭한 다음 연결을 클릭하고 양식 값을 제공할 대상을 가리킨 후에 연결할 웹 파트 이름을 클릭합니다.

  4. 연결 선택 대화 상자에서 연결 구성 탭을 클릭합니다.

  5. 연결 형식 메뉴에서 HTML 양식 웹 파트의 정보와 일치하는 필드를 선택합니다.

참고: 동일한 데이터 형식으로 이들 않으며 필드 이름이 같이 필요가 없습니다. HTML 양식 웹 파트에서 보낸 값은 텍스트 값.

  1. 마침을 클릭하고 페이지 맨 위의 편집 모드 끝내기를 클릭합니다.

기본적으로 텍스트 상자에 텍스트를 입력하고 이동을 클릭하거나 Enter 키를 누르면 됩니다. 다른 웹 파트에는 입력한 텍스트와 일치하는 데이터만 표시됩니다. 새 텍스트를 입력할 수 있도록 텍스트 상자의 내용을 지우려면 현재 텍스트를 선택한 후 삭제합니다.

맨 위로 이동

HTML 양식 웹 파트 사용자 지정

HTML 양식 웹 파트 도구창에서 제공되는 원본 편집기를 사용하거나 SharePoint Designer 2010 등의 SharePoint 호환 웹 디자인 프로그램을 사용하여 HTML 양식 웹 파트를 사용자 지정할 수 있습니다. 표준 텍스트 상자 대신 옵션 단추, 확인란, 여러 줄 텍스트 상자 및 목록 상자를 사용할 수 있으며, 레이블을 추가하고 기본값을 할당할 수도 있습니다.

HTML 양식 웹 파트를 사용자 지정할 때는 다음 사항을 고려하십시오.

  • 다른 웹 파트로 데이터를 전달할 때는 INPUT 요소를 사용하는 이동 단추만 사용할 수 있습니다.

  • HTML 양식 웹 파트는 FORM 요소를 사용합니다. HTML, BODY, FORM 요소 등의 특정 HTML 요소는 FORM 요소 내에서 사용할 수 없습니다.

  • 모든 양식 필드 이름은 고유해야 합니다. 각 이름 값은 연결하려는 대상 웹 파트의 해당 열 이름에 연결하는 데 사용됩니다.

양식 웹 파트를 사용자 지정하려면 원본 편집기 단추를 사용하여 텍스트 편집기 대화 상자를 표시한 후에 HTML 소스 코드를 수정하거나 추가합니다.

참고: HTML 양식 웹 파트 데이터 연결 가능한 다른 웹 파트에만 제공-있고 해당 웹 파트에서 데이터를 가져올 수 없습니다. 예를 들어 데이터의 행을 표시 하려면 세부 정보 폼으로 HTML 양식 웹 파트를 사용할 수 없습니다.

맨 위로 이동

기본 HTML 양식 웹 파트 사용자 지정

기본 HTML 양식 웹 파트를 사용자 지정하려면 다음을 실행합니다.

  1. 리본 메뉴에서 HTML 양식 웹 파트를 표시 하는 페이지에서를 클릭는 편집 탭을 클릭 한 다음 클릭은 편집 명령을 합니다.

  2. HTML 양식 웹 파트를 가리키고 아래쪽 화살표를 클릭 한 다음 클릭 웹 파트 편집 합니다.

  3. 도구 창에서 원본 편집기 단추를 클릭 합니다.

  4. 기본 HTML 코드가 포함된 텍스트 항목 대화 상자가 열립니다.

코드를 보다 쉽게 읽고 수정하려면 다음과 같이 텍스트에 캐리지 리턴을 삽입해 줄을 바꿉니다.

<div onkeydown="javascript:if (event.keyCode == 13) _SFSUBMIT_">
<input type="text" name="T1"/>
<input type="button" value="Go" onclick="javascript:_SFSUBMIT_"/>
</div>

필드 이름을 변경하거나, 필드에 레이블을 추가하거나, 기본값을 추가하는 등의 다양한 방법으로 첫 번째 INPUT 요소를 변경할 수 있습니다.

속성/Property

설명

필드 이름

양식 웹 파트의 기본 텍스트 상자 이름은 t 1 입니다. 구성 연결 대화 상자에 표시 되는 이름입니다. 필드 보다 의미 있는 이름을 지정 하려면 t 1 대신 새 이름을 입력 합니다. 따옴표를 제거 하지 마십시오.

필드 레이블

양식 필드 앞이나 뒤에 레이블 텍스트를 추가할 수 있습니다. 따옴표는 포함하지 말고 텍스트만 입력하십시오.

기본값

텍스트 영역 필드에 기본값을 추가할 수 있습니다. 사용자는 이동 단추를 클릭하여 기본값을 허용하거나 원하는 항목을 입력하여 기본값을 무시할 수 있습니다. 기본값을 추가하려면 값 특성을 사용하십시오.

예를 들어 보다 의미 있는 이름을 지정하려면 다음과 같이 기본값을 추가한 후에 레이블을 추가합니다.

Region: <input type="text" name="Region" value="India"/>

다음 예제와 같이 단추 이름을 변경하여 두 번째 INPUT 요소를 변경할 수 있습니다.

<input type="button" value="SUBMIT" onclick="javascript:_SFSUBMIT_"/>

DIV 요소 앞뒤에 다른 HTML 요소를 추가할 수도 있습니다. 예를 들어 사용자가 페이지를 빠르게 새로 고치고 FORM 요소를 다시 설정할 수 있도록 하는 매우 유용하고 간단한 방법은 DIV 요소를 닫은 후에 다음과 같이 현재 페이지의 앵커 태그를 추가하는 것입니다.

<br/>
<a href="http://contoso/SitePages/CustByRegion.aspx">Refresh</a>

중요: 텍스트 편집기 대화 상자에서 다른 HTML 코드를 변경 하지 않습니다. HTML 양식 웹 파트는 다른 웹 파트에 연결을 만들려면 런타임 시 스크립팅 루틴 동적으로 만듭니다. Onkeydown 또는 onclick 이벤트 코드를 수정 하지 않음 또는 HTML 양식 웹 파트를 실수로 손상 시킬 수 있습니다.

맨 위로 이동

여러 줄 텍스트 상자 사용

TEXTAREA 요소는 여러 줄 텍스트 입력 컨트롤을 정의합니다. ROWS 특성은 텍스트 필드에 표시되는 줄 수를, COLS 특성은 텍스트 영역 너비(문자 단위)를 지정합니다. 다음 예제의 경우 5줄로 된 30자 너비의 텍스트 상자가 사용자에게 표시됩니다. 사용자가 상자에 입력하는 텍스트는 30자에서 줄이 바뀝니다.

<textarea name="Region" rows=5 cols=30></textarea>

팁: 닫는 꺾쇠 괄호 (>) 한 후 바로 소스 코드에 공간이 없이 있는지 확인 합니다.

맨 위로 이동

옵션 단추 사용

라디오 단추라고도 하는 옵션 단추를 사용하면 선택 항목 중 하나를 선택할 수 있습니다. 다음 예제의 경우 3개의 라디오 단추를 표시합니다. 각 라디오 단추에는 같은 이름을 사용합니다. 일반적으로는 각 단추 뒤에 레이블을 추가합니다. 별도의 줄에서 각 라디오 단추의 형식을 지정하려면 BR 요소를 사용하십시오.

<input type="radio" name="Region" value="India"/> India<BR/>
<input type="radio" name="Region" value="USA"/> USA<BR/>
<input type="radio" name="Region" value="Spain"/> Spain<BR/>

맨 위로 이동

선택 항목 드롭다운 목록 사용

선택 항목 중 하나만 선택할 수 있는 경우에는 SELECT 요소를 통해 드롭다운 목록 상자를 사용할 수 있습니다. 목록에서 각 옵션은 별도의 선택 항목으로 표시되지만 사용자는 한 항목만 선택할 수 있습니다. OPTION 요소의 닫는 꺾쇠 괄호 뒤에 있는 텍스트가 드롭다운 목록에 나타납니다.

<select name="Region">
<option value="India">India</option>
<option value="USA">USA</option>
<option value="Spain"> Spain </option>
</select>

스페인 등의 기본값을 제공하려면 다음 코드를 사용합니다.

<option value="Spain" selected="selected"> Spain </option>

맨 위로 이동

확인란 사용

선택 항목을 여러 개 선택할 수 있는 경우에는 확인란을 사용할 수 있습니다. 각 옵션은 별도의 확인란으로 표시되며 사용자는 원하는 항목을 하나 이상 선택하거나 모든 항목을 선택할 수 있습니다. 이 옵션을 사용하는 경우 웹 파트 연결의 일부분으로 여러 매개 변수를 허용하는 웹 파트가 필요합니다.

<input type="checkbox" name="region1" value="India"/> India<BR/>
<input type="checkbox" name="region2" value="USA"/> USA<BR/>
<input type="checkbox" name="region3" value="Spain"/> Spain<BR/>

스페인 등의 기본값을 제공하려면 다음 코드를 사용합니다.

<input type="checkbox" name="region3" value="Spain" checked="checked"/> Spain<BR/> 

맨 위로 이동

웹 파트의 일반 속성 구성

웹 파트에는 웹 파트의 모양, 레이아웃 및 고급 특성을 제어하는 일반적인 속성 집합이 있습니다. 도구창에서 웹 파트 속성을 변경합니다.

참고: 도구창에 표시되는 일반적인 웹 파트 속성은 다음과 같은 몇 가지 이유로 이 섹션에서 설명하는 것과 다를 수 있습니다.

  • 도구창의 고급 구역을 보려면 적절한 권한이 있어야 합니다.

  • 특정 웹 파트의 경우 웹 파트 개발자가 이러한 일반적인 속성을 하나 이상 표시하지 않도록 선택했거나 도구창의 화면 표시, 레이아웃고급 섹션 아래에 나열되지 않는 추가 속성을 만들어 표시하도록 선택했을 수 있습니다.

  • 일부 권한 및 속성 설정에 따라 웹 파트 속성이 사용할 수 없게 되거나 숨겨질 수 있습니다.

표시

속성/Property

설명

제목

웹 파트 제목 표시줄에 표시되는 웹 파트의 제목을 지정합니다.

높이

웹 파트의 높이를 지정합니다.

너비

웹 파트의 너비를 지정합니다.

크롬 상태

사용자가 페이지를 열 때 페이지에 전체 웹 파트를 표시할지 여부를 지정합니다. 기본적으로 크롬 상태는 보통으로 설정되어 있으며 이 경우 전체 웹 파트가 표시됩니다. 크롬 상태를 최소화로 설정하면 제목 표시줄만 표시됩니다.

크롬 형식

웹 파트 프레임의 제목 표시줄과 테두리를 표시할지 여부를 지정합니다.

레이아웃

속성/Property

설명

숨김

사용자가 페이지를 열 때 웹 파트를 표시할지 여부를 지정합니다. 이 확인란이 선택되어 있으면 페이지를 디자인할 때만 웹 파트가 표시되고 제목에 (숨김) 접미사가 추가됩니다.

웹 파트 연결을 통해 다른 웹 파트에 데이터를 제공하되 해당 웹 파트를 표시하지는 않으려는 경우에 웹 파트를 숨길 수 있습니다.

방향

웹 파트 콘텐츠에 있는 텍스트의 방향을 지정합니다. 예를 들어 아랍어는 오른쪽에서 왼쪽으로 쓰는 언어이고, 영어와 대부분의 다른 유럽 언어는 왼쪽에서 오른쪽으로 쓰는 언어입니다. 일부 웹 파트 유형의 경우에는 이 설정을 사용할 수 없습니다.

영역

페이지에서 웹 파트가 있는 영역을 지정합니다.

참고: 영역을 수정할 수 있는 권한이 없으면 페이지의 영역이 목록 상자에 나열되지 않습니다.

영역 인덱스

영역에 웹 파트가 여러 개 포함되어 있는 경우 해당 영역의 웹 파트 위치를 지정합니다.

순서를 지정하려면 텍스트 상자에 양의 정수를 입력합니다.

영역의 웹 파트 순서가 위쪽에서 아래쪽인 경우 값이 1이면 웹 파트가 영역 맨 위에 나타납니다. 영역의 웹 파트 순서가 왼쪽에서 오른쪽인 경우 값이 1이면 웹 파트가 영역 왼쪽에 나타납니다.

예를 들어 위쪽에서 아래쪽으로 순서가 지정된 빈 영역에 웹 파트를 추가하는 경우 영역 인덱스는 0입니다. 이 영역 맨 아래에 두 번째 웹 파트를 추가하면 해당 웹 파트의 영역 인덱스는 1이 됩니다. 두 번째 웹 파트를 영역 맨 위로 이동하려면 영역 인덱스로 0을 입력하고 첫 번째 웹 파트의 영역 인덱스로 1을 입력합니다.

참고: 영역의 각 웹 파트에는 고유한 영역 인덱스 값이 지정되므로, 현재 웹 파트의 영역 인덱스 값을 변경하면 영역의 다른 웹 파트 영역 인덱스 값도 변경됩니다.

고급

속성/Property

설명

최소화 허용

웹 파트를 최소화할 수 있는지 여부를 지정합니다.

닫기 허용

웹 파트를 페이지에서 제거할 수 있는지 여부를 지정합니다.

숨기기 허용

웹 파트를 숨길 수 있는지 여부를 지정합니다.

영역 변경 허용

웹 파트를 다른 영역으로 이동할 수 있는지 여부를 지정합니다.

연결 허용

웹 파트가 다른 웹 파트와의 연결에 참여할 수 있는지 여부를 지정합니다.

개인 보기에서 편집 허용

웹 파트 속성을 개인 보기에서 수정할 수 있는지 여부를 지정합니다.

내보내기 모드

이 웹 파트에 대해 내보낼 수 있는 데이터 수준을 지정합니다. 구성에 따라 이 설정을 사용하지 못할 수도 있습니다.

제목 URL

웹 파트에 대한 추가 정보가 들어 있는 파일의 URL을 지정합니다. 이 파일은 웹 파트 제목을 클릭할 때 별도의 브라우저 창에 표시됩니다.

설명

마우스 포인터를 웹 파트 제목이나 웹 파트 아이콘에 놓을 때 표시되는 화면 설명을 지정합니다. 이 속성 값은 도구창의 웹 파트 찾기 메뉴에서 검색 명령을 사용하여 웹 파트를 검색할 때 사용됩니다.

도움말 URL

웹 파트에 대한 도움말 정보가 들어 있는 파일의 위치를 지정합니다. 도움말 정보는 웹 파트 메뉴의 도움말 명령을 클릭할 때 별도의 브라우저 창에 표시됩니다.

도움말 모드

브라우저에 웹 파트의 도움말 내용이 표시되는 방식을 지정합니다.

다음 중 하나를 선택하십시오.

모달 브라우저에 이 기능이 있으면 별도의 브라우저 창을 엽니다. 웹 페이지로 돌아가려면 먼저 해당 창을 닫아야 합니다.

모덜리스 브라우저에 이 기능이 있으면 별도의 브라우저 창을 엽니다. 웹 페이지로 돌아가려는 경우 해당 창을 닫지 않아도 됩니다. 이 값이 기본값입니다.

탐색 현재 브라우저 창에서 웹 페이지를 엽니다.

참고: 사용자 지정 Microsoft ASP.NET 웹 파트에서 이 속성을 지원하기는 하지만 기본적으로 SharePoint 도움말 항목은 별도의 브라우저 창에서만 열립니다.

카탈로그 아이콘 이미지 URL

웹 파트 목록에서 웹 파트 아이콘으로 사용할 이미지가 들어 있는 파일의 위치를 지정합니다. 이 이미지 크기는 16x16 픽셀이어야 합니다.

제목 아이콘 이미지 URL

웹 파트 제목 표시줄에 사용할 이미지가 들어 있는 파일의 위치를 지정합니다. 이 이미지 크기는 16x16 픽셀이어야 합니다.

가져오기 오류 메시지

웹 파트를 가져오는 중 문제가 발생할 경우 표시되는 메시지를 지정합니다.

맨 위로 이동

참고: 기계 번역 고지 사항: 본 문서는 전문 번역가가 번역한 것이 아니라 Microsoft 기계 번역 소프트웨어로 번역한 것입니다. Microsoft에서는 비영어권 국가에 거주하는 사용자가 Microsoft 제품, 서비스 및 기술을 손쉽게 접할 수 있도록 이러한 기계 번역 내용을 제공하고 있습니다. 본 문서는 기계 번역된 문서이므로 어휘, 구문 또는 문법에 오류가 있을 수 있습니다.

Office 기술 확장
교육 살펴보기
새로운 기능 우선 가져오기
Office Insider 참여

이 정보가 유용한가요?

의견 주셔서 감사합니다!

피드백을 주셔서 감사합니다. Office 지원 에이전트와 연락하는 것이 도움이 될 것 같습니다.

×