Dreamweaver 온보딩

 

 

 

Dreamweaver 온보딩
Dreamweaver를 설치한 후 애플리케이션을 처음 실행할 때 필요에 맞춰 Dreamweaver 작업 영역을 개인화할 수 있도록 세 가지 질문으로 구성된 빠른 시작 메뉴가 화면에 나타납니다.

이 질문에 대한 답변을 기반으로 개발자 작업 영역(최소한의 코드 집중식 레이아웃) 또는 표준 작업 영역(코드 작성 시 시각적 도구 및 인앱 미리보기를 제공하는 분할 레이아웃)에서 Dreamweaver가 열립니다. 

작업 영역을 선택한 후 사용하기 편한 색상 테마를 선택합니다. 이제 시작할 수 있습니다.

참고:

[편집] > [환경 설정] 대화 상자를 사용하여 이 작업 영역의 환경 설정을 언제든지 변경할 수 있습니다.

개선된 홈 화면
Dreamweaver의 홈 화면을 통해 최근에 사용한 파일, 파일 유형 및 스타터 템플릿에 빠르게 액세스할 수 있습니다.

구독 상태에 따라 시작 작업 영역에 사용자의 요구에 맞게 조정된 내용이 표시될 수도 있습니다.

실행 시 또는 열어 놓은 문서가 없을 때 Dreamweaver에 홈 화면이 표시됩니다.

Dreamweaver의 시작 작업 영역
Dreamweaver의 시작 작업 영역
Dreamweaver 시작 환경의 옵션
학습

이 화면에서 바로 Dreamweaver 튜토리얼에 액세스하려면 [학습]을 클릭합니다.
빠른 시작

표시된 파일 유형 중 하나를 클릭하여 Dreamweaver에서 문서 만들기를 시작합니다.
시작 템플릿

Dreamweaver의 패키지로 제공되는 스타터 템플릿 중 하나를 엽니다.
홈

시작 화면으로 돌아가려면 [홈]을 클릭합니다. 
시작 화면에서 최근에 작업한 파일을 조회할 수 있습니다. 최근에 작업한 파일이 없는 경우 이 탭은 비어 있습니다.

이 화면의 오른쪽 상단에 있는 검색 아이콘을 사용하여 검색 기능을 이용할 수도 있습니다. 검색어를 입력하면 애플리케이션이 해당 검색어와 관련이 있는 최근 파일, Creative Cloud 에셋, 도움말 링크 및 스톡 이미지를 표시해 줍니다.

참고:

이 시작 화면이 활성화되고, 기본적으로 열립니다. 이 시작 화면 필요하지 않은 경우 [환경 설정] > [일반] 대화 상자에서 [시작 화면 표시]를 선택 취소하십시오.
새로 만들기를 클릭하여 Dreamweaver 파일을 새로 제작할 수 있습니다. 시스템에 이미 파일이 있는 경우에는 열기를 클릭합니다. Dreamweaver에서 문서 만들기 및 열기에 대한 자세한 내용은 파일 만들기 및 열기를 참조하십시오.

작업 영역 개요
Dreamweaver 작업 영역에서는 문서와 오브젝트 속성을 볼 수 있습니다. 또한 대부분의 일반 작업이 툴바에 배치되어 있으므로 빠르게 문서의 변경 작업을 수행할 수 있습니다.

Dreamweaver 작업 영역(CC)
Dreamweaver 작업 영역

A. 애플리케이션 표시줄 B. 문서 툴바 C. 문서 창 D. 작업 영역 전환기 E. 패널 F. 코드 보기 G. 상태 표시줄 H. 태그 선택기 I. 라이브 뷰 J. 툴바 
작업 영역 요소 개요
작업 영역에는 다음과 같은 요소가 포함됩니다.

애플리케이션 표시줄

애플리케이션 창 위쪽에는 작업 영역 전환기, 메뉴(Windows만 해당) 및 기타 애플리케이션 컨트롤이 있습니다.
문서 툴바

문서 창에 대한 다양한 보기 옵션(디자인 뷰, 라이브 뷰 및 코드 보기 등)을 제공하는 버튼이 있습니다.
표준 툴바

표준 툴바를 표시하려면 창 > 툴바 > 표준을 선택합니다. 툴바에는 새로 만들기, 열기, 저장, 모두 저장, 코드 인쇄, 잘라내기, 복사, 붙여넣기, 실행 취소, 재실행 등 파일 및 편집 메뉴에 있는 일반적인 작업을 위한 버튼이 포함되어 있습니다.
툴바

애플리케이션 창 왼쪽에는 보기 전용 버튼이 있습니다.
문서 창

사용자가 만들고 편집하는 현재 문서가 표시됩니다.
속성 관리자

선택한 오브젝트나 텍스트의 다양한 속성을 보고 변경할 수 있습니다. 속성은 오브젝트마다 다양합니다.
태그 선택기

문서 창 하단의 상태 표시줄에 있습니다. 현재 선택 항목을 둘러싸고 있는 태그들의 계층 구조를 표시합니다. 계층 구조에 있는 태그를 클릭하면 해당 태그 및 그 내용이 선택됩니다.
패널

작업 모니터링 및 수정을 지원합니다. 삽입 패널, CSS Designer 패널 및 파일 패널을 예로 들 수 있습니다. 패널을 펼치려면 해당 탭을 더블 클릭합니다.
Extract 패널

Creative Cloud에서 PSD 파일을 업로드하고 볼 수 있습니다. 이 패널을 사용하여 PSD 구성 요소에서 CSS, 텍스트, 이미지, 글꼴, 색상, 그레이디언트, PSD 및 치수 등을 추출하여 문서에 삽입할 수 있습니다.
삽입 패널

이미지, 표, 미디어 요소 등 다양한 유형의 오브젝트를 문서에 삽입할 때 사용하는 버튼이 있습니다. 각 오브젝트는 삽입할 때 다양한 속성을 설정할 수 있는 HTML 코드입니다. 예를 들어 삽입 패널의 [표] 버튼을 클릭하여 표를 삽입할 수 있습니다. 삽입 패널 대신 삽입 메뉴를 사용하여 오브젝트를 삽입할 수도 있습니다.
파일 패널

Dreamweaver 사이트에 포함된 파일이든 원격 서버에 있는 파일이든 상관없이 파일과 폴더를 관리할 수 있습니다. 파일 패널에서도 로컬 디스크에 있는 모든 파일에 액세스할 수 있습니다. 자세한 내용은 파일 및 폴더 관리를 참조하십시오.
스니펫 패널

Dreamweaver의 다른 여러 웹 페이지, 웹 사이트 및 설치에서 코드 스니펫을 저장 및 다시 사용할 수 있습니다(동기화 설정 사용). 자세한 내용은 스니펫으로 코드 재사용을 참조하십시오.
CSS Designer 패널

미디어 쿼리와 함께 CSS 스타일과 파일을 “시각적”으로 생성하고 속성을 설정할 수 있는 CSS 속성 관리자입니다.
참고:

Dreamweaver에는 다양한 패널, 관리자 및 창이 있습니다. 패널, 관리자 및 창을 열려면 윈도우 메뉴를 사용합니다.

문서 창 개요
문서 창에는 현재 문서가 표시됩니다. 문서의 보기를 전환하려면 문서 툴바에서 보기 옵션을 사용합니다.

[보기] 메뉴에서 [보기] 옵션을 사용하여 보기를 전환할 수도 있습니다.

라이브 뷰

브라우저에 있는 문서를 사실적으로 표현할 수 있으며 브라우저에서와 같이 문서와 상호 작용할 수 있습니다. 라이브 뷰에서 HTML 요소를 직접 편집할 수 있으며 같은 보기에서 변경 사항을 곧바로 미리 볼 수 있습니다. 라이브 뷰에서 편집하는 방법에 대한 자세한 내용은 라이브 뷰에서 HTML 요소 편집을 참조하십시오.
디자인 뷰

시각적 페이지 레이아웃, 시각적 편집 및 빠른 애플리케이션 개발을 위한 디자인 환경입니다. Dreamweaver의 디자인 뷰에서는 브라우저에 페이지를 표시할 때와 비슷하게 문서를 표시하고 모든 편집 작업을 할 수 있습니다.
코드 보기

HTML, JavaScript 및 기타 모든 종류의 코드를 작성하고 편집하기 위한 하드 코딩 환경입니다.
코드 - 코드

코드 보기의 분할 버전으로, 여기서는 스크롤을 통해 문서의 여러 섹션을 동시에 사용할 수 있습니다.
코드 - 라이브

동일한 문서의 코드 보기와 라이브 뷰를 모두 하나의 창에서 볼 수 있습니다.
코드 - 디자인

동일한 문서의 코드 보기와 디자인 뷰를 모두 하나의 창에서 볼 수 있습니다.
라이브 코드

브라우저가 페이지를 실행할 때 사용하는 실제 코드를 표시하고 라이브 보기에서 페이지와 상호 작용할 때 동적으로 변경할 수 있습니다.
문서 창이 최대화(기본값)되면 열려 있는 모든 문서의 파일 이름을 보여 주는 탭이 문서 창 위쪽에 나타납니다. 파일에 아직 저장되지 않은 변경 내용이 있는 경우 파일 이름 뒤에 별표가 표시됩니다.

또한 문서의 탭 아래(또는 별도의 창에서 문서를 보는 경우 문서의 제목 표시줄 아래)에 관련 파일 툴바도 표시됩니다. 관련 문서란 CSS 파일 또는 JavaScript 파일과 같이 현재 파일과 관련이 있는 문서입니다. 문서 창에서 이런 관련된 파일 중 하나를 열려면 관련 파일 툴바에서 해당 파일 이름을 클릭합니다.

보기 간 전환
다른 보기 사이를 빠르게 전환하려면 문서 툴바를 사용합니다. 자세한 내용은 문서 툴바 개요를 참조하십시오.

보기 메뉴에서 다음 옵션을 사용하여 보기를 전환할 수도 있습니다.

코드 보기 전용: 코드 선택
분할 보기: 분할을 선택하고 분할 옵션 중 하나를 선택합니다.
보기 모드: 라이브 뷰와 디자인 뷰 사이 전환
보기 전환: 현재의 보기 모드에서 다른 보기 모드로 전환합니다.
보기 메뉴 옵션을 사용하여 보기 전환
보기 메뉴 옵션을 사용하여 보기 전환

겹쳐 놓기, 바둑판식 또는 문서 창 정렬
한 번에 여러 문서를 열 경우 겹쳐 놓기나 바둑판식으로 배열할 수 있습니다.

문서 창을 겹쳐 놓으려면 [윈도우] > [배열] > [겹쳐 놓기] 를 선택합니다.

문서를 바둑판식으로 배열하려면:

(Windows) [윈도우] > [배열] > [가로 바둑판식] 또는 [세로 바둑판식]을 선택합니다.
(Macintosh) [윈도우] > [배열] > [바둑판식]을 선택합니다.
여러 개의 파일을 열면 문서 창에 탭이 지정됩니다. 탭이 지정된 문서 창의 순서를 재정렬하려면 창의 탭을 그룹의 새로운 위치로 드래그합니다.

문서 창 크기 조절
상태 표시줄에는 문서 창의 현재 치수가 픽셀 단위로 표시됩니다. 페이지가 특정 크기에서 최상의 상태로 표시되도록 디자인하려면 문서 창을 미리 정의된 크기 중 하나로 조정하거나, 미리 정의된 크기를 편집하거나, 크기를 만들면 됩니다.

디자인 뷰 또는 라이브 뷰에서 페이지의 보기 크기를 변경할 때는 보기 크기의 치수만 변경됩니다. 문서 크기는 변경되지 않습니다.

미리 정의된 크기 및 사용자 정의 크기 외에도 미디어 쿼리에 지정된 크기도 나열되어 있습니다. 미디어 쿼리에 해당하는 크기를 선택하면 미디어 쿼리를 사용하여 페이지가 표시됩니다. 모바일 디바이스를 잡는 방향에 따라 페이지 레이아웃이 변경되는 디바이스에 대해 페이지 미리보기 방향을 변경할 수 있습니다.

문서 창 크기를 조절하려면 문서 창 아래쪽의 [창 크기] 팝업 메뉴에 있는 크기 중 하나를 선택합니다.

문서 크기 조절 옵션
문서 크기 조절 옵션

표시된 창 크기는 브라우저 창에서 테두리를 제외한 내부 치수를 나타냅니다. 모니터 크기나 모바일 디바이스는 오른쪽에 표시됩니다.