사용 안내서 취소

페이지에 동적 내용 추가

검색

마지막 업데이트 날짜 2022년 11월 28일

참고:

Dreamweaver의 현재 버전 이후로 사용자 인터페이스가 간소화되었습니다. 따라서 이 문서에 설명된 옵션 중에 Dreamweaver의 현재 버전에 없는 옵션이 있을 수 있습니다. 자세한 내용은 이 문서를 참조하십시오.

동적 내용 추가하기 정보

하나 이상의 동적 내용 소스를 정의한 후 이 소스를 사용하여 페이지에 동적 내용을 추가할 수 있습니다. 내용 소스에는 레코드세트의 열, HTML 양식에서 전송된 값, 서버 오브젝트에 들어 있는 값 또는 기타 데이터가 포함될 수 있습니다.

Dreamweaver에서는 웹 페이지 또는 해당 HTML 소스 코드의 어디에나 동적 내용을 삽입할 수 있습니다. 삽입 포인터 위치에 동적 내용을 배치하거나, 기존의 텍스트 문자열을 새로운 동적 내용으로 바꾸거나, HTML 속성을 동적 내용으로 삽입할 수 있습니다. 예를 들어 이미지의 src 속성 또는 양식 필드의 value 속성을 동적 내용으로 정의할 수 있습니다.

[바인딩] 패널에서 내용 소스를 선택하여 페이지에 동적 내용을 추가할 수 있습니다. Dreamweaver는 해당 페이지의 코드에 서버측 스크립트를 삽입하는데 이 스크립트는 브라우저에서 해당 페이지를 요청할 경우 서버가 내용 소스의 데이터를 페이지의 HTML 코드로 전송하도록 지시합니다.

페이지 요소를 동적으로 만드는 방법에는 여러 가지가 있습니다. 예를 들어 [바인딩] 패널, 속성 관리자, [삽입] 메뉴의 [이미지] 명령 등을 사용하여 이미지를 동적으로 만들 수 있습니다.

기본적으로 HTML 페이지에는 한 번에 레코드 하나만 표시할 수 있습니다. 레코드세트의 다른 레코드를 표시하기 위해 한 번에 한 레코드씩 이동하는 링크를 추가하거나, 단일 페이지에 둘 이상의 레코드를 표시하는 반복 영역을 만들 수 있습니다.

동적 텍스트 정보

동적 텍스트는 기존 텍스트 또는 삽입 포인터에 적용된 모든 텍스트 서식을 그대로 사용합니다. 예를 들어 선택한 텍스트가 CSS(겹쳐 놓기 스타일 시트) 스타일인 경우 그 텍스트를 동적 내용으로 바꾸어도 동일한 스타일이 적용됩니다. Dreamweaver의 텍스트 서식 지정 도구를 사용하여 동적 내용의 텍스트 서식을 추가하거나 변경할 수 있습니다.

동적 텍스트에 데이터 서식을 적용할 수도 있습니다. 예를 들어 데이터가 날짜로 이루어진 경우 미국인 방문자를 위해서는 04/17/00, 캐나다인 방문자를 위해서는 17/04/00으로 표시하는 등, 특정한 날짜 형식을 지정할 수 있습니다.

텍스트를 동적으로 만들기

기존 텍스트를 동적 텍스트로 바꾸거나 페이지의 삽입 포인터가 있는 위치에 동적 텍스트를 배치할 수 있습니다.

동적 텍스트 추가

디자인 뷰에서 페이지의 텍스트를 선택하거나 동적 텍스트를 추가할 위치를 클릭합니다.
[윈도우] > [바인딩]을 선택하여 [바인딩] 패널을 열고 목록에서 내용 소스를 선택합니다. 레코드세트를 선택하는 경우 레코드세트에서 원하는 열을 지정합니다.

내용 소스에는 일반 텍스트(ASCII 텍스트)가 들어 있어야 합니다. 일반 텍스트에는 HTML이 포함됩니다. 목록에 내용 소스가 없거나 목록에 있는 내용 소스가 요구 사항에 맞지 않는 경우에는 플러스(+) 버튼을 클릭하여 새 내용 소스를 정의합니다.
(선택 사항) 텍스트의 데이터 서식을 선택합니다.
[삽입]을 클릭하거나 내용 소스를 페이지로 드래그합니다.

동적 내용 자리 표시자가 나타납니다. 페이지에서 텍스트를 선택한 경우에는 선택한 텍스트 대신 자리 표시자가 표시됩니다. 레코드세트 내용에 대한 자리 표시자로 사용되는 구문은 {RecordsetName.ColumnName}입니다. 여기서 Recordset는 레코드세트의 이름이고 ColumnName은 레코드세트에서 선택한 열의 이름입니다.

동적 텍스트에 대한 자리 표시자가 길어서 문서 창에서 페이지의 레이아웃이 올바르게 표시되지 않는 경우가 있습니다. 이 문제는 다음 항목에서 설명하는 것처럼 비어 있는 중괄호({})를 자리 표시자로 사용하여 해결할 수 있습니다.

동적 텍스트를 위한 자리 표시자 표시

[편집] > [환경 설정] > [보이지 않는 요소](Windows) 또는 [Dreamweaver] > [환경 설정] > [보이지 않는 요소](Macintosh)를 선택합니다.
[동적 텍스트 보기] 팝업 메뉴에서 중괄호({})를 선택하고 [확인]을 클릭합니다.

이미지를 동적으로 만들기

페이지의 이미지를 동적으로 만들 수 있습니다. 자선 경매에서 판매할 상품을 표시하는 페이지를 디자인하는 경우를 예로 들어 보겠습니다. 각 페이지에는 해당 상품을 설명하는 텍스트와 사진이 실립니다. 이때 각 상품 항목에 대한 페이지의 일반 레이아웃은 그대로 두고 사진과 설명 텍스트만 변경되도록 할 수 있습니다.

[보기] > [디자인]을 선택하여 디자인 뷰에서 페이지를 열고 페이지에서 이미지를 표시할 곳에 삽입 포인터를 놓습니다.
[삽입] > [이미지]를 선택합니다.

[이미지 소스 선택] 대화 상자가 나타납니다.
[데이터 소스] 옵션(Windows) 또는 [데이터 소스](Macintosh) 버튼을 클릭합니다.

내용 소스 목록이 나타납니다.
목록에서 내용 소스를 선택하고 [확인]을 클릭합니다.

내용 소스는 이미지 파일에 대한 경로를 포함하는 레코드세트여야 합니다. 사이트 파일 구조에 따라 경로는 절대 경로, 문서 상대 경로 또는 루트 상대 경로일 수 있습니다.

참고:

Dreamweaver는 현재, 데이터베이스에 저장된 이진 이미지를 지원하지 않습니다.

목록에 레코드세트가 없거나 사용할 수 있는 레코드세트가 사용자의 요구 사항에 맞지 않는 경우에는 새로운 레코드세트를 정의합니다.

HTML 속성을 동적으로 만들기

HTML 속성을 데이터에 바인딩하여 페이지의 모양을 동적으로 변경할 수 있습니다. 예를 들어 표의 background 속성을 레코드세트의 필드에 바인딩하여 표의 배경 이미지를 변경할 수 있습니다.

[바인딩] 패널 또는 속성 관리자를 사용하여 HTML 속성을 바인딩할 수 있습니다.

바인딩 패널을 사용하여 HTML 속성을 동적으로 만들기

[윈도우] > [바인딩]을 선택하여 [바인딩] 패널을 엽니다.
[바인딩] 패널의 목록에 사용하려는 데이터 소스가 들어 있는지 확인합니다.

내용 소스에는 바인딩하려는 HTML 속성에 적합한 데이터가 포함되어 있어야 합니다. 목록에 내용 소스가 없거나 목록에 있는 내용 소스가 요구 사항에 맞지 않는 경우에는 플러스(+) 버튼을 클릭하여 새 데이터 소스를 정의합니다.
디자인 뷰에서 HTML 오브젝트를 선택합니다.

예를 들어 HTML 표를 선택하려면 표의 내부를 클릭하고 문서 창의 왼쪽 아래에 있는 태그 선택기에서 <table> 태그를 클릭합니다.
[바인딩] 패널의 목록에서 내용 소스를 선택합니다.
[바인딩 대상] 상자의 팝업 메뉴에서 HTML 속성을 선택합니다.
[바인딩]을 클릭합니다.

애플리케이션 서버에서 다음 번에 페이지가 실행될 때 데이터 소스의 값이 HTML 속성에 지정됩니다.

속성 관리자를 사용하여 HTML 속성을 동적으로 만들기

디자인 뷰에서 HTML 오브젝트를 선택하고 [윈도우] > [속성]을 선택하여 속성 관리자를 엽니다.

예를 들어 HTML 표를 선택하려면 표의 내부를 클릭하고 문서 창의 왼쪽 아래에 있는 태그 선택기에서 <table> 태그를 클릭합니다.
HTML 속성에 동적 내용 소스를 바인딩하는 방법은 소스의 위치에 따라 다릅니다.
- 속성 관리자에서 바인딩할 속성 옆에 폴더 아이콘이 표시되면 해당 폴더 아이콘을 클릭하여 파일 선택 대화 상자를 연 다음 [데이터 소스] 옵션을 클릭하여 데이터 소스 목록을 표시합니다.
- 바인딩하려는 속성 옆에 폴더 아이콘이 없으면 속성 관리자의 왼쪽에 있는 두 탭 중 아래에 있는 [목록] 탭을 클릭합니다.
  속성 관리자의 [목록] 보기가 나타납니다.
- 바인딩하려는 속성이 [목록] 보기에 나타나지 않으면 플러스(+) 버튼을 클릭한 뒤 속성 이름을 입력하거나 작은 화살표 버튼을 클릭하고 팝업 메뉴에서 속성을 선택합니다.
속성 값을 동적으로 만들려면 속성을 클릭한 뒤 속성 행의 끝에 있는 번개 모양 아이콘이나 폴더 아이콘을 클릭합니다.

번개 모양 아이콘을 클릭하면 데이터 소스의 목록이 나타납니다.

폴더 아이콘을 클릭하면 파일 선택 대화 상자가 나타납니다. [데이터 소스] 옵션을 선택하여 내용 소스의 목록을 표시합니다.
내용 소스 목록에서 내용 소스를 선택하고 [확인]을 클릭합니다.

내용 소스에는 바인딩하려는 HTML 속성에 적합한 데이터가 들어 있어야 합니다. 목록에 내용 소스가 없거나 목록에 있는 내용 소스가 요구 사항에 맞지 않는 경우에는 새 내용 소스를 정의합니다.

애플리케이션 서버에서 다음 번에 페이지가 실행될 때 데이터 소스의 값이 HTML 속성에 지정됩니다.

ActiveX, Flash 및 기타 오브젝트 매개 변수를 동적으로 만들기

Java 애플릿 및 플러그인의 매개 변수뿐만 아니라 ActiveX, Flash, Shockwave, Director 및 Generator 오브젝트의 매개 변수도 동적으로 만들 수 있습니다.

이러한 작업을 시작하려면 바인딩하려는 오브젝트 매개 변수에 적합한 데이터가 대상 레코드세트의 필드에 들어 있는지 확인해야 합니다.

디자인 뷰에서 페이지의 오브젝트를 선택하고 [윈도우] > [속성]을 선택하여 속성 관리자를 엽니다.
[매개 변수] 버튼을 클릭합니다.
목록에 대상 매개 변수가 나타나지 않으면 플러스(+) 버튼을 클릭하고 [매개 변수] 열에 해당 매개 변수 이름을 입력합니다.
매개 변수의 [값] 열을 클릭한 다음 번개 모양 아이콘을 클릭하여 동적 값을 지정합니다.

데이터 소스 목록이 나타납니다.
목록에서 데이터베이스를 선택하고 [확인]을 클릭합니다.

데이터 소스에는 바인딩하려는 오브젝트 매개 변수에 적합한 데이터가 들어 있어야 합니다. 목록에 데이터 소스가 없거나 목록에 있는 데이터 소스가 요구 사항에 맞지 않는 경우에는 새 데이터 소스를 정의합니다.

유사 검색

쉽고 빠르게 지원 받기

신규 사용자이신가요?