문서 창에서 다음 중 하나를 수행합니다.
마지막 업데이트 날짜
2021년 4월 27일
Dreamweaver에서 반복 영역 및 반복 표를 만들고 표 속성을 구성하여 페이지 레이아웃을 제어합니다.
반복 영역은 템플릿 기반 페이지에서 여러 번 복제할 수 있는 템플릿의 섹션입니다.일반적으로 반복 지역은 테이블과 함께 사용되지만 다른 페이지 요소에 대해서도 반복 지역을 정의할 수 있습니다.
반복 영역을 사용하면 카탈로그 항목 및 설명 레이아웃이나 항목 목록과 같은 데이터 행 등 특정 항목을 반복하여 페이지 레이아웃을 제어할 수 있습니다.
사용할 수 있는 두 가지 반복 지역 템플릿 객체가 있습니다: 반복 지역 및 반복 테이블.
템플릿에서 반복 영역 만들기
반복 지역을 사용하면 템플릿 사용자가 템플릿에서 지정된 지역을 원하는 만큼 복제할 수 있습니다. 반복 영역은 편집 가능 영역이 아닐 수도 있습니다.
반복 영역의 콘텐츠를 편집 가능하게 만들려면(예: 템플릿 기반 문서의 테이블 셀에 사용자가 텍스트를 입력할 수 있도록 허용), 반복 영역 내에 편집 가능한 영역을 삽입해야 합니다.
반복 지역으로 설정할 텍스트나 콘텐츠를 선택하십시오.
반복 지역을 삽입하려는 문서의 위치에 삽입점을 배치합니다.
다음 중 하나를 수행하십시오.
[삽입] > [템플릿] > [반복 영역]을 선택합니다.
[삽입] 패널의 [템플릿] 범주에서 [반복 영역]을 선택합니다.
[이름] 상자에 템플릿
지역의 고유한 이름을 입력합니다. (템플릿에서 둘 이상의 반복
지역에 동일한 이름을 사용할 수 없습니다.)
메모
영역에 이름을 지정할 때 특수 문자는 사용할 수 없습니다.
[확인]을 클릭합니다.
반복 표 삽입
반복 테이블을 사용하여 반복 행이 있는 편집 가능한 지역(테이블 형식)을 만들 수 있습니다.테이블 속성을 정의하고 편집 가능한 테이블 셀을 설정할 수 있습니다.
문서 창에서 반복 테이블을 삽입할 문서의 위치에 삽입점을 배치합니다.
다음 중 하나를 수행하십시오.
[삽입] > [템플릿] > [반복 표]를 선택합니다.
[삽입] 패널의 [템플릿] 범주에서 [반복 표]를 선택합니다.
다음 옵션을 지정하고 [확인]을 클릭합니다.
행
표에 포함할 행 수를 지정합니다.
열
표에 포함할 열 수를 지정합니다.
셀 패딩
셀의 콘텐츠와 셀 경계 사이의 픽셀 수를 결정합니다.
셀 간격
인접한 표 셀 사이의 픽셀 수를 결정합니다.
메모
셀 패딩 및 셀 간격에 명시적으로 값을 할당하지 않으면 대부분의 브라우저에서 셀 패딩이 1로, 셀 간격이 2로 설정되어 표시됩니다. 브라우저에서 표를 패딩 또는 간격 없이 표시하려면 [셀 패딩] 및 [셀 간격]을 0으로 설정합니다.
폭
테이블의 폭을 픽셀 단위로 지정하거나 브라우저 창 폭의 백분율로 지정합니다.
테두리
표의 테두리 폭을 픽셀 단위로 지정합니다.
메모
테두리 값을 명시적으로 할당하지 않으면 대부분의 브라우저에서 표 테두리가 1로 설정되어 표시됩니다. 브라우저에서 표를 테두리 없이 표시하려면 [테두리]를 0으로 설정합니다.
테두리가 0으로 설정된 경우 셀 및 표 테두리를 보려면 [보기] > [디자인 뷰 옵션] > [시각 도구]를 선택합니다. 이 옵션은 디자인 뷰에서만 사용할 수 있습니다.
테이블의 행 반복
테이블에서 반복 영역에 포함될 행을 지정합니다.
시작 행
입력된 행 번호를 반복 지역에 포함할 첫 번째 행으로 설정합니다.
끝 행
입력된 행 번호를 반복 지역에 포함할 마지막 행으로 설정합니다.
영역 이름
반복 영역의 고유 이름을 설정할 수 있습니다.
반복 테이블에서 교대로 배경색 설정
템플릿에 반복 테이블을 삽입한 후 테이블 행의 배경색을 교대로 지정하여 사용자 정의할 수 있습니다.
문서 창에서 반복
테이블의 행을 선택합니다.
문서 도구 모음에서 [코드 보기 펼] 또는 [코드 및 디자인 보기 펼]
버튼을 클릭하여
선택한 테이블 행의 코드에 액세스합니다.
코드 보기에서 <tr> 태그를 편집하여
다음 코드를 포함하세요:
<tr bgcolor="@@( _index & 1 ? '#FFFFFF' : '#CCCCCC' )@@">
#FFFFFF와 #CCCCCC 16진수 값을 다른 색상으로 바꿀 수 있습니다.
템플릿을 저장합니다.
다음은 테이블 행 배경색이 번갈아 나타나는 테이블의 코드 예시입니다:
<table width="75%" border="1" cellspacing="0" cellpadding="0">
<tr><th>Name</th><th>Phone Number</th><th>Email Address</th></tr>
<!-- TemplateBeginRepeat name="contacts" -->
<tr bgcolor="@@(_index & 1 ? '#FFFFFF' : '#CCCCCC')@@">
<td> <!-- TemplateBeginEditable name="name" --> name <!-- TemplateEndEditable -->
</td>
<td> <!-- TemplateBeginEditable name="phone" --> phone <!-- TemplateEndEditable -->
</td>
<td> <!-- TemplateBeginEditable name="email" --> email <!-- TemplateEndEditable -->
</td>
</tr>
<!-- TemplateEndRepeat -->
</table>
