서버 기술
- 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의 현재 버전에 없는 옵션이 있을 수 있습니다. 자세한 내용은 이 문서를 참조하십시오.
웹 애플리케이션 빌드에 필요한 요소
Adobe Dreamweaver에서 웹 응용 프로그램을 빌드하려면 다음과 같은 소프트웨어가 필요합니다.
- 웹 서버
- 웹 서버와 함께 작동하는 애플리케이션 서버
웹 애플리케이션 환경에서 웹 서버와 애플리케이션 서버는 하드웨어가 아닌 소프트웨어를 가리킵니다.
응용 프로그램과 데이터베이스를 함께 사용하려면 다음과 같은 소프트웨어가 추가로 필요합니다.
데이터베이스 시스템
해당 데이터베이스를 지원하는 데이터베이스 드라이버
일부 웹 호스팅 회사에서는 자사의 소프트웨어를 사용하여 웹 응용 프로그램을 테스트하고 배포할 수 있는 방법을 제공합니다. 경우에 따라 개발 목적으로 Dreamweaver가 설치된 컴퓨터에 필요한 소프트웨어를 설치할 수 있습니다. 또한 대개 Windows 2000 또는 XP 컴퓨터인 네트워크 컴퓨터에 소프트웨어를 설치할 수 있으므로 팀 내의 다른 개발자가 특정 프로젝트에 대해 작업할 수 있습니다.
웹 애플리케이션에서 데이터베이스를 사용하려면 이 데이터베이스에 먼저 연결해야 합니다.
웹 서버 기초
동적 웹 페이지를 개발하고 테스트하려면 제대로 작동하는 웹 서버가 필요합니다. 웹 서버는 웹 브라우저의 요청에 응답하여 웹 페이지를 제공하는 소프트웨어입니다. 웹 서버는 경우에 따라 HTTP 서버라고도 합니다. 로컬 컴퓨터에 웹 서버를 설치하고 사용할 수 있습니다.
Macintosh 사용자는 Macintosh에 이미 설치되어 있는 Apache 웹 서버를 사용할 수 있습니다.
Adobe는 Microsoft Internet Information Server(IIS) 같은 타사 소프트웨어에 대한 기술 지원을 제공하지 않습니다. Microsoft 제품에 대한 지원이 필요한 경우 Microsoft 기술 지원 서비스에 문의하십시오.
IIS(Internet Information Server)를 사용하여 웹 애플리케이션을 개발하는 경우 웹 서버의 기본 이름은 사용 중인 컴퓨터의 이름입니다. 따라서 컴퓨터의 이름을 변경하면 서버 이름을 변경할 수 있습니다. 컴퓨터에 이름이 없는 경우 서버는 localhost를 이름으로 사용합니다.
서버 이름은 서버의 루트 폴더와 일치하며, 보통 Windows 컴퓨터에서 C:\Inetpub\wwwroot입니다. 사용자 컴퓨터에서 실행되는 브라우저에 다음 URL을 입력하면 루트 폴더에 저장된 모든 웹 페이지를 열 수 있습니다.
http://서버 이름/파일 이름
예를 들어, 서버 이름이 mer_noire이고 soleil.html이라는 이름의 웹 페이지가 C:\Inetpub\wwwroot\에 저장된 경우, 로컬 컴퓨터에서 실행되는 브라우저에 다음 URL을 입력하면 이 페이지를 열 수 있습니다.
http://mer_noire/soleil.html
URL에서는 반드시 역 슬래시가 아닌 슬래시(/)를 사용해야 합니다.
또한 URL에 루트 폴더의 하위 폴더를 지정하여 하위 폴더에 저장된 모든 웹 페이지를 열 수 있습니다. 예를 들어, soleil.html 파일이 다음과 같이 gamelan이라는 하위 폴더에 저장된 경우,
C:\Inetpub\wwwroot\gamelan\soleil.html
사용자 컴퓨터에서 실행되는 브라우저에 다음 URL을 입력하면 이 페이지를 열 수 있습니다.
http://mer_noire/gamelan/soleil.html
웹 서버가 사용자 컴퓨터에서 실행 중인 경우 서버 이름을 localhost로 대체할 수 있습니다. 예를 들어, 다음 URL은 브라우저에서 같은 페이지를 엽니다.
http://mer_noire/gamelan/soleil.html
http://localhost/gamelan/soleil.html
서버 이름 또는 localhost 대신 사용할 수 있는 표현식은 127.0.0.1입니다(예: http://127.0.0.1/gamelan/soleil.html).
웹 서버 선택
웹 애플리케이션을 개발하고 테스트하려는 경우 Microsoft IIS(Internet Information Server) 및 Apache HTTP Server와 같은 여러 일반적인 웹 서버 중에서 선택할 수 있습니다.
웹 호스팅 서비스를 사용하지 않으면 웹 서버를 선택하여 로컬 컴퓨터에 개발용으로 설치합니다. ColdFusion 웹 애플리케이션을 개발하려고 하는 Windows 및 Macintosh 사용자는 ColdFusion 8 Application Server Developer Edition에 포함된 웹 서버를 사용할 수 있습니다. 이 제품은 무료로 설치하고 사용할 수 있습니다.
다른 Windows 사용자는 IIS를 설치하여 로컬 컴퓨터에서 웹 서버를 실행할 수 있습니다. 이 웹 서버는 이미 시스템에 설치되어 있을 수 있습니다. 폴더 구조에서 C:\Inetpub 또는 D:\Inetpub 폴더가 포함되어 있는지 확인합니다. IIS를 설치하는 동안 이 폴더가 생성됩니다.
Mac OS 사용자는 운영 체제와 함께 설치된 로컬 Apache 웹 서버를 사용할 수 있습니다.
기타 웹 서버의 설치 및 구성에 대한 자세한 내용은 서버 공급업체에서 제공한 설명서를 참조하거나 시스템 관리자에게 문의하십시오.
애플리케이션 서버 선택
애플리케이션 서버는 웹 서버가 동적 페이지를 처리할 수 있도록 도와주는 소프트웨어입니다. 애플리케이션 서버를 선택할 때는 예산, 사용하려는 서버 기술(ColdFusion, ASP 또는 PHP) 및 웹 서버 종류 등 여러 요소를 고려해야 합니다.
예산
일부 공급업체에서는 구매 비용과 관리 비용이 높은 최고급 애플리케이션 서버를 판매합니다. 반면, 보다 사용하기 쉽고 경제적인 솔루션(예: ColdFusion)을 제공하는 공급업체도 있습니다. Microsoft IIS와 같은 일부 애플리케이션 서버는 웹 서버에 함께 구축되어 있으며, PHP와 같은 애플리케이션 서버는 인터넷에서 무료로 다운로드할 수 있습니다.
서버 기술
애플리케이션 서버에는 다양한 기술이 사용됩니다. Dreamweaver에서는 ColdFusion, ASP, PHP 이상 세 종류의 서버 기술을 지원합니다. 다음 표에는 Dreamweaver에서 지원하는 서버 기술에 대해 사용할 수 있는 일반적인 애플리케이션 서버가 기재되어 있습니다.
|
응용 프로그램 서버 |
ColdFusion |
Adobe ColdFusion 8 |
ASP |
Microsoft IIS |
PHP |
PHP 서버 |
ColdFusion에 대한 자세한 내용을 보려면 [도움말] 메뉴에서 [ColdFusion 도움말]을 선택하십시오.
ASP에 대해 자세히 알아보려면 Microsoft 웹 사이트(http://msdn.microsoft.com/ko-kr/library/aa286483.aspx)를 참조하십시오.
PHP에 대해 자세히 알아보려면 PHP 웹 사이트(www.php.net/)를 참조하십시오.
데이터베이스 선택
저장할 데이터의 양과 복잡성에 따라 다양한 형태의 데이터베이스가 제공됩니다. 데이터베이스를 선택할 때는 예산, 데이터베이스에 액세스할 예상 사용자 수 등 여러 요소를 고려해야 합니다.
예산
일부 공급업체에서는 구매 비용과 관리 비용이 높은 최고급 애플리케이션 데이터베이스 서버를 만듭니다. 반면, Microsoft Access 또는 소스 공개 데이터베이스인 MySQL과 같이 사용하기 쉽고 경제적인 솔루션을 제공하는 공급업체도 있습니다.
사용자
사이트에 액세스하는 사용자 집단이 대규모로 예상되는 경우 사이트의 예상 사용자 그룹을 지원할 수 있도록 디자인된 데이터베이스를 선택하십시오. 데이터 모델링에 상당한 수준의 유연성이 필요하고 대규모의 동시 사용자 집단을 지원해야 하는 웹 사이트에는 Microsoft SQL Server 및 Oracle과 같이 일반적으로 RDBMS라고 하는 서버 기반의 관계형 데이터베이스를 선택하는 것이 좋습니다.
ColdFusion 개발 환경 설정
Windows 또는 Mac 컴퓨터에서 Dreamweaver용 ColdFusion 개발 환경을 설정하는 방법에 대한 자세한 안내는 Adobe 웹 사이트(www.adobe.com/devnet/dreamweaver/articles/setup_cf.html)를 참조하십시오.
Windows 및 Macintosh 사용자는 Adobe 웹 사이트(www.adobe.com/go/coldfusion/)에서 완전한 기능을 갖춘 ColdFusion 애플리케이션 서버 개발자 에디션을 무료로 다운로드하여 설치할 수 있습니다.
Developer Edition은 웹 응용 프로그램을 개발 및 테스트하는 데 사용할 수 있는 비상업용 버전이며 타인에게 배포할 수 없습니다. 로컬 호스트와 두 개의 원격 IP 주소의 요청을 지원합니다. 소프트웨어가 만료되지 않는 한 언제든지 웹 응용 프로그램을 개발하고 테스트하는 데 사용할 수 있습니다. 자세한 내용은 ColdFusion 도움말([도움말] > [ColdFusion 도움말])을 참조하십시오.
ColdFusion을 설치할 때 ColdFusion에 내장된 웹 서버 또는 시스템에 설치된 다른 웹 서버를 사용하도록 구성할 수 있습니다. 일반적으로 개발 환경을 실제 운영 환경에 맞춰 구성하는 것이 좋습니다. 따라서 개발 컴퓨터에 Microsoft IIS 같은 기존 웹 서버가 있는 경우에는 내장 ColdFusion 웹 서버보다 Microsoft IIS를 선택하는 것이 좋습니다.
PHP 개발 환경 설정
Windows 또는 Mac 컴퓨터에서 Dreamweaver용 PHP 개발 환경을 설정하는 방법에 대한 자세한 안내는 Adobe 웹 사이트(www.adobe.com/devnet/dreamweaver/articles/setup_php.html)를 참조하십시오.
Windows, Linux, UNIX, HP-UX, Solaris 및 Mac OS X 시스템에 사용할 수 있는 PHP 애플리케이션 서버 버전이 있습니다. 애플리케이션 서버에 대한 자세한 내용은 PHP 웹 사이트(www.php.net/download-docs.php)에서 다운로드할 수 있는 PHP 설명서를 참조하십시오.
ASP 개발 환경 설정
Windows 또는 Mac 컴퓨터에서 Dreamweaver용 ASP 개발 환경을 설정하는 방법에 대한 자세한 안내는 Adobe 웹 사이트(www.adobe.com/devnet/dreamweaver/articles/setup_asp.html)를 참조하십시오.
ASP 페이지를 실행하려면 Windows 2000 및 Windows XP Professional과 함께 제공되는 Microsoft IIS(Internet Information Services) 같은 Microsoft Active Server Pages 2.0을 지원하는 애플리케이션 서버가 필요합니다. Windows XP Professional 사용자는 로컬 컴퓨터에서 IIS를 설치하고 실행할 수 있습니다. Macintosh 사용자는 웹 호스팅 서비스와 ASP 계획을 함께 사용할 수도 있고 원격 컴퓨터에 IIS를 설치할 수도 있습니다.
애플리케이션의 루트 폴더 만들기
웹 호스팅 회사에 등록하거나 서버 소프트웨어를 직접 설치한 후에 웹 서버가 실행되는 시스템에 웹 애플리케이션에 대한 루트 폴더를 만듭니다. 루트 폴더는 웹 서버가 실행 중인 위치에 따라 로컬 또는 원격이 될 수 있습니다.
웹 서버는 웹 브라우저의 HTTP 요청에 대한 응답으로 이 폴더 또는 그 하위 폴더의 파일을 제공합니다. 예를 들어, ColdFusion 8이 실행되고 있는 컴퓨터에서는 \ColdFusion8\wwwroot 폴더 및 관련 하위 폴더에 있는 모든 파일을 웹 브라우저에 제공할 수 있습니다.
다음은 선택한 웹 서버의 기본 루트 폴더입니다.
웹 서버 |
기본 루트 폴더 |
ColdFusion 8 |
\ColdFusion8\wwwroot |
IIS |
\Inetpub\wwwroot |
Apache(Windows) |
\apache\htdocs |
Apache(Macintosh) |
사용자:MyUserName:사이트 |
웹 서버를 테스트하려면 테스트 HTML 페이지를 기본 루트 폴더에 넣은 다음 브라우저에서 해당 페이지의 URL을 입력하여 페이지를 엽니다. URL은 도메인 이름과 HTML 페이지의 파일 이름으로 구성됩니다(예: www.example.com/testpage.htm).
웹 서버가 로컬 컴퓨터에서 실행 중인 경우 도메인 이름 대신 localhost를 사용할 수 있습니다. 다음 localhost URL 중 사용 중인 웹 서버에 맞는 URL을 입력합니다.
웹 서버 |
Localhost URL |
ColdFusion 8 |
http://localhost:8500/testpage.htm |
IIS |
http://localhost/testpage.htm |
Apache(Windows) |
http://localhost:80/testpage.htm |
Apache(Macintosh) |
http://localhost/~MyUserName/testpage.htm (여기서 MyUserName은 Macintosh 사용자 이름입니다.) |
기본적으로 ColdFusion 웹 서버는 포트 8500에서 실행되고 Windows용 Apache 웹 서버는 포트 80에서 실행됩니다.
페이지가 예상대로 열리지 않으면 다음과 같은 오류가 있는지 확인하십시오.
웹 서버가 시작되지 않았습니다. 시작 방법은 웹 서버 설명서를 참조하십시오.
파일의 확장명이 .htm 또는 .html이 아닙니다.
브라우저의 주소 텍스트 상자에 http://localhost:8500/testpage.htm과 같은 페이지 URL이 아니라 c:\ColdFusion8\wwwroot\testpage.htm과 같은 페이지의 파일 경로를 입력했습니다.
URL을 잘못 입력했습니다. 오류가 있는지 확인하고 http://localhost:8080/testpage.htm/처럼 파일 이름 다음에 슬래시가 있는지 확인합니다.
애플리케이션의 루트 폴더를 만든 후에는 파일을 관리할 Dreamweaver 사이트를 정의합니다.
Dreamweaver 사이트 정의 정보
웹 애플리케이션을 개발할 시스템을 구성한 후에는 파일을 관리할 Dreamweaver 사이트를 정의합니다.
시작하기에 앞서 다음과 같은 요구 사항을 갖췄는지 확인합니다.
웹 서버에 대한 액세스 권한을 가지고 있는가. 웹 서버는 사용자의 로컬 컴퓨터, 개발 서버와 같은 원격 컴퓨터 또는 웹 호스팅 회사에서 관리하는 서버에서 실행될 수 있는가.
웹 서버가 실행 중인 시스템에 애플리케이션 서버가 설치되어 실행 중인가.
웹 서버가 실행 중인 시스템에 웹 애플리케이션의 루트 폴더를 만들었는가.
웹 애플리케이션에 대한 Dreamweaver 사이트를 정의할 때는 다음과 같은 세 가지 단계를 거칩니다.
1. 로컬 폴더 정의
로컬 폴더는 사이트 파일의 작업 복사본을 저장하는 데 사용되는 하드 디스크 상의 폴더입니다. 사용자가 만든 각각의 새 웹 애플리케이션에 대해 로컬 폴더를 정의할 수 있습니다. 로컬 폴더를 정의하면 파일을 관리하고 웹 서버와 파일을 주고 받을 수 있습니다.
2. 원격 폴더 정의
웹 서버가 실행 중인 컴퓨터에 있는 폴더를 Dreamweaver 원격 폴더로 정의합니다. 원격 폴더는 사용자가 웹 애플리케이션용으로 웹 서버에 만든 폴더입니다.
3. 테스트 폴더 정의
작업을 수행하는 동안 Dreamweaver는 이 폴더를 사용하여 동적 내용을 생성 및 표시하고 데이터베이스에 연결합니다. 테스트 서버는 사용자의 로컬 컴퓨터, 개발 서버, 스테이징 서버 또는 프로덕션 서버가 될 수 있습니다. 개발하고자 하는 동적 페이지를 처리할 수만 있다면 서버의 종류는 문제가 되지 않습니다.
Dreamweaver 사이트를 정의하고 나면 웹 애플리케이션 빌드를 시작할 수 있습니다.