스타일 작성기 대화 상자, 가장자리

아티클
09/05/2008

업데이트: 2007년 11월

스타일 작성기 대화 상자의 가장자리 페이지에서는 HTML 요소 주변 영역의 테두리 및 여백을 결정하는 CSS 스타일 특성을 정의할 수 있습니다. 이러한 특성은 HTML 요소에 직접 적용하거나 CSS 스타일 규칙에 추가할 수 있습니다.

페이지의 HTML 요소에 직접 가장자리 특성을 적용하려면

HTML 디자이너의 디자인 뷰에서 HTML 문서를 열고 문서 개요 창을 사용하여 서식을 지정할 요소를 선택합니다.
서식 메뉴에서 스타일을 클릭하여 스타일 작성기 대화 상자를 엽니다.
스타일 작성기 대화 상자의 왼쪽 창에서 가장자리를 클릭합니다.

스타일 작성기 대화 상자의 오른쪽 창에 가장자리 페이지가 나타납니다.

디자인 뷰에서 선택한 요소의 서식을 지정하면 CSS 스타일 특성이 페이지의 HTML 태그에 인라인으로 삽입됩니다. 새로 삽입한 CSS 스타일 특성을 검토하려면 HTML 뷰로 전환합니다.

외부 스타일시트에 정의된 CSS 스타일에 가장자리 특성을 추가하려면

기존의 외부 스타일시트를 열고 원하는 스타일의 선택기 뒤에 있는 중괄호({ }) 안에 삽입 지점을 놓습니다.
스타일 메뉴에서 스타일 작성을 클릭하여 스타일 작성기 대화 상자를 엽니다.
스타일 작성기 대화 상자의 왼쪽 창에서 가장자리를 클릭합니다.

스타일 작성기 대화 상자의 오른쪽 창에 가장자리 페이지가 나타납니다.

참고:
편집할 외부 CSS 스타일시트를 열면 스타일 메뉴가 나타납니다. 스타일 규칙 선택기 뒤에 있는 중괄호 안에 삽입 지점을 놓으면 스타일 메뉴에서 스타일 작성 옵션을 사용할 수 있습니다.

외부 스타일시트에 정의된 CSS 스타일 클래스는 CSS 스타일 선택기를 요소에 대한 CLASS 속성으로 할당하여 웹 페이지의 <BODY> 요소 내에 있는 대부분의 요소에 적용할 수 있습니다.

스타일 작성기 대화 상자의 여백 페이지에서 사용할 수 있는 옵션은 다음과 같습니다.

작업

UI 요소

여백

한 요소와 다른 요소 주변의 사각형 영역 사이의 거리를 제어하는 특성을 설정합니다. 하나 이상의 필드(위쪽, 아래쪽, 왼쪽 또는 오른쪽)에 값을 입력하고 단위 옵션(px(기본값), pt, pc, mm, cm, in, em, ex 또는 %)을 선택합니다. 예를 들어, 위쪽과 아래쪽 필드에 50을 입력한 다음 기본 단위 옵션을 적용하면 다음과 같은 CSS 태그가 삽입됩니다.

MARGIN-TOP: 50px; margin-bottom:50px

참고:
여백 값은 양수 또는 음수가 될 수 있습니다.

안쪽 여백

요소와 해당 요소 여백 사이의 간격이나 개체에 테두리가 있는 경우에는 요소와 해당 요소 테두리 사이의 간격을 제어하는 특성을 설정합니다. 하나 이상의 필드(위쪽, 아래쪽, 왼쪽 또는 오른쪽)에 값을 입력하고 단위 옵션(px(기본값), pt, pc, mm, cm, in, em, ex 또는 %)을 선택합니다. 예를 들어, 위쪽과 아래쪽 필드에 50을 입력한 다음 기본 단위 옵션을 적용하면 다음과 같은 CSS 태그가 삽입됩니다.

PADDING-TOP: 50px; PADDING-BOTTOM:50px

참고:
안쪽 여백 값은 양수여야 합니다.

테두리

다음 특성은 요소 주위에 있는 사각형 영역의 테두리를 제어합니다.

변경할 가장자리 선택
서식을 지정할 테두리 가장자리를 설정합니다. 모두, 위쪽, 아래쪽, 왼쪽 또는 오른쪽을 선택합니다. 코드는 테두리 스타일을 선택한 다음에 스타일에 추가됩니다.
스타일
지정한 테두리에 적용할 스타일을 설정합니다. <설정 안 함>, 없음, 실선, 이중선, 홈 양각, 홈 음각, 음각 또는 양각을 선택합니다. 예를 들어, 가장자리 중 위쪽을 선택하고 스타일을 실선으로 지정하면 다음과 같은 코드가 추가됩니다.

BORDER-TOP-STYLE:solid
두께
지정한 테두리의 두께를 설정합니다. <설정 안 함>(옵션 선택 안 함), 가늘게, 보통, 굵게 또는 사용자 지정을 선택합니다. 사용자 지정을 선택한 경우 옆에 있는 필드에 숫자를 입력하고 단위 옵션(px(기본값), pt, pc, mm, cm, in, em, ex 또는 %)을 선택할 수 있습니다. 예를 들어, 가장자리 중 위쪽을 선택하고 스타일을 실선으로 지정하며 사용자 지정 두께를 선택하고 필드에 50을 입력한 다음 기본 단위 옵션을 적용하면 다음과 같은 코드가 추가됩니다.

BORDER-TOP:50px solid
색
스타일에서 선택한 테두리의 색을 설정합니다. 드롭다운 목록에서 색을 선택하거나 줄임표 단추(...)를 선택하여 색 선택 대화 상자를 연 다음 추가할 색을 선택합니다. 예를 들어, 가장자리 중 위쪽을 선택하고 스타일을 실선으로 지정하고 색을 Blue로 지정하면 다음과 같은 코드가 추가됩니다.

BORDER-TOP:blue solid