스타일 작성기 대화 상자, 배경
업데이트: 2007년 11월
스타일 작성기 대화 상자의 배경 페이지에서는 HTML 페이지 또는 표에 스타일을 적용할 때 배경색이나 이미지를 정의하는 CSS 스타일 특성을 설정할 수 있습니다. 이러한 특성을 HTML 요소에 직접 적용하거나 CSS 스타일 규칙에 추가할 수 있습니다.
페이지의 HTML 요소에 직접 배경 특성을 적용하려면
HTML 디자이너의 디자인 뷰에서 HTML 문서를 열고 서식을 지정할 요소를 선택합니다.
서식 메뉴에서 스타일을 클릭하여 스타일 작성기 대화 상자를 엽니다.
스타일 작성기 대화 상자의 왼쪽 창에서 배경을 클릭합니다.
스타일 작성기 대화 상자의 오른쪽 창에 배경 페이지가 나타납니다.
디자인 뷰에서 선택된 요소의 서식을 지정하면 CSS 스타일 특성이 페이지의 HTML 태그에 인라인으로 삽입됩니다. 새로 삽입한 스타일 특성을 검토하려면 HTML 뷰로 전환합니다.
외부 스타일시트에 정의된 CSS 스타일 규칙에 배경 특성을 추가하려면
기존의 외부 스타일시트를 열고 원하는 스타일의 선택기 뒤에 있는 중괄호({ }) 안에 삽입 지점을 놓습니다.
스타일 메뉴에서 스타일 작성을 클릭하여 스타일 작성기 대화 상자를 엽니다.
스타일 작성기 대화 상자의 왼쪽 창에서 배경을 클릭합니다.
스타일 작성기 대화 상자의 오른쪽 창에 배경 페이지가 나타납니다.
.gif "참고") 참고: |
|---|
편집할 외부 CSS 스타일시트를 열면 스타일 메뉴가 나타납니다. 스타일 규칙 선택기 뒤에 있는 중괄호 안에 삽입 지점을 놓으면 스타일 메뉴에서 스타일 작성 옵션을 사용할 수 있습니다. |
외부 스타일시트에 정의된 CSS 스타일 클래스는 CSS 스타일 선택기를 원하는 요소에 대한 CLASS 속성으로 할당하여 웹 페이지의 <BODY> 요소 안에 있는 요소(이 경우에는 <BODY> 요소 자체 포함)에 적용할 수 있습니다.
스타일 작성기 대화 상자의 배경 페이지에서 사용할 수 있는 옵션은 다음과 같습니다.
작업
UI 요소
배경색
색
스타일에 BACKGROUND-COLOR 특성을 설정합니다. 드롭다운 목록에서 옵션을 선택하거나 줄임표 단추(...)를 클릭하여 색 선택 대화 상자를 연 다음 추가할 색을 선택합니다. 예를 들어, Red를 선택하면 다음과 같은 CSS 태그가 삽입됩니다.BACKGROUND-COLOR: red
투명
이 확인란은 BACKGROUND-COLOR 특성을 transparent 값으로 설정하는 데 사용됩니다. transparent를 선택한 경우 배경색을 선택할 수 없습니다. 다음과 같은 코드가 삽입됩니다.BACKGROUND-COLOR: transparent
배경 이미지
이미지
스타일이 배경에 표시되는 이미지를 설정합니다. 필드에 경로와 파일 이름을 입력하거나 줄임표 단추(...)를 클릭하여 URL 선택을 열고 이미지 위치로 이동합니다. 예를 들어, 이미지 폴더에 있는 Background.bmp 이미지로 이동하는 경우 다음과 같은 코드가 삽입됩니다.BACKGROUND-IMAGE: url (images/background.bmp)
바둑판식 배열
스타일에 할당된 배경 이미지에 바둑판식 배열 특성을 설정합니다. 다음 표에서 볼 수 있는 것처럼 다양한 방법을 사용하여 이미지를 바둑판식으로 배열할 수 있습니다.바둑판식 배열 특성
설명
가로 바둑판식 배열
이미지를 페이지의 위에서 아래 방향이 아니라 왼쪽에서 오른쪽으로 바둑판식으로 배열합니다.
세로 바둑판식 배열
이미지를 위에서 아래로 바둑판식으로 배열합니다.
가로/세로 바둑판식 배열
이미지를 가로 방향과 세로 방향 모두에서 바둑판식으로 배열합니다.
바둑판식 배열 사용 안 함
바둑판식 배열을 비활성화합니다. 이미지는 위치 값에 지정된 위치에 표시되고 반복되지 않습니다.
<설정 안 함>
옵션을 선택하지 않아 스타일에 코드가 추가되지 않습니다.
예를 들어, 가로 바둑판식 배열을 선택하면 다음과 같은 CSS 태그가 삽입됩니다.
BACKGROUND-REPEAT:repeat-x
참고:바둑판식 배열 특성은 위치 특성과 함께 사용됩니다. 이미지의 위치를 지정하는 경우 바둑판식 배열 특성은 페이지에서의 이미지 시작 위치를 기반으로 적용됩니다. 예를 들어, 이미지를 페이지의 왼쪽 위에 배치하고 가로 바둑판식 배열만 적용하는 경우 이미지는 페이지의 위쪽 가장자리를 따라 반복됩니다.
스크롤
스타일에 적용된 배경 이미지의 BACKGROUND-ATTACHMENT 특성을 설정합니다. 드롭다운 목록에서 값을 선택합니다. 이미지는 페이지를 스크롤할 때 고정된 상태로 유지되거나 배경 위의 텍스트 및 이미지와 함께 스크롤될 수 있습니다. <설정 안 함>(옵션 선택 안 함), 스크롤되는 배경 또는 고정 배경을 선택합니다. 예를 들어, 스크롤되는 배경을 선택하면 다음과 같은 CSS 태그가 삽입됩니다.BACKGROUND-ATTACHMENT:scrolling
참고:이 특성 값이 <설정 안 함>이면 스타일에 코드가 추가되지 않습니다.
위치
스타일에 적용된 배경 이미지의 위치 특성을 설정합니다. 위치 값은 바둑판식 배열 특성과 관련됩니다. 배경 위치를 설정하고 바둑판식 배열 특성을 선택하지 않으면 배경 이미지가 지정된 위치에 고정됩니다. 배경 위치를 설정하고 바둑판식 배열 특성을 선택하면 이 위치가 바둑판식 배열 특성의 시작 지점이 됩니다.참고:가로와 세로 위치 값을 모두 선택해야 합니다. 값을 하나만 지정하면 CSS 편집기에 유효하지 않은 속성 이름이 표시됩니다. 가로와 세로 위치 값을 모두 선택하면 속성이 BACKGROUND-POSITION으로 올바르게 표시됩니다. BACKGROUND-POSITION:left center는 유효한 배경 위치 선언의 예입니다.
가로
스타일에 적용된 배경 이미지의 가로 위치를 설정합니다. <설정 안 함>(옵션 선택 안 함), 왼쪽, 가운데, 오른쪽 또는 사용자 지정을 선택합니다. 사용자 지정을 선택하면 사용자 지정의 오른쪽에 있는 필드를 사용할 수 있습니다. 기본값은 50%입니다. 숫자 필드에 값을 입력하고 단위 필드의 드롭다운 목록에서 증분(px, pt, pc, mm, cm, in, em, ex 또는 %)을 선택합니다. 사용자 지정을 선택하고 기본값을 적용하면 다음과 같은 CSS 태그가 삽입됩니다.BACKGROUND-POSITION:50%
참고:이 특성 값이 <설정 안 함>이면 스타일에 코드가 추가되지 않습니다.
세로
스타일에 적용된 배경 이미지의 세로 위치를 설정합니다. 드롭다운 목록에서 <설정 안 함>(옵션 선택 안 함), 왼쪽, 가운데, 오른쪽 또는 사용자 지정 옵션을 선택합니다. 사용자 지정을 선택하면 사용자 지정의 오른쪽에 있는 필드를 사용할 수 있습니다. 기본값은 50%입니다. 숫자 필드에 값을 입력하고 단위 필드의 드롭다운 목록에서 단위 옵션(px, pt, pc, mm, cm, in, em, ex 또는 %)을 선택합니다. 사용자 지정을 선택하고 기본값을 적용하면 다음과 같은 CSS 태그가 삽입됩니다.BACKGROUND-POSITION:50%
참고:이 특성 값이 <설정 안 함>이면 스타일에 코드가 추가되지 않습니다.
배경 이미지 사용 안 함
이 확인란을 선택하면 배경 이미지가 현재 페이지에서 제거되며 대화 상자에서 이미지 특성을 사용할 수 없습니다. 이미지가 페이지에 지정되어 있는 경우 확인을 클릭하면 BACKGROUND-IMAGE 속성이 스타일에서 제거됩니다.