사용 안내서 취소

파일 작성 및 열기

검색

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

Dreamweaver에서 파일을 작성하고, 열고, 편집하고, 저장하고, 복구할 수 있습니다. 템플릿을 제작하고 관련 파일을 엽니다.

Dreamweaver에서는 다양한 웹 문서 사용을 위한 유연한 환경을 제공합니다. HTML 문서 외에도 JavaScript, PHP 및 CSS(겹쳐 놓기 스타일 시트)와 같은 다양한 텍스트 기반 문서를 만들고 열 수 있습니다.

Dreamweaver에는 새 문서를 만들기 위한 몇 가지 옵션이 있습니다. 다음과 같은 문서를 만들 수 있습니다.

새 빈 문서 또는 템플릿
30개 이상의 CSS 기반 페이지 레이아웃을 비롯하여 Dreamweaver와 함께 제공되는 미리 디자인된 페이지 레이아웃 중 하나에 기반을 둔 문서
기존 템플릿 중 하나를 기반으로 하는 문서
또한 문서 환경 설정도 지정할 수 있습니다. 예를 들어 한 가지 형식의 문서를 사용하는 경우에는 해당 문서 형식을 새로 만들 페이지의 기본 문서 형식으로 설정할 수 있습니다.
메타 태그, 문서 제목, 배경색 등의 문서 속성과 디자인 뷰 또는 코드 보기의 기타 페이지 속성을 쉽게 정의할 수 있습니다.

Dreamweaver 파일 유형

Dreamweaver에서는 다양한 유형의 파일을 사용하여 작업할 수 있습니다. 주로 사용되는 파일은 HTML 파일입니다. HTML(Hypertext Markup Language) 파일은 브라우저에 웹 페이지를 표시해 주는 태그 기반 언어를 포함하고 있습니다. HTML 파일은 .html 또는 .htm 확장명으로 저장할 수 있습니다. Dreamweaver는 기본적으로 .html 확장명을 사용하여 파일을 저장합니다.

Dreamweaver를 사용하여 HTML5 기반 웹 페이지를 만들고 편집할 수 있습니다. 시작 레이아웃도 제공되므로 HTML5 페이지를 처음부터 새로 작성할 수 있습니다.

이 밖에 Dreamweaver에서 작업하는 동안 흔히 사용되는 파일 유형은 다음과 같습니다.

CSS

CSS(겹쳐 놓기 스타일 시트) 파일의 확장명은 .css입니다. HTML 내용의 서식을 지정하고 다양한 페이지 요소를 적절하게 배치하는 데 사용됩니다.

GIF

GIF(Graphics Interchange Format) 파일의 확장명은 .gif입니다. GIF 형식은 만화, 로고, 투명한 부분이 있는 그래픽, 애니메이션 등을 만들 때 흔히 사용되는 웹 그래픽 형식입니다. GIF는 최대 256가지의 색을 갖습니다.

JPEG

JPEG(Joint Photographic Experts Group) 파일은 이 형식을 만든 단체의 이름을 따서 이름이 붙여졌으며, 확장명은 .jpg이고 사진이나 하이컬러 이미지에 사용됩니다. JPEG 형식은 디지털 또는 스캔 사진, 텍스처를 사용한 이미지, 그레이디언트 색상이 전환되는 이미지, 256색 이상이 필요한 이미지 등에 적합합니다.

XML

XML(Extensible Markup Language) 파일의 확장명은 .xml입니다. XSL(Extensible Stylesheet Language)을 사용해 서식을 지정할 수 있는 순수한 형식으로 데이터를 저장합니다.

새 문서 대화 상자

[새 문서] 대화 상자에는 PHP, XML 및 SVG를 비롯한 모든 지원되는 문서 파일 유형이 표시됩니다.

이 대화 상자에서 미리 정의된 레이아웃, 템플릿 및 프레임워크도 이용할 수 있습니다.

참고:

기능을 갖춘 모든 스타터 레이아웃을 작성해 반응형 웹 사이트를 지원하며 HTML-5와 호환됩니다.

빈 페이지를 사용하여 HTML 레이아웃 만들기

미리 디자인된 CSS 레이아웃을 포함하는 페이지를 만들거나 완전히 비어 있는 페이지를 만든 다음 고유의 레이아웃을 만들 수도 있습니다.

파일 > 새로 만들기를 선택합니다.
새 문서 범주의 페이지 유형 열에서 만들려는 페이지의 종류를 선택합니다. 예를 들어 일반 HTML 페이지를 생성하려면 HTML을 선택해야 합니다.
문서 유형 팝업 메뉴에서 문서 유형을 선택합니다. 대부분의 경우 기본 선택인 HTML5를 사용할 수 있습니다.
만들려는 페이지 유형에 따라 추가 옵션을 선택합니다.
- 없음: 프레임워크를 사용하지 않고 간단한 웹 페이지를 만들려면 이 옵션을 선택합니다.
- Bootstrap: Bootstrap 템플릿은 Bootstrap 프레임워크를 사용하여 사전 정의된 레이아웃입니다. Bootstrap 프레임워크를 사용하여 반응형 웹 페이지를 만들려면 이 옵션을 선택합니다. 기본적으로 Bootstrap 4.0.0 문서가 생성됩니다.
참고:

반응형 웹 페이지를 만들 계획이면 Bootstrap 프레임워크를 선택합니다.
프레임워크를 사용하지 않는 경우:
- 문서 제목: 이 필드에 문서 제목을 입력하면 Dreamweaver가 문서의 <head> 섹션에 이 제목을 자동으로 추가합니다.
- 문서 유형: [문서 유형] 팝업 메뉴에서 문서 유형을 선택합니다. 대부분의 경우 기본 선택인 HTML5를 사용할 수 있습니다.
문서 유형 메뉴에서 XHTML 문서 유형 정의 중 하나를 선택하면 페이지를 XHTML 호환 페이지로 만들 수 있습니다. 예를 들어 메뉴에서 [XHTML 1.0 변형]이나 [XHTML 1.0 준수]를 선택하면 HTML 문서가 XHTML 호환이 되도록 만들 수 있습니다. XHTML(Extensible Hypertext Markup Language)은 HTML을 XML 애플리케이션으로 다시 표현한 것입니다. 일반적으로 XHTML을 사용하면 XML의 이점을 활용하면서 이와 동시에 웹 문서의 이전 및 이후 버전과의 호환성을 보장할 수 있습니다.
참고:

XHTML에 대한 자세한 내용은 XHTML 1.1 - Module-Based XHTML(www.w3.org/TR/xhtml11/) 및 XHTML 1.0(/www.w3c.org/TR/xhtml1/)에 대한 사양이 포함된 W3C(World Wide Web Consortium) 웹 사이트를 참조하십시오. 또한 웹 기반 파일(http://validator.w3.org/) 및 로컬 파일(http://validator.w3.org/file-upload.html)에 대한 XHTML 유효성 검사기 사이트를 참조하십시오.
- CSS 첨부: 기존 CSS 레이아웃을 페이지에 첨부합니다. 이렇게 하려면 [CSS 파일 첨부] 창 옆에 있는 [스타일 시트 첨부] 아이콘()을 클릭하고 CSS 스타일 시트를 선택합니다.
프레임워크를 사용하지 않고 새 HTML 페이지 제작

Photoshop 구성 요소를 기반으로 새 페이지를 만들려는 경우 Extract를 사용하여 Photoshop 구성 요소에서 페이지를 빌드합니다.

이 옵션을 선택하면 PSD 파일을 업로드하고 HTML 페이지를 시작할 수 있는 Extract 패널이 열립니다.
Bootstrap 프레임워크를 사용하여 반응형 웹 페이지를 만들려면:
- Bootstrap CSS: 새 Bootstrap CSS를 만들거나 기존 CSS 파일을 사용하는 옵션을 선택합니다. 기존 CSS 파일을 사용하는 경우 파일에 경로를 제공합니다. CSS 파일이 사이트 루트 폴더 내에 있는지 확인하십시오.
- CSS 첨부: 기존 CSS 레이아웃을 페이지에 첨부합니다. 이렇게 하려면 [CSS 파일 첨부] 창 옆에 있는 [스타일 시트 첨부] 아이콘()을 클릭하고 CSS 스타일 시트를 선택합니다.
- 사전 설치 레이아웃 포함: 레이아웃이 이미 있는 경우에는 이 옵션을 선택합니다. 그리드 및 중단점 값을 편집하려면 [사용자 정의]를 클릭합니다.
Bootstrap 프레임워크를 사용하여 새 HTML 페이지 만들기

Photoshop 구성 요소를 기반으로 새 페이지를 만들려는 경우 Extract를 사용하여 Photoshop 구성 요소에서 페이지를 빌드합니다.

이 옵션을 선택하면 PSD 파일을 업로드하고 HTML 페이지를 시작할 수 있는 Extract 패널이 열립니다.
문서 유형, 인코딩 및 파일 확장명과 같은 기본 문서 환경 설정을 지정하려면 환경 설정을 클릭합니다.
[만들기] 버튼을 클릭합니다.
새 문서를 저장합니다(파일 > 저장).
대화 상자가 나타나면 파일을 저장할 폴더를 찾습니다.

참고:

Dreamweaver 사이트에 파일을 저장하는 것이 좋습니다.
파일 이름 상자에 파일 이름을 입력합니다.

파일과 폴더 이름에 공백 및 특수 문자를 사용하지 않으며 파일 이름이 숫자로 시작되지 않도록 하십시오. 특히, 원격 서버에 올릴 파일 이름에는 특수 문자(예: é, ç, ¥)나 구두점(예: 콜론, 슬래시, 마침표)을 사용하면 안 됩니다. 대부분의 서버가 업로드 과정에서 이러한 문자를 다른 문자로 변경하기 때문에 특수 문자를 사용한 파일에 대한 링크가 끊어질 수 있습니다.

빈 템플릿 만들기

[새 문서] 대화 상자를 사용하여 Dreamweaver 템플릿을 만들 수 있습니다. 기본적으로 템플릿은 사이트의 Templates 폴더에 저장됩니다.

참고:

사이트를 먼저 생성한 다음 템플릿을 만들어야 합니다. 사이트 및 사이트를 만드는 방법에 대한 설명은 Dreamweaver 사이트 정보를 참조하십시오.

파일 > 새로 만들기를 선택합니다.
새 문서 대화 상자에서 사이트 템플릿 범주를 선택합니다.
[DocType] 팝업 메뉴에서 문서 유형을 선택합니다. 대부분의 경우 이 옵션을 기본 선택인 [XHTML 1.0 변형]이 선택된 상태로 유지하는 것이 좋습니다.

문서 유형(DTD) 메뉴에서 XHTML 문서 유형 정의 중 하나를 선택하면 페이지를 XHTML 호환 페이지로 만들 수 있습니다. 예를 들어 메뉴에서 [XHTML 1.0 변형]이나 [XHTML 1.0 준수]를 선택하면 HTML 문서가 XHTML 호환이 되도록 만들 수 있습니다. XHTML(Extensible Hypertext Markup Language)은 HTML을 XML 애플리케이션으로 다시 표현한 것입니다. 일반적으로 XHTML을 사용하면 XML의 이점을 활용하면서 이와 동시에 웹 문서의 이전 및 이후 버전과의 호환성을 보장할 수 있습니다.

참고:

XHTML에 대한 자세한 내용은 XHTML 1.1 - Module-Based XHTML(www.w3.org/TR/xhtml11/) 및 XHTML 1.0(/www.w3c.org/TR/xhtml1/)에 대한 사양이 포함된 W3C(World Wide Web Consortium) 웹 사이트를 참조하십시오. 또한 웹 기반 파일(http://validator.w3.org/) 및 로컬 파일(http://validator.w3.org/file-upload.html)에 대한 XHTML 유효성 검사기 사이트를 참조하십시오.
템플릿을 편집할 때 자동으로 페이지를 업데이트하고자 하는 경우 템플릿을 변경할 때 [페이지 업데이트]를 선택합니다.
[만들기] 버튼을 클릭합니다.
새 문서를 저장합니다(파일 > 저장). 템플릿에 편집 가능한 영역을 추가하지 않았으면 문서에 편집할 수 있는 영역이 없음을 나타내는 대화 상자가 나타납니다. [확인]을 클릭하여 대화 상자를 닫습니다.
다른 이름으로 저장 대화 상자에서 템플릿을 저장할 사이트를 선택합니다.
[파일 이름] 상자에 새 템플릿의 이름을 입력합니다. 템플릿 이름 뒤에 파일 확장명을 추가할 필요는 없습니다. [저장]을 클릭하면 .dwt 확장명이 새 템플릿에 추가되며, 이 파일은 사이트의 Templates 폴더에 저장됩니다.

파일과 폴더 이름에 공백 및 특수 문자를 사용하지 않으며 파일 이름이 숫자로 시작되지 않도록 하십시오. 특히, 원격 서버에 올릴 파일 이름에는 특수 문자(예: é, ç, ¥)나 구두점(예: 콜론, 슬래시, 마침표)을 사용하면 안 됩니다. 대부분의 서버가 업로드 과정에서 이러한 문자를 다른 문자로 변경하기 때문에 특수 문자를 사용한 파일에 대한 링크가 끊어질 수 있습니다.

템플릿을 기반으로 페이지 만들기

기존 템플릿 중 하나 또는 Dreamweaver 스타터 템플릿을 사용해 새 문서를 선택하고, 미리 보고, 만들 수 있습니다. [새 문서] 대화 상자를 사용하여 Dreamweaver 정의 사이트에서 템플릿을 선택하거나, [에셋] 패널을 사용하여 기존 템플릿에서 새 문서를 만들 수 있습니다.

템플릿을 기반으로 문서 만들기

[파일] > [새로 만들기]를 선택합니다.
[새 문서] 대화 상자에서 [템플릿의 페이지] 범주를 선택합니다.
[사이트] 열에서 사용할 템플릿이 들어 있는 Dreamweaver 사이트를 선택한 다음 오른쪽에 있는 목록에서 템플릿을 선택합니다.
이 페이지의 기반이 되는 템플릿을 변경할 때마다 해당 페이지가 업데이트되지 않게 하려면 [템플릿 변경시 페이지 업데이트]의 선택을 해제합니다.
문서 유형, 인코딩 및 파일 확장명과 같은 기본 문서 환경 설정을 지정하려면 [환경 설정]을 클릭합니다.
다양한 페이지 디자인 내용을 다운로드할 수 있는 Dreamweaver Exchange를 열려면 [내용 내려받기]를 클릭합니다.
[만들기]를 클릭하고 [파일] > [저장]을 클릭하여 문서를 저장합니다.

에셋 패널에서 템플릿을 사용하여 문서 만들기

에셋 패널(창 > 에셋)이 열려 있지 않은 경우 엽니다.
[에셋] 패널의 왼쪽에 있는 [템플릿] 아이콘 을 클릭하여 현재 사이트의 템플릿 목록을 봅니다.

참고:

적용할 템플릿을 방금 만든 경우에는 [새로 고침] 버튼을 클릭해야 템플릿이 표시됩니다.
적용할 템플릿을 마우스 오른쪽 버튼으로 클릭(Windows)하거나 Control 키를 누른 채 클릭(Macintosh)한 다음 [템플릿에서 새로 만들기]를 선택합니다.

[문서] 창에서 문서가 열립니다.
문서를 저장합니다.

Dreamweaver 스타터 템플릿을 기반으로 페이지 만들기

Dreamweaver에는 전문적으로 개발된 모바일 애플리케이션용 여러 가지 스타터 파일이 함께 제공됩니다. 이러한 샘플 파일을 수정하여 사이트의 페이지를 디자인할 수 있습니다.

스타터 템플릿에 기반한 문서를 만들면 Dreamweaver에서 파일의 복사본이 만들기 때문에 스타터 파일을 덮어쓰지 않습니다.

새 문서 대화 상자에서 샘플 파일을 미리 보고 문서의 디자인 요소에 대한 간략한 설명을 확인할 수 있습니다.

파일 > 새로 만들기를 선택합니다.
새 문서 대화 상자에서 [스타터 템플릿] 범주를 선택합니다.

Dreamweaver의 스타터 템플릿

다른 옵션을 선택하면 오른쪽 창에서 샘플 페이지 세부 정보와 시각화를 볼 수 있습니다.
[만들기] 버튼을 클릭합니다.

문서 창에서 새 문서와 모든 관련 파일이 열립니다.
문서를 저장합니다(파일 > 저장).

다른 코딩 언어에 대한 새 코드 파일 만들기

Dreamweaver에서 여러 코딩 언어에 대한 코드 파일을 만들 수 있습니다.

Dreamweaver에서의 코딩 지원에 대한 자세한 내용은 Dreamweaver의 코딩 정보를 참조하십시오.

Dreamweaver에서 새 코드 파일을 만들려면 다음의 지침을 따릅니다.

파일 > 새 문서를 선택합니다.
문서 유형에서 만들려는 코드 파일을 선택합니다.
문서 유형 열에서 만들려는 문서의 종류(PHP 파일 등)를 선택합니다.

새 PHP 페이지 만들기
파일 유형에 따라 문서를 만들 때 추가 옵션을 사용할 수 있습니다.

예를 들어 PHP 파일을 만드는 경우에는 [문서 유형] 옵션과 일부 CSS 옵션을 선택할 수 있습니다.
만들기 버튼을 클릭합니다. 그 다음 문서를 저장합니다(파일 > 저장).

문서 저장 및 복구

문서의 현재 이름과 위치를 사용하여 문서를 저장하거나, 다른 이름과 위치를 사용하여 문서의 사본을 저장할 수 있습니다.

참고:

파일의 이름을 지정할 때 파일과 폴더 이름에 공백과 특수 문자는 사용하지 마십시오. 특히, 원격 서버에 올릴 파일 이름에는 특수 문자(예: é, ç, ¥)나 구두점(예: 콜론, 슬래시, 마침표)을 사용하면 안 됩니다. 대부분의 서버가 업로드 과정에서 이러한 문자를 다른 문자로 변경하기 때문에 특수 문자를 사용한 파일에 대한 링크가 끊어질 수 있습니다. 또한 파일 이름은 숫자로 시작하면 안 됩니다.

문서 저장하기

다음 중 하나를 수행합니다.
- 디스크에 있는 현재 버전을 덮어쓰고 변경한 내용을 저장하려면 [파일] > [저장]을 선택합니다.
- 파일을 다른 폴더에 저장하거나 다른 이름을 사용하여 저장하려면 [파일] > [다른 이름으로 저장]을 선택합니다.
다른 이름으로 저장 대화 상자가 나타나면 파일을 저장할 폴더를 찾습니다.
[파일 이름] 텍스트 상자에 파일 이름을 입력합니다.
[저장]을 클릭하여 PNG 파일을 저장합니다.

열린 페이지 모두 저장하기

[파일] > [모두 저장]을 선택합니다.
저장되지 않은 문서가 열려 있으면 저장되지 않은 각 문서에 대해 다른 이름으로 저장 대화 상자가 표시됩니다.

대화 상자가 나타나면 파일을 저장할 폴더를 찾습니다.
파일 이름 상자에 파일 이름을 입력하고 저장을 클릭합니다.

마지막으로 저장된 문서 버전으로 복구

파일 > 복구를 선택합니다.

변경한 내용을 취소하고 이전에 저장한 버전으로 돌아갈 것인지를 묻는 대화 상자가 표시됩니다.
이전 버전으로 돌아가려면 예를 클릭하고 변경 사항을 적용하려면 아니요를 클릭합니다.

참고:

문서를 저장하고 Dreamweaver를 종료한 다음 Dreamweaver를 다시 시작하면 이전 문서 버전으로 돌아갈 수 없습니다.

기본 문서 유형 및 인코딩 환경 설정

사이트에 있는 대부분의 페이지가 HTML, PHP, JavaScript와 같은 특정한 파일 유형인 경우 특정한 파일 유형의 새 문서를 자동으로 만드는 문서 환경 설정을 지정할 수 있습니다.

[편집] > [환경 설정](Windows) 또는 [Dreamweaver] > [환경 설정](Macintosh)을 선택합니다.

참고:

[새 문서] 대화 상자에서 [환경 설정] 버튼을 클릭하여 새 문서를 만들 때 새 문서 환경 설정을 지정할 수도 있습니다.
왼쪽의 [범주] 목록에서 [새 문서]를 클릭합니다.
필요한 경우 환경 설정을 지정 또는 변경한 다음 [확인]을 클릭하여 저장합니다.

기본 문서

작성한 페이지에 사용할 문서 유형을 선택합니다.

기본 확장명

작성한 새 HTML 페이지에 사용할 파일 확장명(.htm 또는 .html)을 지정합니다.

참고: 다른 파일 유형일 경우 이 옵션은 비활성화됩니다.

기본 문서 유형(DDT)

XHTML 문서 유형 정의(DTD) 중 하나를 선택하여 새 XHTML 호환 페이지를 만듭니다. 예를 들어 메뉴에서 [XHTML 1.0 변형]이나 [XHTML 1.0 준수]를 선택하면 HTML 문서가 XHTML 호환이 되도록 만들 수 있습니다.

기본 인코딩

새 페이지를 만들 때와 인코딩을 지정하지 않은 문서를 열 때 사용할 인코딩을 지정합니다.

문서 인코딩으로 [유니코드(UTF-8)]를 선택하면 UTF-8이 모든 문자를 안전하게 표시하므로 엔티티는 인코딩할 필요가 없습니다. 다른 문서 인코딩을 선택하면 일부 문자를 표시하기 위해 엔티티를 인코딩해야 할 수도 있습니다. 문자 엔티티에 대한 자세한 내용은 www.w3.org/TR/REC-html40/sgml/entities.html 사이트를 참조하십시오.

기본 인코딩으로 [유니코드(UTF-8)]를 선택할 경우 [유니코드 서명(BOM) 포함] 옵션을 선택하면 문서에 BOM(Byte Order Mark)이 포함됩니다.

BOM은 텍스트 파일 시작 부분에 위치한 2-4바이트이며 해당 파일을 유니코드로 규정하고 그 뒤에 따르는 바이트들의 바이트 순서를 규정합니다. UTF-8에는 바이트 순서가 없으므로 UTF-8 BOM 추가는 선택 사항입니다. UTF-16 및 UTF-32를 사용할 경우에는 필수 사항입니다.

유니코드 표준화 양식

[유니코드(UTF-8)]를 선택하는 경우 다음 옵션 중 하나를 기본 인코딩으로 선택합니다.

유니코드 표준화 양식에는 네 가지가 있습니다. 표준화 양식 C는 월드 와이드 웹(World Wide Web)의 문자 모델에서 가장 자주 사용되는 양식이기 때문에 가장 중요한 유니코드 표준화 양식입니다. Adobe에서는 완벽한 지원을 위해 다른 세 가지 유니코드 표준화 양식도 제공합니다.

Ctrl+N을 누르면 [새 문서] 대화 상자 표시

이 옵션의 선택을 해제(Macintosh의 경우 “Command+N”)하면 키 명령을 사용할 때 자동으로 기본 문서 유형의 문서가 작성됩니다.

유니코드에는 비슷하게 보이지만 서로 다른 방식으로 문서에 저장될 수 있는 문자가 있습니다. 예를 들어 “ë”(e-움라우트)는 하나의 문자인 “e-움라우트”를 의미하거나 “정규 라틴 e” + “움라우트 조합”이라는 두 개의 문자를 의미할 수도 있습니다. 유니코드 조합 문자는 이전 문자와 함께 사용되던 문자이므로 움라우트는 “라틴 e” 위에 표시됩니다. 이 두 양식은 시각적으로 동일하게 표기되지만 각 양식은 파일 안에 서로 다른 내용으로 저장됩니다.

표준화는 서로 다른 양식으로 저장될 수 있는 모든 문자가 모두 동일한 양식을 사용하여 저장되도록 하는 과정입니다. 즉, 문서에 있는 모든 “ë” 문자가 하나의 “e-움라우트”나 “e” + “움라우트 조합”으로 저장되며 하나의 문서 안에 두 개의 양식으로 저장되지 않습니다.

유니코드 표준화와 사용 가능한 특정 양식에 대한 자세한 내용은 유니코드 웹 사이트(www.unicode.org/reports/tr15)를 참조하십시오.

기존 문서 열기 및 편집

Dreamweaver에서 작성했는지 여부에 상관없이 기존 웹 페이지나 텍스트 기반 문서를 열어서 디자인 뷰나 코드 보기에서 편집할 수 있습니다.

열려는 문서가 HTML 문서로 저장된 Microsoft Word 파일인 경우에는 [도구] > [Word HTML 정리]를 사용하여 Word에서 HTML 파일에 삽입한 외부 마크업 태그를 제거해야 합니다.

Microsoft Word에서 생성하지 않은 HTML이나 XHTML을 정리하려면 [도구] > [HTML 정리]를 사용합니다. 자세한 내용은 Microsoft Word HTML 파일 정리를 참조하십시오.

JavaScript 파일, XML 파일, CSS 스타일 시트, 워드 프로세서나 텍스트 편집기로 저장한 텍스트 파일과 같은 HTML 이외의 텍스트 파일도 열 수 있습니다.

[파일] > [열기]를 선택합니다.

참고:

[파일] 패널을 사용하여 파일을 열 수도 있습니다.
열려는 파일을 찾아 선택합니다.

참고:

아직 파일을 열지 않은 경우 열어서 편집하려는 파일을 다른 위치에서 여는 것 보다 Dreamweaver 사이트에서 정리하는 것이 좋습니다. Dreamweaver 사이트에 대한 자세한 내용은 Dreamweaver 사이트 정보를 참조하십시오.
[열기]를 클릭합니다.

[문서] 창에서 문서가 열립니다. JavaScript, 텍스트, CSS 스타일 시트는 기본적으로 코드 보기에서 열립니다. Dreamweaver에서 작업하는 동안 문서를 업데이트한 다음 변경 내용을 파일에 저장할 수 있습니다.

[관련 파일] 툴바에서 관련 파일 열기

다음 중 하나를 수행합니다.

문서의 맨 위에 있는 [관련 파일] 툴바에서 열려는 관련 파일의 파일 이름을 클릭합니다.
[관련 파일] 툴바에서 열려는 관련 파일의 파일 이름을 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴에서 [별도 파일로 열기]를 선택합니다. 이 방법으로 관련 파일을 열었을 때 기본 문서는 동시에 표시되지 않습니다.

코드 탐색기에서 관련 파일 열기

관련 파일에 영향을 받는 줄 또는 영역에 삽입 포인터를 놓습니다.
[코드 탐색기] 표시기가 나타날 때까지 기다린 다음 표시기를 클릭하여 [코드 탐색기]를 엽니다.
[코드 탐색기]의 항목에 커서를 올려 놓아 세부 정보를 확인합니다. 예를 들어 특정 CSS 색상 속성을 변경하려고 하지만 어느 규칙에 있는지 모르는 경우 [코드 탐색기]에서 사용할 수 있는 규칙에 커서를 올려 놓아 속성을 찾을 수 있습니다.
사용할 항목을 클릭하여 해당 관련 파일을 엽니다.

기본 문서의 소스 코드로 돌아오기

[관련 파일] 툴바의 [소스 코드] 버튼을 클릭합니다.

동적 관련 파일 열기

동적 관련 파일은 관련 파일 툴바의 동적 페이지와 관련된 파일을 볼 수 있어 동적 페이지 관련 파일 기능을 확장해 줍니다. 특히 [동적 관련 파일] 기능으로 WordPress, Drupal 및 Joomla! 등과 같이 흔히 사용되는 오픈 소스 PHP CMS(내용 관리 시스템) 프레임워크를 위한 런타임 코드의 생성이 필요한 많은 수의 동적 파일을 볼 수 있습니다.

[동적 관련 파일] 기능을 사용하려면 WordPress, Drupal 또는 Joomla!가 실행 중인 로컬 또는 원격 PHP 애플리케이션 서버에 액세스해야 합니다. 페이지를 테스트하는 일반적인 방법은 localhost PHP 애플리케이션 서버를 설정하고 페이지를 로컬에서 테스트하는 것입니다.

페이지를 테스트하기 전 다음 단계를 수행해야 합니다.

Dreamweaver 사이트를 설치하고 [사이트 설정] 대화 상자의 [웹 URL]을 입력하였는지 확인합니다.
PHP 애플리케이션 서버를 설치합니다.

참고: Dreamweaver에서 동적 관련 파일로 작업하기 전에 서버가 실행되어야 합니다.
WordPress, Drupal 또는 Joomla!를 애플리케이션 서버에 설치합니다. 자세한 내용은 다음을 참조하십시오.
Dreamweaver에서 CMS 파일을 다운로드하고 편집할 로컬 폴더를 정의합니다.
원격 및 테스트 폴더로 WordPress, Drupal 또는 Joomla 파일이 설치된 위치를 정의합니다.
원격 폴더에서 CMS 파일을 다운로드(내려받기)합니다.

동적 관련 파일 환경 설정

[동적 관련 파일]과 연관된 페이지를 열 때 Dreamweaver는 자동으로 파일을 검색하거나 수동으로 파일을 검색할 수 있게 해 줍니다(페이지 위의 알림 표시줄 클릭). 기본 설정은 수동 검색입니다.

[편집] > [환경 설정](Windows) 또는 [Dreamweaver] > [환경 설정](Macintosh OS)을 선택합니다.
[일반] 범주에서 [관련 파일 활성화] 옵션이 선택되었는지 확인합니다.
[동적 관련 파일] 팝업 메뉴에서 [수동] 또는 [자동]을 선택합니다. [비활성화]를 선택하여 전체 검색을 비활성화할 수도 있습니다.

동적 관련 파일 검색

예를 들어 WordPress, Drupal 또는 Joomla! 사이트의 사이트 루트 index.php 페이지와 같이 [동적 관련 파일]과 관련된 페이지를 엽니다.
[동적 관련 파일]의 검색이 수동으로(기본) 설정되어 있는 경우 [문서] 창의 페이지 위에 나타나는 알림 표시줄의 [검색] 링크를 클릭합니다.

[동적 관련 파일]의 검색이 자동으로 활성화되어 있는 경우 [동적 관련 파일]의 목록이 [관련 파일] 툴바에 나타납니다.

[관련 파일] 툴바의 [관련] 및 [동적 관련 파일]의 순서는 다음과 같습니다.

정적 관련 파일(동적 처리가 필요하지 않은 관련 파일)
파일을 포함한 동적 경로 서버에 첨부된 외부 관련 파일(.css 및 .js 파일)
파일(.php, .inc 및 .module 파일)을 포함한 동적 경로 서버

Microsoft Word HTML 파일 정리

Microsoft Word(Microsoft Word 97 이상)에서 HTML 파일로 저장한 문서를 열고 [도구] > [Word HTML 정리]를 사용하여 Word에서 생성한 외부 HTML 코드를 제거할 수 있습니다.

Dreamweaver에서 제거하는 코드는 주로 Word에서 문서를 표시하고 서식 지정하는 데 사용되며 HTML 파일을 표시하는 데에는 실제로 필요하지 않은 코드입니다.

HTML 파일을 정리하면 HTML 문서는 Word에서 다시 열지 못할 수도 있으므로 원본 Word(.doc) 파일의 복사본을 백업용으로 보관하십시오.

참고:

Microsoft Word에서 생성하지 않은 HTML이나 XHTML을 정리하려면 [도구] > [HTML 정리] 명령을 사용합니다.

Microsoft Word 문서를 HTML 파일로 저장합니다.

참고:

Windows의 경우 Word에서 파일을 닫아 공유 위반을 방지합니다.
Dreamweaver에서 HTML 파일을 엽니다.

Word에서 생성한 HTML 코드를 보려면 코드 보기로 전환합니다(보기 > 코드).
도구 > Word HTML 정리를 선택합니다.

참고:

Dreamweaver에서 파일을 저장하는 데 사용한 Word 버전을 확인할 수 없는 경우 팝업 메뉴에서 올바른 버전을 선택합니다.
정리 옵션을 선택하거나 선택 취소합니다. 사용자가 입력한 환경 설정이 기본 정리 설정으로 저장됩니다.

Dreamweaver에서는 정리 설정을 HTML 문서에 적용하고 대화 상자에서 해당 옵션의 선택이 취소되지 않은 경우 변경 내용에 대한 로그를 표시합니다.

Microsoft Word HTML 정리 옵션

모든 Word 전용 마크업 제거

모든 Microsoft Word 전용 HTML을 제거합니다. 여기에는 HTML태그의 XML, 문서 헤드 부분의 Word 사용자 정의 메타데이터와 링크 태그, Word XML 마크업, 조건 태그와 내용, 스타일의 빈 단락과 여백 등이 포함됩니다. 이러한 옵션은 [고급] 탭에서 개별적으로 선택할 수 있습니다.

CSS 정리

모든 Word 전용 CSS를 제거합니다. 여기에는 가능한 경우(부모 스타일에 동일한 스타일 속성이 있는 경우) 인라인 CSS 스타일, “mso”로 시작하는 스타일 속성, 비CSS 스타일 선언, 표의 CSS 스타일 속성, 헤드에 있는 모든 미사용 스타일 정의 등이 포함됩니다. 이 옵션은 [고급] 탭에서 추가로 사용자 정의할 수 있습니다.

<font> 태그 정리

HTML 태그를 제거하여 기본 본문 텍스트를 크기 2의 HTML 텍스트로 변환합니다.

잘못 중첩된 태그 수정

Word에서 단락과 머리글(블록 수준) 태그 외부에 삽입한 글꼴 마크업 태그를 제거합니다.

소스 서식 적용

HTML 서식 환경 설정과 SourceFormat.txt에서 지정한 소스 서식 옵션을 문서에 적용합니다.

완료 시 로그 보기

정리가 완료됨과 동시에 문서에서 변경한 사항에 대한 세부 정보가 들어 있는 경고 상자를 표시합니다.
모든 Word 전용 마크업 제거 및 CSS 정리 옵션을 추가로 사용자 정의하려면 확인 또는 고급 탭을 클릭한 다음 [확인]을 클릭합니다.

쉽고 빠르게 지원 받기

신규 사용자이신가요?

Adobe MAX
크리에이티비티 컨퍼런스

10월 14~16일 마이애미 비치 및 온라인

지금 등록하기

Adobe MAX

크리에이티비티 컨퍼런스

10월 14~16일 마이애미 비치 및 온라인

지금 등록하기

Adobe MAX
크리에이티비티 컨퍼런스

10월 14~16일 마이애미 비치 및 온라인

지금 등록하기

Adobe MAX

크리에이티비티 컨퍼런스

10월 14~16일 마이애미 비치 및 온라인

지금 등록하기

파일 작성 및 열기

Dreamweaver 파일 유형

새 문서 대화 상자

빈 페이지를 사용하여 HTML 레이아웃 만들기

빈 템플릿 만들기

템플릿을 기반으로 페이지 만들기

템플릿을 기반으로 문서 만들기

에셋 패널에서 템플릿을 사용하여 문서 만들기

Dreamweaver 스타터 템플릿을 기반으로 페이지 만들기

다른 코딩 언어에 대한 새 코드 파일 만들기

문서 저장 및 복구

문서 저장하기

열린 페이지 모두 저장하기

마지막으로 저장된 문서 버전으로 복구

기본 문서 유형 및 인코딩 환경 설정

기존 문서 열기 및 편집

관련 파일 열기

[관련 파일] 툴바에서 관련 파일 열기

코드 탐색기에서 관련 파일 열기

기본 문서의 소스 코드로 돌아오기

관련 파일 표시 변경

관련 파일 비활성화

동적 관련 파일 열기

동적 관련 파일 환경 설정

동적 관련 파일 검색

관련 파일 필터링

Microsoft Word HTML 파일 정리

관련 항목 더 보기

쉽고 빠르게 지원 받기

커뮤니티에 질문하기

문의