새로운 기능 요약 - 2015년 5월

비주얼 미디어 쿼리

코드 Linting 지원

이제 이 새로운 버전의 Dreamweaver에서 Linting을 사용하여 일반적인 오류의 코드를 디버그할 수 있습니다. Linting은 프로그램을 실행하여 코드의 잠재적 오류를 식별하는 프로세스입니다. Dreamweaver에서는 로드하거나 저장하거나 편집할 때 HTML, CSS 및 JavaScript 파일을 린트할 수 있습니다. 그런 다음 오류 및 경고가 출력 패널에 나열됩니다.

자세한 내용은 코드 린트를 참조하십시오.

Emmet 지원

Dreamweaver에 여러 줄의 코드를 입력하는 열성적인 개발자이십니까? 코드에 Emmet 약어를 사용하여 시간을 절약하십시오. 기억하고 입력하기 쉬운 이러한 약어는 Tab 키를 누르면 코드 보기에서 완전한 코드로 확장됩니다.

자세한 내용은 Emmet를 사용한 코드 삽입을 참조하십시오.

CSS 프리프로세서

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

이미지 미리 보기

이제 Dreamweaver에서 이미지 URL 위에 마우스를 가져가면 코드 보기에서 이미지를 미리 볼 수 있습니다.

이제 이미지 미리 보기를 <img src="https://a2.behance.net/img/profile/no-image-138.jpg?cb=1816124956" />와 같은 원격 이미지 경로로도 실행할 수 있습니다.

Dreamweaver에서 원격 경로로 미리 보기를 표시할 수 없는 경우에는 "이미지를 로드할 수 없습니다." 메시지가 표시됩니다.

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

JPEG
JPG
PNG
GIF
BMP
SVG

다음과 같은 경우에 URL 위로 마우스를 가져가면 이미지 미리 보기가 표시됩니다.

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

색상 미리 보기

이제 코드 보기에서 에셋 미리 보기가 더욱 향상되었습니다. 이제 Dreamweaver에서 색상 값 위에 마우스를 가져가면 코드 보기에서 색상을 미리 볼 수 있습니다. 지원되는 형식은 다음과 같습니다.

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).
미리 정의된 색상 이름: 올리브색, 암녹색, 빨간색 등.

새 코드 단편

단편은 프로젝트에서 반복적으로 재사용할 수 있는 코드의 부분입니다. Dreamweaver의 이번 릴리스에서는 새로운 코드 단편 및 업데이트된 코드 단편을 제공합니다.

• Boostrap_Snippets
• CSS_Animation_And_Transitions
• CSS_Effects
• CSS_Snippets
• HTML_Snippets
• JavaScript 코드 단편(업데이트됨)
• PHP_Snippets
• Preprocessor_Snippets
• Responsive_Design_Snippets

코드 단편 사용에 대한 자세한 내용은 코드 단편 작업을 참조하십시오.

부트스트랩 통합

Dreamweaver의 부트스트랩 프레임워크(버전 3 이상)를 사용하여 만든 웹 사이트를 열고 코드 또는 시각 디자인 기능을 사용하여 페이지를 편집할 수 있습니다. Dreamweaver에서는 파일 이름에 '부트 스트랩'이 포함된 경우 관련 CSS 파일을 인식합니다. 

Dreamweaver(삽입 패널) 내에 부트스트랩 구성 요소를 추가하고 격자를 쉽고 빠르게 편집하여 다양한 뷰포트 디자인을 수정할 수도 있습니다.

자세한 내용은 부트스트랩 파일 작업을 참조하십시오.

부트스트랩 시작 템플릿

이제 Dreamweaver에는 반응형 디자인을 빠르게 시작할 수 있는 부트스트랩 템플릿이 포함되어 있습니다. [새 문서] 대화 상자에서 다음 부트스트랩 템플릿에 액세스할 수 있습니다.

• Bootstrap-eCommerce
• Bootstrap-One PageBootstrap-Portfolio
• Bootstrap-The Agency
• Bootstrap-The Grid

코드 폴딩

이제 태그 블록을 기반으로 HTML, CSS, LESS, SASS, SCSS, JS, PHP, XML 및 SVG 파일로 코드 폴딩이 가능합니다. 줄 번호 열 위로 마우스를 가져가면 코드 보기의 줄 번호 옆에 작은 삼각형이 나타나 이를 클릭하여 코드 블록을 축소/확장할 수 있습니다. 이 새로운 코드 폴딩 기능은 선택에 따라 기존의 기능을 대체합니다.

코드 폴딩 아이콘(역 삼각형)은 코드 보기에서 코드 줄이 두 개 이상인 모든 태그 블록에 표시됩니다.

복사, 잘라내기, 붙여넣기 및 드래그 앤 드롭 작업은 코드 폴딩 상태를 유지합니다. 예를 들어, 축소된 코드 블록을 복사하면 붙여넣기 작업은 복사된 텍스트를 축소된 코드 블록으로 붙여 넣습니다.

HTML 파일의 코드 폴딩

이전 코드 축소 기능과는 달리 축소된 내용은 이제 닫기 태그를 포함하며 이전 구현과 다르게 렌더링됩니다.

이제 축소된 코드 블록에 표시되는 문자 수가 증가되었습니다. 이를 사용하여 축소된 태그 블록에 초기 특성이 있는 경우 미리 볼 수 있습니다. 예를 들어, 축소된 Div 태그에 ID 및 클래스 특성이 있으면 축소된 블록은 다음과 같이 표시됩니다.

Windows에서 축소된 코드 위에 마우스를 가져가면 축소된 블록 내의 코드를 미리 볼 수 있습니다. 축소된 블록은 축소된 블록 내의 코드가 태그 선택기, 찾기 및 바꾸기, 행으로 이동, 요소 간략히 보기, 라이브 뷰 또는 실행 취소/다시 실행을 통해 포커스 받으면 자동으로 확장됩니다. 포커스가 코드 블록의 외부로 이동하면 자동으로 축소됩니다.

CSS, LESS, SASS, SCSS 및 JS 파일의 폴딩

이제 중괄호로 묶인 코드 블록이 CSS, Less, Sass, SCSS 및 JS 파일에서 축소될 수 있습니다.

여는 중괄호 "{"가 포함된 줄에 코드 축소 영역에 커서를 올려 놓습니다.

축소를 클릭하면 일치하는 중괄호 쌍 사이의 내용이 축소되고 미리 보기가 "{...}"로 표시됩니다.

PHP 파일의 코드 폴딩

PHP 파일에서 PHP 코드 블록 외에 HTML 요소, CSS 및 JS 코드 블록을 축소할 수 있습니다.

"<?php"로 시작하고 "?>"로 끝나는 각 PHP 블록을 축소할 수 있습니다.

<?php가 포함된 줄의 코드 축소 영역에 커서를 올려 놓고 축소 아이콘을 클릭하여 코드 블록을 축소합니다.