Dreamweaver 작업 영역

Dreamweaver 온보딩

Dreamweaver를 설치한 후 애플리케이션을 처음 실행하면 화면에 [QuickStart] 메뉴가 나타나며, 필요에 따라 Dreamweaver 작업 영역을 개인화하는 데 도움이 되는 세 가지 질문을 합니다.

이러한 질문에 대한 응답을 바탕으로 Dreamweaver는 Developer 작업 영역(최소한의 코드 중심 레이아웃) 또는 Standard 작업 영역(시각적 도구와 코딩하는 동안의 인앱 미리보기를 제공하는 분할 레이아웃)에서 열립니다. 

작업 영역을 선택한 후 사용하기 편한 색상 테마를 선택합니다. 그런 다음 시작하세요.

개선된 홈 화면

Dreamweaver의 홈 화면에서는 최근에 사용한 파일, 파일 유형 및 시작 템플릿에 빠르게 액세스할 수 있습니다.

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

Dreamweaver는 실행 시 또는 열린 문서가 없을 때 홈 화면을 표시합니다.

Dreamweaver 시작 환경의 옵션

[학습]을 클릭하면 이 화면에서 Dreamweaver 튜토리얼에 즉시 액세스할 수 있습니다.

표시된 파일 유형 중 아무거나 클릭하여 Dreamweaver에서 문서 만들기를 시작하세요.

Dreamweaver와 함께 패키지된 시작 템플릿 중 하나를 여세요. 

[홈]을 클릭하여 시작 화면으로 돌아가세요. 

시작 화면에서 최근에 작업한 파일을 조회할 수 있습니다. 최근 파일이 없으면 이 탭은 비어 있습니다.

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

새로 만들기를 클릭하여 Dreamweaver 파일을 새로 제작할 수 있습니다. 시스템에 이미 파일이 있는 경우에는 열기를 클릭합니다. Dreamweaver에서 문서 만들기 및 열기에 대한 자세한 내용은 파일 만들기 및 열기를 참조하세요.

작업 영역 개요

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

작업 영역 요소 개요

작업 영역에는 다음 요소가 포함됩니다:

애플리케이션 창 상단에 있으며 작업 영역 전환기, 메뉴(Windows만 해당) 및 기타 애플리케이션 컨트롤을 포함합니다.

문서 창의 다양한 보기(디자인 보기, 라이브 보기, 코드 보기 등)에 대한 옵션을 제공하는 버튼을 포함합니다.

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

애플리케이션 창의 왼쪽에 있으며 보기별 버튼을 포함합니다.

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

선택한 오브젝트나 텍스트의 다양한 속성을 보고 변경할 수 있습니다. 객체마다 속성이 다릅니다.

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

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

Creative Cloud에서 PSD 파일을 업로드하고 볼 수 있습니다. 이 패널을 사용하여 PSD 컴포지션에서 CSS, 텍스트, 이미지, 글꼴, 색상, 그레이디언트 및 측정값을 문서로 추출할 수 있습니다.

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

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

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

"시각적으로" CSS 스타일, 파일을 만들고 미디어 쿼리와 함께 속성을 설정할 수 있는 CSS 속성 관리자입니다.

문서 창 개요

문서 창에는 현재 문서가 표시됩니다. 문서의 보기를 전환하려면 문서 도구 모음의 보기 옵션을 사용하세요. 

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

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

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

HTML, JavaScript 및 기타 모든 종류의 코드를 작성하고 편집할 수 있는 직접 코딩 환경입니다.

Code 보기의 분할 버전으로, 스크롤하여 문서의 다른 섹션을 동시에 작업할 수 있습니다. 

단일 창에서 동일한 문서에 대해 코드 보기와 라이브 보기를 모두 볼 수 있습니다.

단일 창에서 동일한 문서에 대해 Code 보기와 Design 보기를 모두 볼 수 있습니다.

브라우저가 페이지를 실행하는 데 사용하는 실제 코드를 표시하며, Live 보기에서 페이지와 상호 작용할 때 동적으로 변경될 수 있습니다.

문서 창이 최대화(기본값)되면 열려 있는 모든 문서의 파일 이름을 보여 주는 탭이 문서 창 위쪽에 나타납니다. 아직 저장하지 않은 변경 사항이 있는 경우 Dreamweaver에서 파일명 뒤에 별표를 표시합니다.

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

보기 간 전환

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

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

• 코드 보기만: 코드 선택
• 분할 보기: 분할을 선택한 후 분할 옵션 중 하나 선택
• 보기 모드: 라이브 보기와 디자인 보기 간 전환
• 보기 전환: 한 보기에서 다른 보기로 전환합니다.

겹쳐 놓기, 바둑판식 또는 문서 창 정렬

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

문서 창을 계단식으로 배열하려면: [창] > [정렬] > [계단식]을 선택하십시오.

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

• (Windows) [창] > [정렬] > [가로로 바둑판식 배열] 또는 [세로로 바둑판식 배열]을 선택합니다.
• (Macintosh) [창] > [정렬] > [바둑판식 배열]을 선택합니다.

여러 개의 파일을 열면 [문서] 창에 탭이 지정됩니다. 탭이 지정된 [문서] 창의 순서를 재정렬하려면 창의 탭을 그룹의 새로운 위치로 드래그합니다.

문서 창 크기 조절

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

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

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

문서 창의 크기를 조정하려면 문서 창 하단의 창 크기 팝업 메뉴에서 크기 중 하나를 선택하십시오.

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

창 크기 팝업 메뉴에 표시된 값 변경

창 크기 팝업 메뉴에 새 크기 추가

문서 툴바 개요

문서 툴바는 문서의 다른 보기를 재빨리 전환할 수 있는 버튼을 포함하고 있습니다. 툴바에는 문서를 보거나 로컬 사이트와 원격 사이트 간에 문서를 전송하기 위한 몇 가지 일반적인 명령 및 옵션도 들어 있습니다.

문서 툴바에는 다음 옵션이 표시됩니다.

[문서] 창에 코드 보기만 표시됩니다.

문서 창이 코드와 라이브/디자인 뷰 사이에서 분할됩니다. 디자인 보기 옵션은 유동 격자 문서에서 사용할 수 없습니다.

변경 작업을 수행하면 변경 내용을 보여주기 위해 실시간으로 HTML5 프로젝트 및 업데이트를 정확하게 렌더링하는 대화형 미리보기입니다. 또한 라이브 뷰에서 HTML 요소를 편집할 수 있습니다. 라이브 뷰 옵션 옆에 있는 드롭다운 목록을 사용하여 라이브 뷰와 디자인 뷰 사이를 전환할 수 있습니다. 이 드롭다운 목록은 유동 격자 문서에서 사용할 수 없습니다.

사용자가 웹 브라우저에서 보는 방식으로 문서를 표시합니다. 

표준 툴바 개요

표준 툴바를 표시하려면 창 > 툴바 > 표준을 선택합니다. 도구 모음에는 파일 및 편집 메뉴의 공통 작업 버튼이 있습니다: 새로 만들기, 열기, 저장, 모두 저장, 코드 인쇄, 잘라내기, 복사, 붙여넣기, 실행 취소, 다시 실행.

브라우저 내비게이션 툴바 개요

이제 브라우저 내비게이션 툴바가 라이브 뷰에서 활성화(윈도우->툴바->표준을 선택하여 활성화한 경우)되었으며, 이를 통해 문서 창에서 현재 보고 있는 페이지의 위치를 확인할 수 있습니다. 라이브 보기는 일반 브라우저와 같은 역할을 합니다. 따라서 로컬 사이트 외부에 있는 사이트(예: http://www.adobe.com)를 검색하는 경우 문서 창에 페이지가 로드됩니다.

기본적으로 링크는 라이브 보기에서 활성화되지 않습니다. 링크가 활성화되어 있지 않으면 다른 페이지로 가져오지 않고 문서 창에서 링크 텍스트를 선택하거나 클릭할 수 있습니다. Live 보기에서 링크를 테스트하려면 [보기] > [Live 보기 옵션] > 링크 따라가기(Ctrl+클릭 링크) 또는 링크 계속 따라가기를 선택하여 일회성 클릭 또는 연속 클릭을 활성화할 수 있습니다.

툴바 개요

툴바는 문서 창의 왼쪽에 수직으로 나타나며 모든 보기 옵션, 즉 코드 보기, 라이브 뷰 및 디자인 뷰에서 볼 수 있습니다. 툴바의 버튼은 보기 전용이며 작업 중인 내용에 대한 보기에 적용 가능할 때만 나타납니다. 예를 들어, Live 보기에서 작업 중이라면 소스 코드 서식과 같은 코드 보기 전용 옵션은 표시되지 않습니다. 

툴바 맞춤 설정

필요에 따라 메뉴 옵션을 추가하거나 원하지 않는 메뉴 옵션을 제거하여 이 도구 모음을 사용자 정의할 수 있습니다.

툴바를 맞춤화하려면 다음 단계를 따르십시오.

기본 도구 모음 버튼을 복원하려면 도구 모음 사용자 정의 대화 상자에서 [기본값 복원]을 클릭합니다.

상태 표시줄 개요

문서 창의 아래쪽에 있는 상태 표시줄에는 현재 만들고 있는 문서에 관한 추가 정보가 제공됩니다.

태그 선택기

현재 선택 항목을 둘러싸고 있는 태그들의 계층 구조를 표시합니다. 계층 구조에 있는 태그를 클릭하면 해당 태그 및 그 내용이 선택됩니다. <body>를 클릭하면 문서의 본문 전체를 선택할 수 있습니다. 태그 선택기에서 태그의 class 또는 ID 속성을 설정하려면 태그를 마우스 오른쪽 버튼으로 클릭(Windows)하거나 Control 키를 누른 상태에서 클릭(Macintosh)한 후 컨텍스트 메뉴에서 클래스 또는 ID를 선택합니다.

출력 패널

이 아이콘을 클릭하면 문서의 코딩 오류를 보여주는 출력 패널이 표시됩니다.

코드 색상 표시

(코드 보기에서만 사용 가능)

이 팝업 메뉴에서 코딩 언어를 선택하여 프로그래밍 언어에 따라 코드 색상을 변경할 수 있습니다.

전환 삽입 및 덮어쓰기

(코드 보기에서만 사용 가능)

코드 보기에서 작업할 때 삽입 모드와 덮어쓰기 모드 간에 전환할 수 있습니다.

행과 열 번호

(코드 보기에서만 이용할 수 있습니다.)

커서가 위치한 줄 번호와 열 번호를 표시합니다.

속성 관리자 개요

속성 관리자([창] > [속성])를 사용하면 텍스트나 삽입된 개체와 같이 현재 선택된 페이지 요소의 가장 일반적인 속성을 검사하고 편집할 수 있습니다.

속성 관리자의 내용은 선택한 요소에 따라 다릅니다. 예를 들어 페이지에서 이미지를 선택하면 속성 관리자는 이미지의 속성(파일 경로, 폭과 높이, 경계 등)을 보여 줍니다.

속성 관리자는 기본적으로 작업 영역의 아래쪽 가장자리에 있지만 작업 영역에서 결합을 해제하고 부동 패널로 만들 수 있습니다.

특정 속성 관리자에 대한 도움말에 액세스하려면 속성 관리자의 오른쪽 위 모서리에서 [도움말] 버튼을 클릭하거나 속성 관리자의 [옵션] 메뉴에서 [도움말]을 선택하십시오.

페이지 요소의 속성 보기 및 변경

컨텍스트 메뉴

컨텍스트 메뉴는 작업 중인 오브젝트나 창과 관련된 유용한 명령 및 속성에 대한 편리한 액세스를 제공합니다. 컨텍스트 메뉴에는 현재 선택 항목에 적용 가능한 명령만 나열됩니다.

컨텍스트 메뉴를 열려면 코드 보기에서 코드 섹션을 마우스 오른쪽 버튼으로 클릭(Windows)하거나 Ctrl+클릭(Mac)하거나, Live 또는 디자인 보기에서 개체를 클릭합니다.

Dreamweaver에서 채널 재정렬

요구 사항에 따라 모든 Dreamweaver 패널의 배치와 모양을 사용자 정의할 수 있습니다.

패널 고정 및 고정 해제

• 패널을 고정시키려면 해당 탭을 도킹 내, 위쪽, 아래쪽 또는 다른 패널 사이로 드래그합니다.
• 패널 그룹을 고정시키려면 해당 제목 표시줄(탭 위쪽의 단색 빈 막대)을 도킹으로 드래그합니다.
• 패널 또는 패널 그룹을 제거하려면 해당 탭 또는 제목 표시줄을 도킹 밖으로 드래그합니다. 다른 도킹으로 드래그하거나 부동 상태로 만들 수 있습니다.

패널 이동

패널을 이동하면 패널을 이동할 수 있는 영역인 밝은 파란색 놓기 영역이 나타납니다. 예를 들어 패널을 다른 패널의 위나 아래에 있는 좁은 파란색 놓기 영역으로 드래그하여 도킹의 위나 아래로 이동할 수 있습니다. 놓기 영역이 아닌 곳으로 패널을 드래그하면 패널이 작업 영역에서 부동 상태로 표시됩니다.

• 패널을 이동하려면 해당 탭을 드래그합니다.
• 패널 그룹을 이동하려면 해당 제목 표시줄을 드래그합니다.

패널 추가 및 제거

도킹에서 모든 패널을 제거하면 도킹도 제거됩니다. 놓기 영역이 나타날 때까지 작업 영역의 오른쪽 가장자리로 패널을 이동하여 도킹을 만들 수 있습니다.

• 패널을 제거하려면 탭을 마우스 오른쪽 단추로 클릭(Windows)하거나 Control 키를 누른 상태로 클릭(Mac)한 다음 [닫기]를 선택하거나 [창] 메뉴에서 선택 해제합니다.
• 패널을 추가하려면 [창] 메뉴에서 패널을 선택하여 원하는 위치에 고정시킬 수 있습니다.

패널 그룹 조작

• 패널을 그룹으로 이동하려면 패널 탭을 그룹의 강조 표시된 놓기 영역으로 드래그합니다.
• 그룹에서 패널을 재정렬하려면 패널의 탭을 그룹의 새 위치로 드래그합니다.
• 그룹에서 패널을 제거하여 부동 상태로 만들려면 해당 탭을 그룹 밖으로 드래그합니다.
• 그룹을 이동하려면 탭 위에 있는 해당 제목 표시줄을 드래그합니다.

부동 패널 누적

패널을 도킹 밖으로 드래그할 때 놓기 영역을 벗어나면 패널이 작업 영역의 어느 위치에나 놓을 수 있는 부동 상태가 됩니다. 부동 패널 또는 패널 그룹을 누적하여 맨 위의 제목 표시줄을 드래그할 때 한 단위로 이동하도록 할 수 있습니다.

• 부동 패널을 누적하려면 패널의 탭을 다른 패널 아래쪽에 있는 놓기 영역으로 드래그합니다.
• 누적 순서를 변경하려면 패널의 탭을 위나 아래로 드래그합니다.
• 스택에서 패널 또는 패널 그룹을 제거하여 부동 상태로 만들려면 해당 탭 또는 제목 표시줄을 스택 밖으로 드래그합니다.

패널 크기 조정

• 패널, 패널 그룹 또는 패널 스택을 최소화 또는 최대화하려면 탭을 더블 클릭하거나 탭 영역(탭 옆의 빈 공간)을 더블 클릭합니다.
• 패널의 크기를 조정하려면 패널의 한쪽 면을 드래그합니다. 

패널 아이콘 확장 및 축소

패널을 아이콘으로 축소하여 작업 영역을 정리할 수 있습니다. 경우에 따라 패널은 기본 작업 영역에서 아이콘으로 축소됩니다.

• 열의 모든 패널 아이콘을 축소하거나 확장하려면 도킹 위쪽에 있는 양방향 화살표를 클릭합니다.
• 패널 아이콘을 하나만 확장하려면 해당 아이콘을 클릭합니다.
• 아이콘만 표시되고 레이블은 표시되지 않도록 패널 아이콘의 크기를 조정하려면 텍스트가 보이지 않을 때까지 도킹의 폭을 조정합니다. 아이콘 텍스트를 다시 표시하려면 도킹의 폭을 넓힙니다.
• 확장된 패널을 다시 아이콘으로 축소하려면 해당 탭, 아이콘 또는 패널의 제목 표시줄에 있는 양방향 화살표를 클릭합니다.

사용자 정의 작업 영역 만들기

요구 사항에 맞게 패널을 추가하거나 제거하여 작업 영역을 사용자 정의할 수 있습니다. 그런 다음 문서 도구 모음의 [Workspace 전환기]에서 나중에 액세스할 수 있도록 이러한 변경 사항을 작업 영역에 저장할 수 있습니다.

현재 패널 크기 및 위치를 명명된 작업 영역으로 저장하면 패널을 이동하거나 닫은 경우에도 해당 작업 영역을 복원할 수 있습니다.

사용자 정의 작업 영역을 저장하려면:

1. Window > Workspace Layout > New Workspace를 선택합니다.
2. 작업 영역 이름을 입력합니다.

작업 영역이 저장되고 문서 툴바의 작업 영역 전환기에서 볼 수 있습니다.

사용자 정의 작업 영역을 삭제하려면:

애플리케이션 표시줄의 작업 영역 전환기에서 [작업 영역 관리]를 선택하여 [작업 영역 관리] 대화 상자를 엽니다. 작업 영역을 선택한 다음 [삭제]를 클릭합니다.

작업 영역 표시 또는 전환

문서 도구 모음의 작업 영역 전환기에서 작업 영역을 선택합니다.

다중 사용자 시스템에서 Dreamweaver 맞춤 설정

Windows XP나 Mac OS X와 같은 다중 사용자 운영 체제에서도 필요에 따라 Dreamweaver를 사용자 정의할 수 있습니다.

Dreamweaver에서는 각 사용자별로 정의된 구성이 다른 사용자의 구성에 영향을 주지 않도록 합니다. 이를 위해 Dreamweaver는 인식 가능한 다중 사용자 운영 체제에서 처음 실행될 때 다양한 구성 파일의 사본을 작성합니다. 이러한 사용자 구성 파일은 사용자가 소유하는 폴더에 저장됩니다.

Dreamweaver를 재설치하거나 업그레이드하면 Dreamweaver에서 기존 사용자 구성 파일의 백업 사본을 자동으로 만들므로, 해당 파일을 수동으로 사용자 정의한 경우에도 변경한 내용에 계속 액세스할 수 있습니다.

탭으로 구분된 문서 표시 (Mac 전용)

각 문서에 대응하는 탭을 사용하여 하나의 문서 창에 여러 문서를 표시할 수 있습니다. 또한 각 문서를 개별 창에 표시해 부동 작업 영역으로 나타낼 수도 있습니다.

개별 창에서 탭으로 표시된 문서 열기

Control 키를 누른 상태로 탭을 클릭하여 컨텍스트 메뉴에서 [새 창으로 이동]을 선택합니다.

기본 탭 문서 설정 변경

1. Dreamweaver > 환경 설정을 선택하고 [일반] 범주를 선택합니다.
2. 탭에서 [문서 열기]를 선택하거나 선택 해제한 다음 [확인]을 클릭합니다.

환경 설정을 변경할 때, 현재 열려 있는 문서의 표시 형태는 변경되지 않습니다. 그러나 새 환경 설정을 선택한 다음에 열리는 문서는 선택된 환경 설정에 따라 표시됩니다.

시작 화면은 Dreamweaver를 시작할 때 그리고 열어 놓은 문서가 없을 때 항상 표시됩니다. 시작 화면을 숨길 수 있으며 나중에 다시 표시할 수 있습니다. 시작 화면이 숨겨져 있고 열어 놓은 문서가 없을 때에는 문서 창이 비어 있게 됩니다.

Dreamweaver의 일반 패널

Dreamweaver에서는 여러 패널을 가지고 작업할 수 있습니다. 일반적으로 사용되는 패널 중 일부는 다음과 같습니다.

삽입 패널 개요

삽입 패널(윈도우 > 삽입)에는 표, 이미지 및 링크와 같은 오브젝트를 만들고 삽입할 수 있는 버튼이 있습니다. 버튼은 여러 카테고리로 구성되어 있으며, 상단의 드롭다운 목록에서 원하는 카테고리를 선택하여 전환할 수 있습니다.

일부 범주의 버튼에는 팝업 메뉴가 표시됩니다. 팝업 메뉴에서 선택하는 옵션이 해당 버튼의 기본 액션이 됩니다. 예를 들어 Character 버튼의 팝업 메뉴에서 Line Break를 선택하면 다음에 Character 버튼을 클릭할 때 Dreamweaver에서 줄 바꿈을 삽입합니다.팝업 메뉴에서 새 옵션을 선택할 때마다 단추의 기본 액션이 바뀝니다.

[삽입] 패널은 다음과 같은 범주로 구성됩니다.

div 태그 및 이미지, 표와 같은 객체 등 가장 일반적으로 사용되는 HTML 요소를 만들고 삽입할 수 있습니다.

양식을 만들고 검색, 월, 암호 등의 양식 요소를 삽입하는 버튼이 포함되어 있습니다.

문서를 템플릿으로 저장하고 특정 지역을 편집 가능, 선택 사항, 반복 또는 편집 가능한 선택 사항 지역으로 표시할 수 있습니다.

반응형 프로젝트에서 사용할 수 있는 탐색, 컨테이너, 드롭다운 등을 제공하는 Bootstrap 구성 요소가 포함되어 있습니다.

jQuery Mobile을 사용하는 위치 작성용 버튼이 포함되어 있습니다.

아코디언, 슬라이더, 버튼과 같은 jQuery UI 요소를 삽입할 수 있습니다.

가장 많이 사용하는 [삽입] 패널 단추를 한곳으로 모아 구성할 수 있습니다.

오브젝트 삽입

[삽입] 패널을 사용하여 오브젝트를 삽입하려면:

삽입 패널 환경 설정 편집

삽입 패널의 즐겨찾기 범주에서 항목 추가, 삭제 또는 관리

파일 패널 개요

Files 패널을 사용하여 Dreamweaver 사이트의 파일을 보고 관리하십시오.

파일 패널을 사용하면 파일과 폴더가 Dreamweaver 사이트와 연관되어 있는지 여부에 상관없이 이를 확인할 수 있으며 파일 열기 및 이동 등의 표준 파일 유지 관리 작업을 수행할 수 있습니다.

파일 패널은 파일을 관리하고 원격 서버와의 파일 전송에 사용됩니다. 

Files 패널로 수행할 수 있는 모든 작업에 대한 자세한 내용은 Manage files and folders를 참조하십시오.

CSS Designer

CSS Designer 패널(Windows > CSS Designer)은 미디어 쿼리와 함께 CSS 스타일, 파일을 '시각적으로' 만들고 속성을 설정할 수 있는 CSS Property Inspector입니다.

CSS Designer에서 수행한 모든 작업은 Ctrl/Cmd+Z를 사용하여 실행 취소하거나 Ctrl/Cmd+Y를 사용하여 다시 실행할 수 있습니다. 라이브 뷰에 변경 사항이 자동으로 반영되고 관련 CSS 파일도 새로 고쳐집니다. 관련 파일이 변경되었음을 알려주기 위해 해당 파일의 탭이 잠시 동안(약 8초) 강조 표시됩니다.

CSS Designer 패널은 다음 창과 옵션으로 구성됩니다.

전체 창에는 현재 문서와 관련된 모든 CSS, 미디어 쿼리 및 선택기가 나열됩니다. 필요한 CSS 규칙을 필터링하고 속성을 수정할 수 있습니다. 이 모드를 사용하여 선택기 또는 미디어 쿼리 만들기를 시작할 수도 있습니다.

이 모드는 선택에 따라 달라지지 않습니다. 즉, 페이지에서 요소를 선택할 때 연결된 선택기, 미디어 쿼리 또는 CSS가 CSS Designer에서 강조 표시되지 않습니다.

현재 창에는 현재 문서의 디자인 또는 라이브 뷰에서 선택된 모든 요소의 계산된 스타일이 열거됩니다. Code view에서 CSS 파일에 이 모드를 사용하면 초점이 맞춰진 선택기의 모든 속성이 표시됩니다.

이 모드는 컨텍스트를 인식합니다. 이 옵션을 사용하여 문서에서 선택한 요소와 연결된 선택기의 속성을 편집하십시오.

소스 창에는 문서와 관련된 모든 CSS 스타일 시트가 나열됩니다. 이 창에서는 CSS를 생성하여 문서에 첨부하거나 문서 내에 스타일을 정의할 수 있습니다.

@미디어를 선택하면 소스 창에 선택된 소스의 모든 미디어 쿼리가 나열됩니다. 특정 CSS를 선택하지 않을 경우 문서와 연계된 모든 미디어 쿼리가 이 창에 표시됩니다.

선택기를 선택하면 소스 창에 선택된 소스의 모든 선택기가 표시됩니다. 미디어 쿼리도 선택할 경우 해당 미디어 쿼리에 대한 선택기만 표시됩니다. CSS 또는 미디어 쿼리를 선택하지 않을 경우 이 창에 문서의 모든 선택기가 표시됩니다.

@Media 창에서 Global을 선택하면 선택한 소스의 미디어 쿼리에 포함되지 않은 모든 선택기가 표시됩니다.

속성에는 지정한 선택기에 설정할 수 있는 속성이 표시됩니다. 자세한 내용은 Set properties를 참조하십시오.

CSS Designer의 창을 축소 또는 확장하는 경우 세션 내에서 창의 크기가 기억됩니다. 소스 및 미디어 창은 크기를 다시 변경할 때까지 사용자 정의 크기를 유지합니다.

참고: 페이지 요소를 선택하면 [선택기] 창에서 가장 높은 우선권 선택기가 선택됩니다. 특정 선택기의 속성을 보려면 창에서 해당 선택기의 이름을 클릭하십시오.

[소스] 창에서 [모든 소스]를 선택하면 모든 선택기를 볼 수 있습니다. 선택된 소스에서 미디어 쿼리에 속하지 않는 선택기를 보려면 @Media 창에서 Global을 클릭하십시오.

시각적 안내 도구 개요

Dreamweaver는 문서를 디자인하고 브라우저에서 어떻게 표시될지 대략적으로 예측하는 데 도움이 되는 여러 종류의 시각적 안내선을 제공합니다.다음 중 하나를 수행할 수 있습니다:

• [문서] 창을 원하는 창 크기로 맞추어 페이지에 요소가 배치되는 모양을 확인합니다.

• 페이지 배경의 바탕 이미지는 Adobe® Photoshop®또는 Adobe® Fireworks® 등의 일러스트레이션 또는 이미지 편집 응용 프로그램에서 만든 디자인을 복제하는 데 사용합니다.

• 눈금자와 안내선은 페이지 요소의 위치를 지정하고 크기를 조절할 때 정밀한 시각적 기준으로 사용합니다.

• 격자는 절대 위치 요소(AP 요소)의 위치를 정확하게 지정하거나 크기를 정확하게 조절하는 데 사용합니다.

  페이지의 격자 표시는 AP 요소를 정렬하는 데 유용하며, 스냅 기능을 활성화하면 AP 요소를 이동하거나 크기를 조정할 때 AP 요소가 자동으로 가장 가까운 격자점에 스냅됩니다. 이미지, 단락 등의 오브젝트는 그리드에 스냅되지 않습니다. 스냅은 그리드가 보이는지 여부에 관계없이 작동합니다.

페이지 확대/축소

Dreamweaver에서는 문서 창에서 배율을 증가(확대)하여 그래픽의 픽셀 정밀도를 확인하고 작은 항목을 좀더 쉽게 선택하며, 작은 텍스트로 페이지를 디자인하고 큰 페이지를 디자인하는 등의 작업을 수행할 수 있습니다.

페이지를 확대하거나 축소하려면 [보기] > [디자인 보기 옵션] > [확대/축소]를 선택하고 사용 가능한 확대/축소 옵션 중 하나를 선택하십시오.

다양한 확대/축소 옵션 중에서 선택할 수 있습니다. 다음을 선택할 수도 있습니다:

• 선택 영역에 맞추기 - 객체나 텍스트를 선택하고 이 옵션을 선택하면 문서 창이 선택 영역으로 채워집니다.
• 전체에 맞추기 - 문서 창을 전체 페이지로 채웁니다
• 폭에 맞추기 - 문서 창을 페이지의 전체 폭으로 채웁니다

Dreamweaver에 대한 일반 환경 설정

Dreamweaver 문서의 글꼴 환경 설정

문서의 인코딩은 브라우저에서 문서의 표시 방식을 결정합니다. Dreamweaver 글꼴 환경 설정을 사용하면 원하는 글꼴 및 크기로 지정된 인코딩을 볼 수 있습니다. 단, [글꼴 환경 설정] 대화 상자에서 선택한 글꼴은 Dreamweaver에 글꼴이 나타나는 방식에만 영향을 끼치며 방문자의 브라우저에 문서가 나타나는 방식에는 영향을 끼치지 않습니다. 브라우저에 글꼴이 나타나는 방식을 변경하려면 속성 관리자를 사용하거나 CSS 규칙을 적용하여 텍스트를 변경해야 합니다.

새 문서의 기본 인코딩 설정에 대한 자세한 내용은 문서 만들기 및 열기를 참조하십시오.

Dreamweaver 강조 색상 사용자 정의

강조 표시 환경 설정을 사용하여 Dreamweaver에서 템플릿 지역, 라이브러리 항목, 제3자 태그, 레이아웃 요소 및 코드를 식별하는 색상을 맞춤화하십시오.

관련 항목 더 보기

• 관련 파일 열기
• Dreamweaver 코드 작성에 대한 일반 정보
• 코딩 환경 설정
• 헤드 내용 보기 및 편집
• 레이아웃용 시각 도구 사용
• 페이지 미리보기
• 파일 패널에서 파일 작업