에셋 패널에서 에셋을 선택합니다.
마지막 업데이트 날짜
2024년 4월 25일
Dreamweaver의 에셋 패널을 사용하여 현재 사이트의 에셋을 관리할 수 있습니다.
Adobe Dreamweaver에서는 사이트에 저장된 이미지, 동영상, 색상, 스크립트 및 링크와 같은 에셋을 관리하고 미리 볼 수 있습니다. 또한 에셋을 현재 문서의 페이지로 직접 드래그하여 삽입할 수도 있습니다.
에셋은 다양한 소스에서 얻을 수 있습니다. 예를 들어 Adobe Photoshop이나 Adobe Animate 같은 애플리케이션에서 에셋을 만들거나, 동료로부터 받거나, 클립 아트 CD나 그래픽 웹 사이트에서 복사할 수 있습니다.
또한 Dreamweaver에서는 라이브러리와 템플릿이라는 두 가지 특별한 유형의 에셋을 사용할 수 있습니다. 두 가지 에셋은 모두 링크된 에셋입니다. 즉, 라이브러리 항목이나 템플릿을 편집하면 Dreamweaver에서 해당 에셋이 사용된 모든 문서가 업데이트됩니다. 라이브러리 항목은 일반적으로 사이트 로고나 저작권 같은 작은 디자인 에셋을 나타냅니다. 보다 넓은 디자인 영역을 관리하려면 템플릿을 대신 사용합니다.
에셋 패널(윈도우 > 에셋)을 사용하여 현재 사이트의 에셋을 관리할 수 있습니다. [에셋] 패널에는 [문서] 창의 활성 문서와 관련된 사이트에 대한 에셋이 표시됩니다.
메모
[에셋] 패널에서 에셋을 보려면 먼저 로컬 사이트를 정의해야 합니다.
에셋 패널에서는 다양한 방법으로 에셋을 볼 수 있습니다.
사이트 목록
사이트의 모든 에셋을 보여주며, 사이트 내 문서에서 사용된 색상과 URL도 포함됩니다.
즐겨찾기 목록
사용자가 직접 선택한 에셋만 표시됩니다.
이 두 보기 간에 전환하려면 미리보기 영역 위의 [사이트] 또는 [즐겨찾기] 라디오 버튼을 선택하십시오.(이 두 보기는 템플릿 및 라이브러리 카테고리에서는 사용할 수 없습니다.)
메모
에셋 패널 작업 중 대부분은 두 목록에서 동일하게 작동합니다. 그러나 일부 작업은 즐겨찾기 목록에서만 수행할 수 있습니다.
두 목록에서 에셋은 다음 범주 중 하나로 분류됩니다.
이미지
GIF, JPEG 또는 PNG 형식의 이미지 파일입니다.
색상
텍스트, 배경, 링크 색상을 포함하여 문서와 스타일 시트에서 사용된 색상입니다.
URL
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 아이콘을 더블 클릭하여 해당 에셋을 리샘플링할 수 있습니다. Creative Cloud Libraries에서 에셋을 재사용하는 방법에 대한 자세한 내용은 Dreamweaver의 Creative Cloud Libraries를 참조하십시오.
미리보기 영역에서 에셋 보기
범주에서 에셋 표시
에셋 패널의 왼쪽에 있는 카테고리 아이콘을 클릭합니다.
에셋 정렬
열 머리글을 클릭합니다.
예를 들어, 유형별로 이미지 목록을 정렬하려면(모든 GIF 이미지끼리, 모든 JPEG 이미지끼리 함께 그룹화되도록) [유형] 열 제목을 클릭합니다.
열 크기 조절
두 열 제목을 구분하는 선을 드래그합니다.
미리보기 영역 크기 조절
분할자 막대(미리보기
영역과 에셋 목록 사이)를 위 또는 아래로 드래그합니다.
에셋 패널 새로 고치기
Dreamweaver가 먼저 사이트 캐시를 읽어야 하므로 사이트 목록을 만드는 데 몇 초 정도 걸릴 수 있습니다.
일부 변경 사항은 에셋 패널에 즉시 표시되지 않습니다. 예를 들어 사이트에 에셋을 추가하거나 사이트에서 에셋을 삭제하는 경우 [사이트 목록 새로 고침] 버튼을 클릭하여 사이트 목록을 새로 고쳐야 변경 사항이 에셋 패널에 나타납니다. Dreamweaver 외부에서 에셋을 추가하거나 제거하는 경우(Windows 탐색기나 Finder 등 사용) 사이트 캐시를 다시 빌드하여 에셋 패널을 업데이트해야 합니다.
사이트에서 특정 색상 또는 URL의 유일한 인스턴스를 제거하거나, 사이트에서 이전에 사용하지 않은 색상 또는 URL이 포함된 새 파일을 저장하는 경우 사이트 목록을 새로 고쳐야 변경 사항이 [에셋] 패널에 나타납니다.
- 사이트 목록을 수동으로 새로 고치려면 [사이트 목록 새로 고침] 버튼
을(를) 클릭합니다.Dreamweaver가 사이트 캐시를 생성하거나
필요에 따라 업데이트합니다. - 사이트 목록을 새로 고치고 사이트 캐시를 수동으로 다시 빌드하려면 에셋 목록에서 마우스 오른쪽 버튼을 클릭(Windows)하거나 Command 키를 누른 상태에서 클릭(Macintosh)한 다음 [사이트 목록 새로 고침]을 선택합니다.
문서에 에셋 추가하기
대부분의 에셋은 라이브 뷰, 코드 보기 및 디자인 뷰로 드래그하거나 패널의 삽입 버튼을 사용하여 문서에 삽입할 수 있습니다. 목록 보기와 에셋 패널의 미리보기 창에서 모두 에셋을 드래그할 수 있습니다.
참고: 미리보기 창에서 드래그하는 기능은 Mac에서만 지원됩니다.
디자인 또는 라이브 뷰의 색상 및 URL을 삽입할 수 있습니다. 디자인 보기에서 선택한 요소에 색상과 URL을 적용할 수 있습니다.
문서에서 에셋이 나타날 위치에 삽입점을 배치합니다.
에셋 패널에서 왼쪽에 있는 에셋 카테고리 버튼 중
하나를 선택합니다.
메모
템플릿을 제외한 모든 범주를 선택할 수 있습니다. 템플릿은 전체 문서에 적용되며, 문서에 삽입할 수 없습니다.
패널 상단의 [사이트] 또는 [즐겨찾기] 중 하나를 선택한 다음 에셋을 선택합니다.
라이브러리 항목에는 위치 또는 즐겨찾기 목록이 없으므로 라이브러리 항목을 삽입하는 경우 이 단계를 건너뛰십시오.
다음 중 하나를 수행하십시오.
패널의 에셋을 문서로 드래그합니다. 목록 보기와 미리보기 창에서 모두 드래그할 수 있습니다.
참고: Windows에서는 미리보기 창에서 에셋을 드래그할 수 없습니다.
스크립트를 [문서] 창의 헤드 내용 영역으로 드래그할 수 있습니다. 이 영역이 표시되지 않은 경우에는 [보기] > [헤드 내용]을 선택하십시오.
패널에서 에셋을 선택하고 [삽입]을 클릭합니다.
색상 에셋을 삽입한 경우 삽입 포인터 뒤에 표시되는 텍스트에 에셋이 적용됩니다.
에셋 패널을 사용하여 텍스트에 색상 적용
에셋 패널에는 텍스트, 표 테두리, 배경 등 다양한 요소에 이미 적용한 색상이 표시됩니다.
디자인 보기에서 다음 단계를 수행하세요:
문서에서 텍스트를 선택합니다.
Assets 패널에서 [색상] 카테고리를 선택하십시오.
원하는 색상을 선택하고 [적용]을 클릭합니다.
[Live View]에서 다음 단계를 수행하세요:
Assets 패널에서 [색상] 카테고리를 선택하십시오.
다음 중 하나를 수행하십시오.
- 에셋 패널의 색상을 마우스 오른쪽 버튼으로 클릭한 다음 [색상 값 복사]를 클릭합니다. 색상 값을 클립보드에 복사합니다. 이제 CSS Designer에서 색상 값을 붙여넣을 수 있습니다(Ctrl+V, Cmd+V).
- 미리보기에서 색상을 드래그하고 라이브 뷰의 요소에 마우스를 가져다 댑니다.색상을 놓으면 새 CSS 규칙 대화 상자가 나타나고 [확인]을 클릭하면 색상이 선택한 요소에 적용됩니다.
- 에셋 패널에서 [적용]을 클릭합니다. 새 CSS 규칙 대화 상자가 나타나고 [확인]을 클릭하면 색상이 선택한 요소에 적용됩니다.
이미지 또는 텍스트에 URL 할당하기
디자인 보기에서 다음 단계를 수행하세요:
텍스트 또는 이미지를 선택하세요.
Assets 패널에서 URL이 저장된 위치에 따라 Sites 또는 Favorites 보기에서 URLs 카테고리를 선택합니다.
메모
사이트 파일의 URL은 기본적으로 Sites 보기에 저장됩니다. 즐겨찾기 보기에는 사용자가 직접 추가한 URL이 저장됩니다.
URL을 선택합니다.
다음 중 하나를 수행합니다.
패널에서 디자인 보기의 선택 항목으로 URL을 드래그합니다.
URL을 선택한 다음 [삽입]을 클릭합니다.
라이브 보기에서 다음 단계를 수행하세요.
에셋 패널에서 URL이 저장된 위치에 따라 사이트 또는 즐겨찾기 보기에서 URL 범주를 선택합니다.
다음 중 하나를 수행하십시오.
- 미리보기 또는 목록 보기에서 URL을 드래그합니다. 라이브 뷰의 요소에 마우스를 가져다 댑니다. URL을 드롭하면 라이브 보기에서 강조 표시된 요소를 <a>로 감쌉니다.
- 라이브 뷰에서 필요한 요소를 클릭합니다. 에셋 패널에서 URL을 선택하고 [적용]을 클릭합니다. 선택된 요소가 <a> 태그로 래핑됩니다.
에셋 선택 및 편집
에셋 패널에서는 여러 에셋을 한 번에 선택할 수 있습니다. 또한 이 패널에서 에셋 편집을 빠르게 시작할 수도 있습니다.
여러 에셋 선택하기
에셋 패널에서 에셋을 선택합니다.
다음 방법 중 하나를 사용하여 다른 에셋을 선택합니다.
연속된 에셋 시리즈를 선택하려면 Shift+클릭합니다.
개별 에셋을 선택 항목에 추가하려면 Control+클릭(Windows) 또는 Command+클릭(Macintosh)합니다(기존 선택 항목에 인접하지 않아도 됨). 선택된 에셋을 선택 해제하려면 Control+클릭 또는 Command+클릭합니다.
에셋 편집
에셋 패널에서 에셋을 편집할 때 에셋 유형에 따라 동작이 달라집니다. 이미지와 같은 일부 에셋의 경우 외부 편집기를 사용하며, 해당 에셋 유형에 대한 편집기를 정의한 경우 자동으로 열립니다. 즐겨찾기 목록에서만 색상과 URL을 편집할 수 있습니다. 템플릿과 라이브러리 항목을 편집할 때는 Dreamweaver 내에서 변경 작업을 수행합니다.
에셋 패널에서 다음 중 하나를 수행합니다.
에셋을 더블 클릭합니다.
에셋을 선택한 후 [편집] 버튼을 클릭합니다.
메모
에셋을 외부 편집기에서 편집해야 하는 경우 편집기가 자동으로 열리지 않으면 [편집] > [환경 설정](Windows) 또는 [Dreamweaver] > [환경 설정](Macintosh)을 선택하고 [파일 유형/편집기] 범주를 선택한 다음 해당 에셋 유형에 대한 외부 편집기를 정의했는지 확인합니다.
원하는 대로 변경합니다.
완료되면 다음 중 한 가지를 수행합니다.
파일에 기반한 에셋(색상이나 URL을 제외한 모든 에셋)의 경우 편집할 때 사용한 편집기에서 에셋을 저장한 후 닫습니다.
에셋이 URL인 경우 [URL 편집] 대화 상자에서 [확인]을 클릭합니다.
메모
에셋이 색상인 경우 사용자가 색상을 선택하면 Color Picker가 자동으로 닫힙니다. 색상을 선택하지 않고 Color Picker를 닫으려면 Esc 키를 누릅니다.
다른 사이트의 에셋 재사용하기
에셋 패널에는 현재 사이트의 모든 에셋(인식된 유형)이 표시됩니다. 현재 사이트의 에셋을 다른 사이트에서 사용하려면 해당 에셋을 다른 사이트로 복사해야 합니다. 개별 에셋, 개별 에셋 세트 또는 전체 즐겨찾기 폴더를 한 번에 복사할 수 있습니다.
원격 사이트로 에셋을 전송하거나 원격 사이트에서 에셋을 전송하기 전에 Assets 패널의 에셋에 해당하는 파일을 Files 패널에서 찾아야 할 수 있습니다.
메모
파일 패널에는 에셋 패널과 다른 사이트가 표시될 수 있습니다. Assets 패널은 활성 문서와 연결되어 있기 때문입니다.
파일 패널에서 에셋 파일 찾기
에셋 패널에서 찾고자 하는 에셋의 범주를 선택합니다.
에셋 패널에서 에셋의 이름이나 아이콘을 마우스 오른쪽 버튼으로 클릭(Windows) 또는 Control+클릭(Macintosh)한 후 상황에 맞는 메뉴에서 [사이트에서 찾기]를 선택합니다.
메모
사이트 내 찾기는 사이트의 파일에 해당하지 않는 색상과 URL에는 사용할 수 없습니다.
파일 패널이 열리고 해당 에셋 파일이 선택됩니다.위치에서 검색 명령은 에셋 자체에 해당하는 파일을 찾습니다. 해당 에셋을 사용하는 파일은 찾지 않습니다.
에셋 패널에서 다른 위치로 에셋 복사하기
에셋 패널에서 복사할
에셋 범주를 선택합니다.
사이트 목록이나 즐겨찾기 목록에서 하나 이상의 에셋을 마우스 오른쪽 버튼으로 클릭(Windows)하거나 Control 키를 누른 채 클릭(Macintosh)하고, [사이트에 복사]를 선택한 다음 정의된 모든 사이트가 나열된 하위 메뉴에서 대상 사이트 이름을 선택합니다.
메모
즐겨찾기 목록에서는 개별 에셋뿐만 아니라 즐겨찾기 폴더도 복사할 수 있습니다.
에셋이 대상 위치의 해당 위치로 복사됩니다.Dreamweaver는 필요에 따라 대상 사이트의 계층에 새 폴더를 만듭니다.에셋은 대상 위치의 즐겨찾기 목록에도 추가됩니다.
메모
복사한 에셋이 색상이나 URL인 경우 대상 위치의 즐겨찾기 목록에만 나타납니다.색상과 URL은 파일에 해당하지 않으므로 다른 위치로 복사할 파일이 없습니다.
