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

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

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

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

팁:

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

데이터베이스 또는 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 속성 편집

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

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

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

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

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

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

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

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

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

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

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

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

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

텍스트 서식 적용

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

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

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

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

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

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

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

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

윤곽 선택

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

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

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

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

라이브 뷰에서 코드 검사

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

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

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

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

라이브 뷰에서 키보드 검색

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

페이지 요소 트래버스하기

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

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

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

트래버스 선택기

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

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

라이브 뷰에서 편집 비활성화

지원되지 않는 시나리오

• Dreamweaver 템플릿 파일은 라이브 뷰에서 편집할 수 없습니다.
• 정적 및 동적 내용을 모두 포함하는 태그. 라이브 뷰에서 이러한 태그의 선택기는 편집할 수 있지만 텍스트는 편집할 수 없습니다. 라이브 뷰에서 해당 요소를 더블 클릭하면 텍스트 편집이 지원되지 않음을 나타내는 회색 테두리가 해당 요소 주변에 나타납니다.
• 유사 선택기가 적용된 태그. 라이브 뷰에서 해당 요소를 편집하려고 하면 예기치 않은 결과가 발생할 수 있습니다.
• CSS 그리드는 Dreamweaver 2019 및 이후 버전에서만 라이브 뷰에서 지원됩니다.