방법: CSS 속성 창 사용
업데이트: 2007년 11월
CSS 속성 창을 사용하면 요소의 CSS 스타일시트 스타일 속성을 보고 수정할 수 있습니다. 기존 스타일의 속성을 검토하고 변경하기 위해 열린 웹 페이지, 외부 CSS 파일 또는 스타일 관리 창에서 CSS 속성 창을 사용할 수 있습니다.
웹 페이지에서 CSS 속성 창을 사용하면 현재 선택한 요소에서 사용된 모든 스타일을 볼 수 있습니다. 또한 해당 스타일의 우선 순위와 해당 스타일의 모든 속성 및 값을 볼 수 있습니다. 소스 뷰와 디자인 뷰 양쪽에서 CSS 속성 창을 사용할 수 있습니다.
.gif "참고") 참고: |
|---|
CSS 속성 창에서 적용된 규칙 아래에 있는 선택기를 마우스 오른쪽 단추로 클릭하여 해당 선택기에 대한 스타일을 사용하는 추가 옵션이 포함된 바로 가기 메뉴를 표시할 수 있습니다. |
CSS 속성 창의 개요
CSS 속성 창에는 다음 그림에서 볼 수 있듯이 4개의 주요 섹션이 있습니다.
.png)
섹션은 다음과 같습니다.
정렬 단추 창의 맨 위에 있는 단추를 사용하여 속성 목록을 정렬할 수 있습니다. 범주 및 설정된 속성에 따라 목록을 사전순으로 정렬할 수 있습니다.
요약 단추 요약 단추를 클릭하여 선택한 요소에 영향을 주는 모든 스타일의 속성을 나열할 수 있습니다. 이 목록에 포함된 일부 속성은 적용된 규칙 섹션에 표시되지 않을 수도 있습니다.
적용된 규칙 페이지의 요소에 영향을 주는 모든 스타일을 나열합니다. 목록 아래쪽에 있는 스타일은 목록 위쪽에 있는 스타일보다 우선 순위가 높습니다. 이 목록에서 스타일을 선택하면 해당 속성이 CSS 속성 섹션에 나열됩니다.
CSS 속성 이 섹션을 사용하여 적용된 규칙 아래에서 선택한 스타일에 대한 CSS 속성을 보거나 설정합니다. 속성에 있는 빨간 가로줄은 해당 속성이 현재 선택 항목에 의해 상속되지 않았거나 다른 스타일에 의해 재정의되었음을 나타냅니다.
CSS 속성 창을 사용하여 새 스타일 만들기
CSS 속성 창을 사용하여 디자인 뷰, 소스 뷰 또는 분할 뷰에서 선택하는 요소에 대해 새 스타일을 만들 수 있습니다. 인라인 스타일을 만들거나 새 스타일 대화 상자를 표시하여 페이지 또는 CSS 스타일시트에 스타일을 만들 수 있습니다.
적용된 규칙 섹션은 요소에 적용된 스타일 규칙을 나타냅니다. 또한 이러한 규칙이 인라인인지, 스타일시트에 있는지 또는 현재 페이지에 있는지를 나타냅니다. 다음 절차에서는 요소에 대해 새 스타일을 만드는 방법을 설명합니다. 스타일을 아직 적용하지 않은 경우 적용된 규칙 섹션에 적용된 규칙 없음이 표시됩니다.
CSS 속성 창을 사용하여 새 스타일을 만들려면
디자이너에서 스타일 규칙을 추가할 요소를 선택합니다.
소스뷰에서 요소를 선택하고 여는 태그와 닫는 태그를 모두 포함합니다. 팝업 태그에서 요소 이름을 표시하도록 디자인 뷰에서 요소를 선택합니다.
인라인 스타일을 만들려면 CSS 속성 창에서 적용된 규칙 섹션의 아무 곳이나 마우스 오른쪽 단추로 클릭한 다음 새 인라인 스타일을 클릭합니다.
새 스타일을 페이지에 추가하려면 CSS 속성 창에서 적용된 규칙 섹션의 아무 곳이나 마우스 오른쪽 단추로 클릭한 다음 새 스타일을 클릭합니다.
적용된 규칙 목록에서 요소, 요소 ID 또는 요소 CSS 클래스를 선택합니다.
CSS 속성 섹션에서 스타일 속성을 설정합니다.
CSS 속성 창을 사용하여 스타일 수정
CSS 속성 창을 사용하여 단일 요소 또는 CSS 클래스를 공유하는 모든 요소의 서식이나 스타일 지정을 변경할 수 있습니다.
스타일의 속성을 수정하려면
CSS 속성 창의 적용된 규칙 목록에서 요소, 인라인 스타일, 요소 ID 또는 요소 CSS 클래스를 선택합니다.
CSS 속성 섹션에서 속성을 변경합니다.
요소에 적용할 스타일 결정
CSS 속성 창을 사용하여 요소에 적용된 스타일을 모두 볼 수 있습니다. 또한 재정의되는 스타일 속성을 볼 수 있습니다. 재정의된 스타일 속성에는 빨간 가로줄이 표시되는데 이는 속성이 현재 선택한 요소에 적용되지 않았음을 나타냅니다.
예를 들어 요소에는 인라인 스타일 규칙과 요소에 적용된 스타일시트의 스타일 규칙이 모두 있을 수 있습니다. 이 경우 인라인 스타일 규칙은 스타일시트 규칙을 재정의합니다.
선택 항목에 적용된 모든 속성의 요약을 보려면
페이지의 요소를 선택한 다음 요약을 클릭하여 요약 모드로 전환합니다.
CSS 속성 섹션에 선택한 요소에 적용된 모든 속성이 표시됩니다.
CSS 속성에서 속성을 클릭하여 적용된 규칙 아래에 연결된 스타일 규칙을 요약합니다.
요약 단추를 다시 클릭하여 요약 모드 외부로 전환합니다.
참고:마우스 포인터를 가로줄이 있는 속성 위에 두면 재정의된 속성에 대한 도구 설명으로 해당 속성을 재정의하는 다른 속성을 확인할 수 있습니다.