스타일 작성기 대화 상자, 목록
업데이트: 2007년 11월
스타일 작성기 대화 상자의 목록 페이지에서는 <OL> 및 <UL> 태그를 사용하여 만든 목록의 서식을 지정하는 CSS 스타일 특성을 정의할 수 있습니다. 이러한 특성을 HTML 요소에 직접 적용하거나 CSS 스타일 규칙에 추가할 수 있습니다.
페이지의 HTML 요소에 직접 목록 특성을 적용하려면
HTML 디자이너의 디자인 뷰에서 HTML 문서를 열고 서식을 지정할 요소를 선택합니다.
서식 메뉴에서 스타일을 클릭하여 스타일 작성기 대화 상자를 엽니다.
스타일 작성기 대화 상자의 왼쪽 창에서 목록을 클릭합니다.
스타일 작성기 대화 상자의 오른쪽 창에 목록 페이지가 나타납니다.
디자인 뷰에서 선택한 요소의 서식을 지정할 경우 페이지의 HTML 태그에 CSS 스타일 특성이 인라인으로 삽입됩니다. 새로 삽입한 스타일 특성을 검토하려면 HTML 뷰로 전환합니다.
외부 스타일시트에 정의된 CSS 스타일 규칙에 목록 특성을 추가하려면
기존의 외부 스타일시트를 열고 원하는 스타일의 선택기 뒤에 있는 중괄호({ }) 안에 삽입 지점을 놓습니다.
스타일 메뉴에서 스타일 작성을 클릭하여 스타일 작성기 대화 상자를 엽니다.
스타일 작성기 대화 상자의 왼쪽 창에서 목록을 클릭합니다.
스타일 작성기 대화 상자의 오른쪽 창에 목록 페이지가 나타납니다.
.gif "참고") 참고: |
|---|
편집할 외부 CSS 스타일시트를 열면 스타일 메뉴가 나타납니다. 스타일 규칙 선택기 뒤에 있는 중괄호 안에 삽입 지점을 놓으면 스타일 메뉴에서 스타일 작성 옵션을 사용할 수 있습니다. |
외부 스타일시트에 정의된 CSS 스타일 클래스는 CSS 스타일 선택기를 요소에 대한 CLASS 속성으로 할당하여 웹 페이지의 <BODY> 요소 내에 있는 요소에 적용할 수 있습니다.
스타일 작성기 대화 상자의 목록 페이지에서 사용할 수 있는 옵션은 다음과 같습니다.
작업
UI 요소
목록
목록 유형(글머리 기호 있음 또는 글머리 기호 없음)에 대한 특성을 설정합니다. 이러한 특성은 일반적으로 <LI></LI> 또는 <OL></OL> 태그에 영향을 주는 스타일에 적용됩니다. <설정 안 함>(옵션 선택 안 함), 글머리 기호 있음 또는 글머리 기호 없음을 선택합니다. 예를 들어, 글머리 기호 없음을 선택할 경우 다음 코드가 추가됩니다.
LIST-STYLE-TYPE:none
글머리 기호
다음 표에 나열된 특성은 글머리 기호의 서식을 지정합니다. 글머리 기호에는 숫자, 문자, 로마 숫자, 표준 글머리 기호 이미지(원, 원반형, 사각형) 또는 사용자 지정 글머리 기호 이미지가 있습니다.
| 참고: |
|---|
글머리 기호 있음을 목록 유형으로 선택하면 글머리 기호의 여러 다른 스타일을 사용할 수 있게 됩니다. |
스타일
글머리 기호의 스타일을 제어하는 특성을 설정합니다. 8개의 스타일을 사용할 수 있습니다. <설정 안 함>(옵션 선택 안 함), 원, 원반형, 사각형, (1 2 3 4…), (i ii iii iv…), (I II III IV…), (a b c d...) 또는 (A B C D…)를 선택합니다. 예를 들어, 글머리 기호 있음을 목록 유형으로 선택하고 사각형을 스타일로 선택한 경우 다음과 같은 CSS 태그가 삽입됩니다.LIST-STYLE-TYPE:square
위치
텍스트를 기준으로 글머리 기호의 위치를 제어하는 특성을 설정합니다. 텍스트 위치에는 두 개의 다른 서식이 있습니다. <설정 안 함>(옵션 선택 안 함), 바깥쪽(텍스트 들여씀) 또는 안쪽(텍스트 들여쓰지 않음)을 선택합니다. 예를 들어, 사각형을 스타일로, 글머리 기호 있음을 목록 유형으로, 바깥쪽(텍스트 들여씀)을 위치로 선택한 경우 다음과 같은 CSS 태그가 삽입됩니다.LIST-STYLE-TYPE:square; list-style-position:outside
사용자 지정 글머리 기호
사용 가능한 8개의 스타일이 아니라 이미지를 글머리 기호 스타일로 설정합니다. 사용자 지정 글머리 기호를 선택하면 이미지 및 없음 옵션을 사용할 수 있습니다.이미지
이미지를 글머리 기호 스타일로 설정합니다. 필드에 경로와 이미지 이름을 입력하거나 줄임표 단추(...)를 선택하여 글머리 기호 이미지 선택 대화 상자를 연 다음 이미지의 위치를 찾습니다. 예를 들어, 글머리 기호 있음을 목록 유형으로, 바깥쪽(텍스트 들여씀)을 위치로, 사용자 지정 글머리 기호를 글머리 기호 스타일로 선택한 다음 이미지 필드에 bullet.jpg를 입력한 경우 다음과 같은 CSS 태그가 삽입됩니다.LIST-STYLE-POSITION:outside
LIST-STYLE-IMAGE:url (bullet.jpg)
없음
글머리 기호 스타일에 대한 이미지 값을 None으로 설정합니다. 예를 들어, 글머리 기호 있음을 목록 유형으로, 바깥쪽(텍스트 들여씀)을 위치로, 사용자 지정 글머리 기호를 글머리 기호 스타일로 선택한 다음 이미지 필드에 bullet.jpg를 입력한 경우 다음과 같은 CSS 태그가 삽입됩니다.LIST-STYLE-POSITION:outside; LIST-STYLE-IMAGE:url (bullet.jpg)
이어서 스타일 작성기 대화 상자로 돌아가 사용자 지정 글머리 기호 옵션으로 없음을 선택하면 다음과 같은 CSS 태그가 삽입됩니다.
LIST-STYLE-POSITION:outside; LIST-STYLE-IMAGE:none