색 선택 대화 상자
업데이트: 2007년 11월
이 대화상자는 HTML 요소에 스타일 특성을 지정하는 데 사용됩니다.
이 대화 상자에 액세스하려면
Microsoft Visual Web Developer의 디자인 뷰에서 태그를 렌더링하는 컨트롤 또는 HTML 요소(예: Table 컨트롤 또는 HTML <input> 단추)를 선택합니다.
다음 작업 중 하나를 수행하여 스타일 작성기 대화 상자를 엽니다.
디자인 뷰에서 컨트롤 또는 요소를 선택하고 서식을 클릭한 다음 스타일을 클릭합니다.
디자인 뷰에서 컨트롤 또는 요소를 마우스 오른쪽 단추로 클릭하고 스타일을 클릭합니다.
컨트롤 또는 요소를 선택하고 속성 창에서 스타일 속성을 선택한 다음 줄임표(...) 단추를 선택합니다.
문서 스타일 창에서 작업하는 경우 요소, 클래스 또는 요소 ID를 선택한 다음 스타일 작성 아이콘을 선택합니다.
CSS 스타일시트를 편집하는 경우 삽입 지점을 CSS 스타일의 중괄호({ }) 사이에 둔 다음 스타일 메뉴에서 스타일 작성을 선택합니다.
스타일 작성기 대화 상자가 열립니다.
스타일 작성기 대화 상자에서 색 드롭다운 목록이 포함된 탭을 선택하고 상자 옆의 줄임표(…) 단추를 클릭합니다.
색 선택 대화 상자가 열립니다.
작업
UI 요소
웹 팔레트
이 탭에서 색 견본을 선택하면 색 필드에 16진 RGB 코드가 나타나며 선택된 attribute:RGBcolor 쌍이 스타일 작성기 대화 상자를 닫을 때 CSS 스타일 정의에 삽입됩니다.예를 들어, 디자인 뷰에서 HTML 페이지를 편집하는 경우 문서 개요 창에서 <BODY> 요소를 선택하고 서식 메뉴에서 스타일 작성을 선택합니다. 그런 다음 배경을 선택하고 색 필드 옆의 줄임표(...) 단추를 선택하여 색 선택 대화 상자를 엽니다. 웹 팔레트 탭에서 옅은 파란색 견본을 선택하고 확인을 클릭합니다. 스타일 작성기 대화 상자를 닫으면 다음과 같이 attribute:RGBcolor 쌍이 BODY 스타일의 중괄호({ }) 사이에 삽입됩니다.
BODY { BACKGROUND-COLOR: #99ffff; }자세한 내용은 색 선택 대화 상자, 웹 팔레트 탭을 참조하십시오.
명명된 색
이 탭에서 색 견본을 선택하면 해당 색의 이름과 16진 RGB 코드가 색 필드에 나타납니다. 기본 또는 추가 명명된 색을 선택하면 attribute:colorname 쌍이 CSS 스타일 정의에 삽입됩니다.예를 들어, 디자인 뷰에서 HTML 페이지를 편집하는 경우 문서 개요 창에서 <BODY> 요소를 선택하고 서식 메뉴에서 스타일 작성을 선택합니다. 그런 다음 배경을 선택하고 색 필드 옆의 줄임표(...) 단추를 선택하여 색 선택 대화 상자를 엽니다. 명명된 색 탭의 끝 행에서 LightBlue (#add8e6) 색을 선택합니다. 스타일 작성기 대화 상자를 닫으면 다음과 같이 attribute:colorname 쌍이 해당 BODY 스타일의 중괄호({ }) 사이에 삽입됩니다.
BODY { BACKGROUND-COLOR: lightblue; }자세한 내용은 색 선택 대화 상자, 명명된 색 탭을 참조하십시오.
시스템 색
색을 선택하면 색 필드에 시스템 색 범주가 나타나며 스타일 작성기 대화 상자를 닫으면 attribute:category 쌍이 CSS 스타일 정의에 삽입됩니다.예를 들어, CSS 스타일시트를 편집하는 경우 커서를 <BODY> 요소에 대한 CSS 스타일의 중괄호({ }) 사이에 둔 다음 서식 메뉴에서 스타일 작성을 선택합니다. 그런 다음 배경을 선택하고 색 필드 옆의 줄임표(...) 단추를 선택하여 색 선택 대화 상자를 엽니다. 해당 시스템 색 탭에서 배경 색 범주를 선택한 다음 확인을 선택합니다. 스타일 작성기 대화 상자를 닫으면 다음과 같이 attribute:colorname 쌍이 BODY 스타일에 삽입됩니다.
BODY { BACKGROUND-COLOR: background; }.gif "참고")
참고:시스템 색을 사용할 경우에는 표시될 색을 사용자가 지정하지 않습니다. 배경색은 사용자가 선택한 바탕 화면 색에 따라 각 시스템마다 다릅니다. 일반적으로 예측 가능한 디스플레이 설정을 공유하는 사용자 그룹을 위해 디자인된 웹 프로젝트에서만 시스템 색 범주를 사용해야 합니다.
자세한 내용은 색 선택 대화 상자, 시스템 색 탭을 참조하십시오.
사용자 지정 색
미리 보기 필드에 원하는 색상이 나타날 때까지 세 가지 기본 색, 즉 빨강, 녹색, 파랑 슬라이더를 끌어 사용자 지정 색을 만들 수 있습니다. 스타일 작성기 대화 상자를 닫으면 색 필드에 표시된 해당 RGB 색 코드가 CSS 스타일 정의에 삽입됩니다. 각 슬라이더 오른쪽에 표시되는 10진 값은 0(색 없음)에서 255(최대 색)까지이며 기본값은 255입니다.참고:사용자 지정 색은 모니터의 현재 디스플레이 설정을 사용하여 표시됩니다. 해당 색은 다른 사용자의 모니터 및 웹 브라우저에서 다르게 나타날 수 있습니다. 일반적이며 예측 가능한 디스플레이 설정을 공유하는 사용자 그룹을 위해 디자인된 웹 프로젝트에서는 사용자 지정 색을 예약하여 사용할 수 있습니다.
예를 들어, CSS 스타일시트를 편집하는 경우 커서를 INPUT.button 스타일 클래스에 대한 CSS 스타일의 중괄호({ }) 사이에 놓고 스타일 작성 대화 상자에서 배경을 선택한 다음 색 필드 옆의 줄임표(...) 단추를 선택하여 색 선택 대화 상자를 엽니다. 그런 다음 해당 사용자 지정 색 탭에서 Red 및 Green 슬라이더는 기본값 255로 설정하고 Blue 슬라이더는 왼쪽으로 끌어 102로 설정합니다. 스타일 작성기 대화 상자를 닫으면 다음과 같이 attribute:RGBcolor 쌍이 스타일의 중괄호({ }) 사이에 삽입됩니다.
INPUT.button { background-color: #ffff66; }자세한 내용은 색 선택 대화 상자, 사용자 지정 색 탭을 참조하십시오.
색
선택된 색의 16진 RGB 코드를 표시합니다.확인
색 선택 대화 상자를 닫고 선택한 attribute:color 쌍을 CSS 태그에 추가합니다. CSS 태그는 스타일 작성기 대화 상자를 닫으면 삽입됩니다.