방법: 스타일 적용 및 스타일 관리 창 사용
업데이트: 2007년 11월
스타일 적용 및 스타일 관리 창을 사용하면 스타일을 적용, 수정, 이름 변경 및 삭제할 수 있습니다. 또한 외부 CSS 스타일시트를 연결 또는 분리하고 하고 스타일의 모든 인스턴스를 선택하고 스타일 규칙 집합이 포함된 코드를 찾을 수 있습니다.
각 창에는 특정한 용도가 있습니다. 스타일 적용 창을 사용하면 페이지 요소에 하나의 스타일이나 여러 스타일을 적용할 수 있습니다. 스타일 적용 창에서는 스타일의 규칙에 따라 각 스타일을 표시합니다. 따라서 창에서 스타일 모양만 보고도 사용할 스타일을 빠르게 식별할 수 있습니다.
스타일 관리 창을 사용하면 스타일의 위치나 순서를 변경할 수 있습니다. 스타일을 외부 CSS에서 내부 CSS로 또는 그 반대로 이동하거나 스타일시트 또는 스타일 블록 내에서 스타일의 위치를 이동할 수 있습니다.
두 도구에서는 스타일이 정의된 방식을 아이콘을 사용하여 표시합니다. 다음 표에서는 각 아이콘에 대해 설명합니다.
아이콘 |
설명 |
.gif) |
빨간 점은 ID 기반 스타일을 나타냅니다. |
.gif) |
녹색 점은 클래스 기반 스타일을 나타냅니다. |
.gif) |
파란 점은 요소 기반 스타일을 나타냅니다. |
.gif) |
노란 점은 인라인 스타일을 나타냅니다. |
.gif) |
점 주위의 원은 스타일이 현재 페이지에서 사용되고 있음을 나타냅니다. |
.gif) |
@ 기호는 가져온 외부 CCS 스타일시트임을 나타냅니다. |
스타일 적용 창 작업
스타일 적용 창에서는 페이지에 대해 정의된 모든 CSS 스타일 규칙을 나열합니다. 여기에는 외부 스타일시트에 정의된 스타일 규칙, 인라인 스타일, 페이지에 정의된 스타일 등이 포함됩니다. 클래스 기반 및 ID 기반 스타일 규칙은 해당 스타일을 포함하는 외부 .css 파일의 이름 아래에 표시됩니다. 페이지에서 정의한 스타일 규칙인 경우 현재 페이지 아래에 표시됩니다. 요소 스타일 규칙은 같은 방법으로 구성되어 있지만 상황별 선택기라는 별개의 제목 아래에 표시됩니다.
모든 스타일 규칙을 나열하도록 창을 설정할 수 있습니다. 또는 현재 웹 페이지나 페이지의 현재 선택 영역에서 사용되는 스타일 규칙만 나열하도록 목록을 제한할 수도 있습니다. 이들 옵션 중 무엇을 선택하든 요소 기반 스타일 규칙과 인라인 스타일 규칙은 두 가지 조건에 해당하는 경우에만 창에 표시됩니다. 조건 하나는 마우스 포인터를 해당 스타일을 사용하는 페이지 요소 위에 놓을 때이고 다른 하나는 스타일을 사용하는 콘텐츠를 선택할 때입니다.
또한 스타일 적용 창에 표시되는 스타일 목록을 정렬할 수 있습니다.
창의 배경에서 특정 스타일을 알아 보기 어려운 경우 스타일 뒤의 창에서 배경 속성에 포함되지 않은 색을 표시하도록 선택할 수 있습니다.
.gif "참고") 참고: |
|---|
모든 스타일 규칙을 팝업 창에 임시로 표시하려면 스타일 적용 창에서 스타일 위에 마우스 포인터를 놓습니다. |
스타일 적용 창 개요
스타일 적용 창의 사용자 인터페이스에는 다음 항목이 있습니다.
새 스타일 - 스타일 대화 상자에 액세스할 수 있습니다.
스타일시트 첨부 - 스타일시트를 선택하여 현재 페이지에 연결할 수 있습니다.
스타일 지우기 - 현재 선택 영역에서 클래스 기반 및 인라인 스타일 규칙을 모두 제거합니다.
현재 페이지 - 현재 페이지 및 가져온 외부 CSS 파일에 있는 클래스 기반 및 ID 기반 스타일 규칙을 나열합니다.
@ 기호로 표시된 외부 CSS 파일에는 현재 웹 페이지로 가져온 모든 스타일 규칙이 표시됩니다.
현재 웹 페이지에서 연결된 외부 CSS 파일은 별도의 섹션으로 표시됩니다.
스타일 주변의 단색 직사각형 테두리는 스타일이 현재 선택 영역에서 사용되고 있음을 나타냅니다.
상황별 선택기 - 현재 선택 영역에서 사용되는 요소 기반 스타일 규칙을 나열합니다.
인라인 스타일 - 선택한 인라인 요소에 적용된 스타일 규칙을 표시합니다.
각 스타일 규칙의 바로 가기 메뉴 - 여러 스타일 관련 작업을 수행할 수 있습니다.
.png)
스타일 적용 창 사용
스타일 적용 창을 사용하면 페이지 요소에 하나의 스타일이나 여러 스타일을 빠르게 적용할 수 있습니다.
스타일 적용 창을 사용하여 페이지 요소에 스타일을 적용하려면
스타일 적용 창을 표시하려면 서식 메뉴에서 CSS 스타일을 클릭한 다음 스타일 적용을 클릭합니다.
웹 페이지의 디자인 뷰나 소스 뷰에서 스타일을 적용할 요소를 선택한 다음 스타일 적용 창에서 다음 중 하나을 수행합니다.
기존 스타일 규칙 하나를 적용하려면 적용할 클래스 또는 ID 스타일을 클릭합니다.
기존 스타일 규칙을 여러 개 적용하려면 Ctrl 키를 누른 상태로 적용할 각 스타일을 클릭합니다.
스타일 순서를 변경하고, 표시되는 스타일을 변경하고, 원하는 내용을 표시하도록 창을 사용자 지정할 수 있습니다.
스타일 적용 창을 사용하여 스타일을 정렬하려면
스타일 적용 창에서 옵션을 클릭하고 다음 중 하나를 수행합니다.
스타일 규칙을 CSS에 표시되는 순서대로 나열하려면 순서대로 분류를 클릭합니다.
스타일을 사전순으로 및 스타일 형식(클래스 기반 또는 ID 기반)별로 나열하려면 종류별로 분류를 클릭합니다.
스타일 적용 창에서 스타일 규칙을 표시하거나 숨길 수 있습니다. 요소 기반 스타일과 인라인 스타일 규칙은 해당 스타일을 사용하는 콘텐츠 위에 마우스 포인터를 놓거나 이러한 콘텐츠를 선택하는 경우에만 스타일 적용 창에 표시됩니다.
스타일 적용 창을 사용하여 스타일을 표시하거나 숨기려면
스타일 적용 창에서 옵션을 클릭하고 다음 중 하나를 수행합니다.
현재 웹 페이지의 외부, 내부 및 인라인 CSS에 포함된 스타일 규칙을 모두 나열하려면 모든 스타일 표시를 클릭합니다.
현재 웹 페이지에서 사용되는 스타일 규칙만 나열하려면 현재 페이지에 사용된 스타일 표시를 클릭합니다.
웹 페이지의 현재 선택 영역에서 사용되는 스타일 규칙만 나열하려면 선택 내용에 사용된 스타일 표시를 클릭합니다.
스타일 규칙에 배경색이 없는 경우 스타일 적용 창에서 스타일 이름을 쉽게 구분할 수 있도록 색을 적용할 수 있습니다. 스타일에 배경 스타일 규칙이 있으면 배경이 해당 스타일로 표시됩니다.
스타일 적용 창에서 컬러 배경을 표시하려면
스타일 적용 창에서 옵션을 클릭한 다음 배경색 미리 보기를 클릭합니다.
다른 색 대화 상자에서 색을 선택한 다음 확인을 클릭합니다.
스타일 관리 창 작업
스타일 관리 창에서는 페이지의 외부 CSS 스타일시트에서 정의한 스타일 규칙을 모두 나열합니다. 또한 페이지에서 정의한 스타일 규칙도 나열하지만 인라인 스타일로 정의한 스타일 규칙은 나열하지 않습니다. 스타일 관리 창을 사용하면 스타일을 내부 스타일시트에서 페이지의 style 요소로 또는 그 반대 방향으로 이동할 수 있습니다. 또한 이 창을 사용하여 CSS 스타일 규칙 집합 내에서 스타일의 위치를 이동할 수도 있습니다.
모든 스타일 규칙을 나열하도록 창을 설정하거나 현재 웹 페이지나 페이지의 현재 선택 영역에서 사용되는 스타일 규칙만 나열하도록 제한할 수 있습니다. 모든 클래스 기반, 요소 기반 및 ID 기반 스타일 규칙은 해당 스타일 규칙을 포함하는 외부 .css 파일의 이름 아래에 표시됩니다. 현재 페이지에 있는 스타일 규칙인 경우 현재 페이지 아래에 표시됩니다.
| 참고: |
|---|
모든 스타일 규칙을 팝업 창에 임시로 표시하려면 스타일 적용 창에서 스타일 위에 마우스 포인터를 놓습니다. |
스타일 관리 창 개요
스타일 관리 창의 사용자 인터페이스에는 다음 항목이 있습니다.
새 스타일 - 스타일 대화 상자에 액세스할 수 있습니다.
스타일시트 첨부 - 스타일시트를 선택하여 현재 페이지에 연결할 수 있습니다.
현재 페이지 - 현재 페이지 및 가져온 외부 CSS 파일에 있는 클래스 기반 및 ID 기반 스타일 규칙을 나열합니다.
현재 웹 페이지에서 연결된 외부 .css 파일에 대한 탭
기본 선택기 그룹화 - 여러 선택기를 그룹으로 포함하는 스타일의 선택기를 표시합니다. 옵션을 클릭한 다음 그룹화된 선택기 분리를 클릭하여 선택기를 개별적으로 나열할 수 있습니다.
.png)
스타일 관리 창에서 선택한 선택기의 미리 보기를 표시하려면 옵션을 클릭한 다음 선택한 스타일 미리 보기 표시를 클릭합니다.
스타일 관리 창 사용
스타일 순서를 변경하고 원하는 내용을 표시하도록 창을 사용자 지정할 수 있습니다. 스타일을 목록에서 위나 아래로 이동하면 해당 스타일이 스타일시트에서도 이동합니다. 이러한 변경 사항은 스타일 속성이 계단식으로 배열되는 방식에 영향을 줄 수 있습니다. 예를 들어 속성 특성이 두 가지 다른 스타일로 설정된 경우 마지막 스타일이 우선합니다.
| 참고: |
|---|
스타일 관리 창이 요소별로 분류 또는 종류별로 분류로 설정된 경우 스타일 목록에서 스타일을 특정 지점으로 이동할 수 없습니다. 두 경우 모두 스타일을 외부 CCS 파일 이름이나 현재 페이지로 끌어 스타일을 외부 CSS에서 다른 외부 CSS나 페이지로 또는 그 반대로 이동할 수만 있습니다. |
스타일 관리 창을 사용하여 스타일을 이동하려면
스타일 관리 창을 표시하려면 서식 메뉴에서 CSS 스타일을 클릭한 다음 스타일 관리를 클릭합니다.
스타일 관리 창에서 옵션, 순서대로 분류를 차례로 클릭하고 다음을 수행합니다.
CSS에서 스타일의 위치를 이동하려면 스타일을 목록에서 위나 아래로 끕니다. 예를 들어 가장 가주 사용하는 스타일을 사용하기 쉽게 서로 근처에 표시되도록 이동할 수 있습니다.
페이지에서 스타일을 페이지에 연결된 외부 CSS로 이동하려면 현재 페이지 아래에서 스타일을 외부 CSS의 이름으로 끌거나 외부 CSS 스타일 목록의 특정 지점으로 끕니다.
스타일을 외부 CSS에서 페이지로 이동하려면 외부 CSS 이름 아래에서 스타일을 현재 페이지로 끌거나 현재 페이지 아래에 있는 스타일 목록의 특정 지점으로 끕니다. 현재 페이지가 표시되지 않으면 style 요소를 웹 페이지의 head 요소 안에 추가합니다.
스타일을 외부 CSS에서 다른 CSS로 이동하려면 스타일을 원하는 외부 CSS의 이름으로 끌거나 외부 CSS에 있는 스타일 목록의 특정 지점으로 끕니다.
스타일 관리 창은 스타일을 관리하는 데 가장 많이 사용되지만 페이지 요소에 스타일을 적용하는 데에도 사용할 수 있습니다.
스타일 관리 창을 사용하여 스타일을 적용하려면
웹 페이지의 디자인 뷰나 소스 뷰에서 스타일을 적용할 요소를 선택합니다.
적용할 클래스 또는 ID 스타일을 마우스 오른쪽 단추로 클릭하고 단축 메뉴에서 스타일 적용을 클릭합니다.
옵션 단추 아래의 선택 항목을 사용하여 스타일을 정렬할 수도 있습니다.
스타일 관리 창을 사용하여 스타일을 정렬하려면
스타일 관리 창에서 옵션을 클릭하고 다음 중 하나를 수행합니다.
스타일 규칙을 CSS에 표시되는 순서대로 나열하려면 순서대로 분류를 클릭합니다.
각 스타일이 적용된 HTML 요소 아래에 스타일을 나열하려면 요소별로 분류를 클릭합니다.
스타일을 사전순으로 및 스타일 형식에 따라 나열하려면 종류별로 분류를 클릭합니다.
그룹화한 스타일을 분리하여 사용하기 쉽게 만들 수 있습니다.
여러 선택기를 포함하는 스타일의 각 선택기를 개별적으로 나열하려면
- 스타일 관리 창에서 옵션을 클릭한 다음 그룹화된 선택기 분리를 클릭합니다.
또한 스타일 관리 창에서 표시할 스타일을 지정할 수도 있습니다.
스타일 관리 창에서 스타일을 표시하거나 숨기려면
스타일 관리 창에서 옵션, 순서대로 분류를 차례로 클릭하고 다음을 수행합니다.
외부 스타일시트에 포함되어 있거나 페이지에 있거나 현재 페이지의 인라인 스타일 규칙인 스타일을 모두 나열하려면 모든 스타일 표시를 클릭합니다.
현재 웹 페이지에서 사용되는 스타일만 나열하려면 현재 페이지에 사용된 스타일 표시를 클릭합니다.
페이지의 현재 선택 영역에서 사용되는 스타일만 나열하려면 선택 내용에 사용된 스타일 표시를 클릭합니다.