방법: 직접 스타일 적용 도구 모음 사용
업데이트: 2007년 11월
직접 스타일 적용 도구 모음을 사용하여 스타일을 만들고 수정할 수 있습니다. Visual Studio의 다른 CSS 도구와 함께 직접 스타일 적용 도구 모음을 사용할 수 있습니다. 이 도구 모음에는 CSS 속성 창, 스타일 관리 창 및 스타일 적용 창이 포함됩니다.
CSS 스타일 규칙이 아직 없는 페이지 요소의 스타일을 지정하려는 경우 직접 스타일 적용 도구 모음을 사용하여 새 스타일을 생성하고 적용할 수 있습니다. 예를 들어 직접 스타일 적용 도구 모음을 사용하여 단락을 선택하고 텍스트에 색을 적용할 수 있습니다. 이 경우 Visual Studio에서 새 CSS 스타일 규칙을 만들고 텍스트에 해당 규칙을 적용합니다. 단락의 글꼴 패밀리처럼 같은 단락에 있는 다른 속성의 서식을 지정하는 경우 Visual Studio는 새 속성 선언을 생성된 스타일 규칙에 추가합니다.
직접 스타일 적용 도구 모음 사용
직접 스타일 적용 도구 모음을 사용하여 자동 모드나 수동 모드에서 스타일을 생성하고 수정할 수 있습니다. CSS 작성이 처음인 경우 자동 모드를 사용하여 Visual Studio에서 스타일 규칙을 자동으로 생성하게 만들 수 있습니다. 숙련된 CSS 작성자인 경우 스타일 규칙이 작성되는 방식을 가장 잘 제어할 수 있게 해주는 수동 모드를 사용할 수 있습니다.
수동 모드에서는 새 속성 선언을 다른 스타일에 추가할 수 있습니다. 여기에는 새 스타일, 다르게 생성된 스타일 또는 이미 만든 스타일이 포함됩니다. 수동 모드를 사용할 때 Visual Studio에서는 스타일을 올바르게 할당하는 데 필요한 경우 웹 페이지에 요소를 추가합니다.
직접 스타일 적용 도구 모음의 개요
다음 표에서는 직접 스타일 적용 도구 모음의 요소를 보여 줍니다.
.gif "참고") 참고: |
|---|
자동 모드에서 작업할 때 대상 규칙 드롭다운 목록이 비활성화되고 기존 스타일 다시 사용 단추가 비활성화됩니다. |
요소 |
설명 |
.png) |
스타일 적용 드롭다운 목록을 사용하여 스타일이 생성되고 수정되는 모드를 설정할 수 있습니다. CSS 작성이 처음인 경우 자동 모드를 사용합니다. 숙련된 CSS 작성자인 경우 수동 모드를 사용하여 디자인 프로세스를 간소화할 수 있습니다. |
.png) |
대상 규칙 드롭다운 목록은 새 CSS 속성에 영향을 미칩니다. 이 목록을 사용하여 수정할 스타일의 이름이나 현재 요소에 대해 생성된 스타일 유형을 볼 수 있습니다. 기본적으로 우선 순위가 가장 높은 스타일을 대상으로 합니다. 스타일이 없는 경우 새 자동 클래스가 기본값이 됩니다. 대상 규칙 드롭다운 목록은 다음 옵션을 제공합니다. 각 옵션의 효과는 현재 선택한 내용에 따라 달라집니다.
|
.gif) |
기존 스타일 다시 사용 단추는 기존 스타일과 속성의 변경 내용에 영향을 미칩니다. 선택한 스타일에 서식을 지정하는 속성에 대한 선언이 없지만 현재 선택 항목의 다른 스타일에는 이러한 선언이 있는 경우 기존 스타일 다시 사용에서 수정되는 스타일을 결정합니다. 기존 스타일 다시 사용을 선택하면 선언이 이미 포함된 속성이 수정됩니다. 기존 스타일 다시 사용을 선택하지 않으면 대상 규칙이 수정됩니다. |
.gif) |
오버레이 표시 단추는 선택한 규칙이 적용될 요소에 오버레이가 표시되는지 여부를 지정합니다. 이 옵션을 선택하면 디자이너에서 대상 규칙 드롭다운 목록에서 선택한 스타일을 사용하는 콘텐츠 주위에 점선 상자를 표시합니다. 오버레이를 사용하면 직접 스타일 적용 도구 모음을 사용하여 변경한 내용에 의해 영향을 받는 요소를 확인할 수 있습니다. 이 경우 수정할 특정 규칙에 액세스하기가 더 쉬워지므로 여러 규칙을 적용할 때 특히 유용합니다. |
ASP.NET 컨트롤과 함께 직접 스타일 적용 도구 모음 사용
직접 스타일 적용 도구 모음을 사용하여 스타일 지정을 지원하는 ASP.NET 서버 컨트롤에서 스타일을 변경할 수 있습니다. 도구 모음을 사용하여 인라인 스타일 및 CssClass 특성에 대한 속성을 정의하는 서버 컨트롤과 WebControl 클래스에서 상속되는 서버 컨트롤에 스타일을 적용할 수 있습니다. 사용자 정의 컨트롤에는 이러한 속성이 정의되어 있지 않습니다. 그러므로 도구 모음을 사용자 정의 컨트롤과 함께 사용할 수 없습니다.
ID 기반 스타일 규칙을 서버 컨트롤과 함께 사용하면 안 됩니다. 태그나 서버 코드에 할당된 이름이 렌더링되는 HTML 요소의 ID일 필요는 없습니다. 따라서 ID가 서버 컨트롤의 스타일을 지정하는 가장 좋은 방법은 아닙니다.
직접 스타일 적용 도구 모음 사용
직접 스타일 적용 도구 모음에서 적용 모드를 설정하여 스타일 규칙을 만드는 방법을 결정할 수 있습니다.
직접 스타일 적용 도구 모음에서 적용 모드를 설정하려면
- 직접 스타일 적용 도구 모음에서 스타일 적용 드롭다운 목록을 클릭한 다음 자동이나 수동을 클릭합니다.
직접 스타일 적용 도구 모음은 새 스타일을 만들거나 기존 스타일 규칙을 수정하는 가장 빠른 방법입니다.
직접 스타일 적용 도구 모음을 사용하여 새 스타일을 만들려면
디자인 뷰나 소스 뷰에서 수동 스타일 적용 모드로 전환합니다.
서식을 지정할 콘텐츠를 선택합니다.
직접 스타일 적용 도구 모음에서 대상 규칙 드롭다운 목록을 클릭하고 다음 중 하나를 수행합니다.
적용하는 서식을 기반으로 하는 새 스타일을 생성하고 해당 스타일을 현재 콘텐츠에 적용하려면 새 인라인 스타일, 새 자동 ID 또는 새 자동 클래스를 선택한 다음 해당 콘텐츠의 서식을 지정합니다.
새 스타일 대화 상자를 사용하여 새 스타일을 디자인하고 선택적으로 해당 스타일을 현재 선택 항목에 적용하려면 새 스타일 적용을 선택합니다.
선택 항목에 적용된 기존 스타일 규칙을 수정하거나 스타일 규칙에 대한 새 속성 선언을 만들 수 있습니다.
직접 스타일 적용 도구 모음을 사용하여 기존 스타일을 수정하려면
디자인 뷰나 소스 뷰에서 수동 스타일 적용 모드로 전환합니다.
서식을 지정할 콘텐츠를 선택합니다.
직접 스타일 적용 도구 모음의 대상 규칙 목록에서 원하는 스타일을 클릭합니다.
선택한 스타일에 서식을 지정하는 속성에 대한 선언이 없지만 현재 선택 항목의 다른 스타일에 이러한 선언이 있는 경우 기존 스타일 다시 사용을 선택하여 기존 스타일을 수정합니다.
콘텐츠의 서식을 지정합니다.