Dreamweaver에서 이미지 삽입 및 편집

[문서] 창에서 이미지를 표시할 위치에 삽입 포인터를 놓은 후 다음 중 하나를 수행합니다.

• 삽입 패널의 드롭다운 목록에서 HTML을 선택합니다. 이미지를 클릭합니다. 아이콘을 더블 클릭하거나 문서 창(코드로 작업할 경우에는 코드 보기 창)으로 드래그합니다.

• [삽입] > [이미지]를 선택합니다.

• [에셋] 패널([창] > [에셋])의 이미지를 문서 창의 원하는 위치로 드래그한 다음 단계 3으로 갑니다.

• 파일 패널의 이미지를 문서 창의 원하는 위치로 드래그한 다음 단계 3으로 갑니다.

• 바탕 화면의 이미지를 [문서] 창의 원하는 위치로 드래그한 다음 3단계로 이동합니다.

• 라이브 뷰에서 Extract 패널 또는 레이어 탭으로부터 이미지를 드래그합니다. 라이브 가이드에 따라 요소의 상단, 하단, 오른쪽 또는 왼쪽에 요소를 드롭합니다. 또는 </>를 클릭한 상태에서 [요소 간략히 보기]를 사용하여 문서 구조의 정확한 위치에 요소를 드롭할 수 있습니다.

삽입할 이미지나 내용 소스를 검색하여 선택합니다.

저장되지 않은 문서에서 작업하고 있는 경우 Dreamweaver에서는 이미지 파일에 대한 file:// 참조를 생성합니다. 사이트에 문서를 저장하면 Dreamweaver는 참조를 문서 상대 경로로 변환합니다.

확인을 클릭합니다.

선택한 이미지에 대한 속성 관리자를 보려면 이미지를 클릭하고 창 > 속성을 클릭합니다.

썸네일 이미지 아래에 있는 텍스트 상자에 이름을 입력합니다. [이미지 교체]와 같은 Dreamweaver 비헤이비어를 사용하거나 JavaScript나 VBScript와 같은 스크립팅 언어를 사용할 경우 이미지를 참조할 수 있습니다.

이미지의 폭과 높이입니다(픽셀 단위). 페이지에 이미지를 삽입할 때 이 두 텍스트 상자 값이 원본 이미지의 치수로 자동 업데이트됩니다.

이미지의 실제 값과 다르게 폭(W)과 높이(H)를 설정하면 이미지가 브라우저에 제대로 표시되지 않습니다. 원래 값으로 되돌리려면 [W] 및 [H] 텍스트 상자 라벨을 클릭하거나 [W] 및 [H] 텍스트 상자에 새 값을 입력하면 이들 상자 오른쪽에 나타나는 [이미지 크기 재설정] 버튼을 클릭합니다.

이미지의 소스 파일을 지정합니다. 폴더 아이콘을 클릭하여 소스 파일을 찾거나 경로를 직접 입력합니다.

이미지에 대한 하이퍼링크를 지정합니다. [파일 표시] 아이콘을 파일 패널의 파일로 드래그합니다. 폴더 아이콘을 클릭하여 사이트의 문서를 검색하거나 URL을 직접 입력합니다.

텍스트 전용 브라우저 또는 이미지를 수동으로 다운로드하도록 설정된 브라우저에서 이미지 대신 표시할 대체 텍스트를 지정합니다. 텍스트 전용 브라우저에서 음성 합성 장치를 사용하는 시각 장애인에게는 이 텍스트가 음성으로 제공됩니다. 일부 브라우저에서는 이미지 위로 포인터가 이동할 때도 이 텍스트가 나타납니다.

클라이언트측 이미지 맵을 만들고 라벨을 지정할 수 있습니다.

대상     링크된 페이지가 로드될 프레임이나 창을 지정합니다. 이미지가 다른 파일에 링크되어 있지 않으면 이 옵션을 사용할 수 없습니다. 현재 프레임세트의 모든 프레임 이름이 [대상] 목록에 표시됩니다. 다음의 예약된 대상 이름에서 선택할 수도 있습니다.

• _blank를 사용하면 링크된 파일이 이름이 없는 새 브라우저 창에 로드됩니다.
• _new는 링크된 파일을 새로운 브라우저 창에 로드합니다.
• _parent를 사용하면 링크된 파일이 해당 링크가 포함된 프레임의 부모 프레임이나 부모 창에 로드됩니다. 링크가 포함된 프레임이 중첩되어 있지 않으면 링크된 파일이 전체 브라우저 창에 로드됩니다.
• _self를 사용하면 링크된 파일이 해당 링크와 같은 프레임이나 창에 로드됩니다. 이 대상은 기본 대상입니다. 이 값을 명시적으로 지정할 필요가 없습니다.
• _top을 사용하면 링크된 파일이 전체 브라우저 창에 로드되어 모든 프레임이 제거됩니다.

[외부 편집기] 환경 설정에서 지정한 이미지 편집기가 실행되고 선택된 이미지가 열립니다.

이미지 최적화 대화 상자를 열어 이미지를 최적화할 수 있습니다.

Dreamweaver 페이지의 이미지가 원본 Photoshop 파일과 동기화되지 않은 경우 Dreamweaver에서는 원본 파일이 업데이트된 것을 감지합니다. 애플리케이션을 실행하면 스마트 오브젝트 아이콘의 화살표 중 하나가 빨간색으로 표시됩니다. 디자인 뷰에서 웹 이미지를 선택하고 속성 관리자에서 [원본에서 업데이트] 버튼을 클릭하면 이미지가 자동으로 업데이트됩니다. 업데이트된 이미지는 원본 Photoshop 파일의 변경 사항을 반영합니다.

선택한 이미지에서 불필요한 영역을 제거하여 이미지 크기를 줄일 수 있습니다.

이미지 크기를 조정하여 새로운 크기와 모양으로 변경되면 화질을 향상시킬 수 있습니다.

이미지의 명도 및 대비 설정을 조정합니다.

이미지의 선명도를 조정합니다.

문서 창에서 이미지를 클릭하거나 코드의 이미지 태그를 선택합니다.

다음 중 하나의 방법으로 이름을 입력하거나 이미지에 대한 간략한 설명을 50자 이내로 그림 설명 상자에 입력합니다. 화면 판독기는 사용자가 여기에 입력하는 정보를 읽습니다.  

• [코드 보기]에서 적절한 이미지 속성을 편집합니다.

• 라이브 뷰에서 빠른 속성 관리자를 사용하여 이미지 속성을 편집합니다.

• 속성 관리자에서 Alt 값을 편집합니다.

요소의 오른쪽과 아래쪽 가장자리 및 문서 창의 오른쪽 하단에 크기 조정 핸들이 나타납니다. 크기 조정 핸들이 나타나지 않으면 요소의 바깥쪽을 클릭한 다음 다시 선택합니다. 또는 태그 선택기에서 요소에 해당하는 태그를 클릭하여 요소를 선택합니다.

• 요소의 폭을 조정하려면 오른쪽 가장자리의 선택 핸들을 드래그합니다.

• 요소의 높이를 조정하려면 아래쪽 가장자리의 선택 핸들을 드래그합니다.

• 요소의 폭과 높이를 동시에 조정하려면 모퉁이의 선택 핸들을 드래그합니다.

• 요소의 크기를 조정할 때 요소의 비율(폭과 높이 비율)을 그대로 유지하려면 Shift 키를 누른 상태에서 모퉁이의 선택 핸들을 드래그합니다.

• 요소의 폭과 높이를 특정 크기(예: 1 x 1 픽셀)로 조정하려면 속성 관리자를 활용합니다. W 및 H 필드에 숫자 값을 입력합니다. 최소 8 x 8 픽셀 크기로 요소의 크기를 시각적으로 조정할 수 있습니다.

크기가 조정된 요소를 원래 치수로 되돌리려면 속성 관리자에서 W 및 H 필드의 값을 삭제합니다. 이미지 속성 관리자에서 크기 재설정 버튼을 클릭할 수도 있습니다.

이미지 크기 조정 섹션에서 설명한 대로 이미지 크기를 조정합니다.

이미지 속성 관리자에서 [리샘플링] 버튼을 클릭합니다.

편집 > 이미지를 선택합니다. 다음과 같은 Dreamweaver 이미지 편집 기능을 설정할 수 있습니다.

사전 설정을 선택하고 파일 형식을 지정하고, 품질 수준을 지정합니다. 슬라이더를 움직여 품질 수준을 조정할 때 대화 상자에서 각각의 품질에 대한 이미지의 파일 크기를 확인할 수 있습니다. 완료되면 [확인]을 클릭합니다.

크기를 조정한 JPEG 및 GIF 이미지 파일에 픽셀을 추가하거나 이 파일에서 픽셀을 추출하여 원본 이미지의 모양과 최대한 일치시킵니다. 이미지 리샘플링을 수행하면 이미지 파일 크기가 줄어들고 다운로드 성능이 개선됩니다.

Dreamweaver에서 이미지 크기를 조절할 때는 이미지를 새 크기에 맞게 리샘플링할 수 있습니다. 비트맵 오브젝트를 리샘플링하면 이미지 크기를 늘리거나 줄이기 위해 픽셀이 추가되거나 제거됩니다. 이미지를 더 높은 해상도로 리샘플링해도 일반적으로 화질 손실은 거의 발생하지 않습니다. 그러나 더 낮은 해상도로 리샘플링하면 항상 데이터 손실이 발생하여 화질이 떨어집니다.

이미지의 영역을 줄여서 이미지를 편집합니다. 이미지의 주제를 부각하고 이미지에서 중요한 영역 주변의 불필요한 부분을 제거하기 위해 이미지를 자를 수 있습니다.

이미지에서 픽셀의 대비나 명도를 수정합니다. 명도 및 대비를 수정하면 이미지의 강조, 그림자 및 중간톤에 영향을 줍니다. [명도/대비]는 대개 너무 어둡거나 밝은 이미지를 수정할 때 사용합니다.

이미지 내에 있는 가장자리 부분의 대비를 높여 이미지의 초점을 조정합니다. 이미지를 스캔하거나 디지털 사진을 가져오는 경우 대부분의 이미지 캡처 소프트웨어에서는 기본적으로 이미지에 있는 오브젝트의 가장자리를 부드럽게 합니다. 검색으로 디지털 이미지를 구성하는 픽셀에서 매우 정교한 세부 묘사 부분이 손실되는 것을 방지할 수 있습니다. 단, 디지털 이미지 파일의 세부 묘사 부분을 재현하려면 이미지를 선명하게 표현해야 하는 경우가 종종 있습니다. [선명하게] 옵션을 사용하여 가장자리 부분의 대비와 이미지 선명도를 높입니다.

자를 이미지가 포함된 페이지를 열고 이미지를 선택한 후 다음 중 하나를 수행합니다.

• 이미지 속성 관리자에서 [자르기 도구] 아이콘()을 클릭합니다.

• 편집 > 이미지 > 자르기를 선택합니다.

• 선택한 이미지 주위에 자르기 핸들이 나타납니다.

자르려는 이미지 파일이 디스크에서 변경될 것임을 알리는 대화 상자가 나타납니다. 확인을 클릭합니다.

선택된 비트맵에서 경계 상자 바깥쪽에 있는 모든 픽셀이 제거되지만 이미지 내의 다른 오브젝트는 그대로 유지됩니다.

이미지를 미리 보고 예상대로 나타나는지 확인합니다. 예상대로 나타나지 않으면 편집 > 자르기 실행 취소를 선택하여 원본 이미지로 되돌립니다.

최적화할 이미지가 포함된 페이지를 엽니다. 이미지를 선택하고 다음 중 하나를 수행합니다.

• 이미지 속성 관리자에서 이미지 설정 편집 버튼을 클릭합니다.

• 편집 > 이미지 > 최적화를 선택합니다.

[이미지 최적화] 대화 상자에서 편집을 수행하고 [확인]을 클릭합니다.

• 이미지 속성 관리자에서 선명하게 버튼을 클릭합니다.

• 편집 > 이미지 > 선명하게를 선택합니다.

Dreamweaver가 이미지에 적용할 선명도를 지정하려면 슬라이더 컨트롤을 드래그합니다. 텍스트 상자에 0~10의 값을 입력할 수도 있습니다. 선명하게 대화 상자를 사용하여 이미지의 선명도를 조정하면서 이미지의 변화를 미리 볼 수 있습니다.

파일 > 저장을 선택하여 변경 내용을 저장하거나 편집 > 선명하게 실행 취소를 선택하여 원본 이미지로 되돌립니다.

• 이미지의 속성 관리자에서 명도 및 대비 버튼을 클릭합니다.

• 편집 > 이미지 > 명도/대비를 선택합니다.

• 삽입 패널의 드롭다운 목록에서 HTML을 선택합니다. 옵션 목록에서 롤오버 이미지를 선택합니다.

• 삽입 > HTML > 롤오버 이미지를 선택합니다.

롤오버 이미지 삽입 대화 상자에서 이미지를 선택하고 롤오버의 속성을 설정합니다. 다음과 같은 속성을 설정할 수 있습니다.

롤오버 이미지의 이름입니다.

페이지가 로드될 때 표시될 이미지입니다. 텍스트 상자에 경로를 입력하거나 [검색]을 클릭하여 이미지를 선택합니다.

원본 이미지 위로 포인터를 놓을 때 표시될 이미지입니다. 경로를 입력하거나 [검색]을 클릭하여 이미지를 선택합니다.

브라우저의 캐시에 이미지를 미리 로드하여 사용자가 이미지 위에 포인터를 놓을 때 시간이 지연되지 않도록 합니다.

(선택 사항) 텍스트 전용 브라우저 사용자에게 표시될 이미지를 설명하는 텍스트입니다.

사용자가 롤오버 이미지를 클릭할 때 표시될 파일입니다. 경로를 입력하거나 [검색]을 클릭하여 파일을 선택합니다.

롤오버 이미지를 미리 보려면 선택 파일 > 실시간 미리보기를 선택하거나 F12 키를 누릅니다.

외부 편집기를 열려면 다음 중 하나를 수행합니다.

• 편집할 이미지를 더블 클릭합니다.

• 편집할 이미지를 마우스 오른쪽 버튼으로 클릭(Windows의 경우)하거나 Ctrl 키를 누른 상태에서 마우스로 클릭(Macintosh의 경우)합니다. 그런 다음 편집 > 검색을 클릭하고 편집기를 선택합니다.

• 편집할 이미지를 선택한 다음 속성 관리자에서 편집을 클릭합니다.

• 파일 패널에서 이미지 파일을 더블 클릭하여 기본 이미지 편집기를 실행합니다. 이미지 편집기를 지정하지 않은 경우 Dreamweaver에서는 해당 파일 유형에 대한 기본 편집기를 실행합니다.

Dreamweaver 창으로 돌아왔을 때 업데이트된 이미지가 표시되지 않으면 해당 이미지를 선택한 다음 속성 관리자에서 [새로 고침] 버튼을 클릭합니다.

편집 > 환경 설정(Windows의 경우) 또는 Dreamweaver > 환경 설정(macOS의 경우)을 선택하고 왼쪽 패널의 [범주] 목록에서 파일 유형/편집기를 선택합니다.

[확장명] 목록에서 외부 편집기를 설정할 확장명을 선택합니다.

외부 편집기 선택 대화 상자에서 해당 파일 유형에 대한 편집기로 사용할 애플리케이션을 검색합니다.

이 편집기를 해당 파일 유형의 기본 편집기로 사용하려면 환경 설정 대화 상자에서 [기본 편집기로 지정]을 클릭합니다.

이 이미지 유형을 편집할 때 Dreamweaver에서는 자동으로 기본 편집기를 사용합니다. [문서] 창에서 이미지의 컨텍스트 메뉴에 나열되는 다른 편집기를 선택할 수도 있습니다.

편집 > 환경 설정(Windows의 경우) 또는 Dreamweaver > 환경 설정(macOS의 경우)을 선택하고 왼쪽 패널의 [범주] 목록에서 파일 유형/편집기를 선택합니다.

[파일 유형/편집기 환경 설정] 대화 상자에서 [확장명] 목록 위에 있는 추가(+) 버튼을 클릭합니다.

[확장명] 목록에 텍스트 상자가 나타납니다.

편집기에서 사용할 파일 유형의 확장명을 지정합니다.

해당 파일 유형에 사용할 외부 편집기를 선택하려면 [편집기] 목록 위에 있는 추가(+) 버튼을 클릭합니다.

대화 상자가 나타나면 해당 이미지 유형을 편집하는 데 사용할 애플리케이션을 선택합니다.

이 편집기를 해당 이미지 유형의 기본 편집기로 사용하려면 기본 편집기로 지정 버튼을 클릭합니다.

편집 > 환경 설정(Windows의 경우) 또는 Dreamweaver > 환경 설정(macOS의 경우)을 선택하고 왼쪽 패널의 [범주] 목록에서 파일 유형/편집기를 선택합니다.

파일 유형/편집기 환경 설정 대화 상자의 [확장명] 목록에서 변경할 파일 유형을 선택하여 기존 편집기를 표시합니다.

[편집기] 목록에서 변경할 편집기를 선택하고 다음 중 하나를 수행합니다.

• 편집기를 제거하려면 [편집기] 목록 위에 있는 추가(+) 또는 삭제(-) 버튼을 클릭합니다.

• 편집에 사용할 기본 편집기를 바꾸려면 기본 편집기로 지정 버튼을 클릭합니다.