Dreamweaver의 에셋 패널을 사용하여 현재 사이트의 에셋을 관리할 수 있습니다.

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

에셋은 다양한 소스에서 얻을 수 있습니다. 예를 들어 Adobe Photoshop이나 Adobe Animate CC 등의 애플리케이션에서 에셋을 만들거나, 다른 공동 작업자로부터 에셋을 받거나, 클립아트 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 아이콘을 더블 클릭하여 해당 에셋을 재샘플링할 수 있습니다. CC Libraries의 에셋을 재사용하는 방법에 대한 자세한 내용은 Dreamweaver의 Creative Cloud Libraries를 참조하십시오.

미리보기 영역에서 에셋 보기

  1. 에셋 패널에서 에셋을 선택합니다.

범주에서 에셋 표시

  1. 에셋 패널 왼쪽에 있는 범주 아이콘을 클릭합니다.

에셋 정렬

  1. 열 머리글을 클릭합니다.

    예를 들어 이미지 목록을 유형별로 정렬하여 GIF 이미지, JPEG 이미지 등을 같은 형식끼리 표시하려면 [유형] 열 머리글을 클릭합니다.

열 크기 조절

  1. 두 열 머리글을 구분하는 선을 드래그합니다.

미리보기 영역 크기 조절

  1. 미리보기 영역과 에셋 목록 사이에 있는 분할선을 위나 아래로 드래그합니다.

에셋 패널 새로 고치기

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

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

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

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

문서에 에셋 추가하기

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

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

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

 

  1. 문서에서 에셋을 표시할 위치에 삽입 포인터를 놓습니다.

  2. 에셋 패널에서 왼쪽에 있는 에셋 범주 버튼을 선택합니다.

    참고:

    템플릿을 제외한 모든 범주를 선택할 수 있습니다. 템플릿은 문서 전체에만 적용되므로 문서에 삽입할 수는 없습니다.

  3. 패널 위쪽에서 사이트 또는 즐겨찾기를 선택한 다음 에셋을 선택합니다.

    라이브러리 항목에는 사이트 또는 즐겨찾기 목록이 없으므로 라이브러리 항목을 삽입하려는 경우에는 이 단계를 건너뜁니다.

  4. 다음 중 하나를 수행합니다.
    • 패널의 에셋을 문서로 드래그합니다. 목록 보기에서 뿐만 아니라 미리보기 창에서 드래그할 수 있습니다.

      참고: Windows에서는 미리보기 창에서 에셋을 드래그할 수 없습니다.

      스크립트를 문서 창의 헤드 내용 영역으로 드래그할 수 있습니다. 이 영역이 표시되지 않는 경우에는 보기 > 헤드 내용을 선택하십시오.

    • 패널에서 에셋을 선택하고 [삽입]을 클릭합니다.

      삽입된 에셋이 색상인 경우 삽입 포인터 뒤에 표시되는 텍스트에 에셋이 적용됩니다.

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

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

  1. 디자인 뷰에서 다음 단계를 수행합니다.

    1. 문서에서 텍스트를 선택합니다.
    2. 에셋 패널에서 색상 범주를 선택합니다.

    3. 원하는 색상을 선택하고 [적용]을 클릭합니다.

  2. 라이브 뷰에서 다음 단계를 수행합니다.

    1. 에셋 패널에서 색상 범주를 선택합니다.

    2. 다음 중 하나를 수행합니다.

      • 에셋 패널의 색상을 마우스 오른쪽 버튼으로 클릭한 다음 [색상 값 복사]를 클릭합니다. 색상 값을 클립보드에 복사합니다. 이제 CSS Designer의 색상 값을 붙여넣기할 수 있습니다(Ctrl+V, Cmd+V).
      • 미리보기에서 색상을 드래그하고 라이브 뷰의 요소에 마우스를 가져다 댑니다. 색상을 드롭하면 새로운 CSS 규칙 대화 상자가 표시되며 [확인]을 클릭하면 선택한 요소에 색상이 적용됩니다.
      • 에셋 패널에서 [적용]을 클릭합니다. 새로운 CSS 규칙 대화 상자가 표시되며 [확인]을 클릭하면 선택한 요소에 색상이 적용됩니다.

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

  1. 디자인 뷰에서 다음 단계를 수행합니다.

    1. 텍스트 또는 이미지를 선택합니다.
    2. 에셋 패널에서 URL이 저장되어 있는 위치에 따라 사이트 뷰나 즐겨찾기 뷰에서 URL 범주를 선택합니다.

      참고:

      사이트 파일의 URL은 기본적으로 사이트 보기에 저장되어 있습니다. 즐겨찾기 보기에는 사용자가 직접 추가한 URL이 저장됩니다.

    3. URL을 선택합니다.
    4. 다음 중 하나를 수행합니다.
      • 디자인 뷰의 선택 영역으로 패널의 URL을 드래그합니다.

      • URL을 선택한 다음 [삽입]을 클릭합니다.

  2. 라이브 뷰에서 다음 단계를 수행합니다.

    1. 에셋 패널에서 URL이 저장되어 있는 위치에 따라 사이트 뷰나 즐겨찾기 뷰에서 URL 범주를 선택합니다.

    2. 다음 중 하나를 수행합니다.

      • 미리보기 또는 목록 보기에서 URL을 드래그합니다. 라이브 뷰의 요소에 마우스를 가져다 댑니다. URL을 드롭하면 <a>가 라이브 뷰에서 강조 표시된 요소를 래핑합니다.
      • 라이브 뷰에서 필요한 요소를 클릭합니다. 에셋 패널에서 URL을 선택하고 [적용]을 클릭합니다. 선택한 요소가 <a> 태그로 래핑됩니다.

에셋 선택 및 편집

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

여러 에셋 선택하기

  1. 에셋 패널에서 에셋을 선택합니다.
  2. 다음 방법 중 하나를 사용하여 다른 에셋을 선택합니다.
    • 인접한 여러 에셋을 한꺼번에 선택하려면 Shift 키를 누른 채로 클릭합니다.

    • 인접했는지 여부에 관계없이 에셋을 개별적으로 선택 항목에 추가하려면 Ctrl 키를 누른 채로 클릭(Windows)하거나 Command 키를 누른 채로 클릭(Macintosh)합니다. 선택한 에셋을 다시 Ctrl 키를 누른 채로 클릭하거나 Command 키를 누른 채로 클릭하면 선택이 취소됩니다.

에셋 편집

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

  1. 에셋 패널에서 다음 중 하나를 수행합니다.
    • 에셋을 더블 클릭합니다.

    • 에셋을 선택한 다음 [편집] 버튼을 클릭합니다.

    참고:

    에셋을 외부 편집기에서 편집해야 하는 경우 편집기가 자동으로 열리지 않으면 편집 > 환경 설정(Windows) 또는 Dreamweaver > 환경 설정(Macintosh)을 선택하고 파일 유형/편집기 범주를 선택한 다음 해당 에셋 유형에 대한 외부 편집기를 정의했는지 확인합니다.

  2. 원하는 대로 변경합니다.
  3. 완료되면 다음 중 한 가지를 수행합니다.
    • 파일에 기반한 에셋(색상이나 URL을 제외한 모든 에셋)의 경우 편집할 때 사용한 편집기에서 에셋을 저장한 후 닫습니다.

    • 에셋이 URL인 경우 URL 편집 대화 상자에서 [확인]을 클릭합니다.

    참고:

    에셋이 색상인 경우 사용자가 색상을 선택하면 색상 피커가 자동으로 닫힙니다. 색상을 선택하지 않고 색상 피커를 닫으려면 Esc 키를 누릅니다.

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

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

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

참고:

[파일] 패널에 표시되는 사이트와 에셋 패널에 표시되는 사이트는 서로 다를 수 있습니다. 에셋 패널은 활성 문서에 연결되어 있기 때문입니다.

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

  1. 에셋 패널에서 찾을 에셋의 범주를 선택합니다.
  2. 에셋 패널에서 에셋 이름 또는 아이콘을 마우스 오른쪽 버튼으로 클릭(Windows)하거나 Control 키를 누른 채로 클릭(Macintosh)한 다음 컨텍스트 메뉴에서 [사이트에서 찾기]를 선택합니다.

    참고:

    사이트에 해당 파일이 없는 색상 및 URL의 경우에는 [사이트에서 찾기]를 사용할 수 없습니다.

    에셋 파일이 선택된 상태로 [파일] 패널이 열립니다. [사이트에서 찾기]는 해당 에셋을 사용하는 파일이 아니라 에셋 자체에 해당하는 파일을 찾는 명령입니다.

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

  1. 에셋 패널에서 복사할 에셋의 범주를 선택합니다.
  2. 사이트 목록이나 즐겨찾기 목록에서 하나 이상의 에셋을 마우스 오른쪽 버튼으로 클릭(Windows)하거나 Control 키를 누른 채 클릭(Macintosh)하고 [사이트로 복사]를 선택한 다음 정의된 모든 사이트가 나열된 하위 메뉴에서 대상 사이트 이름을 선택합니다.

    참고:

    즐겨찾기 목록에서는 개별 에셋뿐만 아니라 즐겨찾기 폴더 전체를 복사할 수도 있습니다.

    에셋을 대상 사이트의 해당 위치에 복사합니다. Dreamweaver는 필요에 따라 대상 사이트의 계층 구조에 새 폴더를 만듭니다. 지정한 사이트의 즐겨찾기 목록에도 에셋이 추가됩니다.

    참고:

    색상 또는 URL 에셋을 복사한 경우에는 대상 사이트의 즐겨찾기 목록에만 에셋이 표시됩니다. 색상 및 URL에는 해당 파일이 없으므로 다른 사이트로 파일이 복사되지 않습니다.

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책