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