사용 안내서 취소

라이브 뷰에서 편집

검색

마지막 업데이트 날짜 2022년 11월 28일

라이브 뷰에서 웹 페이지를 디자인하고, 편집하고, 미리 보는 방법에 대해 알아보십시오. 코드 보기로 전환하지 않고도 요소를 재배열하거나 삽입하고, 선택기를 적용하고, 이미지 속성을 편집하고, 텍스트를 삽입, 편집 및 포맷팅할 수 있습니다.

라이브 뷰는 Dreamweaver에서 즐겨 찾는 웹 브라우저에서와 똑같은 모양으로 내용이 표시될 수 있도록 크롬 기반의 렌더링 엔진을 사용합니다. 개발하는 동안 빠르게 페이지를 미리보기 위해 라이브 뷰로 전환할 수 있습니다. 또한 다양한 보기(코드 및 디자인 뷰) 간을 전환하는 시간을 절약하기 위해 라이브 뷰 내에서 HTML 요소를 직접 편집할 수 있습니다.

라이브 뷰는 페이지의 변경 사항을 표시하기 위해 즉시 새로 고쳐집니다.

라이브 뷰에서 페이지를 편집하기 위해 다음 구성 요소를 사용할 수 있습니다.

DOM 패널: (윈도우 > DOM) 문서의 HTML 구조를 표시하고 보기 내에서 요소를 복사하여 붙여넣기, 복제, 삭제 및 재배열할 수 있습니다. 자세한 내용은 DOM 패널을 참조하십시오.
요소 표시: 라이브 뷰에서 선택한 HTML 요소 위에 나타납니다. 요소는 클래스 및 ID와 HTML 요소를 연결합니다. 자세한 내용은 HTML 요소를 클래스 및 ID와 연결을 참조하십시오.
빠른 속성 관리자: 요소 표시에서 샌드위치 아이콘을 클릭하거나 텍스트를 선택할 때 나타납니다. 빠른 속성 관리자에서는 이미지 속성을 편집하고 라이브 뷰의 텍스트 형식을 설정할 수 있습니다. 자세한 내용은 빠른 속성 관리자를 참조하십시오.
라이브 뷰 속성 관리자: 문서 창 아래 나타나며 라이브 뷰의 다양한 HTML 및 CSS 속성을 편집할 수 있습니다. 자세한 내용은 라이브 뷰 속성 관리자를 참조하십시오.
삽입 패널: (윈도우 > 삽입) 요소를 패널에서 직접 라이브 뷰로 드래그할 수 있습니다. 자세한 내용은 라이브 뷰에서 직접 요소 삽입을 참조하십시오.

참고:

스크립트로 인해 페이지가 동적으로 변경되거나 metarefresh가 활성화된 경우 라이브 뷰에서 수행된 편집이 손실될 수 있습니다.

팁:

페이지를 편집할 때 라이브 뷰가 비어 있는 경우 라이브 뷰를 껐다가 다시 켭니다.
페이지에 반영된 편집이 표시되지 않으면 라이브 뷰의 [새로 고침] 버튼을 클릭합니다.

데이터베이스 또는 JavaScript를 통해 동적으로 렌더링된 내용과 템플릿의 편집 불가능 영역은 라이브 뷰에서 편집할 수 없습니다. 라이브 뷰에서 해당 요소를 클릭하면 요소를 편집할 수 없음을 나타내는 회색 테두리가 해당 요소 주변에 나타납니다.

참고:

라이브 뷰에서 선택한 요소에 적용할 수 있는 옵션만 주 메뉴에서 사용할 수 있습니다. 요소를 선택할 때 적용할 수 없는 옵션은 회색으로 표시됩니다.

요소 표시

요소 표시를 사용하여 라이브 뷰에서 HTML 요소와 클래스 및 ID를 직접 연결할 수 있습니다. 요소 표시를 사용하면 필요한 옵션을 빠르게 보고 선택할 수 있도록 사용 가능한 클래스 및 ID에 대한 힌트가 제공됩니다.

요소 표시를 사용하여 표의 서식을 지정할 수도 있습니다. 자세한 내용은 링크를 참조하십시오.

HTML 요소를 클래스 및 ID와 연결

라이브 뷰에서 필요한 요소를 클릭합니다. 요소 표시가 나타나 현재 연결된 클래스 및 ID를 표시합니다.

라이브 뷰 상태에서 DOM 패널의 HTML 요소를 클릭하여 요소에 대한 요소 표시를 볼 수 있습니다.

클래스 또는 ID에서 HTML 요소를 연결 해제하려면 클래스 또는 ID 옆의 “x”를 클릭합니다.
HTML 요소에 연결된 클래스 또는 ID를 변경하려면 상자를 클릭합니다. 사용할 수 있는 클래스 및 ID의 목록이 나타납니다. 필요한 옵션을 클릭합니다.
클래스 또는 ID를 추가하고 요소에 적용하려면 “+”를 클릭하고 이름을 입력합니다. 변경 내용을 저장하려면 “+”를 클릭하거나 Enter를 누릅니다.

그런 다음 CSS Designer를 사용하여 이 클래스 또는 ID를 포함하는 선택기를 정의할 수 있습니다. 자세한 내용은 CSS Designer를 사용하여 페이지 레이아웃 지정을 참조하십시오.

참고:

전환 요소의 요소 표시는 전환이 발생할 때 해당 요소와 함께 이동하지 않습니다. 단, 요소 표시를 사용하여 수행한 변경 사항은 전환 요소와 동일한 위치에 있지 않은 경우에도 적용됩니다.

빠른 속성 관리자

이미지용 빠른 속성 관리자

빠른 속성 관리자는 라이브 뷰에서 선택한 요소 바로 위에 나타납니다. 이 속성 관리자를 사용하여 라이브 뷰에서 속성을 편집하거나 텍스트 서식을 적용할 수 있습니다.

빠른 속성 관리자를 표시하거나 숨기려면 Ctrl+Alt+H(Win)/CMD+Ctrl+H(Mac)를 누릅니다.

참고:

빠른 속성 관리자를 사용하는 경우 라이브 뷰에 코드 탐색기 아이콘이 표시되지 않습니다.

Bootstrap 문서의 빠른 속성 관리자에는 이미지를 맞춤화하는 옵션도 포함되어 있습니다.

모양으로 클립: 원형이나 둥근 모서리 또는 썸네일 이미지로 자르려면 클릭합니다.
반응형 이미지 제작: 다양한 화면 크기에 반응하고 적용되는 반응형 이미지를 만들려면 클릭합니다.

텍스트용 빠른 속성 관리자

라이브 뷰에서 텍스트에 빠른 속성 관리자를 사용하여 형식, 들여쓰기 및 하이퍼링크 텍스트를 신속하게 사용할 수 있습니다. 텍스트용 빠른 속성 관리자는 텍스트 요소 h1-h6, pre 및 p의 샌드위치 아이콘을 클릭하면 나타납니다.

형식 옵션으로 태그 h1-h6, p, pre 중 하나에 대한 요소 태그를 빠르게 변경할 수 있습니다.
링크 옵션으로 텍스트 요소에 하이퍼링크를 만들 수 있습니다.
볼드체와 기울임체 아이콘을 사용하면 텍스트 요소에 <strong>과 <em> 태그를 추가할 수 있습니다.
들여쓰기 아이콘을 사용하여 텍스트 들여쓰기를 추가하거나 제거할 수 있습니다. <blockquote> 태그는 이에 따라 코드에 추가되거나 제거됩니다.

Bootstrap 문서에서 텍스트용 빠른 속성 관리자를 사용하여 텍스트 요소를 정렬하고 전환할 수도 있습니다.

정렬: 해당 클래스를 적용하면 Bootstrap 텍스트 요소를 왼쪽, 가운데, 오른쪽 또는 양쪽에 맞춥니다.
전환: [소문자], [대문자] 또는 [문장의 첫 글자를 대문자로] 명령을 적용하여 요소의 대소문자를 전환합니다.

라이브 뷰 속성 관리자

라이브 뷰 속성 관리자 는 문서 창 아래에서 사용할 수 있는 기존의 속성 관리자입니다.

라이브 뷰 속성 관리자를 사용하면 현재 선택된 페이지 요소(예: 텍스트 또는 삽입된 오브젝트)의 자주 사용하는 속성을 확인하고 편집할 수 있습니다. 라이브 뷰 속성 관리자의 내용은 선택한 요소에 따라 다릅니다.

참고:

라이브 뷰 속성 관리자는 유동 격자 페이지에서 사용할 수 없습니다.

특정 속성 관리자에 대한 도움말에 액세스하려면 속성 관리자의 오른쪽 상단에서 도움말 버튼을 클릭하거나 속성 관리자의 옵션 메뉴에서 도움말을 선택하십시오.

다음은 이 라이브 뷰 속성 관리자를 사용하여 편집할 수 있는 요소입니다.

HTML

이미지

미디어 - HTML5 오디오 및 HTML5 비디오만 해당

앵커

양식

FormButton

FormTextArea

FormSubmitButton

FormRange

FormRadioButton

FormList

FormImage

FormFile

FormCheckBox

FormColor

FormDate

FormDateTime

FormDateTimeLocal

FormMonth

FormTime

FormWeek

FormNumber

FormLabel

FormHidden

FormGeneric

참고:

jQuery UI 및 템플릿 관련 속성은 라이브 뷰 속성 관리자에서 편집할 수 없습니다.

HTML 속성 편집

빠른 속성 관리자를 사용하여 라이브 뷰에서 직접 이미지의 HTML 속성을 빠르게 추가, 편집 또는 제거할 수 있습니다.

샌드위치 아이콘 을 클릭하면 이미지에 대한 빠른 속성 관리자가 나타납니다. 사용 가능한 공간에 따라 속성 관리자가 오른쪽, 왼쪽, 위쪽, 아래쪽 또는 이미지 위에 나타납니다. 속성 관리자를 옮겨 편리한 위치에 배치할 수 있습니다.

속성을 편집하려면 빠른 속성 관리자에서 샌드위치 아이콘을 클릭합니다. “제목” 및 ”alt” 등 다른 속성과 함께 이미지의 소스를 변경할 수 있으며 변경 사항은 즉시 반영됩니다. 마찬가지로 라이브 뷰에서 이미지의 폭과 높이를 조정할 수도 있습니다.

다음 중 하나를 수행하면 변경 사항이 저장됩니다.

속성 관리자 외부의 아무 곳이나 클릭
Enter 키 누르기
Tab 키를 눌러 속성 관리자에서 다른 속성 편집
파일 저장

이미지를 동적으로 로드할 때 이미지의 빠른 속성 관리자를 사용하여 이미지에 설정된 속성을 빠르게 검사할 수 있습니다.

라이브 뷰에서 텍스트 직접 편집

이제 라이브 뷰에서 직접 텍스트 요소를 편집할 수 있습니다. 텍스트 요소를 간단히 클릭하여 편집할 수 있습니다. 요소 표시 모드에서 작업하는 경우에는 Enter 키를 눌러 텍스트를 편집합니다.

참고:

편집 모드로 전환한 후에 Enter 키를 누르면 Enter 키를 누르기 전의 삽입점 위치에 따라 결과가 달라집니다. 변경은 디자인 뷰에서 텍스트를 편집하는 동안 Enter 키를 누르면 발생하는 동작과 비슷합니다.

텍스트 요소 주위에 있는 주황색 테두리는 편집 모드로 변경되었음을 나타냅니다.

삽입 포인트는 클릭한 위치에 배치됩니다. 텍스트 요소의 모든 텍스트를 선택하려면 텍스트 요소를 세 번 클릭합니다.

라이브 뷰에서 텍스트를 편집하는 동안 잘라내기, 복사하여 붙여넣기 및 실행 취소/다시 실행이 지원됩니다. 텍스트를 붙여넣으면 일반 텍스트로 붙여넣어집니다.

자동 동기화 기능을 사용하면 라이브 뷰에서 수행한 모든 편집 내용이 코드 뷰와 자동으로 동기화됩니다.

다음 표에는 라이브 뷰에서 텍스트를 편집하는 동안 지원되거나 지원되지 않는 경우가 상황별로 기재되어 있습니다.

지원됨	지원되지 않음
텍스트를 포함할 수 있는 모든 HTML 요소 및 시맨틱 태그	잘못되거나 끊어진 태그 편집. HTML이 끊어지거나 잘못된 태그를 포함하는 경우 브라우저에서 이러한 태그가 인식되는 방식에 따라 이러한 태그의 편집이 처리됩니다. 브라우저가 끊어진 태그를 닫는 등 HTML을 수정하는 경우 라이브 뷰에서 태그를 편집할 수 있습니다. 브라우저가 렌더링 중 새 태그를 추가하는 경우 끊어지거나 잘못된 태그를 편집할 수 없습니다.
라이브 뷰의 템플릿에서 파생된 HTML 파일	jQuery 페이지 편집
인라인 요소를 포함하는 구조 태그. 이러한 태그는 편집을 위해 단일 상자에 함께 표시됩니다.	정적 및 동적 내용을 모두 포함하는 태그 편집. 라이브 뷰에서 이러한 태그의 선택기는 편집할 수 있지만 텍스트는 직접 편집할 수 없습니다. 라이브 뷰에서 해당 요소를 더블 클릭하면 텍스트 편집이 지원되지 않음을 나타내는 회색 테두리가 해당 요소 주변에 나타납니다.
동적 페이지의 정적 텍스트
엔티티를 포함하는 텍스트

텍스트 서식 적용

이제 라이브 뷰에서 직접 텍스트 및 하이퍼링크 텍스트 서식을 변경할 수 있습니다. 텍스트 서식 옵션을 보려면 단어 또는 구를 선택합니다. 서식 옵션이 포함된 빠른 속성 관리자가 선택한 텍스트 바로 위에 나타납니다.

라이브 뷰에서 직접 요소 삽입

삽입 패널을 사용하면 라이브 뷰에서 요소를 문서의 원하는 위치로 직접 드래그할 수 있습니다. 라이브 가이드 및 DOM 아이콘 등 라이브 뷰의 시각적 보조 도구에서 마우스로 가리킨 요소와 관련하여 드래그한 요소를 배치할 수 있습니다.

요소를 드롭하기 전에 페이지의 다른 요소를 마우스로 가리킬 때 라이브 가이드(녹색 표시)가 나타납니다. 이 가이드는 요소가 삽입될 위치를 표시합니다. 가이드는 마우스로 가리킨 요소의 위, 아래, 왼쪽 또는 오른쪽에 나타납니다.

위와 아래 - 모든 유형의 요소/태그(인라인 태그 제외)로 이동 중에 나타납니다. 요소의 처음(상단) 50%를 마우스로 가리키는 경우 가이드는 가리킨 요소 위에 나타납니다. 요소의 마지막(하단) 50%를 마우스로 가리키는 경우 가이드는 가리킨 요소 아래에 나타납니다.

상단 및 하단의 라이브 가이드 — 마우스로 가리킨 요소의 상단 및 하단에 있는 라이브 가이드

왼쪽과 오른쪽 - 인라인 태그(예: <a>, <span>) 또는 “유동 속성” 세트가 있는 태그 위로 이동 중에 나타납니다.

요소를 드롭하기 전에 잠시 멈추면 DOM 아이콘 (</>)이 나타납니다. 마우스를 이 아이콘 위로 가져다 대면 DOM 패널이 열리며, 문서의 DOM 구조 안에 요소를 드롭할 수 있습니다.

라이브 뷰에 요소를 직접 삽입하려면 다음 단계를 수행하십시오.

라이브 뷰로 전환합니다.
삽입 패널에서 필요한 요소를 클릭하고 문서로 드래그합니다. 또는 삽입 패널에서 필요한 요소를 클릭할 수 있습니다.

팁: 페이지의 삽입 패널에서 요소를 드래그할 수 없는 경우에는 컴퓨터를 재시작하고 다시 시도해 보십시오.
라이브 가이드에 따라 요소의 상단, 하단, 오른쪽 또는 왼쪽에 요소를 드롭하십시오. 또는 </>를 클릭하고 DOM 패널을 사용하여 문서 구조의 정확한 위치에 요소를 드롭합니다.

요소가 페이지에 삽입되고 강조 표시됩니다.

윤곽 선택

윤곽 선택을 사용하면 라이브 뷰의 태그 안에서 텍스트 블록을 클릭하고 드래그하여 간편하게 선택할 수 있습니다. 2014.1 이전 버전의 Dreamweaver에서 텍스트 블록을 클릭하고 드래그하면 요소 전체가 이동하는 문제가 있었습니다.

참고:

라이브 뷰에서의 윤곽 선택은 브라우저에서 지원하는 작업으로 제한됩니다.

요소의 선택 및 드래그 앤 드롭

라이브 뷰에서 태그 이름을 클릭하고 드래그하여 요소를 원하는 위치로 옮길 수 있습니다. 태그 이름을 클릭하면 그 지점에서 태그를 드래그할 수 있음을 나타내는 손 모양의 커서 아이콘이 표시됩니다. 태그를 드래그하기 시작하면 이를 정확한 위치에 놓는 데 도움이 되는 안내선이 나타납니다.

라이브 뷰에서 태그 이름을 클릭하여 코드 보기에서의 해당 태그의 전체 내용을 선택할 수 있습니다.

코드 보기에서 해당 태그의 전체 내용을 선택하려면 라이브 뷰에서 태그 이름 클릭

라이브 뷰에서 코드 검사

검사 모드는 라이브 뷰를 사용하여 작업하면 HTML 요소 및 연결된 CSS 스타일을 빠르게 식별할 수 있습니다. 검사 모드가 활성화된 상태에서 페이지 요소에 커서를 올려 놓으면 블록 수준 요소에 대한 CSS 상자 모델 속성을 확인할 수 있습니다.

검사 모드에서 상자 모델의 시각적인 확인 외에도 라이브 뷰에서 요소에 커서를 올려 놓으면 CSS Designer를 사용할 수 있습니다.

[현재] 모드에서 CSS Designer를 열고 페이지 요소에 커서를 올려 놓으면 해당 요소에 대한 규칙과 속성이 표시되도록 CSS Designer의 규칙 및 속성이 자동으로 업데이트됩니다.

또한 커서를 올려 놓은 요소와 관련된 보기 또는 패널도 업데이트됩니다(예: 코드 보기, 태그 선택기, 속성 관리자 등).

문서 창에서 문서를 열고 [보기] > [검사]를 클릭합니다.

참고:

라이브 뷰를 사용하고 있지 않은 경우 검사 모드가 자동으로 활성화됩니다.
페이지 요소에 커서를 올려 놓으면 CSS 상자 모델을 확인할 수 있습니다. 검사 모드에서는 테두리, 여백, 패딩 및 내용이 다른 색상으로 강조 표시됩니다.
(선택 사항) 컴퓨터 키보드의 왼쪽 화살표 키를 눌러 현재 강조 표시된 요소의 부모를 강조 표시합니다. 오른쪽 화살표를 눌러 자식 요소가 강조 표시되도록 되돌립니다.
(선택 사항) 요소를 클릭하여 강조 표시 선택을 잠급니다.

참고:

강조 표시 선택을 잠그려는 요소를 클릭하면 검사 모드가 해제됩니다.

라이브 뷰에서 키보드 검색

편집 프로세스의 신속한 처리를 위해 키보드를 사용하면 요소 표시에서 페이지 요소 또는 선택기를 트래버스할 수 있습니다.

페이지 요소 트래버스하기

위쪽과 아래쪽 화살표 키를 사용하여 라이브 뷰에서 페이지 요소를 트래버스할 수 있습니다. 트래버스는 문서의 DOM 구조를 토대로 실행됩니다.

라이브 뷰의 키보드 검색으로 중첩되고 래핑된 요소에 쉽게 액세스할 수 있습니다.

위쪽 또는 아래쪽 화살표 키를 사용하여 요소에 액세스하는 경우 해당 요소에 대한 요소 표시가 나타납니다. 요소 표시에 있는 선택기로 이동하거나 입력 버튼을 눌러 라이브 뷰에서 텍스트를 직접 편집할 수 있습니다.

여기서 단락 선택 — 여기서 단락을 선택하십시오. 다시 아래쪽 화살표 키를 누르면 DOM 구조의 다음 요소와 굵은 체 형식의 텍스트가 다음 이미지와 같이 선택됩니다.

여기서 이미지가 우선적으로 강조됩니다. 아래쪽 화살표 키를 누르면 이미지 아래 단락이 다음 이미지와 같이 선택됩니다.

트래버스 선택기

탭 키를 눌러 요소 표시에 있는 선택기를 트래버스합니다. 해당 선택기가 아래와 같이 황색 테두리로 표시됩니다.

해당 선택기 강조 표시 — 해당 선택기가 황색 테두리로 강조 표시됩니다.

선택기를 마지막으로 적용한 후에 탭 키를 누르면 추가 선택기 텍스트 상자가 나타납니다.

참고:

Ctrl+[또는 Cmd+(부모 요소를 선택하려면 Cmd+ 및 Ctrl+)]를 사용하여 자식 요소를 선택할 수 있습니다.