스타일 작성기 대화 상자, 위치
업데이트: 2007년 11월
스타일 작성기 대화 상자의 위치 페이지에서는 CSS 위치 특성을 정의할 수 있습니다. 이러한 특성은 HTML 요소에 직접 적용하거나 CSS 스타일 규칙에 추가할 수 있습니다.
페이지의 HTML 요소에 직접 위치 특성을 적용하려면
HTML 디자이너의 디자인 뷰에서 HTML 문서를 열고 서식을 지정할 요소를 선택합니다.
서식 메뉴에서 스타일을 클릭하여 스타일 작성기 대화 상자를 엽니다.
스타일 작성기 대화 상자의 왼쪽 창에서 위치를 클릭합니다.
스타일 작성기 대화 상자의 오른쪽 창에 위치 페이지가 나타납니다.
디자인 뷰에서 선택한 요소에 스타일을 적용하면 CSS 스타일 특성이 이러한 요소에 대한 HTML 태그에 인라인으로 삽입됩니다. 새로 삽입한 스타일 특성을 검토하려면 HTML 뷰로 전환합니다.
외부 스타일시트에 정의된 CSS 스타일 규칙에 위치 특성을 추가하려면
기존의 외부 스타일시트를 열고 원하는 스타일 규칙의 선택기 뒤에 있는 중괄호({ }) 안에 삽입 지점을 놓습니다.
스타일 메뉴에서 스타일 작성을 클릭하여 스타일 작성기 대화 상자를 엽니다.
스타일 작성기 대화 상자의 왼쪽 창에서 위치를 클릭합니다.
스타일 작성기 대화 상자의 오른쪽 창에 위치 페이지가 나타납니다.
.gif "참고") 참고: |
|---|
편집할 외부 CSS 스타일시트를 열면 스타일 메뉴가 나타납니다. 스타일 규칙 선택기 뒤에 있는 중괄호 안에 삽입 지점을 놓으면 스타일 메뉴에서 스타일 작성 옵션을 사용할 수 있습니다. |
외부 스타일시트에 정의된 CSS 스타일 클래스는 CSS 스타일 선택기를 요소에 대한 CLASS 속성으로 할당하여 웹 페이지의 <BODY> 요소 내에 있는 요소에 적용할 수 있습니다.
스타일 작성기 대화 상자의 위치 페이지에서 사용할 수 있는 옵션은 다음과 같습니다.
작업
UI 요소
위치 모드
사용할 수 있는 후속 위치 필드를 결정하는 모드를 설정합니다. 드롭다운 목록에서 다음과 같은 옵션 중 하나를 선택할 수 있습니다.
<설정 안 함>
이 특성 값이 <설정 안 함>이면 스타일에 코드가 추가되지 않습니다.일반 위치
요소의 위치를 변경하지는 않지만 높이와 너비는 지정할 수 있습니다. 일반 위치를 선택하면 다음과 같은 CSS 태그가 삽입됩니다.POSITION:static
참고:위치 모드 선택기 근처에 있는 미리 보기 영역에서 모드 선택 사항에 따라 변화하는 요소를 확인할 수 있습니다.
오프셋 위치
일반 위치에 상대적으로 요소의 위쪽 및 왼쪽 위치를 지정할 수 있으며 높이와 너비를 지정할 수 있습니다. 요소의 일반 위치는 스타일을 적용하기 전의 위치입니다. 오프셋 위치를 선택하면 다음과 같은 CSS 태그가 삽입됩니다.POSITION:relative
절대 위치
요소의 절대 위쪽 위치, 절대 왼쪽 위치, Z-인덱스, 높이 및 너비를 지정할 수 있습니다. 일반적으로 특정 위치에 요소를 고정시킬 경우 절대 위치를 지정합니다. 예를 들어, 다른 요소를 추가하거나 편집할 때 로고가 이동하지 않도록 절대 위치를 지정할 수 있습니다. 절대 위치를 선택하면 다음과 같은 CSS 태그가 삽입됩니다.POSITION:absolute
위치 모드를 선택하면 다음과 같은 옵션을 사용할 수 있습니다.
위쪽
요소의 위쪽 위치를 절대 값이나 일반 위치에 상대적인 값으로 설정합니다. 값을 입력하고 단위 옵션(px, pt, pc, mm, cm, in, em, ex 또는 %)을 선택합니다. 기본 단위 옵션은 px입니다. 예를 들어, 5를 입력한 다음 기본 단위 옵션을 적용하면 다음과 같은 CSS 태그가 삽입됩니다.TOP:5px
참고:이 옵션은 위치 모드 목록에서 오프셋 위치를 선택한 경우에 사용할 수 있습니다.
왼쪽
요소의 왼쪽 위치를 절대 값이나 일반 위치에 상대적인 값으로 설정합니다. 값을 입력하고 단위 옵션(px, pt, pc, mm, cm, in, em, ex 또는 %)을 선택합니다. 기본 단위 옵션은 px입니다. 예를 들어, 5를 입력한 다음 기본 단위 옵션을 적용하면 다음과 같은 CSS 태그가 삽입됩니다.LEFT:5px
참고:이 옵션은 위치 모드 목록에서 오프셋 위치를 선택한 경우에 사용할 수 있습니다.
높이
요소의 높이를 설정합니다. 값을 입력하고 단위 옵션(px, pt, pc, mm, cm, in, em, ex 또는 %)을 선택합니다. 기본 단위 옵션은 px입니다. 예를 들어, 5를 입력한 다음 기본 단위 옵션을 적용하면 다음과 같은 CSS 태그가 삽입됩니다.HEIGHT:5px
너비
요소의 너비를 설정합니다. 값을 입력하고 단위 옵션(px, pt, pc, mm, cm, in, em, ex 또는 %)을 선택합니다. 기본 단위 옵션은 px입니다. 예를 들어, 5를 입력한 다음 기본 단위 옵션을 적용하면 다음과 같은 CSS 태그가 삽입됩니다.WIDTH:5px
Z-인덱스
요소의 z 순서를 설정합니다. z 순서는 겹친 요소의 표시를 제어합니다. z 순서 값이 큰 요소는 z 순서 값이 작은 요소보다 앞에 표시됩니다. 특정 요소의 z 순서를 앞으로 당기려면 다음 예와 같이 양수를 입력하여 결과를 생성하십시오.Z-INDEX:99
참고:특정 요소의 z 순서를 뒤로 미루려면 작은 값이나 음수를 입력하십시오.
참고:Z-인덱스와 위치는 서로 연관되어 있습니다. 요소가 겹치도록 위치 값을 입력한 경우에는 적절한 Z-인덱스 값을 할당하여 어느 요소가 먼저 나오도록 할지 제어할 수 있습니다. 특정 요소를 다른 요소보다 먼저 나오게 하려면 해당 요소에 더 큰 Z-인덱스 값을 할당하면 됩니다.