Dreamweaver 작업 영역, 다양한 종류의 사용 가능한 보기 옵션 및 작업 영역, 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) [윈도우] > [배열] > [바둑판식]을 선택합니다.

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

문서 창 크기 조절

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

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

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

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

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

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

참고:

간단하게 창 크기를 조절하려면 창의 오른쪽 하단을 드래그하는 것처럼 운영 체제의 표준 창 크기 조절 방법을 사용하십시오.

참고:

(Windows만 해당) 문서 창의 문서는 기본적으로 최대화되어 있으며 이때는 문서 크기를 조절할 수 없습니다. 문서 최대화를 해제하려면 문서의 오른쪽 위에 있는 최대화 해제 버튼을 클릭합니다.

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

  1. [창 크기] 팝업 메뉴에서 [크기 편집]을 선택합니다.

  2. 창 크기 목록의 폭 또는 높이 값을 클릭하고 새로운 값을 입력합니다. 문서 창의 높이는 변경하지 않고 폭만 특정 크기로 조정하려면 높이 값을 선택한 후 삭제합니다.

  3. [설명] 상자를 클릭한 후 특정 크기에 대한 설명을 입력합니다.

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

  1. [창 크기] 팝업 메뉴에서 [크기 편집]을 선택합니다.

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

  2. [폭] 열의 마지막 값 아래에 있는 공백을 클릭합니다.

  3. [폭]과 [높이]에 값을 입력합니다.

    [폭] 또는 [높이] 중 하나만 설정하려면 다른 한 필드를 비워두면 됩니다.

  4. [설명] 필드를 클릭한 후 추가한 크기에 대한 설명을 입력합니다.

    예를 들어 800 x 600픽셀 모니터 항목 옆에 SVGA 또는 일반 PC를 입력하고 832 x 624픽셀 모니터 항목 옆에 17인치 Mac을 입력할 수 있습니다. 대부분의 모니터는 다양한 픽셀 치수로 조정할 수 있습니다.

  5. [적용] 버튼을 클릭한 다음 대화 상자를 닫습니다.

    이제 새 창 크기를 [창 크기] 팝업 메뉴에서 사용할 수 있습니다.

문서 툴바 개요

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

문서 툴바(CC)
문서 툴바

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

코드 보기

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

분할 보기

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

라이브 뷰

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

디자인 뷰

웹 브라우저에서 사용자에게 어떻게 보이는지를 알려주는 문서를 표시합니다.

표준 툴바 개요

표준 툴바

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

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

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

브라우저 내비게이션 툴바(CC)
브라우저 내비게이션 툴바

A. 브라우저 컨트롤 B. 주소 상자 

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

툴바 개요

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

툴바 맞춤 설정

필요에 따라 툴바에 메뉴 옵션을 추가하거나 원치 않는 메뉴 옵션을 제거함으로써 이 툴바를 맞춤화할 수 있습니다.

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

  1. 툴바에서 을 클릭하여 [툴바 맞춤 설정] 대화 상자를 엽니다.

    툴바 맞춤 설정
    툴바 맞춤 설정

  2. 툴바에서 사용하려는 메뉴 옵션을 선택하거나 선택 해제한 다음 [완료]를 클릭하여 툴바 설정을 저장합니다.

기본 툴바 버튼을 복원하려면 툴바 대화 상자에서 [기본값 복원]을 클릭합니다.

상태 표시줄 개요

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

상태 표시줄(CC)
상태 표시줄

A. 태그 선택기 B. 출력 패널 C. 코드 색상 표시 D. 전환 삽입 및 덮어쓰기 E. 행과 열 번호 

태그 선택기

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

출력 패널

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

코드 색상 표시

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

프로그래밍 언어에 따라 표시되는 코드 색상 표시를 변경하려면 팝업 메뉴에서 코딩 언어를 선택합니다.

전환 삽입 및 덮어쓰기

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

코드 보기에서 작업하는 동안 삽입 및 덮어쓰기 간에 전환을 허용합니다.

행과 열 번호

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

커서가 위치하는 행 번호 및 열 번호를 표시합니다.

속성 관리자 개요

속성 관리자(윈도우 > 속성)를 사용하면 텍스트 또는 삽입된 오브젝트 등 현재 선택된 페이지 요소의 자주 사용하는 속성을 확인하고 편집할 수 있습니다.

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

속성 관리자(CC)
속성 관리자

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

참고:

특정 태그 속성과 관련된 모든 속성을 보거나 편집하려면 태그 관리자를 사용합니다.

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

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

  1. 문서 창에서 페이지 요소를 선택합니다.

    속성 관리자를 확장하여 선택한 요소의 모든 속성을 확인할 수 있습니다.

  2. 속성 관리자에서 속성을 변경합니다.

    참고:

    특정 속성에 대한 자세한 내용을 보려면 문서 창에서 요소를 선택한 다음 속성 관리자의 오른쪽 상단에 있는 [도움말] 아이콘을 클릭합니다.

  3. 변경한 내용이 문서 창에 곧바로 적용되지 않는 경우에는 다음 방법 중 하나로 변경 내용을 적용합니다.

    • 속성 편집 텍스트 필드의 바깥 부분을 클릭합니다.
    • Enter 키(Windows) 또는 Return 키(Macintosh)를 누릅니다.
    • Tab 키를 눌러 다른 속성으로 전환합니다.

컨텍스트 메뉴

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

컨텍스트 메뉴를 열려면 코드 보기의 코드 부분이나 라이브 뷰 또는 디자인 뷰의 오브젝트를 마우스 오른쪽 버튼을 클릭(Windows)하거나 Ctrl 키를 누른 상태로 클릭(Mac)합니다.

Dreamweaver에서 채널 재정렬

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

패널 고정 및 고정 해제

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

패널 이동

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

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

참고:

패널을 이동할 때 Ctrl 키(Windows) 또는 Command 키(Mac OS)를 누르면 패널이 고정되는 것을 방지할 수 있습니다. 작업을 취소하려면 패널을 이동하는 동안 Esc 키를 누르십시오.

패널 추가 및 제거

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

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

패널 그룹 조작

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

부동 패널 스택

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

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

패널 크기 조정

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

패널 아이콘 확장 및 축소

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

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

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

요구 사항에 맞게 패널을 추가하거나 제거하여 작업 영역을 사용자 정의할 수 있습니다. 그러면 문서 툴바의 [작업 영역 전환기]에서 나중에 액세스 하기 위해 저장하여 작업 영역에 이 변경 내용을 저장할 수 있습니다.

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

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

  1. [윈도우] > [작업 영역 레이아웃] > [새 작업 영역]을 선택합니다.
  2. 작업 영역 이름을 입력합니다.

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

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

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

작업 영역 표시 또는 전환

문서 툴바의 작업 영역 전환기에서 작업 영역을 선택합니다.

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

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

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

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

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

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

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

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

기본 탭 문서 설정 변경

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

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

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

Dreamweaver의 일반 패널

Dreamweaver에서는 여러 패널을 가지고 작업할 수 있습니다. 일반적으로 사용되는 일부 패널을 여기에서 설명합니다.

삽입 패널 개요

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

삽입 패널
삽입 패널

일부 범주의 버튼에는 팝업 메뉴가 표시됩니다. 팝업 메뉴에서 선택하는 옵션이 해당 버튼의 기본 액션이 됩니다. 예를 들어 문자 버튼의 팝업 메뉴에서 행 분리를 선택하면 이후에 문자 버튼을 클릭할 때마다 Dreamweaver에서 행 분리를 삽입합니다. 팝업 메뉴에서 새 옵션을 선택할 때마다 버튼의 기본 액션이 바뀝니다.

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

HTML

div 태그, 이미지와 같은 오브젝트 및 표 등 가장 자주 사용되는 HTML 요소를 만들고 삽입할 수 있습니다.

양식

양식을 만들고 검색, 월 및 암호와 같은 요소 삽입을 위한 버튼이 포함되어 있습니다.

템플릿

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

Bootstrap 구성 요소

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

jQuery Mobile

jQuery Mobile을 사용하는 사이트를 작성하는 버튼이 들어 있습니다.

jQuery UI

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

즐겨찾기

가장 많이 사용하는 삽입 패널 버튼을 한 곳으로 모아 구성할 수 있습니다.

참고:

 XML, JavaScript, Java 및 CSS와 같은 특정 유형의 파일을 사용하는 경우 이러한 코드 파일에 항목을 삽입할 수 없으므로 삽입 패널과 디자인 뷰 옵션이 흐리게 표시됩니다.

오브젝트 삽입

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

  1. 삽입 패널의 [범주] 팝업 메뉴에서 적절한 범주를 선택합니다.

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

    • 오브젝트 버튼을 클릭하거나 버튼 아이콘을 문서 창(디자인, 라이브 또는 코드 보기)으로 드래그합니다.

    • 버튼의 화살표를 클릭한 다음 메뉴에서 옵션을 선택합니다.

      오브젝트에 따라 해당 오브젝트 삽입 대화 상자가 나타나서 파일을 찾거나 오브젝트에 대한 매개 변수를 지정하라는 메시지가 표시됩니다. 또는 Dreamweaver가 문서에 코드를 자동으로 삽입하거나 태그 편집기 또는 패널을 열어 코드 삽입 전에 사용자가 정보를 지정할 수 있게 할 수 있습니다.

      일부 오브젝트의 경우 디자인 뷰에서 오브젝트를 삽입하면 대화 상자가 나타나지 않지만 코드 보기에서 오브젝트를 삽입하면 태그 편집기가 나타납니다. 또 다른 오브젝트의 경우 오브젝트를 디자인 뷰에서 삽입하면 오브젝트가 삽입되기 전에 Dreamweaver가 코드 보기로 전환됩니다.

삽입 패널 환경 설정 편집

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

  2. [환경 설정] 대화 상자의 [일반] 범주에서 [오브젝트 삽입 시 대화 상자 보기]를 선택 취소하여 이미지, 표, 스크립트 및 헤드 요소 등의 오브젝트를 삽입할 때 대화 상자를 숨기거나, 오브젝트를 만드는 동안 Ctrl 키(Windows) 또는 Option 키(Macintosh)를 누른 상태로 있습니다.

참고:

이 옵션을 해제하고 오브젝트를 삽입하면 오브젝트에 기본 속성 값이 지정됩니다. 오브젝트를 삽입한 후에 속성 관리자를 사용하여 오브젝트 속성을 변경합니다.

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

  1. 삽입 패널에서 범주를 선택합니다.

  2. 버튼이 표시될 영역에서 마우스 오른쪽 버튼으로 클릭하거나(Windows) Control 키를 누른 상태에서 클릭(Macintosh)한 다음 [즐겨찾기 사용자 정의]를 선택합니다.

  3. [즐겨 찾는 오브젝트 사용자 정의] 대화 상자에서 필요에 따라 변경하고 [확인]을 클릭합니다.

    오브젝트를 추가하려면 왼쪽의 [사용 가능한 오브젝트] 창에서 오브젝트를 선택한 다음 두 창 사이에 있는 화살표를 클릭하거나 [사용 가능한 오브젝트] 창에서 오브젝트를 더블 클릭합니다.

    삽입 패널의 즐겨찾기 사용자 정의
    삽입 패널의 즐겨찾기 사용자 정의

    참고:

    한 번에 한 개의 오브젝트를 추가할 수 있습니다. 즐겨찾기 목록에 전체 범주를 추가할 목적으로 [일반]과 같은 범주 이름을 선택할 수는 없습니다.

    • 오브젝트나 분리 기호를 삭제하려면 오른쪽의 [즐겨 찾는 오브젝트] 창에서 오브젝트를 선택한 후 해당 창 위에 있는 [즐겨 찾는 오브젝트 목록에서 선택한 오브젝트 제거] 버튼을 클릭합니다.
    • 오브젝트를 이동하려면 오른쪽의 [즐겨 찾는 오브젝트] 창에서 오브젝트를 선택한 후 해당 창 위에 있는 위쪽/아래쪽 화살표 버튼을 클릭합니다.
    • 오브젝트 아래에 분리 기호를 추가하려면 오른쪽의 [즐겨 찾는 오브젝트] 창에서 오브젝트를 선택한 후 해당 창 아래에 있는 [분리 기호 추가] 버튼을 클릭합니다.
  4. 삽입 패널의 [즐겨찾기] 범주에 있지 않은 경우 이 범주를 선택하고 변경 내용을 확인합니다.

파일 패널 개요

파일 패널을 사용하면 Dreamweaver 사이트의 파일을 보고 관리할 수 있습니다.

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

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

파일 패널
파일 패널

파일 패널로 할 수 있는 모든 옵션에 대한 자세한 내용은 파일 및 폴더 관리를 참조하십시오.

CSS Designer

CSS Designer 패널(윈도우 > CSS Designer)은 미디어 쿼리와 함께 CSS 스타일과 파일을 “시각적”으로 생성하고 속성을 설정할 수 있는 CSS 속성 관리자입니다.

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

CSS Designer 패널(CC)
CSS Designer 패널

CSS Designer 패널은 다음과 같은 창 및 옵션으로 구성되어 있습니다.

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

이 모드는 선택에 따라 달라지지 않습니다. 페이지에서 요소를 선택하면 관련 선택기, 미디어 쿼리 또는 CSS가 CSS Designer에 강조 표시됩니다.

현재 창에는 현재 문서의 디자인 또는 라이브 뷰에서 선택된 모든 요소의 계산된 스타일이 열거됩니다. 코드 보기에서 CSS 파일에 대해 이 모드를 사용하는 경우 강조되는 해당 선택기의 모든 속성을 표시합니다.

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

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

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

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

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

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

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

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

[소스] 창에서 [모든 소스]를 선택하면 모든 선택기를 볼 수 있습니다. 선택한 소스의 미디어 쿼리에 속하지 않는 선택기를 보려면 [@미디어] 창에서 [전역]을 클릭합니다.

시각적 안내 도구 개요

Dreamweaver는 문서를 디자인하고 브라우저에 나타날 문서 모양을 예측하는 데 유용한 여러 가지 시각적 안내 도구를 제공합니다. 다음과 같은 작업을 수행할 수 있습니다.

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

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

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

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

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

페이지 확대/축소

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

페이지를 확대하거나 축소하려면 [보기] > [디자인 뷰 옵션] > [확대]를 클릭하여 사용 가능한 확대 옵션 중 하나를 선택합니다.

다양한 확대/축소 옵션 중에서 선택할 수 있습니다. 다음과 같은 옵션이 있습니다.

  • 선택물에 맞추기 - 오브젝트 또는 텍스트를 선택하고 문서 창을 선택물로 채우려면 이 옵션을 선택합니다.
  • 모두 맞추기 - 문서 창을 전체 페이지에 맞춥니다.
  • 폭에 맞추기 - 문서 창을 페이지의 전체 폭에 맞춥니다.

참고:

돋보기 도구를 사용하지 않고 Ctrl+= 키(Windows) 또는 Command+= 키(Macintosh)를 눌러 확대할 수도 있습니다. 돋보기 도구를 사용하지 않고 Ctrl+- 키(Windows) 또는 Command+- 키(Macintosh)를 눌러 축소할 수도 있습니다.

Dreamweaver에 대한 일반 환경 설정

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

  2. 다음 옵션을 설정합니다.

    탭에서 문서 열기는 모든 문서가 탭으로 구분된 단일 창에 열리므로 탭을 사용하여 각 문서 사이에서 전환할 수 있습니다(Mac에만 해당).

    시작 화면 표시는 Dreamweaver 실행 시나 열려 있는 문서가 없을 때 Dreamweaver 시작 화면을 표시합니다.

    시작할 때 문서 다시 열기는 Dreamweaver를 닫을 때 열려 있던 모든 문서를 엽니다. 이 옵션을 선택하지 않으면 Dreamweaver를 시작할 때 시작 화면 표시 설정에 따라 시작 화면 또는 빈 화면이 표시됩니다.

    읽기 전용 파일을 열 때 경고는 읽기 전용(잠김) 파일을 열 때 경고 메시지가 표시됩니다. 파일의 잠금 해제/체크아웃, 파일 보기 또는 취소를 선택합니다.

    관련 파일 활성화는 현재 문서(예: CSS 또는 JavaScript 파일)와 관련된 파일을 볼 수 있습니다. 문서 위쪽에 각 관련 파일에 대한 버튼이 표시되고, 버튼을 클릭하면 파일이 열립니다.

    동적 관련 파일 검색은 동적 관련 파일을 [관련 파일] 툴바에서 자동으로 표시할지 또는 수동 확인 후 표시할지 여부를 선택할 수 있습니다. 동적 관련 파일의 검색을 비활성화하도록 선택할 수도 있습니다.

    파일 이동 시 링크 업데이트는 사이트 내에서 문서를 이동, 이름 변경 또는 삭제할 때 링크 업데이트를 처리하는 방법을 지정합니다. 이 환경을 설정하여 링크를 항상 자동으로 업데이트하거나, 링크를 업데이트하지 않거나, 업데이트 수행 여부를 묻도록 할 수 있습니다. (자동으로 링크 업데이트를 참조하십시오.)

    오브젝트 삽입 시 대화 상자 표시는 삽입 패널 또는 삽입 메뉴를 사용하여 이미지, 표, Shockwave 동영상 및 다른 특정 오브젝트를 삽입할 때 Dreamweaver에서 추가 정보를 입력할 대화 상자를 표시할지 여부를 결정합니다. 이 옵션이 해제된 경우에는 대화 상자가 나타나지 않으므로 속성 관리자를 사용하여 이미지의 소스 파일, 표의 행 개수 등을 지정해야 합니다. 롤오버 이미지 및 Fireworks HTML의 경우에는 이 옵션의 설정 여부와 관계없이 오브젝트를 삽입할 때마다 대화 상자가 나타납니다. 이 설정을 일시적으로 무시하려면 오브젝트를 만들어서 삽입할 때 Ctrl 키를 누른 상태에서 클릭(Windows)하거나 Command 키를 누른 상태에서 클릭(Macintosh)합니다.

    2바이트 인라인 입력 활성화는 2바이트 텍스트(예: 일본어 문자)를 허용하는 개발 환경이나 언어 키트를 사용할 때 문서 창에 2바이트 텍스트를 직접 입력할 수 있습니다. 이 옵션을 선택하지 않으면 2바이트 텍스트의 입력 및 변환을 위한 텍스트 입력 창이 나타나며 이 창에 텍스트를 입력해야 문서 창에 표시됩니다.

    머리글 다음에 일반 단락으로 전환은 디자인 또는 라이브 뷰에서 머리글 단락의 끝에 Enter(Windows) 또는 Return(Macintosh) 키를 누르면 p 태그를 사용하여 새 단락이 만들어집니다. (머리글 단락은 h1 또는 h2와 같은 머리글 태그가 지정된 단락입니다.) 이 옵션이 해제된 경우 머리글 단락 끝에서 Enter 또는 Return 키를 누르면 동일한 머리글 태그가 지정되는 새 단락이 만들어집니다. 따라서 한 행에 여러 개의 머리글을 입력한 후 되돌아가서 각 머리글 아래에 세부 정보를 입력할 수 있습니다.

    연속된 여러 공백 허용은 디자인 또는 라이브 뷰에서 둘 이상의 공백을 입력하는 경우 단어 잘림 방지 공백이 만들어집니다. 이 공백은 브라우저에서 여러 공백으로 표시됩니다. 예를 들어 타자기에서 하는 것처럼 문장 간에 두 개의 공백을 입력할 수 있습니다. 이 옵션은 주로 워드 프로세서에서 입력하는 사용자를 위해 고안된 것입니다. 이 옵션이 해제되어 있으면 여러 개의 공백이 하나의 공백으로 처리됩니다. 브라우저가 여러 개의 공백을 하나의 공백으로 처리하기 때문입니다.

    <b>및 <i> 대신 <strong> 및 <em> 사용은 Dreamweaver에서 일반적으로 b 태그를 적용하는 작업을 수행할 때마다 strong 태그가 적용되고 일반적으로 i 태그를 적용하는 작업을 수행할 때마다 em 태그가 적용되도록 지정합니다. 이러한 작업에는 HTML 모드로 텍스트 속성 관리자에서 굵게 또는 기울임체 버튼을 클릭하거나 [서식] > [스타일] > [굵게] 또는 [서식] > [스타일] > [기울임체]를 선택하는 경우가 포함됩니다. 문서에 b 및 i 태그를 사용하려면 이 옵션의 선택을 해제합니다.

    참고: W3C(World Wide Web Consortium)에서는 b 및 i 태그의 사용을 권장하지 않는데 그 이유는 strong 및 em 태그가 b 및 i 태그보다 더 많은 의미 정보를 제공하기 때문입니다.

    <p> 또는 <h1> - <h6> 태그 내에 편집 가능 영역을 배치할 경우 경고는 단락이나 머리글 태그 안에 편집 가능 영역이 있는 Dreamweaver 템플릿을 저장할 때마다 경고 메시지를 표시할지 여부를 지정합니다. 이 메시지는 사용자에게 해당 영역에 단락을 더 이상 만들 수 없다는 것을 알려줍니다. 이는 기본적으로 활성화되어 있습니다.

    활성 문서에 대한 실행 취소 작업 제한은 실행 취소 작업을 현재 편집 중인 파일로 제한합니다. 예를 들어 CSS 파일을 편집 중인 경우, 해당 CSS 파일에 적용된 변경 내용에 대해서만 실행 취소를 할 수 있습니다.

    그러나 이 확인란이 비활성화되면 HTML 소스와 모든 관련 CSS 파일은 단일 실행 취소 내역만 사용하며, 따라서 HTML 코드나 관련 CSS 파일에서의 작업 여부에 상관없이 모든 작업을 실행 취소할 수 있습니다.

    최대 작업 내역 단계 수는 Dreamweaver에서 기억되는 단계의 수를 결정합니다. (대부분의 경우 기본값을 사용하면 충분합니다.) 지정된 단계 수를 초과하면 가장 오래된 단계부터 제거됩니다.

    맞춤법 사전에는 유효한 맞춤법 사전이 나열됩니다. 사전에 여러 가지 지역어나 맞춤법 규칙(예: 미국식 영어 및 영국식 영어)이 포함된 경우에는 지역어가 [사전] 팝업 메뉴에 별도로 표시됩니다.

Dreamweaver 문서의 글꼴 환경 설정

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

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

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

  2. 왼쪽의 [범주] 목록에서 [글꼴]을 선택합니다.

  3. [글꼴 설정] 목록에서 인코딩 유형(예: 서유럽어 또는 일본어)을 선택합니다.

    참고:

    아시아 언어를 표시하려면 2바이트 글꼴을 지원하는 운영 체제를 사용해야 합니다.

  4. 선택한 인코딩의 각 범주에 사용할 글꼴과 크기를 선택합니다.

    참고:

    [글꼴] 팝업 메뉴에는 컴퓨터에 설치된 글꼴만 표시됩니다. 예를 들어 일본어 텍스트를 보려면 일본어 글꼴이 설치되어 있어야 합니다.

    가변 폭 글꼴

    Dreamweaver에서 일반 텍스트(예: 단락, 머리글, 표의 텍스트)를 표시하는 데 사용하는 글꼴입니다. 기본값은 시스템에 설치된 글꼴에 따라 달라집니다. 미국에서 사용되는 시스템의 대부분에서 기본값은 Windows의 경우 Times New Roman 12pt(중)이고, Mac OS의 경우 Times 12pt입니다.

    고정 폭 글꼴

    Dreamweaver에서 pre, code 및 tt 태그 내의 텍스트를 표시하는 데 사용하는 글꼴입니다. 기본값은 시스템에 설치된 글꼴에 따라 달라집니다. 미국에서 사용되는 시스템의 대부분에서 기본값은 Windows의 경우 Courier New 10pt(소)이고, Mac OS의 경우 Monaco 12pt입니다.

    코드 보기

    코드 보기 및 코드 관리자에 나타나는 모든 텍스트에 사용되는 글꼴입니다. 기본값은 시스템에 설치된 글꼴에 따라 달라집니다.

Dreamweaver 강조 색상 사용자 정의

강조 표시 환경 설정을 사용하면 Dreamweaver에서 템플릿 영역, 라이브러리 항목, 서드 파티 태그, 레이아웃 요소 및 코드를 구분하는 색상을 사용자 정의할 수 있습니다.

  1. [편집] > [환경 설정]을 선택하고 [강조 표시] 범주를 선택합니다.

  2. 강조 색상을 변경할 오브젝트 옆에 있는 색상 상자를 클릭한 다음 색상 피커를 사용하여 새 색상을 선택하거나 16진수 값을 입력합니다.

  3. 특정 옵션의 강조 표시 기능을 활성화 또는 비활성화하려면 보기 옵션을 선택 또는 해제합니다.

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책