디자인 뷰

아티클
04/10/2013

디자인 뷰에는 WYSIWYG과 유사한 뷰를 사용하여 ASP.NET 웹 페이지, 마스터 페이지, 콘텐츠 페이지, HTML 페이지, 사용자 정의 컨트롤 등이 표시됩니다. 디자인 뷰를 사용하면 텍스트와 요소를 추가한 후 위치와 크기를 지정하고 특수한 메뉴 또는 속성 창을 사용하여 속성을 설정할 수 있습니다. 분할 뷰를 사용하면 디자인 뷰 모두에서 문서를 보고 편집할 수 있습니다. 기본적으로 두 개의 창은 가로로 정렬됩니다.

페이지에 요소를 추가하면 Visual Web Developer에서는 소스 뷰에서도 편집할 수 있도록 요소에 해당하는 태그를 만듭니다. 자세한 내용은 Source View를 참조하십시오.

디자인 뷰로 전환하려면 HTML 디자이너 창의 아래쪽에 있는 디자인 탭을 클릭합니다.

참고

디자인 뷰에는 <body> 태그와 </body> 태그 사이에 있는 문서 본문만 표시됩니다.문서 속성 창을 사용하여 문서 제목과 같은 head 요소의 일부 속성을 편집할 수 있지만 body 요소에 포함되지 않은 요소의 속성을 편집하려면 소스 뷰로 전환해야 합니다.

디자인 뷰가 웹 브라우저에서 보기와 다른점

디자인 뷰는 브라우저에 표시되는 페이지의 모양을 그대로 보여 주는 WYSIWYG과 유사한 편집 뷰를 제공합니다. 그러나 디자인 뷰는 페이지가 렌더링되는 방식과 정확하게 일치하지 않으므로 항상 하나 이상의 브라우저에서 페이지를 테스트하여 처음에 디자인한 대로 페이지가 표시되는지 확인해야 합니다.

디자인 뷰에 표시되는 문서는 다음과 같은 부분에서 웹 브라우저에 표시되는 문서와 다릅니다.

디자인 화면을 편집할 수 있습니다.
데이터 소스 컨트롤과 같은 일부 요소는 편집 목적으로 디자인 뷰에 표시되지만 브라우저에서 렌더링되지 않습니다. 편집하는 동안에만 나타나는 대부분의 컨트롤은 디자인 뷰에서 회색 상자로 렌더링됩니다.
특정 웹 브라우저에서 서식을 구현하는 방식이 디자인 뷰와 다른 경우 일부 문자와 단락 서식이 다르게 표시될 수 있습니다.
하이퍼링크가 작동하지 않습니다.
클라이언트 스크립트가 실행되지 않습니다.
서버 코드가 실행되지 않습니다.
이미지와 같은 대체 텍스트를 지원하는 요소는 마우스 포인터를 이동해도 대체 텍스트를 도구 설명으로 표시하지 않습니다.

Null 문자 표시

디자인 뷰에서 null 문자가 포함된 템플릿을 사용하면 null 문자 다음에 오는 문자가 잘립니다. 데이터는 손실되지 않지만 템플릿의 문자 중 null 문자 다음에 오는 문자가 디자인 뷰에 표시되지 않습니다.

디자인 뷰에서 요소 위치 지정

페이지의 요소는 실제로 위에서 아래로 레이아웃됩니다. 기본적으로 브라우저에 페이지를 렌더링하면 요소도 이와 동일하게 위에서 아래로 렌더링됩니다. 또한 페이지의 임의의 위치에서 가로 및 세로 좌표를 사용하여 2차원 형식으로 요소를 레이아웃할 수 있습니다. 이 레이아웃 옵션은 스타일을 통해 지정할 수 있는 위치 옵션을 사용합니다. 자세한 내용은 디자인 뷰에서 요소 위치 지정을 참조하십시오.

디자인 뷰에서 탐색

디자인 뷰에서는 요소 간에 이동하고 요소를 선택하는 데 사용할 수 있도록 다음과 같은 옵션을 제공합니다.

태그 탐색기. 태그 탐색기에는 현재 요소 및 이 요소가 포함된 부모 태그의 계층 구조가 표시됩니다. 태그 탐색기를 사용하면 포커스가 있는 요소를 확인하고 현재 요소에서 계층 구조의 상위 요소로 이동할 수 있습니다. 자세한 내용은 HTML Editor Tag Navigator을 참조하십시오.
문서 개요. 문서 개요 창을 사용하면 표시되지 않는 요소를 포함하여 문서의 모든 요소를 찾아서 선택할 수 있습니다. 자세한 내용은 How to: Navigate in the HTML Editor in Visual Studio을 참조하십시오.
속성 창. 속성 창의 맨 위에 있는 드롭다운 목록에서 요소를 선택하면 편집기의 문서에서 해당 요소가 선택됩니다.

요소 추가

다음과 같은 방법을 사용하여 디자인 뷰에서 페이지에 요소를 추가할 수 있습니다.

도구 상자에서 요소를 끌어 옵니다.
도구 상자의 요소를 두 번 클릭하여 문서에서 현재 삽입 지점이 있는 위치에 해당 요소를 삽입합니다.
Visual Web Developer에 열려 있는 다른 문서에서 요소를 끌어 옵니다.
솔루션 탐색기에서 요소를 끌어 옵니다. 이 방법은 주로 페이지에 사용자 정의 컨트롤과 스타일시트 참조를 추가하는 경우 유용합니다.
페이지에 텍스트를 직접 입력합니다.

디자인 뷰의 스마트 태그

디자인 뷰에서 대부분의 ASP.NET 서버 컨트롤에는 스마트 태그가 표시됩니다. 이 태그를 사용하면 컨트롤을 구성할 때 가장 일반적으로 사용되는 설정과 작업에 신속하게 액세스할 수 있습니다. 기본적으로 페이지에 처음으로 컨트롤을 추가할 때 스마트 태그가 표시됩니다. 또한 바로 가기 메뉴를 사용하거나 기호를 클릭하여 언제든지 스마트 태그를 표시할 수 있습니다.

디자인 뷰의 식

디자인 뷰에서는 속성 창을 사용하여 식 값을 변경할 수 없습니다. 예를 들어, 소스 뷰에서 컨트롤에 식을 할당할 경우 디자인 뷰에서 해당 식의 값을 변경할 수 없습니다. 식 값은 계산되기 때문에 식을 변경하려면 소스 뷰를 사용해야 합니다.

디자이너 새로 고침

소스 뷰에서 디자인 뷰로 전환하는 경우 특정 유형의 파일 변경 내용을 확인하기 위해 디자이너를 새로 고쳐야 할 수도 있습니다. 예를 들어 테마 코드는 컴파일되지 않고 구문 분석되므로 소스 뷰에서 테마 코드를 변경할 경우 디자이너에서 이 내용을 확인하려면 먼저 디자이너를 새로 고쳐야 합니다.

디자이너를 새로 고치려면 다음 중 하나를 수행합니다.

디자인 창을 마우스 오른쪽 단추로 클릭하고 새로 고침을 클릭합니다.
보기 메뉴에서 새로 고침을 클릭합니다.

참고 항목

Share via