InContext Editing 편집 가능 영역 만들기

InContext Editing 편집 가능 영역은 열기 태그에 ice:editable 속성이 포함된 HTML 태그 한 쌍이며, 편집 가능 영역은 사용자가 브라우저에서 직접 편집할 수 있는 페이지 영역입니다.
참고: InContext Editing 편집 가능 영역을 Dreamweaver 템플릿을 바탕으로 하는 페이지에 추가하는 경우 새 InContext Editing 편집 가능 영역이 이미 편집 가능한 영역 안에 존재해야 합니다.

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

    • 편집 가능 영역으로 변환할 div, th 또는 td 태그를 선택합니다.

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

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

    • 페이지에서 편집 가능하게 만들 기타 내용(예: 텍스트 블록)을 선택합니다.

  2. [삽입] > [InContext Editing] > [편집 가능 영역 만들기]를 선택합니다.

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

    • div, th 또는 td 태그를 선택한 경우 추가 단계를 거치지 않아도 해당 태그가 편집 가능 영역으로 변환됩니다.

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

      • [현재 삽입점에 새 편집 가능 영역 삽입]을 선택하고 [확인]을 클릭합니다. 열기 태그에 ice:editable 속성이 포함된 div 태그가 코드에 삽입됩니다.

      • 선택 영역의 부모 태그를 영역의 컨테이너 요소로 만들려면 [부모 태그를 편집 가능 영역으로 변환]을 선택합니다. 변환 가능한 HTML 태그는 div, th 및 td뿐입니다.

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

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

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

      • 선택 영역을 div 태그로 둘러싸서 편집 가능 영역으로 변환하려면 [현재 선택 영역을 DIV 태그로 둘러싸서 변환]을 선택합니다. 해당 내용을 둘러싼 div 태그는 편집 가능 영역의 컨테이너 역할을 합니다.
        참고: div 태그를 페이지에 추가하면 페이지 렌더링 및 CSS 규칙의 효과를 변경할 수 있습니다. 예들 들어, div 태그 주위로 빨간 테두리를 적용하는 CSS 규칙을 사용하는 경우 div 태그를 사용하여 영역을 둘러싸고 변환할 때 현재 선택 영역 주위로 빨간 테두리가 표시됩니다. 이러한 형태의 충돌을 방지하려면 현재 선택 영역에 영향을 주는 CSS 규칙을 다시 작성하거나 변환 작업을 취소한([편집] > [실행 취소]) 다음 div 태그를 사용하여 둘러싸지 않아도 되는 지원되는 태그를 선택하고 변환할 수 있습니다.

      • 선택 영역의 부모 태그를 편집 가능 영역의 컨테이너 요소로 만들려면 [부모 태그를 편집 가능 영역으로 변환]을 선택합니다. 변환 가능한 HTML 태그는 div, th 및 td뿐입니다.

  4. 아직 선택하지 않았으면 디자인 뷰에서 파란색 편집 가능 영역 탭을 클릭하여 선택합니다.
    참고: Dreamweaver 템플릿에서 작업하는 경우 Dreamweaver 템플릿 편집 가능 영역이 아닌 InContext Editing 편집 가능 영역(컨테이너 영역)을 선택해야 합니다.

  5. 편집 가능 영역 속성 관리자에서 원하는 대로 옵션을 선택 또는 선택 해제합니다. 여기서 선택한 옵션은 사용자가 브라우저에서 편집 가능 영역의 내용을 편집할 때 사용할 수 있습니다. 예를 들어 [굵게] 옵션을 선택한 경우 사용자는 텍스트를 굵게 만들 수 있고, [숫자 목록 및 불릿 목록]을 선택한 경우 사용자는 숫자 목록 및 불릿 목록을 만들 수 있으며, [링크] 옵션을 선택한 경우 사용자는 링크를 만들 수 있습니다. 옵션에 대한 도구 설명을 보려면 각 옵션 아이콘 위에 커서를 올려놓습니다.

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

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