Adobe 도움말 센터

코드 작성 및 편집

마지막 업데이트 날짜 2021년 4월 27일

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

Dreamweaver에서 코드 작업을 수행하는 방법은 여러 가지가 있습니다.

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

입력할 때 코드 힌트가 나타나 코드를 선택하고 철자 오류를 피할 수 있습니다. Dreamweaver의 유용한 Quick Docs를 사용하여 필요할 때 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>

</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가 태그를 삽입합니다. 댓글 텍스트를 입력하기만 하면 됩니다.

Windows에서는 Ctrl+/, Mac에서는 Cmd+/ 키보드 단축키를 사용하여 댓글을 추가할 수도 있습니다.

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

코드에서 주석 제거

코드 주석을 제거하려면 코드를 선택하고, 툴바에서 [주석 제거] 아이콘을 클릭합니다. 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에서 Web Platform Docs 프로젝트의 문서가 열립니다.

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

단일 인라인 편집기 또는 문서 뷰어를 닫으려면 왼쪽 상단의 "X"를 클릭하거나 Quick Docs에 초점이 맞춰진 상태에서 Escape를 누르십시오.

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

코드 분석

Dreamweaver는 HTML, CSS 및 JavaScript의 linting(잠재적 오류에 대한 코드 분석)을 지원합니다.

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

또한, 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-Up/Down을 사용합니다.

인라인 편집기에서 직접 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를 만들 수 없습니다.

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

문제 해결 팁

다음 테이블은 잘못된 코드 선택으로 인해 화면에 표시되는 해당 오류 메시지에 대한 문제 해결 팁을 제공합니다.

기능 이름	오류 메시지	문제 해결 팁
이름 바꾸기	주어진 위치에 표현식이 없음	변수 또는 함수 이름 위나 앞에 커서를 놓습니다.
변수로 추출	선택 항목이 표현식을 형성하지 않습니다.	코드를 리팩터링하기 전에 코드에서 표현식을 선택합니다.
함수로 추출	선택된 블록은 일련의 명령문 또는 표현식을 나타내야 합니다.	명령문 또는 표현식의 세트로 블록을 선택했는지 확인하십시오.
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);
Olive, Teal, red와 같은 사전 정의된 색상 이름.

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

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

메모

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

코드 인쇄

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

코드 보기에서 페이지를 엽니다.

파일 > 코드 인쇄를 선택합니다.

인쇄 옵션을 지정한 다음 [확인](Windows) 또는 [인쇄](Macintosh)를 클릭합니다.

Dreamweaver에서 세련된 웹 사이트 만들기
강력한 올인원 도구로 동적 웹 사이트를 디자인, 코딩 및 관리하세요.

앱 열기

코드 색상 표시 맞춤 설정

코드 힌트 및 코드 완성

학습

앱에서 바로 단계별 비디오 튜토리얼과 실습형 안내를 통해 학습하십시오.

커뮤니티

전문가들과 토론하고, 답변을 찾고, 배우며, 여러분의 지식을 공유하세요.

Adobe 홈

즐겨 사용하는 Creative Cloud 앱, 서비스, 파일 관리 등에 액세스하세요.

코드 작성 및 편집

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

Dreamweaver에서 Emmet 툴킷 사용

코드 주석을 사용하여 작업

코드에 주석 추가

코드에서 주석 제거

코드 주석 켜기/끄기

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

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

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

코드 분석

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

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

코드 블록 들여쓰기

선택된 코드 블록 들여쓰기

선택한 코드 블록의 들여쓰기 해제

관련 코드로 이동

코드 탐색기 열기

코드 탐색기로 코드 탐색

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

JavaScript 또는 VBScript 함수로 이동

JavaScript 추출

빠른 편집

코드 리팩터링

JavaScript 리팩터링

이름 바꾸기

변수로 추출

함수로 추출

Try Catch로 감싸기

조건으로 감싸기

화살표 함수로 변환

Getters/Setters 만들기

문제 해결 팁

텍스트 찾기 및 바꾸기

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

이미지 미리 보기

색상 미리보기

코드 인쇄

학습

커뮤니티

Adobe 홈