옵션 대화 상자, HTML 디자이너, CSS 스타일 지정
CSS 스타일 지정 대화 상자를 사용하면 디자인 뷰에서 CSS 스타일이 적용되는 방식의 기본 설정을 변경할 수 있습니다.
이 대화 상자에 액세스하려면
Visual Web Developer에서 도구를 클릭한 다음 옵션을 클릭합니다.
왼쪽 패널에서 HTML 디자이너를 확장하고 CSS 스타일 지정을 클릭합니다.
참고
웹 개발을 위한 환경 설정을 구성한 경우에는 기본적으로 이 노드의 요소를 사용할 수 없습니다.해당 요소를 표시하려면 모든 설정 표시 확인란을 선택합니다.환경 설정에 대한 자세한 내용은 방법: 선택 설정 변경을 참조하십시오.
모든 설정 표시 확인란이 선택되어 있는 경우 표시되는 HTML 디자이너 노드에서 디자인 뷰에 적용되는 추가 옵션을 확인할 수 있습니다.
스타일시트에 대한 자세한 내용은 CSS 작업 개요를 참조하십시오.
스타일 적용 모드
수동 스타일 적용
디자인 뷰에서 작업할 때 기본적으로 CSS 스타일을 HTML 요소에 수동으로 적용해야 하도록 지정합니다.참고
스타일 적용을 위한 수동 모드를 선택하면 다음 표에 나와 있는 스타일 적용 옵션 중 일부를 사용할 수 없습니다.
자동 스타일 적용
디자인 뷰에서 작업할 때 기본적으로 CSS 스타일이 Visual Web Developer를 통해 HTML 요소에 자동으로 적용되도록 지정합니다.참고
스타일 적용을 위한 자동 모드를 선택하면 모든 스타일 적용 옵션을 사용할 수 있습니다.
스타일 적용 옵션
"style" 접두사를 사용하는 클래스만 다시 사용
(자동 스타일 적용 모드에만 해당) 이름에 "style" 접두사가 있는 CSS 클래스를 다시 사용할 수 있도록 지정합니다. 수동 모드에서는 모든 클래스의 이름을 수동으로 지정하고 적용해야 합니다.CSS 대신 이미지의 너비 및 높이 특성 사용
CSS 스타일을 사용하는 대신 width 및 height 특성을 사용하여 img 요소의 차원을 설정하도록 지정합니다.굵은 및 기울임꼴 텍스트에는 <strong> 및 <em>을 사용합니다.
(자동 스타일 적용 모드에만 해당) 굵게 서식 지정된 텍스트를 b 요소 대신 strong 요소를 사용하여 표시하도록 지정합니다. 기울임꼴로 서식 지정된 텍스트는 i 요소 대신 em 요소를 사용하여 표시합니다.수동 모드에서 디자인 뷰의 텍스트에 굵게 또는 기울임꼴 서식을 적용하려면 b 및 i 요소를 사용합니다.
스타일 생성 시 줄임 속성 사용
Visual Web Developer에서 스타일이 자동으로 생성되는 경우 각 항목에 개별 스타일을 사용하는 대신 CSS 속성의 줄임 또는 조합 스타일을 사용하도록 지정합니다. 예를 들어 margin-left, margin-right와 같이 개별 스타일을 사용하여 각 여백 비율을 지정하는 대신 Visual Web Developer에서 margin:이라는 스타일 항목 하나를 생성하고 해당 스타일 사양 내에서 왼쪽, 오른쪽, 위쪽 및 아래쪽 여백 세부 정보를 지정합니다.도구 상자, 붙여넣기 또는 끌어서 놓기를 사용하여 추가한 컨트롤의 위치를 절대 위치로 변경합니다.
붙여넣거나 끌어 놓거나 도구 상자를 사용하여 요소를 만들 때 절대 CSS 위치를 사용하여 요소를 배치하도록 지정합니다.