에셋을 사용하여 작업

Adobe Dreamweaver에서는 사이트에 저장된 이미지, 동영상, 색상, 스크립트 및 링크와 같은 에셋을 관리하고 미리 볼 수 있습니다. 또한 에셋을 현재 문서의 페이지로 직접 드래그하여 삽입할 수도 있습니다.

에셋은 다양한 소스에서 얻을 수 있습니다. 예를 들어 Adobe Photoshop이나 Adobe Animate CC 등의 애플리케이션에서 에셋을 만들거나, 다른 공동 작업자로부터 에셋을 받거나, 클립아트 CD 또는 그래픽 웹 사이트에서 에셋을 복사할 수 있습니다.

또한 Dreamweaver에서는 라이브러리와 템플릿이라는 두 가지 특별한 유형의 에셋을 사용할 수 있습니다. 두 가지 에셋은 모두 링크된 에셋입니다. 즉, 라이브러리 항목이나 템플릿을 편집하면 Dreamweaver에서 해당 에셋이 사용된 모든 문서가 업데이트됩니다. 라이브러리 항목은 일반적으로 사이트 로고나 저작권 같은 작은 디자인 에셋을 나타냅니다. 보다 넓은 디자인 영역을 관리하려면 템플릿을 대신 사용합니다.

에셋 패널(윈도우 > 에셋)을 사용하여 현재 사이트의 에셋을 관리할 수 있습니다. 에셋 패널에는 문서 창의 활성 문서와 관련된 사이트에 대한 에셋이 표시됩니다.

에셋 패널에서 다양한 방법으로 에셋을 볼 수 있습니다.

사이트의 문서에 사용되는 색상과 URL을 비롯하여 사이트 내의 모든 에셋이 표시됩니다.

사용자가 직접 선택한 에셋만 표시됩니다.

두 가지 보기 사이에서 전환하려면 미리보기 영역 위에서 사이트 또는 즐겨찾기 라디오 버튼을 선택합니다. 이러한 두 가지 보기는 템플릿 및 라이브러리 범주에는 사용할 수 없습니다.

두 개의 목록에서 에셋은 다음 범주 중 하나로 분류됩니다.

GIF, JPEG 또는 PNG 포맷의 이미지 파일입니다.

텍스트 색상, 배경색 및 링크 색상을 비롯하여 문서 및 스타일 시트에 사용되는 색상입니다.

FTP, gopher, HTTP, HTTPS, JavaScript, 이메일(mailto) 및 로컬 파일(file://) 링크 등 현재 사이트 문서의 외부 링크를 나타냅니다.

Adobe Flash(SWF 전용) 파일, Adobe Shockwave 파일, QuickTime 또는 MPEG 파일 등의 미디어 파일입니다.

JavaScript 또는 VBScript 파일입니다. 독립적인 JavaScript나 VBScript 파일이 아닌 HTML 파일에 포함된 스크립트는 에셋 패널에 표시되지 않습니다. 이 범주는 코드 및 디자인 뷰에서만 사용할 수 있습니다.

여러 페이지에 사용되는 마스터 페이지 레이아웃입니다. 템플릿을 수정하면 템플릿에 연결된 모든 페이지가 자동으로 수정됩니다. 이 범주는 코드 및 디자인 뷰에서만 사용할 수 있습니다.

여러 페이지에 사용되는 디자인 요소입니다. 라이브러리 항목을 수정하면 해당 항목이 포함된 모든 페이지가 업데이트됩니다. 이 범주는 코드 및 디자인 뷰에서만 사용할 수 있습니다.

기본적으로 범주의 에셋은 이름에 따라 사전순으로 나열되지만, 유형과 몇 가지 기타 기준에 따라 이를 정렬할 수도 있습니다. 에셋을 미리 보고 열 및 미리보기 영역의 크기를 조절할 수도 있습니다.

유형 열의 Creative Cloud 아이콘은 Creative Cloud Libraries에서 해당 에셋을 가져온다는 것을 나타냅니다. Creative Cloud 아이콘을 더블 클릭하여 해당 에셋을 재샘플링할 수 있습니다. CC Libraries의 에셋을 재사용하는 방법에 대한 자세한 내용은 Dreamweaver의 Creative Cloud Libraries를 참조하십시오.

범주에서 에셋 표시

에셋 정렬

열 크기 조절

미리보기 영역 크기 조절

에셋 패널 새로 고치기

먼저 Dreamweaver가 사이트 캐시를 읽어야 하므로 사이트 목록을 만드는 데 몇 초 정도 소요될 수 있습니다.

일부 변경 사항은 에셋 패널에 즉시 표시되지 않습니다. 예를 들어 사이트에 에셋을 추가하거나 사이트에서 에셋을 삭제하는 경우 [사이트 목록 새로 고침] 버튼을 클릭하여 사이트 목록을 새로 고쳐야 변경 사항이 에셋 패널에 나타납니다. 예를 들어 Windows 탐색기 또는 Finder를 사용하여 Dreamweaver 외부의 에셋을 추가하거나 제거하는 경우 사이트 캐시를 다시 구성하여 에셋 패널을 업데이트해야 합니다.

사이트에서 특정 색상 또는 URL의 유일한 인스턴스를 제거하거나 사이트에서 이전에 사용하지 않은 색상 또는 URL이 포함된 새 파일을 저장하는 경우 사이트 목록을 새로 고쳐야 변경 사항이 에셋 패널에 나타납니다.

• 사이트 목록을 수동으로 새로 고치려면 [사이트 목록 새로 고침] 버튼 을 클릭합니다. 필요에 따라 Dreamweaver는 사이트 캐시를 만들거나 업데이트합니다.
• 사이트 목록을 새로 고치고 사이트 캐시를 수동으로 다시 구성하려면 에셋 목록을 마우스 오른쪽 버튼으로 클릭(Windows)하거나 Command 키를 누른 채로 클릭(Macintosh)한 다음 [사이트 목록 새로 고침]을 선택합니다.

문서에 에셋 추가하기

대부분의 에셋은 라이브 뷰, 코드 보기 및 디자인 뷰로 드래그하거나 패널의 삽입 버튼을 사용하여 문서에 삽입할 수 있습니다. 에셋 패널의 목록 보기와 미리보기 패널 모두에서 에셋을 드래그할 수 있습니다.

참고: 미리보기 패널에서 드래그하기는 Mac에서만 지원됩니다.

디자인 또는 라이브 뷰의 색상 및 URL을 삽입할 수 있습니다. 디자인 뷰에서 선택한 요소에 색상과 URL을 적용할 수 있습니다.

에셋 패널을 사용하여 텍스트에 색상 적용

에셋 패널에는 텍스트, 표 테두리, 배경 등의 여러 요소에 이미 적용한 색상이 표시됩니다.

이미지 또는 텍스트에 URL 할당 

에셋 선택 및 편집

에셋 패널에서는 여러 에셋을 한 번에 선택할 수 있으며, 또한 이 패널에서 에셋 편집을 빠르게 시작할 수도 있습니다.

여러 에셋 선택하기

에셋 편집

에셋 패널에서 에셋을 편집할 때 에셋 유형에 따라 비헤이비어가 다릅니다. 이미지와 같은 일부 에셋에서는 해당 에셋 유형에 대한 편집기를 정의한 경우 자동으로 열리는 외부 편집기를 사용합니다. 즐겨찾기 목록에 있는 색상 및 URL만 편집할 수 있습니다. 템플릿 및 라이브러리 항목을 편집하는 경우 Dreamweaver 내에서 변경해야 합니다.

다른 사이트의 에셋 재사용하기

에셋 패널에는 현재 사이트에 있는 인식된 유형의 모든 에셋이 표시됩니다. 현재 사이트의 에셋을 다른 사이트에서 사용하려면 에셋을 다른 사이트로 복사해야합니다. 개별 에셋 또는 여러 개의 개별 에셋을 복사할 수도 있고 즐겨찾기 폴더 전체를 한꺼번에 복사할 수도 있습니다.

원격 사이트와의 에셋 전송 작업을 수행하기 전에 에셋 패널의 특정 에셋에 해당하는 파일을 파일 패널에서 찾아야 할 수도 있습니다.

파일 패널에서 에셋 파일 찾기

에셋 패널의 에셋을 다른 사이트로 복사하기