- Dreamweaver 사용 안내서
- 소개
- Dreamweaver 및 Creative Cloud
- Dreamweaver 작업 영역 및 보기 옵션
- 사이트 설정
- 파일 관리
- 레이아웃 및 디자인
- CSS
- 페이지 내용 및 에셋
- 페이지 속성 설정
- CSS 머리글 속성 및 CSS 링크 속성 설정
- 텍스트 작업
- 텍스트, 태그, 속성 찾기 및 바꾸기
- DOM 패널
- 라이브 뷰에서 편집
- Dreamweaver에서 문서 인코딩
- 문서 창에서 요소 선택 및 보기
- 속성 관리자에서 텍스트 속성 설정
- 웹 페이지 맞춤법 검사
- Dreamweaver에서 가로줄 사용
- Dreamweaver에서 글꼴 조합 추가 및 수정
- 에셋을 사용하여 작업
- Dreamweaver에서 날짜 삽입 및 업데이트
- Dreamweaver에서 즐겨찾기 에셋 만들기 및 관리
- Dreamweaver에서 이미지 삽입 및 편집
- 미디어 오브젝트 추가
- Dreamweaver에서 비디오 추가
- HTML5 비디오 삽입
- SWF 파일 삽입
- 오디오 효과 추가
- Dreamweaver에서 HTML5 오디오 삽입
- 라이브러리 항목을 사용하여 작업
- Dreamweaver에서 아랍어 및 히브리어 텍스트 사용
- 링크 및 내비게이션
- jQuery 위젯 및 효과
- 웹 사이트 코딩
- Dreamweaver에서의 코딩 정보
- Dreamweaver의 코딩 환경
- 코딩 환경 설정
- 코드 색상 표시 맞춤 설정
- 코드 작성 및 편집
- 코드 힌트 및 코드 완성
- 코드 축소 및 확장
- 스니펫으로 코드 재사용
- 코드 린트
- 코드 최적화
- 디자인 뷰에서 코드 편집
- 페이지의 헤드 내용 작업
- Dreamweaver에 서버측 포함 삽입
- Dreamweaver에서 태그 라이브러리 사용
- Dreamweaver에 사용자 정의 태그 가져오기
- JavaScript 비헤이비어 사용(일반 지침)
- 빌트인 JavaScript 비헤이비어 적용
- XML 및 XSLT 정보
- Dreamweaver에서 서버측 XSL 변환 수행
- Dreamweaver에서 클라이언트측 XSL 변환 수행
- Dreamweaver에서 XSLT의 문자 엔티티 추가
- 코드 서식 지정
- 제품 간 워크플로
- 템플릿
- Dreamweaver 템플릿 정보
- 템플릿 및 템플릿 기반 문서 인식
- Dreamweaver 템플릿 만들기
- 템플릿에서 편집 가능 영역 만들기
- Dreamweaver에서 반복 영역 및 표 만들기
- 템플릿의 옵션 영역 사용
- Dreamweaver에서 편집 가능 태그 속성 정의
- Dreamweaver에서 중첩 템플릿을 만드는 방법
- 템플릿 편집, 업데이트 및 삭제
- Dreamweaver에서 xml 내용 내보내기 및 가져오기
- 기존 문서에서 템플릿 적용 또는 제거
- Dreamweaver 템플릿의 내용 편집
- Dreamweaver에서 템플릿 태그에 대한 구문 규칙
- 템플릿 영역의 강조 표시 환경 설정
- Dreamweaver에서 템플릿 사용 시 이점
- 모바일 및 멀티스크린
- 다이내믹 사이트, 페이지 및 웹 양식
- 웹 애플리케이션 이해
- 애플리케이션 개발용 컴퓨터 설정
- 데이터베이스 연결 문제 해결
- Dreamweaver에서 연결 스크립트 제거
- 다이내믹 페이지 디자인
- 다이내믹 콘텐츠 소스 개요
- 다이내믹 콘텐츠의 소스 정의
- 페이지에 다이내믹 콘텐츠 추가
- Dreamweaver에서 다이내믹 콘텐츠 변경
- 데이터베이스 레코드 표시
- Dreamweaver에서 라이브 데이터 제공 및 문제 해결
- Dreamweaver에서 사용자 정의 서버 비헤이비어 추가
- Dreamweaver를 사용하여 양식 구성
- 양식을 사용하여 사용자 정보 수집
- Dreamweaver에서 ColdFusion 양식 작성 및 활성화
- 웹 양식 제작
- 양식 요소를 위한 HTML5 지원 개선
- Dreamweaver를 사용하여 양식 개발
- 애플리케이션의 시각적 구성
- 웹 사이트 테스트, 미리보기 및 게시
- 문제 해결
Dreamweaver의 현재 버전 이후로 사용자 인터페이스가 간소화되었습니다. 따라서 이 문서에 설명된 옵션 중에 Dreamweaver의 현재 버전에 없는 옵션이 있을 수 있습니다. 자세한 내용은 이 문서를 참조하십시오.
검색 및 결과 페이지 정보
Dreamweaver를 사용하여 데이터베이스를 검색하고 검색 결과를 볼 수 있는 페이지 세트를 만들 수 있습니다.
대부분의 경우 이 기능을 웹 애플리케이션에 추가하려면 최소 두 페이지 이상이 필요합니다. 첫 번째 페이지는 사용자가 검색 매개 변수를 입력할 수 있는 HTML 양식이 포함된 페이지입니다. 이 페이지에서 실제로 검색이 수행되지는 않지만 이 페이지를 검색 페이지라고 부릅니다.
두 번째 페이지는 결과 페이지이며 대부분의 작업이 수행됩니다. 결과 페이지에서는 다음 작업을 수행합니다.
검색 페이지에서 전송한 검색 매개 변수를 읽습니다.
데이터베이스에 연결하여 레코드를 검색합니다.
검색한 레코드로 레코드세트를 구성합니다.
레코드세트의 내용을 표시합니다.
선택에 따라 세부 정보 페이지를 추가할 수도 있습니다. 결과 페이지의 특정 레코드에 대한 자세한 정보가 세부 정보 페이지에 나타납니다.
검색 매개 변수가 하나만 있는 경우 Dreamweaver에서 SQL 쿼리와 변수를 사용하지 않고도 웹 애플리케이션에 검색 기능을 추가할 수 있습니다. 이를 위해서는 페이지를 디자인한 다음, 대화 상자와 관련된 몇 가지 작업만 완료하면 됩니다. 검색 매개 변수가 둘 이상인 경우에는 SQL 문을 작성하고 여러 변수를 정의해야 합니다.
Dreamweaver에서 페이지에 SQL 쿼리를 삽입할 수 있습니다. 서버에서 해당 페이지를 실행하면 데이터베이스 테이블의 각 레코드를 검사합니다. 레코드의 지정된 필드가 SQL 쿼리 조건을 충족하면 해당 레코드는 레코드세트에 포함됩니다. SQL 쿼리는 결과적으로 검색 결과만 포함하는 레코드세트를 구성합니다.
예를 들어 현장 판매 직원이 특정 지역에서 특정 수준 이상의 수입이 있는 고객에 대한 정보를 갖고 있을 수 있습니다. 검색 페이지의 양식에서 판매 담당자는 지역 및 최소 수입 수준을 입력한 다음 [전송] 버튼을 클릭하여 이 두 값을 서버로 보냅니다. 서버에서 이들 값은 결과 페이지의 SQL 문으로 전달되고 지정된 지역에서 수입이 지정된 수준 이상인 고객만 포함하는 레코드세트가 만들어집니다.
검색 페이지 구성
일반적으로 웹의 검색 페이지에는 사용자가 검색 매개 변수를 입력할 수 있는 양식 필드가 포함되어 있습니다. 검색 페이지에는 최소한 [전송] 버튼이 포함된 HTML 양식이 있어야 합니다.
검색 페이지에 HTML 양식을 추가하려면 다음 절차를 수행합니다.
-
검색 페이지나 새 페이지를 열고 [삽입] > [양식] > [양식]을 선택합니다.
페이지에 빈 양식이 만들어집니다. 가는 빨간 선으로 표시되는 양식의 경계선을 표시하기 위해 [보이지 않는 요소]([보기] > [시각 도구] > [보이지 않는 요소])를 활성화할 수도 있습니다.
-
[삽입] 메뉴에서 [양식]을 선택하여 사용자가 검색 매개 변수를 입력할 수 있는 양식 오브젝트를 추가합니다.
양식 오브젝트에는 텍스트 필드, 목록 메뉴, 옵션 및 라디오 버튼 등이 있습니다. 원하는 만큼 양식 오브젝트를 추가하여 사용자가 검색을 구체화하는 데 도움을 줄 수 있습니다. 그러나 검색 페이지에 검색 매개 변수가 많을수록 SQL 문은 더 복잡해진다는 점에 유의하십시오.
-
[삽입] > [양식] > [버튼]을 선택하여 양식에 [전송] 버튼을 추가합니다.
-
(선택 사항) 버튼을 선택하고, 속성 관리자를 연 다음([윈도우] > [속성]), [값] 상자에 새 값을 입력하여 [전송] 버튼의 레이블을 변경합니다.
다음으로 사용자가 [전송] 버튼을 클릭할 때 검색 매개 변수를 보낼 위치를 양식에 지정합니다.
-
다음 그림과 같이 문서 창 아래쪽에 있는 태그 선택기에서 <form> 태그를 선택하여 양식을 선택합니다.
-
양식 속성 관리자의 [액션] 상자에 데이터베이스 검색을 수행할 결과 페이지의 파일 이름을 입력합니다.
-
[메서드] 팝업 메뉴에서 다음 메서드 중 하나를 선택하여 이 양식에서 서버로 데이터를 보내는 방법을 결정합니다.
GET 메서드는 양식 데이터를 URL에 쿼리 문자열로 추가하여 보냅니다. URL은 8,192자로 제한되기 때문에 긴 양식에는 GET 메서드를 사용하지 않는 것이 좋습니다.
POST 메서드는 양식 데이터를 메시지 본문으로 보냅니다.
Default는 브라우저의 기본 메서드(일반적으로 GET)를 사용합니다.
검색 페이지 작업을 마쳤습니다.
기본 결과 페이지 구성
사용자가 양식의 [검색] 버튼을 클릭하면 검색 매개 변수가 서버의 결과 페이지로 전달됩니다. 데이터베이스에서 레코드를 가져오는 작업은 브라우저에 있는 검색 페이지가 아니라 서버에 있는 결과 페이지에서 담당합니다. 검색 페이지에서 검색 매개 변수를 하나만 서버로 전송한 경우에는 SQL 쿼리와 변수를 사용하지 않고도 결과 페이지를 구성할 수 있습니다. 검색 페이지의 검색 매개 변수와 일치하지 않는 레코드를 제외시키는 필터가 포함된 기본 레코드세트를 만들면 됩니다.
검색 조건이 둘 이상인 경우에는 고급 [레코드세트] 대화 상자를 사용하여 레코드세트를 정의해야 합니다(고급 결과 페이지 구성 참조).
검색 결과를 저장할 레코드세트 만들기
-
문서 창에서 결과 페이지를 엽니다.
결과 페이지를 아직 만들지 않은 경우에는 [파일] > [새로 만들기] > [빈 페이지]를 선택하여 빈 동적 페이지를 만듭니다.
-
[윈도우] > [바인딩]을 선택하여 [바인딩] 패널을 열고 플러스(+) 버튼을 클릭한 다음, 팝업 메뉴에서 [레코드세트]를 선택하여 새 레코드세트를 만듭니다.
-
단순 [레코드세트] 대화 상자가 나타나는지 확인합니다.참고:
고급 대화 상자가 나타나는 경우에는 [단순] 버튼을 클릭하여 단순 대화 상자로 전환합니다.
-
레코드세트의 이름을 입력하고 연결을 선택합니다.
연결은 사용자가 검색할 데이터를 포함하는 데이터베이스에 대한 연결이어야 합니다.
-
데이터베이스에서 검색할 테이블을 [테이블] 팝업 메뉴에서 선택합니다.참고:
단일 매개 변수 검색에서는 단일 테이블에서만 레코드를 검색할 수 있습니다. 둘 이상의 테이블을 한 번에 검색하려면 고급 [레코드세트] 대화 상자를 사용하여 SQL 쿼리를 정의해야 합니다.
-
일부 테이블 열만 레코드세트에 포함시키려면 [선택됨]을 클릭하고 목록에서 원하는 열을 Ctrl 키를 누른 상태로 클릭(Windows)하거나 Command 키를 누른 상태로 클릭(Macintosh)하여 선택합니다.
결과 페이지에 표시할 정보가 들어 있는 열만 레코드세트에 포함시켜야 합니다.
[레코드세트] 대화 상자를 열어 둡니다. 이 대화 상자는 이후 검색 페이지에서 보내온 매개 변수를 가져오고 레코드세트 필터를 만들어 매개 변수에 맞지 않는 레코드를 제외시킬 때 계속 사용합니다.
레코드세트 필터 만들기
-
[필터] 영역의 첫 번째 팝업 메뉴에서 일치 항목을 검색할 데이터베이스 테이블의 열을 선택합니다.
예를 들어 검색 페이지에서 보내온 값이 도시 이름이면 도시 이름이 포함된 테이블 열을 선택합니다.
-
첫 번째 메뉴 옆의 팝업 메뉴에서 등호를 선택합니다. 등호가 기본값입니다.
-
세 번째 팝업 메뉴에서, 검색 페이지의 양식이 POST 메서드를 사용하는 경우에는 [양식 변수]를 선택하고 GET 메서드를 사용하는 경우에는 [URL 매개 변수]를 선택합니다.
검색 페이지에서는 양식 변수 또는 URL 매개 변수를 사용하여 정보를 결과 페이지로 전달합니다.
-
네 번째 상자에 검색 페이지의 검색 매개 변수를 받아들이는 양식 오브젝트의 이름을 입력합니다.
오브젝트의 이름은 양식 변수 또는 URL 매개 변수의 이름으로도 사용됩니다. 검색 페이지로 전환하고 해당 양식의 양식 오브젝트를 클릭하여 선택한 다음, 속성 관리자에서 오브젝트 이름을 선택하면 이 이름을 가져올 수 있습니다.
특정 국가로의 모험 여행만을 포함하는 레코드세트를 만드는 경우를 예로 들어 보겠습니다. 테이블에 TRIPLOCATION이라는 열이 있고, 검색 페이지의 HTML 양식이 GET 메서드를 사용하며, 이 양식에 국가 목록을 표시하는 Location이라는 메뉴 오브젝트가 포함되었다고 가정합니다. 다음 예제에서는 [필터] 영역이 어떻게 표시되는지 보여 줍니다.
-
(선택 사항) [테스트]를 클릭하고 테스트 값을 입력한 다음 [확인]을 클릭하면 데이터베이스에 연결하여 레코드세트의 인스턴스를 만듭니다.
테스트 값은 검색 페이지로부터 반환될 값을 시뮬레이션합니다. [확인]을 클릭하여 테스트 레코드세트를 닫습니다.
-
레코드세트에 만족하는 경우 [확인]을 클릭합니다.
서버에서 실행될 때 데이터베이스 테이블의 각 레코드를 확인하는 서버 측 스크립트가 페이지에 삽입됩니다. 레코드의 지정된 필드가 필터링 조건을 충족하면 해당 레코드는 레코드세트에 포함됩니다. 스크립트는 검색 결과만 포함된 레코드세트를 구성합니다.
다음 단계에서는 결과 페이지에 레코드세트를 표시합니다. 자세한 내용은 검색 결과 표시를 참조하십시오.
고급 결과 페이지 구성
검색 페이지에서 둘 이상의 검색 매개 변수를 서버로 전송한 경우에는 결과 페이지에 대한 SQL 쿼리를 작성하고 검색 매개 변수를 SQL 변수에 사용해야 합니다.
검색 조건이 하나인 경우 단순 [레코드세트] 대화 상자를 사용하여 레코드세트를 정의할 수 있습니다(기본 결과 페이지 구성 참조).
-
Dreamweaver에서 결과 페이지를 열고 [윈도우] > [바인딩]을 선택하여 [바인딩] 패널을 열고 플러스(+) 버튼을 클릭한 다음 팝업 메뉴에서 [레코드세트]를 선택하여 새 레코드세트를 만듭니다.
-
고급 [레코드세트] 대화 상자가 나타나는지 확인합니다.
고급 대화 상자에는 SQL 문을 입력할 텍스트 영역이 있습니다. 단순 대화 상자가 나타나는 경우에는 [고급] 버튼을 클릭하여 고급 대화 상자로 전환합니다.
-
레코드세트의 이름을 입력하고 연결을 선택합니다.
연결은 사용자가 검색할 데이터를 포함하는 데이터베이스에 대한 연결이어야 합니다.
-
[SQL] 텍스트 영역에 SELECT 문을 입력합니다.
이 SELECT 문의 WHERE 절에는 검색 매개 변수를 보유하는 변수가 반드시 포함되어야 합니다. 다음 예제에서 변수는 varLastName 및 varDept입니다.
SELECT EMPLOYEEID, FIRSTNAME, LASTNAME, DEPARTMENT, EXTENSION FROM EMPLOYEE ¬ WHERE LASTNAME LIKE 'varLastName' ¬ AND DEPARTMENT LIKE 'varDept'
입력하는 횟수를 줄이려면 고급 [레코드세트] 대화 상자 아래쪽에 있는 데이터베이스 항목 트리를 사용합니다. 자세한 내용은 SQL을 작성하여 고급 레코드세트 정의를 참조하십시오.
SQL 구문에 대한 도움말은 www.adobe.com/go/learn_dw_sqlprimer_kr에서 SQL 초보자용 설명서를 참조하십시오.
-
변수 영역에서 플러스(+) 버튼을 클릭하고 변수의 이름, 기본값(런타임 값이 반환되지 않는 경우 변수에서 사용할 값) 및 런타임 값(일반적으로 요청 변수처럼 브라우저에서 보내온 값을 저장하는 서버 오브젝트)을 입력하여 SQL 변수에 검색 매개 변수의 값을 제공합니다.
다음 ASP 예제에서는 검색 페이지의 HTML 양식에 GET 메서드가 사용되고 LastName과 Department라는 텍스트 필드가 포함됩니다.
ColdFusion에서 런타임 값은 #LastName# 및 #Department#입니다. PHP에서 런타임 값은 $_REQUEST["LastName"] 및 $_REQUEST["Department"]입니다.
-
(선택 사항) [테스트]를 클릭하여 기본 변수 값을 사용하는 레코드세트의 인스턴스를 만듭니다.
기본값은 검색 페이지로부터 반환될 값을 시뮬레이션합니다. [확인]을 클릭하여 테스트 레코드세트를 닫습니다.
-
레코드세트에 만족하는 경우 [확인]을 클릭합니다.
페이지에 SQL 쿼리가 삽입됩니다.
다음 단계에서는 결과 페이지에 레코드세트를 표시합니다.
검색 결과 표시
검색 결과를 저장하는 레코드세트를 만든 다음 결과 페이지에 정보를 표시해야 합니다. 레코드를 표시하기 위해서는 [바인딩] 패널에서 결과 페이지로 각 열을 드래그하기만 하면 됩니다. 내비게이션 링크를 추가하여 레코드세트의 앞뒤로 이동하거나 반복 영역을 만들어 페이지에 여러 레코드를 표시할 수 있습니다. 또한 세부 정보 페이지에 링크를 추가할 수도 있습니다.
동적 표에 결과를 표시하는 방법 이외에, 페이지에 동적 내용을 표시하는 방법에 대한 자세한 내용은 데이터베이스 레코드 표시를 참조하십시오.
-
결과 페이지에서 동적 표를 표시할 위치에 삽입 포인터를 놓은 다음 [삽입] > [데이터 오브젝트] > [동적 데이터] > [동적 표]를 선택합니다.
-
검색 결과를 저장하도록 정의된 레코드세트를 선택하여 [동적 표] 대화 상자와 관련된 작업을 완료합니다.
-
[확인]을 클릭합니다. 검색 결과가 표시되는 동적 표가 결과 페이지에 삽입됩니다.
결과 페이지에 대한 세부 정보 페이지 만들기
검색 및 결과 페이지 세트에는 결과 페이지의 특정 레코드에 대한 자세한 정보를 표시하는 세부 정보 페이지가 포함될 수 있습니다. 여기에서 결과 페이지는 마스터 세부 정보 페이지 세트의 마스터 페이지로도 사용됩니다.
관련 페이지를 여는 링크 만들기(ASP)
관련 페이지를 열고 기존 매개 변수를 해당 페이지로 전달하는 링크를 만들 수 있습니다. 서버 비헤이비어는 ASP 서버 모델을 사용하는 경우에만 사용할 수 있습니다.
페이지에 [관련 페이지로 이동] 서버 비헤이비어를 추가하기 전에 이 페이지가 다른 페이지로부터 양식이나 URL 매개 변수를 전달받는지 확인합니다. 서버 비헤이비어는 이 매개 변수를 세 번째 페이지로 전달하는 역할을 합니다. 예를 들어 결과 페이지에서 받은 검색 매개 변수를 다른 페이지로 전달하여 사용자가 검색 매개 변수를 다시 입력하지 않도록 할 수 있습니다.
또한 관련 페이지에 대한 링크로 사용할 텍스트나 이미지를 페이지에서 선택할 수도 있고 아무 것도 선택하지 않은 상태에서 페이지에 포인터를 놓아 링크 텍스트가 삽입되게 할 수도 있습니다.
-
[관련 페이지로 이동] 상자에서 [검색]을 클릭하여 관련 페이지 파일을 찾습니다.
현재 페이지가 해당 페이지 자체로 데이터를 전송하는 경우에는 현재 페이지의 파일 이름을 입력합니다.
-
전달할 매개 변수가 GET 메서드를 사용하여 HTML 양식에서 직접 수신되거나 페이지의 URL에 나열되면 [URL 매개 변수] 옵션을 선택합니다.
-
전달할 매개 변수가 POST 메서드를 사용하여 HTML 양식에서 직접 수신되면 [양식 매개 변수] 옵션을 선택합니다.
-
[확인]을 클릭합니다.
새 링크를 클릭하면 페이지는 쿼리 문자열을 사용하여 관련 페이지로 매개 변수를 전달합니다.