스타일 작성기 대화 상자, 글꼴

아티클
09/05/2008

업데이트: 2007년 11월

스타일 작성기 대화 상자의 글꼴 페이지에서는 CSS 글꼴 특성을 정의할 수 있습니다. 이러한 특성은 HTML 요소에 직접 적용하거나 CSS 스타일 규칙에 추가할 수 있습니다.

페이지의 HTML 요소 텍스트에 직접 글꼴 특성을 적용하려면

HTML 디자이너의 디자인 뷰에서 HTML 문서를 열고 서식을 지정할 텍스트를 선택합니다.
서식 메뉴에서 스타일을 클릭하여 스타일 작성기 대화 상자를 엽니다.
스타일 작성기 대화 상자의 왼쪽 창에서 글꼴을 선택합니다.

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

디자인 뷰에서 선택한 텍스트에 글꼴 스타일을 적용하면 스타일 특성이 페이지에 대한 HTML 태그에 인라인으로 삽입됩니다. 새로 삽입한 스타일 특성을 검토하려면 HTML 뷰로 전환합니다.

외부 스타일시트에 정의된 CSS 스타일 규칙에 글꼴 특성을 추가하려면

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

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

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

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

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

작업

UI 요소

글꼴 이름

패밀리
이 스타일로 표시된 텍스트에 사용할 수 있는 글꼴 목록을 제공합니다. 인터넷 문서를 디자인하는 경우에는 대부분의 사용자가 보유하고 있는 글꼴을 선택합니다. 이는 모든 인터넷 사용자의 컴퓨터에 다양한 글꼴이 전부 설치되어 있다는 보장이 없기 때문입니다. 패밀리를 선택한 경우 옆에 있는 줄임표 단추(...)를 선택하여 글꼴 선택 대화 상자를 연 다음 글꼴을 선택할 수 있습니다. 자세한 내용은 글꼴 선택 대화 상자를 참조하십시오. 일반적으로 여러 글꼴을 나열하여 다양한 옵션을 제공합니다. 예를 들어, 글꼴 선택에서 Verdana(웹 표시용 Windows 시스템 글꼴)를 선택한 다음 Arial, Helvetica(Macintosh 브라우저용) 및 Sans-Serif(나열된 다른 글꼴이 없는 사용자를 위한 일반 글꼴)를 수동으로 추가할 수 있습니다. 이런 경우에 FONT-FAMILY의 CSS 스타일 태그는 다음과 같습니다.

FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
시스템 글꼴
페이지가 열리는 컴퓨터에서 사용자가 정의한 시스템 글꼴을 스타일에 적용하려면 이 옵션을 선택합니다. 예를 들어, 창 캡션을 선택한 경우 뷰어의 웹 브라우저에서는 페이지가 열리는 컴퓨터의 창 캡션에 할당된 글꼴을 사용하여 이 스타일로 서식이 지정된 텍스트를 페이지에 표시합니다. 이 창 캡션 글꼴은 컴퓨터에 따라 Times가 될 수도 있고 Verdana가 될 수도 있습니다. 예를 들어, 창 캡션 시스템 글꼴을 적용하는 CSS 스타일 태그는 다음과 같습니다.

FONT: caption

글꼴 특성

색
스타일에 표시되는 텍스트 색을 설정합니다. 색은 다음과 같은 여러 가지 방법으로 지정할 수 있습니다.

색 이름을 입력합니다.
유효한 RGB 색 값을 입력합니다(예: 빨강인 경우 #FF0000).
드롭다운 목록에서 옵션을 선택합니다.
줄임표 단추(...)를 클릭하여 색 선택 대화 상자를 연 다음 추가할 색을 선택합니다.

예를 들어, Red를 선택하면 다음과 같은 CSS 특성/값 쌍이 삽입됩니다.

COLOR: red

참고:
드롭다운 목록 대신 색 선택 대화 상자에서 색을 선택한 경우에는 색 이름 대신 16진수 RGB 색 값이 삽입됩니다. 예를 들어, 색 선택 대화 상자에서 Red를 선택하면 COLOR: #ff0000과 같은 CSS 특성/값 쌍이 삽입됩니다.

기울임꼴
이 스타일로 표시되는 텍스트에 FONT-STYLE 특성을 설정합니다. <설정 안 함>(옵션 선택 안 함), 보통(기울임꼴로 표시 안 함) 또는 기울임꼴을 선택합니다. 예를 들어, 기울임꼴을 선택하면 다음과 같은 CSS 특성/값 쌍이 삽입됩니다.

FONT-STYLE: italic

참고:

이 특성 값이 <설정 안 함>이면 스타일에 코드가 추가되지 않습니다. 시스템 글꼴에는 Italics 특성을 적용할 수 없습니다.
소문자를 작은 대문자로
이 스타일로 표시되는 텍스트에 FONT-VARIANT 특성을 설정합니다. <설정 안 함>(옵션 선택 안 함), 보통(소문자를 작은 대문자로 변경 안 함) 또는 소문자를 작은 대문자로를 선택합니다. 예를 들어, 소문자를 작은 대문자로를 선택하면 다음과 같은 CSS 태그가 삽입됩니다.

FONT-VARIANT: small-caps

참고:

시스템 글꼴에는 Small Caps 특성을 적용할 수 없습니다. 이 특성 값이 <설정 안 함>이면 스타일에 코드가 추가되지 않습니다.

참고:
이 특성 값이 <설정 안 함>이면 스타일에 코드가 추가되지 않습니다. 시스템 글꼴에는 Italics 특성을 적용할 수 없습니다.

참고:
시스템 글꼴에는 Small Caps 특성을 적용할 수 없습니다. 이 특성 값이 <설정 안 함>이면 스타일에 코드가 추가되지 않습니다.

크기

이 옵션은 Specific, Absolute, Relative 특성 중 하나를 사용하여 스타일의 글꼴 크기를 설정합니다.

참고:
이 특성 값이 <설정 안 함>이면 스타일에 코드가 추가되지 않습니다. 시스템 글꼴에는 Size 특성을 적용할 수 없습니다.

특정 크기
글꼴에 특정 크기를 설정합니다. 옆에 있는 드롭다운 목록에는 px, pt(기본값), pc, mm, cm, in, em, ex 및 % 등의 단위 옵션이 표시됩니다. 예를 들어, 20을 입력한 다음 기본 단위 값을 적용하면 다음과 같은 CSS 태그가 삽입됩니다.

FONT-SIZE: 20pt

참고:
이 특성 값이 <설정 안 함>이면 스타일에 코드가 추가되지 않습니다. 픽셀로 서식이 지정된 텍스트는 화면에 표시되는 것보다 훨씬 작은 크기로 인쇄되므로 픽셀(px) 단위는 사용하지 않는 것이 좋습니다.

절대 굵기
옵션 목록을 사용하여 글꼴의 절대 크기를 설정합니다. <설정 안 함>(값 지정 안 함), XX-Small, X-Small, 작게, 보통, 크게, X-Large 또는 XX-Large를 선택합니다. 예를 들어, X-Small을 선택하면 다음과 같은 CSS 태그가 삽입됩니다.

FONT-SIZE: x-small

참고:

이 특성 값이 <설정 안 함>이면 스타일에 코드가 추가되지 않습니다.
상대 굵기
옵션 목록을 사용하여 글꼴의 상대 크기를 설정합니다. 크기는 CSS 스타일의 부모에 대해 상대적입니다. 예를 들어, <BODY> 요소 텍스트가 8pt이고 <BODY> 요소의 <SPAN> 요소 내에 있는 텍스트의 스타일이 Smaller로 지정되어 있는 경우에는 <SPAN> 텍스트가 8pt보다 작게 표시됩니다. <설정 안 함>(값 지정 안 함), 작게 또는 크게를 선택합니다. 예를 들어, 크게를 선택하면 다음과 같은 CSS 태그가 삽입됩니다.

FONT-SIZE: larger

참고:

이 특성 값이 <설정 안 함>이면 스타일에 코드가 추가되지 않습니다.

효과

이 옵션은 스타일에 미리 정의된 효과를 설정합니다. 없음(효과 없음), 밑줄, 취소선, 윗줄 등의 확인란을 사용할 수 있습니다.

없음을 선택하면 효과를 사용할 수 없습니다. 없음을 선택하지 않은 경우 나머지 효과를 원하는 대로 조합하여 선택할 수 있습니다. 예를 들어, 밑줄과 취소선을 모두 선택하면 다음과 같은 CSS 태그가 삽입됩니다.

TEXT-DECORATION: underline line-through

굵게

이 옵션은 절대 굵기 또는 상대 굵기 값을 기반으로 FONT-WEIGHT 특성을 설정합니다.

절대 굵기
스타일의 절대 굵기 특성을 글꼴에 연결된 굵기 특성으로 설정합니다. <설정 안 함>(옵션 선택 안 함), 보통(굵게 안 함) 또는 굵게를 선택합니다. 예를 들어, 굵게를 선택하면 다음과 같은 CSS 태그가 삽입됩니다.

FONT-WEIGHT: bold

참고:

시스템 글꼴에는 Absolute Bold 및 Relative Bold 특성을 적용할 수 없습니다.
상대 굵기
스타일의 상대 굵기 특성을 글꼴의 기본 굵기 값보다 크거나 작은 굵기 특성으로 설정합니다. <설정 안 함>(옵션 선택 안 함), 가늘게(기본 굵기보다 가늘게) 또는 굵게(기본 굵기보다 굵게)를 선택합니다. Lighter 및 Bolder 특성은 개별 글꼴에 상대적이므로 굵기는 적용하는 글꼴에 따라 달라집니다. 예를 들어, 굵게를 선택하면 다음과 같은 CSS 태그가 삽입됩니다.

FONT-WEIGHT: bolder