스타일 작성기 대화 상자, 레이아웃
업데이트: 2007년 11월
스타일 작성기 대화 상자의 레이아웃 페이지에서는 CSS 페이지 레이아웃 특성을 정의할 수 있습니다. 페이지 레이아웃 특성은 HTML 스트림의 흐름에 맞게 요소를 배치하는 방식을 결정합니다. 이러한 특성은 HTML 요소에 직접 적용하거나 CSS 스타일 규칙에 추가할 수 있습니다.
페이지의 HTML 요소에 직접 레이아웃 특성을 적용하려면
HTML 디자이너의 디자인 뷰에서 HTML 문서를 열고 문서 개요 창을 사용하여 서식을 지정할 요소를 선택합니다.
서식 메뉴에서 스타일을 클릭하여 스타일 작성기 대화 상자를 엽니다.
스타일 작성기 대화 상자의 왼쪽 창에서 레이아웃을 클릭합니다.
스타일 작성기 대화 상자의 오른쪽 창에 레이아웃 페이지가 나타납니다.
디자인 뷰에서 선택한 요소에 스타일을 적용하면 CSS 스타일 특성이 이러한 요소에 대한 HTML 태그에 인라인으로 삽입됩니다. 새로 삽입한 스타일 특성을 검토하려면 HTML 뷰로 전환합니다.
외부 스타일시트에 정의된 CSS 스타일 규칙에 레이아웃 특성을 추가하려면
기존의 외부 스타일시트를 열고 원하는 스타일 규칙의 선택기 뒤에 있는 중괄호({ }) 안에 삽입 지점을 놓습니다.
스타일 메뉴에서 스타일 작성을 클릭하여 스타일 작성기 대화 상자를 엽니다.
스타일 작성기 대화 상자의 왼쪽 창에서 레이아웃을 클릭합니다.
스타일 작성기 대화 상자의 오른쪽 창에 레이아웃 페이지가 나타납니다.
.gif "참고") 참고: |
|---|
편집할 외부 CSS 스타일시트를 열면 스타일 메뉴가 나타납니다. 스타일 규칙 선택기 뒤에 있는 중괄호 안에 삽입 지점을 놓으면 스타일 메뉴에서 스타일 작성 옵션을 사용할 수 있습니다. |
외부 스타일시트에 정의된 CSS 스타일 클래스는 CSS 스타일 선택기를 요소에 대한 CLASS 속성으로 할당하여 웹 페이지의 <BODY> 요소 안에 있는 요소(이 경우에는 <BODY> 요소 자체 포함)에 적용할 수 있습니다.
스타일 작성기 대화 상자의 레이아웃 페이지에서 사용할 수 있는 옵션은 다음과 같습니다.
작업
UI 요소
흐름 제어
이 특성 집합은 HTML 문서 내에 있는 요소의 흐름을 제어합니다. 흐름 제어 선택기 근처에 있는 미리 보기 영역에서는 선택하는 옵션에 따라 변화하는 요소를 확인할 수 있습니다. 다음 특성은 브라우저에서 페이지를 볼 때 모양과 성능에 모두 영향을 줄 수 있습니다.
표시 여부
표시 유형 속성 값을 숨김(표시되지 않음) 또는 표시로 설정합니다. <설정 안 함>(옵션 선택 안 함), 숨김 또는 표시를 선택합니다. 예를 들어, 숨김을 선택하면 다음과 같은 CSS 태그가 삽입됩니다.VISIBILITY:hidden
참고:이 특성 값이 <설정 안 함>이면 스타일에 코드가 추가되지 않습니다.
표시
요소의 DISPLAY 특성 값을 설정합니다. 요소를 표시할지 여부와 표시된 요소를 블록 요소로 나타낼지 또는 선형 흐름 내에 나타낼지 여부를 지정할 수 있습니다. <설정 안 함>(옵션 선택 안 함), 표시 안 함, 블록 요소로 표시 또는 선형 요소로 표시를 선택합니다. 블록 요소는 일반적으로 새 줄에서 시작되며 부모 컨테이너보다 클 수 없습니다. 예를 들어, <BODY> 요소 내에서 스타일이 지정된 <H1> 요소는 포함하는 <BODY> 요소보다 클 수 없습니다. 선형 요소는 일반적으로 새 줄에서 시작되지 않으며 자체 내용의 높이와 너비에 따라 크기가 지정됩니다. 예를 들어, 블록 요소로 표시를 선택하면 다음과 같은 CSS 태그가 삽입됩니다.DISPLAY:block
참고:이 특성 값이 <설정 안 함>이면 스타일에 코드가 추가되지 않습니다.
참고:Visibility 속성과 Display 속성은 서로 관련되어 있으나 동일하지는 않습니다. 요소를 숨긴다고 해서 브라우저에서 페이지 표시에 걸리는 시간이 줄어들지는 않습니다. 그러나 표시되지 않는 요소는 브라우저에서 무시되므로 표시되지 않는 요소를 포함하는 페이지가 요소를 단순히 숨긴 페이지보다 브라우저에서 빨리 표시됩니다. 또한 숨긴 요소 주위에서 텍스트를 줄 바꿈한 경우에는 텍스트가 빈 공간에서 줄 바꿈된 것처럼 표시됩니다. 레이아웃 속성을 선택할 때는 이러한 종속성을 고려하십시오.
텍스트 배치
요소 주위의 텍스트 방향을 결정하는 특성을 설정합니다. <설정 안 함>(옵션 선택 안 함), 양쪽에 배치 안 함, 오른쪽에 배치 또는 왼쪽에 배치를 선택합니다. 예를 들어, 오른쪽에 배치를 선택하면 다음과 같은 CSS 태그가 삽입됩니다.FLOAT:left
참고:이 특성 값이 <설정 안 함>이면 스타일에 코드가 추가되지 않습니다.
개체 배치
페이지에서 개체 배치가 허용되는 위치를 제어하는 특성을 설정합니다. <설정 안 함>(옵션 선택 안 함), 양쪽에 배치(개체를 페이지 오른쪽 또는 왼쪽에 배치할 수 있음), 오른쪽에만 배치(개체를 페이지 오른쪽에만 배치할 수 있음), 왼쪽에만 배치(개체를 페이지 왼쪽에만 배치할 수 있음) 또는 배치 안 함(개체를 페이지에 배치할 수 없음)을 선택합니다. 예를 들어, 오른쪽에만 배치를 선택하면 다음과 같은 CSS 태그가 삽입됩니다.CLEAR:left
참고:이 특성 값이 <설정 안 함>이면 스타일에 코드가 추가되지 않습니다.
내용
오버플로
정의된 요소의 높이와 너비를 초과하는 내용이 요소에 포함된 경우에 요소의 동작을 제어하는 특성을 설정합니다. <설정 안 함>(옵션 선택 안 함), 필요한 경우 스크롤 막대 사용(내용이 정의된 요소 크기를 오버플로하면 스크롤 막대 표시), 항상 스크롤 막대 사용(항상 스크롤 막대 표시), 내용을 클리핑하지 않음(내용에 맞게 요소 확장) 또는 내용을 클리핑함(요소 크기를 오버플로한 내용 표시 안 함)을 선택합니다. 예를 들어, 내용을 클리핑하지 않음을 선택하면 다음과 같은 CSS 태그가 삽입됩니다.OVERFLOW:visible
참고:이 특성 값이 <설정 안 함>이면 스타일에 코드가 추가되지 않습니다.
클리핑
요소의 어느 사각형 영역을 표시할지를 제어하는 특성을 설정합니다. 예를 들어, 요소의 오른쪽 위만 표시할 수 있습니다. 하나 이상의 필드(위쪽, 아래쪽, 왼쪽 또는 오른쪽)에 값을 입력하고 단위 옵션(px(기본값), pt, pc, mm, cm, in, em, ex 또는 %)을 선택합니다.
절대 위치로 배치된 요소만 클리핑할 수 있습니다. 지정하는 값은 요소의 경계와 관련됩니다. 예를 들어, Top 클리핑 값을 40px로 설정하면 0px(요소 위쪽)와 40px 사이에 해당하는 요소 부분은 표시되지 않습니다. 예를 들어, 위쪽 및 아래쪽 필드에 50을 입력한 다음 기본 단위 옵션을 적용하면 다음과 같은 CSS 태그가 삽입됩니다.
CLIP: rect(50px auto 50px auto)
| 참고: |
|---|
4개의 클리핑 필드 중 값을 입력하지 않은 필드에는 auto 값이 할당되며 할당되지 않은 경계는 클리핑되지 않습니다. |
페이지 구분선 인쇄
해당 스타일을 사용하는 요소 내에 페이지 구분선이 있는 경우에는 다음 특성이 이를 제어합니다.
앞
<설정 안 함>(옵션 선택 안 함), 자동 또는 페이지 구분선 추가를 선택합니다. 예를 들어, 페이지 구분선 추가를 선택하면 다음과 같은 CSS 태그가 삽입됩니다.PAGE-BREAK-BEFORE:always
뒤
<설정 안 함>(옵션 선택 안 함), 자동 또는 페이지 구분선 추가를 선택합니다. 예를 들어, 페이지 구분선 추가를 선택하면 다음과 같은 CSS 태그가 삽입됩니다.PAGE-BREAK-AFTER:always