사용 안내서 취소

코드 작성 및 편집

검색

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

Dreamweaver

앱 열기

코드 보기에서 작업하는 방법과 Dreamweaver의 코딩 기능을 최대한 활용하는 방법에 대해 학습합니다.

Dreamweaver에서 코드를 사용하여 작업할 수 있는 다양한 방법이 있습니다.

[새 문서] 대화 상자를 사용하여 새 코드 파일을 열고 해당 코드에서 입력을 시작할 수 있습니다.

입력할 때 코드 힌트가 나타나 코드를 선택하고 철자 오류를 피할 수 있습니다. Dreamweaver의 유용한 빠른 문서를 사용해 필요할 때 CSS에 대한 도움을 받으십시오.

삽입 패널을 사용하여 코드를 삽입하거나 Emmet 약자 같은 코딩 단축키를 사용할 수 있습니다.

동일한 코드의 조각을 자주 복사하여 붙여 넣는 경우 다음 기능을 사용하면 시간을 절약할 수 있습니다.

스니펫 패널은 서식 유지 코드 스니펫을 코드에 빠르게 만들고 삽입할 때 유용합니다.
다중 커서는 한 번에 여러 줄의 코드를 만들고 편집할 수 있습니다.

Dreamweaver에서는 전체를 탐색하고 매끄럽게 코드를 변경할 수 있는 강력한 편집 도구 모음도 제공합니다.

Dreamweaver의 찾기 및 바꾸기 기능을 사용하여 코드에서 태그, 속성 또는 텍스트를 검색합니다.
코드 탐색기를 사용하여 현재 파일의 내부와 외부에서 관련 코드를 탐색합니다. 훨씬 향상된 빠른 편집 기능을 사용해 새 탭에서 파일을 열지 않고도 관련 파일에서 코드를 편집합니다.
코드를 마우스 오른쪽 버튼으로 클릭하면 코드를 직접 편집할 수 있는 간단한 관련 컨텍스트 메뉴가 나타납니다.
태그 줄 바꿈을 사용해 태그 안에서 텍스트의 줄을 바꿉니다.

이 코드 기능들에 대해 자세히 살펴보십시오

삽입 패널을 사용하여 코드 삽입

코드에 삽입 포인터를 놓습니다.
삽입 패널에서 해당 범주를 선택합니다.
삽입 패널의 버튼을 클릭하거나 삽입 패널의 팝업 메뉴에서 항목을 선택합니다.

아이콘을 클릭하면 해당 페이지에 즉시 코드가 나타나거나 코드를 완성하는 데 필요한 추가 정보를 요청하는 대화 상자가 나타납니다.

삽입 패널에서 사용할 수 있는 버튼의 개수와 유형은 현재 문서 유형에 따라 달라집니다. 또한 코드 보기 또는 디자인 뷰 중 사용하는 보기에 따라서도 달라집니다.

Dreamweaver에서 Emmet 툴킷 사용

Emmet은 HTML 및 CSS 코드를 빠르게 작성하고 생성할 수 있도록 해 주는 플러그인입니다.

Dreamweaver의 [코드 보기] 또는 [코드 관리자]에서 Emmet을 사용하고 Tab 키를 눌러 이러한 약어를 HTML 마크업이나 CSS로 확장합니다.

HTML 약어는 HTML 및 PHP 페이지에서 확장됩니다. CSS 약어는 CSS, LESS, SASS, SCSS 페이지에서 또는 HTML 페이지의 스타일 태그 내에서 확장됩니다.

다음은 코드 보기에서 Emmet 약어를 사용할 수 있는 방법을 보여 주는 몇 가지 예입니다. 자세한 정보 및 참조는 Emmet 설명서를 참조하십시오.

참고:

현재 Dreamweaver에서는 Emmet 1.2.2 약어를 지원합니다.

예 1: Emmet을 사용한 HTML 코드 삽입

세 가지 요소를 사용하여 순서가 지정되지 않은 목록에 HTML 코드를 빠르게 추가하려면 HTML 파일을 열고 <body></body> 내에서 코드 보기에 다음 Emmet 약어를 입력합니다.

div>(ul>li*3>{Lorem Ipsum})+p*4>lorem

이제 커서가 Emmet 약어 바로 뒤에 배치되어 있는지 확인하고 Tab 키를 눌러 약어를 확장합니다. 또는 전체 약어를 선택한 다음 Enter 키를 누릅니다.

약어는 다음 코드로 확장합니다.

<div>
    <ul>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
    </ul>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, voluptatum, perferendis ad impedit iste assumenda et laborum doloribus optio molestiae perspiciatis modi quaerat corrupti velit cupiditate eligendi tempora temporibus vel.</p>
    <p>Ipsa, distinctio, eveniet ad numquam libero quam doloremque culpa illo ex possimus eligendi amet nesciunt provident inventore rerum facere ea veritatis itaque? Suscipit rem asperiores excepturi sapiente enim architecto esse.</p>
    <p>Harum, ad porro molestiae corporis natus aut non fugit. Recusandae, reprehenderit, voluptate voluptas reiciendis voluptatum tempora vero vel libero facere fuga maiores ratione eaque ad illum porro dignissimos sit eos.</p>
    <p>Dignissimos, molestiae, quis ducimus ratione temporibus sed accusamus libero consequuntur ex velit maiores illum repudiandae cum! Dolorum, dolore, pariatur, incidunt in saepe laudantium consequatur provident totam vero velit nobis accusantium!</p>
</div>

예 2: Emmet을 사용한 CSS 코드 삽입

공급업체 접두어를 사용하여 테두리 반경을 만들기 위한 CSS 코드를 삽입하려면 CSS 파일을 열고 클래스 내에 다음 Emmet 약어를 입력합니다.

-bdrs

Tab을 누르면 약어는 다음 코드로 확장합니다.

-webkit-border-radius: ;
 
-moz-border-radius: ;
 
border-radius: ;

코드 주석을 사용하여 작업

주석은 HTML 코드에 삽입하는 설명 텍스트로, 코드에 대해 설명하거나 다른 정보를 제공합니다. 주석 텍스트는 코드 보기에만 나타나며 브라우저에는 표시되지 않습니다.

코드에 주석 추가

주석을 추가하려면 먼저 주석 텍스트를 입력합니다. 그 다음 삽입점에 커서를 놓고 툴바에서 삽입 아이콘을 클릭하여 [주석 적용] 하위메뉴를 엽니다.

텍스트를 선택하고 주석을 추가할 수도 있습니다. 선택한 텍스트는 주석 블록으로 둘러싸입니다.

다양한 구문 옵션을 사용하여 주석을 추가할 수 있습니다. 적절한 구문을 선택하면 Dreamweaver가 태그를 삽입합니다. 주석 텍스트를 입력하기만 하면 됩니다.

또한 Ctrl +/(Windows의 경우) 또는 Cmd +/(Mac의 경우) 키보드 단축키를 사용해 주석을 추가할 수 있습니다.

텍스트를 선택하지 않고 키보드 단축키를 사용하면 현재 라인에 주석이 적용됩니다. 텍스트를 선택하고 키보드 단축키를 사용하면 선택한 텍스트에 주석이 적용됩니다.

코드에서 주석 제거

코드 주석을 제거하려면 코드를 선택하고, 툴바에서 [주석 제거] 아이콘을 클릭합니다. 또한 Ctrl -/(Windows의 경우) 또는 Cmd -/(Mac의 경우) 키보드 단축키를 사용해 주석을 제거할 수 있습니다.

코드 주석 켜기/끄기

코드 보기에서 주석 켜기와 끄기를 전환하려면 선택한 주석 또는 줄에서 Windows의 경우 Ctrl +/, Mac에서는 Cmd +/를 누릅니다.

다중 커서를 사용해 여러 위치에 테스트를 추가하거나 변경할 수 있습니다.

Dreamweaver의 다중 커서 기능을 사용해 여러 위치에서 커서를 추가하거나 여러 항목의 코드를 선택해 동시에 편집할 수 있습니다.

참고:

다중 커서 또는 다중 선택에 대해서는 복사 및 붙여넣기와 찾기 및 바꾸기 작업을 할 수 없습니다.

다중 커서 또는 다중 선택 추가

요구 사항에 맞게 여러 방법으로 다중 커서를 추가할 수 있습니다.

기존 텍스트를 바꾸지 않고 여러 위치에 동일한 텍스트를 추가하려는 경우 다중 커서를 추가합니다.

기존 텍스트를 바꾸려는 경우에는 다중 선택을 사용할 수 있습니다. 연속적인 텍스트 행이나 비연속적인 텍스트 행 또는 둘 다 선택하고 커서를 추가할 수 있습니다.

연속적인 행의 동일한 열에 다중 커서 또는 다중 선택을 추가하려면:

Alt 키를 누른 상태에서 클릭 후 세로 방향으로 드래그합니다. 세로 방향으로 드래그하면 드래그 영역에 포함되는 각 행에 커서가 추가됩니다.

연속적인 텍스트 행을 선택하려면 Alt 키를 누르고 대각선으로 드래그합니다. 대각선 방향으로 드래그하면 Dreamweaver는 선택 영역 내에서 텍스트의 사각형 블록을 선택합니다.

참고:

빠르게 커서를 추가하거나 선택 영역에서 여러 행을 포함시키려면 Shift+Alt+위/아래 화살표를 사용합니다.

여러 위치에 커서(또는 선택 텍스트)를 추가했으면 그대로 진행하고 입력을 시작합니다.

다중 커서가 있는 경우에는 새 텍스트가 추가됩니다.

여러 텍스트 행에 원하는 내용이 있으면 선택한 텍스트가 입력한 새 텍스트로 바뀝니다.

행의 다른 열에 다중 커서를 추가하려면:

비연속적인 텍스트 행에 커서를 추가하려면 Ctrl 키를 누르고, 커서를 배치할 선을 클릭합니다.

비연속적인 텍스트 행을 선택하려면 텍스트를 선택한 다음 Ctrl 키(Windows) 또는 Cmd 키(Mac)를 누른 상태로 계속해서 항목을 선택합니다.

각 행의 시작/끝에 커서를 추가하려면:

여러 행의 텍스트를 선택하고 왼쪽 또는 오른쪽 화살표 키를 누릅니다.

선택 항목의 앞 또는 뒤 행에 커서를 추가하려면:

Shift + Alt + 위쪽/아래쪽 화살표 키는 누른 상태에서 오른쪽 화살표 키를 누릅니다.

연속 및 비연속적인 텍스트 행을 선택하려면:

이 단일 선택 영역 내에서 텍스트의 연속적인 행과 개별 행을 모두 선택하는 방법도 함께 사용할 수 있습니다.

먼저 비연속적인 텍스트 행을 선택한 다음 Ctrl + Alt(Windows) 또는 Cmd + Alt(Mac)를 누른 상태로 기존의 다중 선택 영역의 행으로 드래그하여 추가합니다.

빠른 문서를 사용하여 Dreamweaver 내에서 CSS에 대한 도움 받기

Dreamweaver에서 CSS, LESS 또는 SCSS 파일로 작업할 때 CSS 속성 또는 값에 대한 자세한 정보를 빠르게 얻을 수 있습니다.

속성 또는 값에 커서를 놓고 Ctrl + K를 누르면 Dreamweaver는 웹 플랫폼 문서 프로젝트에서 문서를 엽니다.

다수의 인라인 편집기 및 문서 뷰어를 동시에 열 수 있습니다.

하나의 인라인 편집기 또는 문서 뷰어를 닫으려면 왼쪽 상단의 “X”를 클릭하거나 강조 표시되어 있는 빠른 문서에서 Esc 키를 누릅니다.

인라인 편집기 및 문서를 모두 닫으려면 전체 코드 편집기 뒤에 커서를 두고 Esc 키를 누릅니다.

코드 분석

Dreamweaver는 (잠재적 오류에 대한 코드를 구문 분석하여) HTML, CSS 및 JavaScript에 대한 Linting을 지원합니다.

Linting을 통해 감지되는 오류 및 경고가 출력 패널에 나열됩니다. 자세한 내용은 코드 린트를 참조하십시오.

또한, Dreamweaver에서는 잘못된 줄의 행 번호 열에 빠른 오류 미리보기가 표시됩니다. 행 번호는 빨간색으로 표시되어 오류가 있음을 가리키며, 마우스를 가져다 대면 오류에 대한 간략한 설명이 표시됩니다.

참고: 행의 첫 번째 오류만 표시됩니다. 행에 경고만 포함되어 있는 경우 경고에 대한 설명이 표시됩니다. 행에 경고와 오류가 포함되어 있는 경우 오류에 대한 설명만 표시됩니다.

태그 줄 바꿈을 사용하여 코드의 텍스트 줄 바꿈

코드 보기에서 [태그 줄 바꿈]을 사용하여 태그가 있는 특정 텍스트 행의 줄을 바꿉니다. 디자인 뷰 또는 라이브 뷰에서 태그가 있는 오브젝트의 줄을 바꾸는 이 기능을 사용할 수 있습니다.

코드 보기에서 텍스트, 디자인 뷰에서는 오브젝트를 선택한 다음 키보드에서 Ctrl + T를 누릅니다.

여러 HTML 태그에서 선택할 수 있도록 팝업 창이 나타납니다.
메뉴에서 태그를 선택합니다.

코드 보기에서 작업하는 경우 선택한 텍스트가 태그로 둘러싸입니다. 디자인 뷰 또는 라이브 뷰에서 작업하는 경우 선택한 오브젝트가 태그로 둘러싸입니다.

코딩 컨텍스트 메뉴로 코드 편집

Dreamweaver의 컨텍스트 메뉴를 사용해 코드를 빠르게 편집합니다.

컨텍스트 메뉴에 액세스하려면 마우스 오른쪽 버튼으로 클릭(Windows)하거나 Command 키를 누른 상태로 클릭(Mac)합니다. 다음 옵션을 사용할 수 있습니다.

빠른 편집

이 옵션을 클릭하면 [빠른 편집] 모드에 들어갑니다. 이 모드에서는 Dreamweaver가 필요한 코드 섹션을 얻을 수 있도록 상황에 맞는 코드 옵션과 인라인 도구를 제공합니다. 자세한 내용은 빠른 편집을 참조하십시오.

[잘라내기], [복사], [붙여넣기]

이 옵션을 선택하면 편집 메뉴에 액세스하지 않고 빠르게 텍스트를 [잘라내기], [복사] 및 [붙여넣기] 할 수 있습니다.

[찾기 및 바꾸기], [다음 찾기], [이전 찾기]

이 옵션을 선택하면 찾기 메뉴에 액세스하지 않고 빠르게 텍스트를 [찾기] 및 [바꾸기] 할 수 있습니다.

새 스니펫 만들기

이 옵션을 사용하면 다음에 다시 사용하기 위해 저장할 수 있는 코드 스니펫을 만들 수 있습니다. 코드를 선택한 다음 새 스니펫 만들기를 클릭해 선택한 코드를 스니펫으로 만듭니다. 자세한 내용은 코드 스니펫을 사용하여 작업을 참조하십시오.

코드 블록 들여쓰기

코드 보기나 코드 관리자에서 코드를 작성하거나 편집할 때, 선택한 코드 블록이나 코드 행을 오른쪽이나 왼쪽으로 한 탭씩 옮겨 들여쓰기 수준을 변경할 수 있습니다.

선택된 코드 블록 들여쓰기

Tab 키를 누릅니다. 또는
Ctrl+]를 누릅니다. 또는
[편집] > [코드 들여쓰기]를 선택합니다.

선택된 코드 블록 들여쓰기 취소

Shift+Tab을 누릅니다. 또는
Ctrl+[를 누릅니다. 또는
[편집] > [코드 내어쓰기]를 선택합니다.

코드 탐색기 열기

페이지의 원하는 위치에서 Alt 키를 누른 상태로 클릭(Windows)하거나 Command+Option을 누른 상태로 클릭(Macintosh)합니다. 코드 탐색기에는 클릭한 영역에 영향을 끼치는 코드에 대한 링크가 표시됩니다.

링크를 닫으려면 코드 탐색기 바깥쪽을 클릭합니다.

참고:

코드 탐색기 표시기 를 클릭하여 코드 탐색기를 열 수도 있습니다. 이 표시기는 2초 동안 마우스의 움직임이 없을 때 페이지의 삽입 포인터 근처에 나타납니다.

코드 탐색기를 사용하여 코드로 이동

사용할 페이지 영역에서 코드 탐색기를 엽니다.
이동할 코드를 클릭합니다.

코드 탐색기는 관련 코드 소스를 파일별로 그룹화하고 파일을 알파벳순으로 나열합니다. 예를 들어 외부 파일 세 개의 CSS 규칙이 문서의 선택 영역에 영향을 끼칠 수 있습니다. 이 경우 [코드 탐색기]는 파일 세 개를 비롯하여 선택 영역과 관련이 있는 CSS 규칙을 나열합니다. CSS가 지정된 선택 영역과 관련이 있을 경우 코드 탐색기는 [현재] 모드의 [CSS 스타일] 패널과 같이 작동합니다.

참고:

CSS 규칙에 대한 링크를 가리키면 코드 탐색기는 규칙 속성의 도구 설명을 표시합니다. 이러한 도구 설명은 이름이 같은 여러 규칙을 구별하려는 경우 유용합니다.

코드 탐색기 표시기 비활성화

코드 탐색기를 엽니다.
오른쪽 아래 모서리에 있는 [표시기 비활성화]를 선택합니다.
링크를 닫으려면 코드 탐색기 바깥쪽을 클릭합니다.

코드 탐색기 표시기를 다시 활성화하려면 Alt 키를 누른 상태에서 클릭(Windows)하거나 Command+Option을 누른 상태에서 클릭(Macintosh)하여 코드 탐색기를 열고 [표시기 비활성화] 옵션의 선택을 취소합니다.

JavaScript 또는 VBScript 함수로 이동

코드 보기 및 [코드 관리자]에서 코드에 사용된 모든 JavaScript 함수 또는 VBScript 함수 목록을 볼 수 있으며, 이들 중 원하는 함수로 이동할 수 있습니다.

코드 보기(보기 > 코드) 또는 코드 관리자(창 > 코드 관리자)에 문서를 표시합니다.
다음 중 하나를 수행합니다.
- 코드 보기를 사용할 경우 코드 보기의 아무 곳이나 마우스 오른쪽 버튼으로 클릭하거나(Windows) Ctrl 키를 누른 채 클릭한(Macintosh) 다음 컨텍스트 메뉴에서 [함수] 하위 메뉴를 선택합니다.
참고:

디자인 뷰에서는 [함수] 하위 메뉴가 나타나지 않습니다.

코드에 사용된 모든 JavaScript 함수 또는 VBScript 함수가 하위 메뉴에 나타납니다.

참고:

함수를 알파벳 순서로 표시하려면 코드 보기에서 Ctrl 키를 누른 채 마우스 오른쪽 버튼으로 클릭(Windows)하거나 Option-Control을 누른 채 클릭(Macintosh)한 다음 [함수] 하위 메뉴를 선택합니다.
- [코드 관리자]를 사용할 경우 툴바에서 [코드 내비게이션] 버튼({ })을 클릭합니다.
코드에서 해당 함수로 이동할 함수 이름을 선택합니다.

JavaScript 추출

JSE(JavaScript Extractor)는 Dreamweaver 문서의 모든 또는 대부분의 JavaScript를 제거하며 외부 파일로 내보내고 외부 파일을 사용 중인 문서에 링크합니다. JSE는 코드에서 onclick 및 onmouseover와 같은 이벤트 핸들러도 제거한 다음 이런 핸들러와 연관된 JavaScript를 방해가 되지 않게 문서에 첨부합니다.

JavaScript Extractor를 사용하기 전에 다음과 같은 제한 사항에 대해 알아야 합니다.

JSE는 문서의 본문에서 스크립트 태그를 추출하지 않습니다(Spry 위젯의 경우 제외). 이 스크립트를 외부화하는 데 예상치 못한 결과가 발생할 수도 있습니다. 기본적으로 Dreamweaver는 이 스크립트를 [JavaScript 외부화] 대화 상자에 나열하지만 추출하기 위해 선택하지는 않습니다. 원하는 경우 직접 선택할 수 있습니다.
JSE는 .dwt(Dreamweaver 템플릿) 파일의 편집 가능 영역, 템플릿 인스턴스의 편집 불가능 영역 또는 Dreamweaver 라이브러리 항목에서 JavaScript를 추출하지 않습니다.
[JavaScript를 외부화하고 방해가 되지 않게 첨부] 옵션을 사용하여 JavaScript를 추출한 후 [비헤이비어] 패널에서 더 이상 Dreamweaver 비헤이비어를 편집할 수 없습니다. Dreamweaver는 방해가 되지 않게 첨부된 비헤이비어를 사용하여 [비헤이비어] 패널을 관리하고 채울 수 없습니다.
페이지를 닫으면 변경 내용을 실행 취소할 수 없습니다. 그러나 동일한 편집 셰션에 남아 있으면 변경 내용을 실행 취소할 수 있습니다. 실행을 취소하려면 [편집] > [실행 취소: JavaScript 외부화]를 선택합니다.
일부 복잡한 페이지는 원하는 대로 작동하지 않을 수 있습니다. 본문의 document.write() 및 전역 변수를 사용하여 페이지에서 JavaScript를 추출할 때 주의해 주십시오.

Dreamweaver에서 JavaScript 지원에 대한 Dreamweaver 엔지니어링 팀의 비디오 개요를 보려면 www.adobe.com/go/dw10javascript을 참조하십시오.

JavaScript Extractor를 사용하려면 다음을 수행합니다.

JavaScript가 포함된 페이지를 엽니다.
[도구] > [JavaScript 외부화]를 클릭합니다.
[JavaScript 외부화] 대화 상자에서 필요한 경우 기본 선택을 편집합니다.
- Dreamweaver로 모든 JavaScript를 외부 파일로 이동하고 현재 문서 내에서 해당 파일을 참조하려는 경우 [JavaScript만 외부화]를 선택합니다. 이 옵션은 문서의 onclick 및 onload와 같은 이벤트 핸들러를 남겨 두고 [비헤이비어] 패널에 [비헤이비어]를 표시합니다.
- Dreamweaver를 사용하여 1)JavaScript를 외부 파일로 이동시켜 현재 문서 내에서 참조하고 2) HTML에서 이벤트 핸들러를 제거하고 JavaScript를 사용하여 런타임에 삽입하려면 [JavaScript를 외부화하고 방해가 되지 않게 첨부]를 선택합니다. 이 옵션을 선택하면 [비헤이비어] 패널에서 [비헤이비어]를 더 이상 편집할 수 없습니다.
- [편집] 열에서 원하지 않는 편집을 선택 해제하거나 Dreamweaver에서 기본적으로 선택하지 않은 편집을 선택합니다.
  기본적으로 Dreamweaver는 목록을 나열하지만 다음 편집을 선택하지 않습니다.
  
  document.write() 또는 document.writeln() 호출을 포함하는 문서 헤드의 스크립트 블록
  
  document.write()를 사용하는 것으로 알고 있는 EOLAS 처리 코드와 관련된 함수 서명을 포함하는 문서 헤드의 스크립트 블록
  
  블록에 Spry 위젯 또는 Spry 데이터 세트 생성자만 포함되지 않는 경우 문서 분문의 스크립트 블록
- Dreamweaver에서는 ID가 없는 요소에 ID를 자동으로 할당합니다. 이런 ID가 마음에 들지 않는 경우 ID 텍스트 상자를 편집하여 변경할 수 있습니다.
[확인]을 클릭합니다.

요약 대화 상자에서는 추출 정보를 정리해서 제공합니다. 추출 정보를 검토하고 [확인]을 클릭합니다.
페이지를 저장합니다.

Dreamweaver는 추출된 JavaScript를 포함하는 다른 파일 외에도 SpryDOMUtils.js 파일을 만듭니다. 해당 사이트의 SpryAssets 폴더에 SpryDOMUtils.js 파일을 저장하고 JavaScript를 추출한 페이지와 동일한 수준에서 다른 파일을 저장합니다. 원본 페이지를 업로드할 때 웹 서버에 이러한 종속 파일을 업로드해야 합니다.

빠른 편집

코딩 환경을 다수의 패널 및 아이콘으로 채우는 대신 Dreamweaver의 [빠른 편집] 모드에 필요한 코드 섹션을 빠르게 얻을 수 있는 상황에 맞는 코드 옵션과 인라인 도구가 삽입되었습니다.

다음의 방법으로 [빠른 편집] 모드로 들어갈 수 있습니다.

코드 스니펫을 마우스 오른쪽 버튼으로 클릭하고 나타나는 컨텍스트 메뉴에서 빠른 편집을 선택
Ctrl + E(Windows)이나 Cmd+E(Mac)를 누름

HTML 파일로 빠른 편집 모드 사용

HTML 파일에서 클래스나 ID 속성(이름 또는 값) 내에 또는 태그 이름 위에 커서 놓습니다. [빠른 편집]이 프로젝트와 일치하는 모든 CSS, SCSS 및 LESS 규칙을 표시합니다. HTML 파일의 컨텍스트를 종료하지 않고도 이러한 규칙을 인라인에서 직접 편집할 수 있습니다.

다수의 규칙이 일치하는 경우에는 오른쪽의 목록을 사용하거나 Alt+위/아래 화살표를 사용하여 이들 규칙 간을 이동합니다.

인라인 편집기에서 CSS 규칙을 직접 새로 만들려면 [새 규칙]을 클릭하거나 Ctrl+Alt+N(Windows) 또는 Cmd+Opt+N(Mac)을 누릅니다.

JavaScript 파일로 빠른 편집 모드 사용

JavaScript 파일에서 함수 이름에 커서를 놓습니다. [빠른 편집]이 해당 함수의 본문을 표시합니다(require() 문으로 참조되는 다른 파일의 경우에도 마찬가지임).

CSS, SCSS 또는 LESS 파일로 빠른 편집 모드 사용

색상 값 내에 커서로 빠른 편집을 표시한 다음 색상 피커에 빠르게 액세스하고 CSS 코드에 사용된 색상을 수정할 수 있습니다.

CSS, LESS 또는 SCSS 파일에서 cubic-bezier() 또는 steps() 전환 타이밍 함수 위에 커서를 놓으면 [빠른 편집]이 그래픽 전환 곡선 편집기를 표시합니다.

사전 정의된 타이밍 함수 ease, ease-in, ease-out, ease-in-out, step-start 및 step-end도 유효한 시작점입니다.

코드 리팩터링

코드 리팩터링은 외부 비헤이비어의 변경 없이 기존의 컴퓨터 코드를 재구성하는 프로세스이며, 이를 통해 코드의 가독성이 높아지고 유지 관리가 용이하며 이해하기 쉽고 디버그가 간편해집니다. 이는 코드에 중복된 코드, 긴 메서드 또는 대형 클래스가 있는 경우 용이합니다. 코드를 디버깅하면 함수가 작아지고 대체가 적절하기 때문에 시간이 절약됩니다.

JavaScript 리팩터링을 통해 함수의 이름을 바꾸고 변수의 범위를 설정할 수 있으므로 정의된 코드의 블록 내에서 이를 호출할 수 있습니다.

참고:

리팩터링 코드는 이제 .js 파일에서만 사용할 수 있습니다.

JavaScript 리팩터링

HTML, PHP 및 JavaScript 문서 유형으로 코드를 리팩터링할 수 있습니다. Dreamweaver의 코드 영역을 마우스 오른쪽 버튼으로 클릭하면 드롭다운 메뉴에 리팩터 옵션이 표시됩니다. 리팩터는 다음과 같은 옵션으로 구성됩니다.

이름 바꾸기
변수로 추출
함수로 추출
Try Catch로 감싸기
조건으로 감싸기
화살표 함수로 변환
Getters/Setters 만들기

다음 섹션을 통해 각 리팩터링 옵션의 기능에 대해 살펴보십시오.

이름 바꾸기

이름 바꾸기는 JavaScript 코드에서 변수 이름 또는 함수 이름의 모든 항목을 변경하는 데 사용됩니다. 리팩터링을 위해 클릭 및 드래그로 변수를 선택할 필요가 없습니다.

JavaScript에서 이름을 바꾸려면 다음 단계를 수행하십시오.

변경하려는 코드에서 텍스트 커서를 강조 표시하거나 배치합니다.
선택한 텍스트를 마우스 오른쪽 버튼으로 클릭한 다음 리팩터 > 이름 바꾸기를 선택합니다. Windows OS에서 Ctrl + Alt + R 키보드 단축키를 사용하거나 macOS에서 Command + option + R 키보드 단축키를 사용하여 이름을 바꿀 수도 있습니다.
다중 커서 보기가 화면에 표시되며, 여기서 변수의 모든 항목을 변경할 수 있습니다. 멀티 커서 개선은 현재 선택 항목의 다음 항목을 선택합니다. 고유한 변수 또는 함수 이름을 다시 입력하여 현재 이름을 대체합니다.

이전: 이름 바꾸기

이후: 이름 바꾸기

변수로 추출

변수로 추출 옵션을 통해 표현식을 선택하고 마우스 오른쪽 버튼으로 클릭하여 JavaScript의 변수, 로컬 변수 또는 상수가 포함된 표현식으로 대체할 수 있습니다. 그런 다음 리팩터 > 변수로 추출을 선택합니다. Windows OS의 경우 Ctrl + Alt + V, macOS의 경우 Cmd + Alt + V 단축키를 사용할 수도 있습니다.

함수로 추출

함수로 추출 옵션을 사용하여 매개 변수 내의 함수의 호출에서 표현식을 대체할 수 있습니다. 새 매개 변수의 기본 값은 함수 본문 내에서 초기화하거나 함수 호출을 통해 전달할 수 있습니다.

함수로 추출을 사용하여 리팩터링하려면 다음 단계를 수행하십시오.

JavaScript에서 표현식이나 표현식의 세트를 선택합니다.

표현식 선택
마우스 오른쪽 버튼으로 클릭하고 리팩터 > 함수로 추출을 선택합니다. Windows OS의 경우 Ctrl + Alt + M, Mac OS의 경우 Cmd + Alt + M 단축키를 사용할 수도 있습니다.
화면에 표시되는 팝업 메뉴에서 기능을 추출할 대상 범위를 선택합니다.

범위 유형
출력 값은 선택한 대상 범위에 따라 다릅니다. 예를 들어 대상 범위는 생성자, 선택된 클래스 또는 전역 함수가 될 수 있습니다.

함수로 추출의 특성은 다음과 같습니다.
- 선택 항목이나 추출된 범위에서 사용할 수 있는 식별자를 기반으로 전달할 매개 변수를 식별합니다.
- 선택 항목에서 값이 변경된 식별자를 기반으로 함수에서 반환할 반환 매개 변수를 식별합니다.
- 또한 고유한 이름으로 함수를 생성합니다.
다음 스크린샷에는 각 대상 범위를 기준으로 하는 출력 값이 표시됩니다.
생성자

클래스

전역

Try Catch로 감싸기

Try Catch로 감싸기를 사용하여 프로그램 컴파일 후 오류로 발생하는 코드의 블록을 예외로 처리할 수 있습니다. 이 함수는 Try Catch 블록에서 코드 블록을 래핑합니다. 이 코드 블록은 프로그램을 실행하는 동안 예외로 표시됩니다.

코드를 선택하거나 코드에 커서를 놓고 마우스 오른쪽 버튼을 클릭한 다음 리팩터 > Try Catch로 감싸기를 선택합니다. 커서를 임의의 위치에 놓으면 주변에 있는 명령문을 검색하거나 해당 코드가 명령문으로 구성되어 있는지 여부를 검사하게 됩니다. 명령문이 있다면 Try Catch 블록에서 코드를 래핑합니다.

조건으로 감싸기

코드의 표현식에 대해 조건으로 감싸기를 사용하여 특정 조건만 컴파일할 수 있습니다.

코드의 표현식을 선택하고 마우스 오른쪽 버튼을 클릭한 다음 리팩터 > 조건으로 감싸기를 선택합니다.

화살표 함수로 변환

화살표 함수는 this, arguments, super 또는 new.target과 같은 고유의 함수 표현식을 갖지 않는 표현식입니다. 이들 함수 표현식은 메서드가 아닌 표현식을 위한 것으로, 생성자로 사용할 수 없습니다.

함수에 커서를 놓고 마우스 오른쪽 버튼을 클릭한 다음 리팩터 > 화살표 함수로 변환을 선택합니다.

참고:

선택한 명령문에 하나의 매개 변수가 있으면 매개 변수 구조가 param => {statements}로 표시됩니다.
선택한 명령문에 param (param1, param2)와 같이 두 개 이상의 매개 변수가 있으면 매개 변수 구조는 param (param1, param2) => {statements}로 표시됩니다.

Getters/Setters 만들기

JavaScript에서 Setter는 특정 속성을 변경할 필요가 있는 함수를 실행하는 데 사용됩니다. Setter는 일반적으로 Getter와 함께 유사 속성을 생성하는 데 사용됩니다. Setter를 실제 값을 갖는 속성으로 생성할 수는 없습니다.

오브젝트 표현식의 멤버에 커서를 놓고 마우스 오른쪽 버튼을 클릭한 다음 리팩터 > Getters/Setters 만들기를 선택합니다.

문제 해결 팁

다음 표에는 잘못된 코드 선택으로 인해 화면에 표시되는 해당 오류 메시지에 대한 문제 해결 팁이 기재되어 있습니다.

함수 이름	오류 메시지	문제 해결 팁
이름 바꾸기	주어진 위치에 표현식이 없음	변수 또는 함수 이름 위나 앞에 커서를 놓습니다.
변수로 추출	선택 항목이 표현식을 형성하지 않습니다.	코드를 리팩터링하기 전에 코드에서 표현식을 선택합니다.
함수로 추출	선택된 블록은 일련의 명령문 또는 표현식을 나타내야 합니다.	명령문 또는 표현식의 세트로 블록을 선택했는지 확인하십시오.
Try Catch로 감싸기	Try-catch 블록을 래핑할 올바른 코드를 선택하십시오.	Try catch 리팩터링 옵션을 적용하기 전에 모든 코드를 선택해야 합니다.
조건으로 감싸기	조건 블록을 래핑할 올바른 코드를 선택하십시오.	조건으로 감싸기 리팩터링 옵션을 적용하기 전에 표현식을 선택해야 합니다.
화살표 함수로 변환	함수 표현식 안에 커서를 놓으십시오.	리팩터링 옵션을 적용하기 전에 함수 표현식 안에 커서를 놓아야 합니다.
Getters/Setters 만들기	오브젝트 표현식의 멤버에 커서를 놓으십시오.	Getters/Setters 만들기 리팩터링 옵션을 적용하기 전에 커서를 오브젝트 표현식의 멤버에 놓아야 합니다.

텍스트 찾기 및 바꾸기

Dreamweaver의 강력한 찾기 및 바꾸기 기능을 사용하여 내 사이트나 폴더에서 모든 종류의 텍스트, 코드 또는 공백을 검색할 수 있습니다.

전체 마크업을 검색하거나 디자인 뷰에서 렌더링된 텍스트 또는 단지 코드에 대한 검색으로 제한할 수 있습니다.

복잡한 찾기 및 바꾸기 작업에 대해 강력한 패턴 일치 알고리즘(정규 표현식)을 사용할 수도 있습니다.

텍스트를 찾은 다음 지정한 텍스트, 코드 또는 공백으로 이를 바꿀 수 있습니다.

자세한 내용은 텍스트 찾기 및 바꾸기를 참조하십시오.

코드 보기에서 이미지 및 색상 미리보기

이미지 및 색상에 대한 해당 코드를 삽입한 다음 코드 보기 내에서 바로 미리 볼 수 있습니다.

이미지 미리보기

코드 보기에서 이미지를 미리 보려면 해당 이미지 URL에 마우스를 가져다 대십시오. 다음으로 참조되는 모든 이미지를 미리 볼 수 있습니다.

url();
data-uri()
img 태그의 src 속성 값

Dreamweaver에서는 원격으로 호스팅되는 이미지의 미리보기도 표시됩니다.

Dreamweaver에서 원격 경로에 대한 미리보기를 표시할 수 없는 경우 “이미지를 불러올 수 없습니다” 메시지가 표시됩니다.

다음과 같은 이미지 파일 유형을 미리보기 할 수 있습니다.

JPEG
JPG
PNG
GIF
SVG

색상 미리보기

코드 보기에서 색상을 미리 보려면 색상 값에 마우스를 가져다 대십시오. 지원 되는 유형은 다음과 같습니다.

3자리 및 6자리 16진수 색상 값: #ff0000;
RGB: rgb(0, 0, 0);
RGBA: rgba(0, 255, 228,0.5);
HSL: hsl(120, 100%, 50%);
HSLA: hsla(120, 60%, 70%, 0.3);
사전 정의된 색상 이름, 예: 올리브색, 암녹색, 빨간색 등.

색상 미리보기는 위 색상 형식의 모든 문서 유형에서 사용할 수 있습니다.

값을 마우스 오른쪽 버튼으로 클릭하고 빠른 편집을 선택하여 색상 피커를 열고 다른 색상을 선택합니다.

참고:

이미지 및 색상에 대한 미리보기 기능을 비활성화하려면 보기 > 코드 보기 옵션 > 에셋 미리보기 옵션을 선택 해제합니다.

코드 인쇄

코드를 인쇄하여 오프라인으로 편집하거나 보관하거나 배포할 수 있습니다.

코드 보기에서 페이지를 엽니다.
파일 > 코드 인쇄를 선택합니다.
인쇄 옵션을 지정한 다음 확인(Windows) 또는 인쇄(Macintosh)를 클릭합니다.

쉽고 빠르게 지원 받기

신규 사용자이신가요?

코드 작성 및 편집

삽입 패널을 사용하여 코드 삽입

Dreamweaver에서 Emmet 툴킷 사용

코드 주석을 사용하여 작업

코드에 주석 추가

코드에서 주석 제거

코드 주석 켜기/끄기

다중 커서를 사용해 여러 위치에 테스트를 추가하거나 변경할 수 있습니다.

다중 커서 또는 다중 선택 추가

빠른 문서를 사용하여 Dreamweaver 내에서 CSS에 대한 도움 받기

코드 분석

태그 줄 바꿈을 사용하여 코드의 텍스트 줄 바꿈

코딩 컨텍스트 메뉴로 코드 편집

코드 블록 들여쓰기

선택된 코드 블록 들여쓰기

선택된 코드 블록 들여쓰기 취소

관련 코드로 이동

코드 탐색기 열기

코드 탐색기를 사용하여 코드로 이동

코드 탐색기 표시기 비활성화

JavaScript 또는 VBScript 함수로 이동

JavaScript 추출

빠른 편집

코드 리팩터링

JavaScript 리팩터링

이름 바꾸기

변수로 추출

함수로 추출

Try Catch로 감싸기

조건으로 감싸기

화살표 함수로 변환

Getters/Setters 만들기

문제 해결 팁

텍스트 찾기 및 바꾸기

코드 보기에서 이미지 및 색상 미리보기

이미지 미리보기

색상 미리보기

코드 인쇄

쉽고 빠르게 지원 받기