Dreamweaver의 코딩 환경

Dreamweaver에서 코드로 작업하려는 경우 개발자 작업 영역을 사용할 수 있습니다. 이 작업 영역은 기본적으로 코드 보기를 표시하며 화면 왼쪽에 파일 패널과 스니펫 패널만 도킹되어 있습니다.

추가 기능이 필요한 경우 [윈도우]를 클릭한 다음 필요한 패널을 선택하여 표시되도록 할 수 있습니다.

Dreamweaver에서 다양한 방법으로 코드를 사용하여 작업할 수 있습니다. 예를 들어 다음과 같은 기능을 사용할 수 있습니다.

• 코드 보기: 불필요한 패널이나 창 없이 명료하고 최소화된 레이아웃에서 순수하게 코드로만 작업할 수 있습니다. 자세한 내용은 문서 창에서 코드 보기를 참조하십시오.
• 분할 보기: 이 보기 방식에서는 코드 및 라이브 또는 디자인 뷰를 모두 볼 수 있어 코드를 작성하면서 변경 내용을 바로 확인할 수 있습니다. 자세한 내용은 문서 창에서 페이지 편집과 코드 작성을 동시에 작업 - 분할 보기을 참조하십시오.

작업 영역의 상단에 있는 코드, 분할, 디자인/라이브 토글 버튼을 클릭하여 다양한 보기 모드 간을 이동할 수 있습니다.

코드 관리자를 사용하여 플로팅 창에 해당 HTML이 표시되도록 할 수도 있습니다. 코드 관리자는 반으로 분할된 보기가 아닌 웹 사이트의 디자인과 코드를 동시에 확인할 수 있습니다. 자세한 내용은 코드 관리자로 별도 창에서 코드 보기를 참조하십시오.

문서 창에서 코드 보기 - 코드 뷰

문서 창에서 페이지 편집과 코드 작성을 동시에 작업 - 분할 보기

코드 관리자로 별도 창에서 코드 보기

코드 관리자를 사용하면 코드 보기에서 작업하는 것처럼 별도의 코드 작성 창에서 작업할 수 있습니다.

Dreamweaver에서의 보다 신속한 코딩

Dreamweaver의 코드 보기는 디자이너들이 코드 보기에서 개발을 수행하는 것을 선호하고 숙련된 코드 작업자들이 자동 들여쓰기, 코드 색상 표시 및 오류를 줄이고 가독성을 향상시키는 크기 조정 가능 글꼴 등 시각적인 보조 기능의 혜택을 누릴 수 있도록 코딩에 최적화된 환경을 제공합니다.

Dreamweaver에서 제공하는 일부 기능은 아래와 같습니다.

코드 힌트 및 코드 완성

Dreamweaver의 코드 힌트(또는 코드 완성) 기능을 통해 입력 시 팝업 메뉴에서 태그, 속성, CSS 스타일을 선택할 수 있습니다. 이 자동 코드 완성 기능을 사용하면 코드를 더욱 빠르게 작성하고 오류를 줄일 수 있습니다.

아래의 예에서는 이러한 기능이 HTML에서 작동하는 방식에 대해 설명합니다. 

“<”를 입력하면 Dreamweaver는 사용할 수 있는 모든 HTML 태그가 나열된 팝업 메뉴를 즉시 표시합니다. 태그의 나머지 부분을 계속 입력하면 Dreamweaver는 자동으로 사용 가능한 HTML 옵션을 업데이트하여 해당 태그를 선택할 수 있도록 해줍니다. Enter를 누르면 Dreamweaver가 자동으로 태그를 삽입합니다. 그런 다음 해당 태그에 대해 사용할 수 있는 모든 속성을 나열하는 두 번째 팝업 메뉴를 표시합니다.

코드 힌트 지원은 CSS, JavaScript 및 PHP(PHP 버전 5.6 및 7.1)에 사용할 수 있습니다. 

자세한 내용은 코드 힌트 및 코드 완성을 참조하십시오.

PHP 5.6 및 7.1 버전에 대한 지원

Dreamweaver는 PHP 버전 5.6 및 7.1을 지원합니다. 

사이트 설정 대화 상자(사이트별 기준) 또는 애플리케이션 환경 설정(Dreamweaver 사이트 외부에서 저장한 모든 PHP 파일에 대해)을 통해 내 사이트의 PHP 파일(PHP 버전 5.6 또는 7.1)을 컴파일할 수 있습니다. Dreamweaver는 이후 선택한 PHP 언어 버전에 대한 코드 힌트 및 Linting 검사를 설정합니다.

Dreamweaver의 신규 사이트에 대해 PHP 컴파일러는 편집 > 환경 설정 > PHP에서 지정한 버전으로 설정됩니다.

Dreamweaver에서의 PHP 지원에 대한 자세한 내용은 다음 링크를 참조하십시오.

• PHP 환경 설정
• PHP 코드 힌트

PHP 버전 5.6 및 7.1에 대한 일반 정보는 다음 리소스를 참조하십시오.

• PHP 5.6.x에서 PHP 7.0.x로 마이그레이션: http://php.net/manual/en/migration70.php
• PHP 7.0.x에서 PHP 7.1로 마이그레이션: http://php.net/manual/en/migration71.php
• PHP 7.1에 대한 자세한 내용: http://php.net/releases/7_1_0.php

JavaScript 오브젝트 코드 힌트

Dreamweaver는 JavaScript의 오브젝트 코드 힌트 기능을 지원합니다. Dreamweaver는 배열, 날짜, 숫자 및 문자열과 같은 기본 JavaScript 오브젝트에 대한 코드 힌트를 제공합니다. 

또한 Dreamweaver는 사용자가 만든 JavaScript 함수를 추적하고 사용자 고유의 함수 이름을 사용하여 코드 힌트를 제공합니다.

자세한 내용은 코드 힌트 및 코드 완성을 참조하십시오.

JavaScript 코드 리팩터링

Dreamweaver는 코드 리팩터링을 지원합니다. 코드 리팩터링은 외부 비헤이비어의 변경 없이 기존의 컴퓨터 코드를 재구성하는 프로세스입니다. 코드는 보다 가독성이 높고 이해하기 쉽게 구성됩니다. 코드를 디버깅하면 함수가 작아지고 대체가 적절하기 때문에 시간이 절약됩니다. JavaScript 리팩터링을 통해 범위를 인지하고 함수와 변수의 이름을 바꿀 수 있습니다.

자세한 내용은 코드 작성 및 편집을 참조하십시오.

다양한 유형의 파일에 대한 코드 색상 표시

이제 Dreamweaver가 HTML, JS, CSS, PHP, XML, LESS, Sass, SCSS, SVG, Bash, C, C#, C++, clojure, CoffeeScript, Dart, Diff, EJS, Embedded Ruby, Groovy, Handlebars, Haskell, Haxe, Java, JSON, Lua, Markdown, Markdown(GitHub), Perl, Properties, Python, RDF Turtle, Ruby, Scala, SQL, Stylus, Text, VB, VBScript, XML 및 YAML에 대해 코드 색상 표시를 지원합니다.

반복 작업을 위한 다중 커서

한 번에 하나 이상의 코드 행을 작성해 불릿 목록을 만들고 문자열을 업데이트하고 여러 편집을 동시에 진행하는 등의 작업을 빠르게 진행합니다.

이 기능을 사용하면 동일한 내용의 코드를 여러 번 반복하여 작성할 필요가 없으므로 생산성이 크게 향상됩니다. 다중 커서가 이러한 작업을 대신 수행해 줍니다.

코드를 편집하는 동안 다음과 같은 작업을 할 수 있습니다.

• 다중 커서를 추가하여 여러 위치에 새로운 내용 추가
• 여러 위치에서 텍스트를 선택하여 내 문서의 여러 부분에 동일한 편집 내용 적용

자세한 내용은 다중 커서 또는 다중 선택 추가를 참조하십시오.

관련 코드 파일의 빠른 편집

코드를 빠르게 변경하려면 특정 코드 스니펫 위에 커서를 놓고 컨텍스트 메뉴를 사용하거나 Ctrl-E(Windows) 또는 Cmd-E(Mac) 키를 눌러 빠른 편집에 액세스하면 됩니다.

Dreamweaver가 상황에 맞는 코드 옵션과 인라인 도구를 표시합니다.

상황에 따른 사용 사례

다음과 같은 상황을 예로 들어보겠습니다.

HTML 파일을 편집하는 도중 라이브 뷰에서 볼 때 무언가 잘못 표시되고 있다는 것을 발견했습니다. 코드 보기로 전환해 보니 이 문제를 해결하려면 다른 관련 파일(예: CSS 파일)을 편집해야 한다는 것을 알게 되었습니다. 

탭을 전환하는 대신 관련 코드를 마우스 오른쪽 버튼으로 클릭하고 빠른 편집을 클릭하거나 키보드 단축키를 사용하면 Dreamweaver가 HTML 파일 자체 내에서 관련 CSS 파일의 코드와 관련된 섹션을 엽니다.

그러면 멀리 돌아서 이동하거나 탭을 전환하지 않고도 해당 CSS 코드를 편집할 수 있습니다. 변경 내용은 해당 CSS 파일에서 자동으로 업데이트됩니다.

자세한 내용은 빠른 편집을 참조하십시오.

상황에 맞는 CSS 설명서

빠른 문서는 코드 보기 내에서 바로 CSS 속성에 대한 설명서를 제공합니다.

CSS 속성에 대해 알아보기 위해 Dreamweaver 외부의 웹 페이지를 탐색할 필요가 없습니다. 빠른 문서를 불러오려면 Ctrl+K(Windows) 또는 Cmd+K(Mac)를 누릅니다.

자세한 내용은 빠른 문서를 사용해 Dreamweaver 내에서 CSS에 대한 도움 받기를 참조하십시오.

Emmet에 대한 혁신적인 지원

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

Dreamweaver에 포함된 Emmet 플러그인을 통해 플러그인을 설치하는 추가적인 단계 없이 Emmet 약어를 사용할 수 있습니다.

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

HTML 약어는 HTML 및 PHP 페이지에서 확장됩니다.

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

Emmet 사용에 대한 자세한 내용은 Dreamweaver로 Emmet 툴킷 사용을 참조하십시오.

코드 축소

Dreamweaver에서 사용자가 현재 편집하고 있는 섹션에 보다 집중할 수 있도록 섹션 코드를 축소할 수 있습니다. 

태그 또는 대괄호를 기준으로 코드를 축소하거나 선택 항목에 따라 코드를 축소할 수 있습니다. 

자세한 내용은 코드 축소 및 확장을 참조하십시오.

코드 유효성 검사

Dreamweaver는 코드에서의 오류를 디버그하는 데 유용한 강력한 Linting 기능을 제공합니다. 

이는 코드를 분석하여 잠재적인 오류 또는 의심스러운 코드 사용을 짚어줍니다. HTML 구문 오류, CSS의 구문 분석 오류 또는 JavaScript 파일의 경고 등이 Dreamweaver에서 Linting에 의해 플래그가 지정되는 항목입니다.

Dreamweaver에서의 코드 Linting에 대한 자세한 내용은 코드 린트를 참조하십시오.

PHP로 작업 중이며 문서에 잘못된 코드가 포함되어 있는 경우 Dreamweaver는 디자인 뷰(열려 있는 경우)에 해당 코드를 표시하고 코드 보기에서 이를 강조 표시합니다(환경 설정 내용에 따라 다름).

두 종류의 보기 모드 중 하나에서 코드를 선택하면 속성 관리자에 해당 코드가 잘못된 이유와 수정 방법이 표시됩니다.

CSS 프리프로세서에 대한 지원

Dreamweaver는 이제 SASS, Less 및 SCSS와 같은 일반적인 CSS 프리프로세서에 대한 코드 색상 표시, 코드 힌트 및 컴파일 기능을 지원합니다. 

CSS 프리프로세서 지원을 통해 복잡한 스타일 시트를 포함하는 대규모 사이트에 대한 작업 시간을 줄일 수 있습니다.

Dreamweaver에서의 CSS 프리프로세서 지원에 대한 자세한 내용은 Dreamweaver에서 CSS 프리프로세서 사용을 참조하십시오.

코드 스니펫 저장 및 재사용

[코드 스니펫] 패널 내에서 일반적으로 코드 스니펫으로 사용되는 코드 블록을 저장합니다. 그러면 여러 페이지에서 이 코드 블록을 삽입할 수 있습니다.

스니펫 패널에서 저장된 스니펫은 사이트 특정 항목이 아니므로 여러 사이트에서 재사용할 수 있습니다.

또한 동기화 설정을 사용하여 다른 여러 디바이스와 다른 버전의 Dreamweaver에서도 해당 스니펫을 사용할 수 있습니다.

자세한 내용은 스니펫으로 코드 재사용을 참조하십시오.

브라우저에서 실시간 미리보기

브라우저를 수동으로 새로 고치지 않고도 실시간으로 브라우저에서 코드 변경 내용을 빠르게 미리 볼 수 있습니다. 이제 Dreamweaver가 브라우저와 연결되어 페이지를 다시 불러오지 않고도 변경 내용을 브라우저에 즉시 표시합니다.

자세한 내용은 브라우저에서 실시간 미리보기를 참조하십시오.

키보드 단축키 맞춤화

즐겨 사용하는 키보드 단축키를 Dreamweaver에서 사용할 수 있습니다. 행 분리를 추가할 때 Shift+Enter, 코드의 특정 위치로 이동할 때 Ctrl+G 등과 같이 특정 키보드 단축키를 사용하는 경우 [키보드 단축키 편집기]를 사용하여 해당 단축키를 Dreamweaver에 추가할 수 있습니다.

자세한 내용은 키보드 단축키 맞춤화를 참조하십시오.

기본적으로 코드 보기에서 파일 열기

JavaScript 파일과 같이 HTML 코드가 전혀 들어있지 않은 파일 유형을 열 때는 디자인 뷰가 아니라 코드 보기 또는 코드 관리자에서 열립니다. 코드 보기에서 열 파일 유형을 지정할 수 있습니다.