InContext Editing 반복 영역 만들기

InContext Editing 반복 영역은 열기 태그에 ice:repeating 속성이 포함된 HTML 태그 한 쌍이며, 반복 영역은 사용자가 브라우저에서 편집할 때 "반복"하며 내용을 추가할 수 있는 페이지 영역입니다. 예를 들어 머리글과 그 뒤에 텍스트 단락이 있는 경우 이러한 요소를 반복 영역으로 변환하면 사용자가 페이지에서 이를 복제할 수 있습니다.

편집 가능 InContext Editing 브라우저 윈도우에 표시된 반복 영역. 선택된 맨 아래 영역을 복제하거나, 삭제하거나, 위아래로 이동할 수 있습니다.

원본 영역에 기반한 반복 영역을 추가하는 것 외에 영역을 삭제하거나, 원본 영역 내용에 기반하지 않은 완전히 새로운 영역을 추가하거나, 영역을 위아래로 이동할 수 있는 옵션을 사용자에게 제공할 수도 있습니다.

반복 영역을 만들면 Dreamweaver에서 이를 반복 영역 그룹이라고 하는 또 다른 컨테이너로 둘러쌉니다. 이 컨테이너는 열기 태그에 ice:repeatinggroup 속성이 추가된 div 태그로서 사용자가 그룹에 추가할 수 있는 모든 편집 가능 반복 영역의 컨테이너 역할을 합니다. 반복 영역 그룹 컨테이너 밖으로 반복 영역을 이동할 수 없습니다. 또한, 수동으로 페이지에 반복 영역 그룹 태그를 추가하지 않아야 합니다. 필요한 경우 Dreamweaver에서 자동으로 추가합니다.

반복 영역 그룹이 이미 포함된 페이지에서 작업하고 기존 그룹 바로 다음에 반복 영역을 추가하면 Dreamweaver에서 추가하려는 영역 앞의 반복 영역 그룹을 발견하고 기존 그룹에 새 영역을 추가하는 옵션을 선택할 수 있습니다. 기존 그룹에 새 반복 영역을 추가하거나 완전히 새 반복 영역 그룹을 만들 수도 있습니다.

Dreamweaver에서 반복 영역을 만들려면 다음 단계를 수행합니다.

1. 다음 중 한 가지를 수행합니다.

   • 반복 영역으로 변환할 태그를 선택합니다. 사용 가능한 태그에는 a, abbr, acronym, address, b, big, blockquote, center, cite, code, dd, dfn, dir, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, label, li, menu, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, tr, tt, u, ul 및 var 등이 있습니다.

     참고: div 태그만 편집 가능 영역 및 반복 영역 속성을 동시에 포함할 수 있습니다.

   • 페이지에서 새 반복 영역을 삽입할 위치에 삽입 포인터를 놓습니다.

   • Dreamweaver 템플릿에서 정확히 한 개의 반복 영역을 선택합니다(DWT 파일).

   • 반복 가능하게 만들 기타 페이지 내용(예: 머리글 및 텍스트 블록)을 선택합니다.

2. [삽입] > [InContext Editing] > [반복 영역 만들기]를 선택합니다.

3. 옵션은 선택한 항목에 따라 다릅니다.

   • 변환 가능한 태그를 선택한 경우 추가 단계를 거치지 않아도 해당 태그가 반복 영역으로 변환됩니다.

   • 비어 있는 새 반복 영역을 삽입하려면 다음 중 하나를 수행합니다.

     • [현재 삽입점에 새 반복 영역 삽입]을 선택하고 [확인]을 클릭합니다.

     • 선택 영역의 부모 태그를 해당 영역의 컨테이너 요소로 만들려면 [부모 태그를 반복 영역으로 변환]을 선택합니다. 변환 가능한 특정 HTML 태그에는 a, abbr, acronym, address, b, big, blockquote, center, cite, code, dd, dfn, dir, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, label, li, menu, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, tr, tt, u, ul 및 var 등이 있습니다.

       참고: 이 두 번째 옵션은 부모 노드가 변환 기준을 정확히 충족할 때만 사용할 수 있습니다. 예를 들어, 위 목록에 나온 변환 가능한 태그 중 하나이고, InContext Editing 오류 메시지에 나오는 어떤 오류도 발생하지 않아야 합니다.

   • Dreamweaver 템플릿 반복 영역을 선택한 경우 [반복 영역 만들기] 대화 상자에서 [확인]을 클릭합니다. Dreamweaver는 템플릿 반복 영역을 새 InContext Editing 반복 영역의 컨테이너 역할을 수행하는 div 태그로 둘러쌉니다.

   • 기타 내용을 반복 가능하게 만들려고 선택한 경우 다음 중 하나를 수행합니다.

     • 선택 영역을 div 태그로 둘러싸서 반복 영역으로 변환하려면 [현재 선택 영역을 DIV 태그로 둘러싸서 변환]을 선택합니다. 해당 내용을 둘러싼 div 태그는 반복 영역의 컨테이너 역할을 합니다.

     • 선택 영역의 부모 태그를 반복 영역의 컨테이너 요소로 만들려면 [부모 태그를 반복 영역으로 변환]을 선택합니다. 변환 가능한 특정 HTML 태그에는 a, abbr, acronym, address, b, big, blockquote, center, cite, code, dd, dfn, dir, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, label, li, menu, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, tr, tt, u, ul 및 var 등이 있습니다.

4. 아직 선택하지 않았으면 디자인 뷰에서 파란색 반복 영역 탭을 클릭하여 선택합니다. 실제로 Dreamweaver에서는 반복 영역 그룹 탭을 선택하게 만드는데, 이는 모든 반복 영역이 반복 영역 그룹 내에 있어서 전체 그룹에 대한 옵션을 설정하여 반복 영역에 대한 옵션을 설정해야 하기 때문입니다.

5. 반복 영역 그룹 속성 관리자에서 원하는 대로 옵션을 선택 또는 선택 해제합니다. 선택할 수 있는 옵션으로는 [순서 바꾸기] 및 [추가/제거]의 두 가지가 있습니다. [순서 바꾸기]를 선택하는 경우 사용자가 브라우저에서 편집할 때 반복 영역을 위아래로 이동할 수 있습니다. [추가/제거]를 선택하는 경우 사용자가 브라우저에서 편집할 때 반복 영역을 추가하거나 제거할 수 있습니다. 두 옵션은 기본적으로 선택되며 항상 적어도 하나를 선택해야 합니다.

6. 페이지를 저장합니다.

   InContext Editing 기능을 페이지에 처음으로 추가하는 경우, 사이트에 InContext Editing 지원 파일 ice.conf.js, ice.js 및 ide.html이 추가됨을 알리는 메시지가 표시됩니다. 페이지를 서버에 업로드할 때 이러한 파일도 함께 업로드해야 합니다. 그렇지 않으면 브라우저에서 InContext Editing 기능이 제대로 작동하지 않습니다.