CSS 속성 설정

텍스트 글꼴, 배경 이미지 및 배경색, 간격 및 레이아웃 속성, 목록 요소 모양 등 CSS 규칙의 속성을 정의할 수 있습니다. 새 규칙을 만든 다음 속성을 설정합니다.

다음은 설정할 수 있는 일부 CSS 유형 속성에 대한 설명입니다.

스타일의 글꼴을 설정합니다. 브라우저는 사용자의 시스템에 설치된 첫 번째 글꼴을 사용하여 텍스트를 표시합니다. Internet Explorer와 호환되게 하려면 Windows 글꼴을 목록의 앞쪽에 나열합니다. 글꼴 속성은 두 브라우저에서 모두 지원됩니다.

[Normal], [Italic] 또는 [Oblique]를 글꼴 스타일로 지정합니다. 기본 설정은 [Normal]입니다. [스타일] 속성은 두 브라우저에서 모두 지원됩니다.

텍스트를 배치하는 행의 높이를 설정합니다. 이 설정을 일반적으로 줄 간격이라고 합니다. [Normal]을 선택하여 행 높이를 글꼴 크기에 따라 자동으로 계산하거나, 정확한 값을 입력하고 측정 단위를 선택합니다. [Line-height] 속성은 두 브라우저에서 모두 지원됩니다.

텍스트에 underline, overline 또는 line-through을 추가하거나 텍스트를 깜빡이게(blink) 합니다. 일반 텍스트의 기본 설정은 [none]입니다. 링크의 기본 속성은 [underline]입니다. 링크 설정을 [none]으로 지정할 경우 특수한 클래스를 정의하여 링크의 밑줄을 제거할 수 있습니다. [기타 스타일] 속성은 두 브라우저에서 모두 지원됩니다.

글꼴의 굵은 문자에 특정한 값이나 상대적인 값을 적용합니다. [normal]은 400에 해당하고 [Bold]는 700에 해당합니다. [Font-weight] 속성은 두 브라우저에서 모두 지원됩니다.

텍스트를 작은 대문자로 설정합니다. Dreamweaver의 문서 창에는 이 속성이 표시되지 않습니다. Internet Explorer에서는 [Font-variant] 속성이 지원되지만 Navigator에서는 지원되지 않습니다.

선택 영역에 포함된 각 단어의 첫 번째 문자를 대문자로 설정하거나(capitalize) 텍스트를 모두 대문자(upper case) 또는 소문자(lower case)로 설정합니다. [upper case/lower case] 속성은 두 브라우저에서 모두 지원됩니다.

텍스트 색상을 설정합니다. [Color] 속성은 두 브라우저에서 모두 지원됩니다.

텍스트의 크기를 정의합니다. 숫자와 측정 단위를 선택하여 특정 크기를 선택하거나, 상대적인 크기를 선택할 수 있습니다. 픽셀 단위를 선택하면 브라우저에서 텍스트가 왜곡되지 않습니다. [Font-size] 속성은 두 브라우저에서 모두 지원됩니다.

CSS 스타일 배경 속성 정의하기

웹 페이지의 모든 요소에 배경 속성을 적용할 수 있습니다. 예를 들어 텍스트 뒤, 표, 페이지 등의 페이지 요소에 배경색이나 배경 이미지를 추가하는 스타일을 만듭니다. 배경 이미지의 위치를 설정할 수도 있습니다.

다음은 설정할 수 있는 일부 CSS 배경 속성에 대한 설명입니다.

요소의 배경 이미지를 설정합니다. [Background Image] 속성은 두 브라우저에서 모두 지원됩니다.

배경 이미지 반복 여부와 반복 방식을 지정합니다. [Background-repeat] 속성은 두 브라우저에서 모두 지원됩니다.

• [No Repeat]는 요소의 시작 부분에 이미지를 한 번 표시합니다.

• [Repeat]는 이미지를 요소의 뒤에 수평 및 수직 방향으로 바둑판식으로 배열합니다.

• [Repeat-x]와 [Repeat-y]는 각각 이미지를 수평이나 수직 띠 모양으로 표시합니다. 이미지는 요소의 테두리 안에 맞게 잘립니다.

참고: [Repeat] 속성을 사용하여 body 태그를 재정의하고 바둑판식으로 배열되거나 반복되지 않는 배경 이미지를 설정합니다.

배경 이미지를 원래 위치에 고정할지 아니면 내용과 함께 스크롤할지 지정합니다. 일부 브라우저에서는 [fixed] 옵션도 [scroll] 옵션으로 처리합니다. Internet Explorer에서는 이 속성이 지원되지만 Netscape Navigator에서는 지원되지 않습니다.

배경 이미지의 처음 위치를 요소를 기준으로 지정합니다. 이 속성은 배경 이미지를 수직(Y)및 수평(X) 방향 모두에 대해 가운데에 정렬할 때 사용할 수 있습니다. [Background-attachment] 속성이 [fixed]이면 위치는 요소가 아닌 문서 창에 대한 상대적인 위치로 지정됩니다.

요소의 배경색을 설정합니다. [Background-Color] 속성은 두 브라우저에서 모두 지원됩니다.

CSS 스타일 블록 속성 정의하기

태그와 속성에 대한 간격 및 정렬 설정을 정의할 수 있습니다.

문자 사이의 간격을 늘리거나 줄입니다. 문자 사이의 간격을 줄이려면 -4와 같은 음수 값을 지정합니다. 문자 간격 설정은 정렬된 텍스트 설정을 무시합니다. [Letter-spacing] 속성은 Internet Explorer 4 이상 및 Netscape Navigator 6에서 지원됩니다.

첫 번째 텍스트 행의 들여쓰기 간격을 지정합니다. 음수를 지정하여 내어쓰기를 할 수도 있지만 그럴 경우 브라우저에 따라 다르게 보입니다. Dreamweaver에서는 해당 태그가 블록 수준의 요소에 적용된 경우에만 문서 창에 이 속성을 표시합니다. [Text-indent] 속성은 두 브라우저에서 모두 지원됩니다.

해당 요소의 수직 정렬 방식을 지정합니다. Dreamweaver에서는 이 속성이 <img> 태그에 적용된 경우에만 문서 창에 이 속성을 표시합니다.

요소 안에서 텍스트가 정렬되는 방식을 설정합니다. [Text-align] 속성은 두 브라우저에서 모두 지원됩니다.

요소 안의 공백을 처리하는 방법을 지정합니다. [normal], [pre] 및 [nowrap] 옵션 중에서 선택합니다. [normal]은 공백을 축소하고, [pre]은 텍스트가 pre 태그로 둘러싸여 있는 것처럼 공백을 처리합니다. 즉, 스페이스, 탭, 리턴을 포함한 모든 공백들을 그대로 둡니다. [nowrap]은 br 태그가 있을 때에만 텍스트 줄을 바꾸도록 지정합니다. Dreamweaver의 문서 창에는 이 속성이 표시되지 않습니다. [White-space] 속성은 Netscape Navigator와 Internet Explorer 5.5에서 지원됩니다.

요소 표시 여부와 표시 방법을 지정합니다. [none]이 할당된 요소는 표시되지 않습니다.

단어 사이의 간격을 설정합니다. 특정 값을 설정하려면 팝업 메뉴에서 [value]를 선택하고 숫자 값을 입력합니다. 두 번째 팝업 메뉴에서 px, pt 등의 측정 단위를 선택합니다.

참고: 음수 값을 지정할 수도 있지만 그럴 경우 브라우저에 따라 다르게 보입니다. Dreamweaver의 문서 창에는 이 속성이 표시되지 않습니다.

CSS 스타일 상자 속성 정의하기

[CSS 규칙 정의] 대화 상자의 [상자] 범주를 사용하여 페이지의 요소 배치를 제어하는 태그와 속성의 설정을 정의합니다.

패딩 및 여백 설정을 적용할 때 요소의 각 측면에 설정을 적용하거나 [모두 동일] 설정을 사용하여 요소의 각 측면에 같은 설정을 적용할 수 있습니다.

부동화된 요소 주변을 흐르는 다른 요소 주변의 측면을 지정합니다. 부동화된 요소는 부동 측면에 고정되고, 다른 내용은 반대편 측면에서 그 주변을 흐릅니다.

예를 들면, 오른쪽의 부동화 이미지는 오른쪽에 고정되고, 차후에 추가하는 내용은 이미지의 왼쪽에 흐릅니다.

자세한 내용은 http://css-tricks.com/all-about-floats/를 참조하십시오.

다른 부동 요소를 허용하지 않는 요소의 측면을 지정합니다.

요소의 내용과 테두리 사이의 간격(테두리가 없는 경우에는 여백) 크기를 지정합니다. 요소의 각 측면에 패딩을 설정하려면 [모두 동일] 옵션의 선택을 해제합니다.

패딩 속성을 적용할 요소의 Top, Right, Bottom, Left에 동일한 패딩 속성을 설정합니다.

요소 테두리 사이의 간격(테두리가 없는 경우에는 패딩) 크기를 지정합니다. Dreamweaver에서는 이 속성이 단락, 머리글, 목록 등의 블록 수준 요소에 적용된 경우에만 문서 창에 이 속성을 표시합니다. 요소의 각 측면에 여백을 설정하려면 [모두 동일]의 선택을 해제합니다.

요소의 폭과 높이를 설정합니다.

CSS 스타일 테두리 속성 정의하기

[CSS 규칙 정의] 대화 상자의 [테두리] 범주를 사용하여 요소 테두리의 폭, 색상, 스타일 등의 설정을 정의합니다.

요소의 테두리 두께를 설정합니다. [Width] 속성은 두 브라우저에서 모두 지원됩니다. 요소의 각 측면에 테두리 스타일을 설정하려면 [모두 동일]의 선택을 해제합니다.

요소의 위, 오른쪽, 아래, 왼쪽 테두리에 동일한 테두리 스타일 속성을 적용합니다.

테두리 색상을 설정합니다. 각 측면의 색상을 별도로 설정할 수 있지만 그럴 경우 브라우저에 따라 다르게 보입니다. 요소의 각 측면에 테두리 색상을 설정하려면 [모두 동일]의 선택을 해제합니다.

테두리의 스타일 모양을 설정합니다. 스타일이 표시되는 방식은 브라우저에 따라 다릅니다. 요소의 각 측면에 테두리 스타일을 설정하려면 [모두 동일]의 선택을 해제합니다.

CSS 스타일 목록 속성 정의하기

[CSS 규칙 정의] 대화 상자의 [목록] 범주를 사용하여 목록 태그에 사용할 불릿 크기, 유형 등의 목록 설정을 정의합니다.

불릿이나 숫자 모양을 설정합니다. [List-style-type] 속성은 두 브라우저에서 모두 지원됩니다.

목록 항목 텍스트의 줄 바꿈 및 들여쓰기(outside) 여부 또는 왼쪽 여백을 기준으로 텍스트의 줄 바꿈(inside) 여부를 설정합니다.

불릿에 사용할 사용자 정의 이미지를 지정합니다. [검색](Windows) 또는 [선택](Macintosh)을 클릭하여 이미지를 찾거나 이미지 경로를 입력합니다.

CSS 스타일 배치 속성 정의하기

[배치] 스타일 속성은 페이지에서 선택한 CSS 스타일과 연관된 내용을 배치하는 방법을 결정합니다.

다음 중 스타일에 크게 영향을 주지 않는 속성은 비워 둡니다.

브라우저에서 선택한 요소를 배치하는 방법을 다음과 같이 지정합니다.

• Absolute는 [배치] 상자에 입력한 좌표를 사용하여 가장 가까운 절대 또는 상대 위치 조상이나, 절대 또는 상대 위치 조상이 없는 경우 페이지의 왼쪽 위 모서리에 대한 상대적 위치에 내용을 배치합니다.

• relative는 [배치] 상자에 입력한 좌표를 사용하여 문서의 텍스트 흐름에서 블록의 위치에 대한 상대적 위치에 내용 블록을 배치합니다. 예를 들어 요소의 상대 위치를 각각 20픽셀의 위쪽 및 왼쪽 좌표로 지정하면 요소가 흐름의 일반 위치에서 오른쪽과 아래쪽으로 20픽셀씩 이동합니다. 또한 요소를 좌표의 위쪽, 왼쪽, 오른쪽 또는 아래쪽에 상대적이거나 상대적이지 않게 배치하여 절대 위치 자식의 컨텍스트를 설정할 수 있습니다.

• fixed는 [배치] 상자에 입력한 좌표를 사용하여 브라우저의 왼쪽 위 모서리에 대한 상대적 위치에 내용을 배치합니다. 내용은 사용자가 페이지를 스크롤할 때 해당 위치에 고정됩니다.

• static은 텍스트 흐름에서 해당 위치에 내용을 배치합니다. 이 위치는 배치 가능한 모든 HTML 요소의 기본 위치입니다.

내용의 겹침 순서를 결정합니다. 높은 Z-Index를 가진 요소가 낮은 Z-Index(또는 인덱스 없음)를 가진 요소 위에 나타납니다. 값은 양수 또는 음수일 수 있습니다. 내용이 절대적으로 배치된 경우 [AP 요소] 패널을 사용하여 간단하게 겹침 순서를 변경할 수 있습니다.

컨테이너(예: DIV 또는 P)의 내용이 해당 크기를 초과하는 경우 수행할 작업을 결정합니다. 이러한 속성은 다음과 같이 확장을 제어합니다.

• Visible은 모든 내용이 보이도록 컨테이너의 크기를 늘립니다. 컨테이너는 아래쪽과 오른쪽으로 확장됩니다.

• Hidden은 컨테이너의 크기를 유지하면서 초과되는 내용을 자릅니다. 스크롤 막대는 제공되지 않습니다.

• Scroll은 내용이 컨테이너의 크기를 초과하는지 여부에 관계없이 스크롤 막대를 컨테이너에 추가합니다. 스크롤 막대를 추가하면 동적 환경에서 스크롤 막대가 나타나거나 사라짐에 따라 발생하는 혼동을 막을 수 있습니다. 이 옵션은 문서 창에 나타나지 않습니다.

• Auto는 컨테이너의 내용이 경계를 벗어날 때만 스크롤 막대를 표시합니다. 이 옵션은 문서 창에 나타나지 않습니다.

내용에서 보이는 부분을 정의합니다. 클립 영역을 지정하면 JavaScript와 같은 스크립트 언어를 사용하여 이 영역에 액세스하고 와이프(wipe)와 같은 특수 효과를 만드는 속성을 조작할 수 있습니다. 이러한 와이프(wipe) 효과는 [속성 바꾸기] 비헤이비어를 사용하여 설정할 수 있습니다.

내용 블록의 위치와 크기를 지정합니다. 브라우저가 위치를 해석하는 방식은 [Position]에서의 설정에 따라 달라집니다. 내용 블록의 내용이 지정한 크기를 초과하면 [크기] 값이 무시됩니다.

위치와 크기의 기본 단위는 픽셀입니다. pc(파이카), pt(포인트), in(인치), mm(밀리미터), cm(센티미터), ems(전각), exs(반각), %(부모 값에 대한 백분율) 단위를 지정할 수도 있습니다. 약어 앞에는 3mm와 같이 공백 없이 값을 입력해야 합니다.

내용의 초기 표시 조건을 지정합니다. visibility 속성을 지정하지 않는 경우, 기본적으로 내용은 부모 태그의 값을 상속합니다. body 태그의 기본 visibility은 [Visible]입니다. 다음 visibility 옵션 중 한 가지를 선택합니다.

• Inherit는 내용 부모의 가시성 속성을 상속합니다.

• Visible은 부모의 값에 관계없이 내용을 표시합니다.

• Hidden은 부모의 값에 관계없이 내용을 숨깁니다.

CSS 스타일 확장 속성 정의하기

확장 스타일 속성에는 필터, 페이지 분할 및 포인터 옵션이 포함됩니다.

포인터가 해당 스타일로 제어되는 오브젝트 위에 놓일 때 포인터 이미지를 변경합니다. 팝업 메뉴에서 설정할 옵션을 선택합니다. 이 속성은 Internet Explorer 4.0 이상과 Netscape Navigator 6에서 지원됩니다.

해당 스타일로 제어되는 오브젝트에 흐림, 반전 등의 특수 효과를 적용합니다. 팝업 메뉴에서 효과를 선택합니다.

인쇄할 때 해당 스타일로 제어되는 오브젝트의 앞이나 뒤에서 페이지를 나눕니다. 팝업 메뉴에서 설정할 옵션을 선택합니다. 이 옵션은 4.0 브라우저에서는 지원되지 않지만, 4.0 이후 브라우저 버전에서는 지원됩니다.