문서를 영문으로 보려면 영문 확인란을 선택하세요. 마우스 포인터를 텍스트 위로 이동시켜 팝업 창에서 영문 텍스트를 표시할 수도 있습니다.
번역
영문
Visual Studio 2017을 사용하는 것이 좋습니다.

스타일 작성 대화 상자

스타일 작성 대화 상자를 사용하면 CSS 스타일시트의 기존 스타일을 수정할 수 있습니다.

CSS 스타일시트의 스타일을 수정하려면

  1. 편집기에서 CSS 스타일시트를 엽니다.

  2. 수정할 스타일 규칙의 중괄호 안에 커서를 놓습니다.

  3. 스타일 메뉴에서 스타일 작성을 클릭합니다.

    스타일 작성 대화 상자가 표시됩니다.

    참고참고

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

  4. 나열된 각 범주에 대해 스타일 옵션을 선택하고 확인을 클릭합니다.

    선택한 스타일이 CSS 스타일시트에서 수정됩니다.

스타일 옵션을 선택하면 미리 보기 상자에 스타일 규칙을 적용할 경우 어떻게 표시되는지가 예제를 통해 표시됩니다. 설명 상자에는 스타일 규칙의 CSS 정의가 표시됩니다.

font-family

텍스트 글꼴의 이름입니다. 공백이 포함된 글꼴 이름은 "Times New Roman" 같이 따옴표로 묶어야 합니다. 여러 개의 글꼴 이름을 쉼표(,)로 구분하여 지정할 수 있습니다. 목록의 마지막 글꼴은 "serif", "sans-serif" 또는 "monospace" 등의 일반 글꼴로 지정하는 것이 좋습니다.

font-size

글꼴 크기입니다. 값을 입력하면 목록에서 값 단위를 선택할 수 있습니다. 사용자가 웹 브라우저에서 글꼴 크기를 조정할 수 있도록 "small", "x-large" 등의 상대 크기나 백분율을 사용하는 것이 좋습니다.

font-weight

"normal", "bold" 또는 "400" 등의 글꼴 두께입니다.

font-style

"normal" 또는 "italic" 등 글꼴의 스타일 또는 경사각입니다. "oblique"를 선택하는 경우 대부분의 웹 브라우저에서는 해당 글꼴을 기울임꼴로 렌더링합니다.

font-variant

글꼴 렌더링을 위한 변형 스타일입니다. 값은 다음과 같습니다.

  • normal   글꼴이 일반적인 방식으로 렌더링됩니다.

  • small-caps   글꼴이 작은 대문자로 렌더링됩니다.

  • inherit   변형 스타일이 부모 요소로부터 상속됩니다.

text-transform

텍스트의 대문자 표시 효과를 정의하는 값입니다. 값은 다음과 같습니다.

  • capitalize   각 단어의 첫 글자가 대문자로 렌더링됩니다.

  • lowercase   모든 단어가 소문자로 렌더링됩니다.

  • uppercase   모든 단어가 대문자로 렌더링됩니다.

  • none   텍스트 대문자 표시가 변경되지 않습니다.

  • inherit   text-transform 스타일이 부모 요소로부터 상속됩니다.

color

텍스트 글꼴의 색입니다.

text-decoration

underline, overline, line-throughblink 텍스트 특성의 조합입니다. none을 선택하면 다른 모든 확인란의 선택은 해제됩니다.

line-height

텍스트 줄 간의 간격입니다. 값을 지정하면 목록에서 단위를 선택할 수 있습니다.

vertical-align

요소 또는 표 셀 콘텐츠의 세로 위치 지정입니다. 값을 지정하면 목록에서 단위를 선택할 수 있습니다.

text-align

텍스트 또는 이미지의 가로 위치 지정입니다.

text-indent

단락에서 첫 텍스트 줄의 들여쓰기입니다. 값을 지정하면 목록에서 단위를 선택할 수 있습니다.

white-space

공백이 렌더링되는 방식입니다. 공백에는 하드 리턴, 탭 및 공백이 포함됩니다. 값은 다음과 같습니다.

  • normal   연속하는 공백 문자를 하나의 공백으로 축소합니다.

  • nowrap   줄 바꿈을 표시하지 않습니다.

  • pre   공백 문자를 유지합니다.

  • pre-line   공백 문자는 유지하고 텍스트는 래핑합니다.

  • pre-wrap   공백 문자는 유지하고 텍스트를 래핑하지 않습니다.

  • inherit   부모 요소의 공백 스타일을 상속합니다.

word-spacing

단어 사이의 간격입니다. 값을 지정하면 목록에서 단위를 선택할 수 있습니다.

letter-spacing

단어의 문자 간 간격입니다. 값을 지정하면 목록에서 단위를 선택할 수 있습니다.

background-color

HTML 요소의 배경색입니다.

background-image

웹 페이지 배경에 사용할 이미지입니다. 이미지는 미리 프로젝트 파일에 추가해 두어야 합니다. 웹 브라우저에서 이미지를 렌더링하지 않는 경우에 대비하여 배경색을 설정하는 것이 좋습니다.

background-repeat

배경 이미지를 반복하는 방식입니다. 값은 다음과 같습니다.

  • no-repeat    이미지를 반복하지 않습니다.

  • repeat    이미지를 세로 및 가로로 반복합니다.

  • repeat-x    이미지를 가로로 반복합니다.

  • repeat-y    이미지를 세로로 반복합니다.

  • inherit    background-repeat 스타일이 부모 요소로부터 상속됩니다.

background-attachment

배경 이미지가 지정된 위치에 고정되는지 아니면 웹 페이지의 나머지 부분과 함께 스크롤되는지 여부입니다. 값은 다음과 같습니다.

  • fixed    이미지가 고정되며 스크롤되지 않습니다.

  • scroll    이미지가 웹 페이지의 나머지 부분과 함께 스크롤됩니다.

  • inherit    background-attachment 스타일이 부모 요소로부터 상속됩니다.

(x) background-position

배경 이미지의 가로 위치 지정입니다. 값을 지정하면 목록에서 단위를 선택할 수 있습니다.

(x) background-position

배경 이미지의 세로 위치 지정입니다. 값을 지정하면 목록에서 단위를 선택할 수 있습니다.

border-style

solid 또는 dashed 등 HTML 요소 주위에 있는 모든 네 테두리의 선 스타일입니다.

border-width

HTML 요소 주위에 있는 모든 네 테두리의 선 두께입니다. 값을 지정하면 목록에서 단위를 선택할 수 있습니다.

border-color

HTML 요소 주위에 있는 모든 네 테두리의 색입니다.

안쪽 여백(padding)

요소의 안쪽 여백입니다. 안쪽 여백은 요소 테두리(있는 경우) 내의 공백을 정의합니다. 각 면(위쪽, 오른쪽, 아래쪽 또는 왼쪽)에 대해 독립적으로 안쪽 여백을 설정할 수 있습니다. 모든 면에 대해 값을 지정하면 목록에서 값 단위를 선택할 수 있습니다. 모든 면에 대해 안쪽 여백을 동일하게 적용하려면 top에 값을 지정하고 모두 동일하게 확인란을 선택합니다.

여백(margin)

요소 주위의 여백입니다. 여백은 요소 테두리(있는 경우) 외부의 공백을 정의합니다. 각 면(위쪽, 오른쪽, 아래쪽 또는 왼쪽)에 대해 독립적으로 여백을 설정할 수 있습니다. 모든 여백에 대해 값을 지정하면 목록에서 값 단위를 선택할 수 있습니다. 모든 면에 대해 여백을 동일하게 적용하려면 top에 값을 지정하고 모두 동일하게 확인란을 선택합니다.

CSS 상자 모델 참조

여백, 테두리, 안쪽 여백, 위쪽 등 CSS 상자 용어의 의미를 표시합니다.

position

웹 페이지에 요소를 배치하는 데 사용하는 알고리즘입니다. 값은 다음과 같습니다.

  • absolute   요소의 위치가 top, right, bottomleft 속성을 사용하여 지정됩니다. 이러한 속성은 포함 블록을 기준으로 합니다.

  • fixed   요소의 위치가 top, right, bottomleft 속성을 사용하여 지정됩니다. 이러한 속성은 브라우저 창을 기준으로 합니다. 요소는 웹 페이지와 함께 스크롤되지 않습니다.

  • relative   요소의 위치가 일반 방식에 따라 계산된 후에 top, right, bottomleft 속성을 사용하여 오프셋됩니다. 오프셋은 요소의 정상 위치를 기준으로 합니다.

  • static   요소의 위치가 일반 방식에 따라 계산되며 top, right, bottomleft 속성은 무시됩니다. 이 값이 기본값입니다.

  • inherit   요소가 해당 위치 지정 알고리즘을 부모 요소로부터 상속받습니다.

z-인덱스

요소의 스택 수준입니다. 스택 수준이 더 높은 요소가 낮은 요소의 앞에 표시됩니다.

width

요소의 너비입니다. 값을 지정하면 목록에서 값 단위를 선택할 수 있습니다.

height

요소의 높이입니다. 값을 지정하면 목록에서 값 단위를 선택할 수 있습니다.

top

요소의 위쪽 가장자리입니다. position 속성을 static으로 설정하면 이 속성이 무시됩니다. 값을 지정하면 목록에서 값 단위를 선택할 수 있습니다.

right

요소의 오른쪽 가장자리입니다. position 속성을 static으로 설정하면 이 속성이 무시됩니다. 값을 지정하면 목록에서 값 단위를 선택할 수 있습니다.

bottom

요소의 아래쪽 가장자리입니다. position 속성을 static으로 설정하면 이 속성이 무시됩니다. 값을 지정하면 목록에서 값 단위를 선택할 수 있습니다.

left

요소의 왼쪽 가장자리입니다. position 속성을 static으로 설정하면 이 속성이 무시됩니다. 값을 지정하면 목록에서 값 단위를 선택할 수 있습니다.

visibility

요소가 표시되는지 아니면 숨겨지는지 여부입니다. 값은 다음과 같습니다.

  • collapse   이 값을 표 요소에 사용하는 경우 행이나 열이 숨겨집니다. 다른 모든 요소의 경우 이 값은 요소를 숨기는 것과 동일합니다.

  • hidden   요소가 표시되지 않도록 합니다.

  • visible   요소가 표시되도록 합니다.

  • inherit   요소가 해당 visibility 속성을 부모 요소로부터 상속받습니다.

display

요소가 표시되는 방식입니다. 값은 다음과 같습니다.

  • block   요소가 앞뒤에 줄 바꿈이 적용된 상태로 블록 수준에서 표시됩니다.

  • inline   요소가 앞뒤에 줄 바꿈이 적용되지 않은 상태로 인라인으로 표시됩니다.

  • inline-box   요소가 앞뒤에 줄 바꿈이 적용되지 않은 상태로 상자 형태의 인라인으로 표시됩니다.

  • inline-table   요소가 앞뒤에 줄 바꿈이 적용되지 않은 상태로 표 형태의 인라인으로 표시됩니다.

  • list-item   요소가 목록에 항목으로 표시됩니다.

  • none   요소가 숨겨집니다.

  • run-in   상황에 따라 요소가 블록 수준에 또는 인라인으로 표시됩니다.

  • table   요소가 블록 테이블로 표시되며 테이블 앞뒤에 줄 바꿈이 적용됩니다.

  • table-caption   요소가 표 캡션으로 표시됩니다.

  • table-cell   요소가 표 셀로 표시됩니다.

  • table-column   요소가 표 열로 표시됩니다.

  • table-column-group   요소가 표 열 그룹으로 표시됩니다. 이 그룹에는 열이 하나 이상 들어 있을 수 있습니다.

  • table-footer-group   요소가 표 바닥글 그룹으로 표시됩니다. 이 그룹에는 바닥글이 하나 이상 들어 있을 수 있습니다.

  • table-header-group   요소가 표 머리글 그룹으로 표시됩니다. 이 그룹에는 머리글이 하나 이상 들어 있을 수 있습니다.

  • table-row   요소가 표 행으로 표시됩니다.

  • table-row-group   요소가 표 행 그룹으로 표시됩니다. 이 그룹에는 행이 하나 이상 들어 있을 수 있습니다.

  • inherit   요소가 해당 display 속성을 부모 요소로부터 상속받습니다.

float

텍스트가 주위에 래핑될 수 있도록 요소가 왼쪽 또는 오른쪽에 표시되는지 아니면 인라인으로 표시되는지 여부입니다. 이 속성은 대개 이미지에 가장 많이 사용되지만 텍스트 블록에도 적용됩니다. 값은 다음과 같습니다.

  • left   요소가 왼쪽(부모 요소 내)에 표시됩니다.

  • none   요소가 텍스트에 나타나는 위치에서 인라인으로 표시됩니다.

  • right   요소가 오른쪽(부모 요소 내)에 표시됩니다.

  • inherit   요소가 해당 float 속성 값을 부모 요소로부터 상속받습니다.

clear

부동 요소를 허용하지 않는 요소의 면입니다. 값은 다음과 같습니다.

  • both   요소의 왼쪽 또는 오른쪽 면에서 부동 요소가 허용되지 않습니다.

  • left   요소가 왼쪽 면에 있는 부동 요소 아래로 이동합니다.

  • none   요소의 모든 면에서 부동 요소가 허용되지 않습니다.

  • right   요소가 오른쪽 면에 있는 부동 요소 아래로 이동합니다.

  • inherit   요소가 해당 clear 속성을 부모 요소로부터 상속받습니다.

cursor

표시할 커서의 유형입니다. 값은 다음과 같습니다.

  • auto(기본값)   브라우저에서 커서를 설정합니다.

  • crosshair   커서가 십자형으로 렌더링됩니다.

  • default   기본 커서(대개 화살표)입니다.

  • e-resize   요소의 크기를 오른쪽(동쪽)으로 조정하는 데 사용되는 커서입니다.

  • help   도움말을 사용할 수 있음을 나타내는 커서(대개 물음표)입니다.

  • move   개체를 이동할 수 있음을 나타내는 커서입니다.

  • n-resize   요소의 크기를 위쪽(북쪽)으로 조정하는 데 사용되는 커서입니다.

  • ne-resize   요소의 크기를 위쪽 및 오른쪽(북동쪽)으로 조정하는 데 사용되는 커서입니다.

  • nw-resize   요소의 크기를 위쪽 및 왼쪽(북서쪽)으로 조정하는 데 사용되는 커서입니다.

  • pointer   커서가 포인터(대개 손 모양)로 렌더링됩니다.

  • progress   프로그램이 진행되고 있음을 나타내는 커서입니다.

  • s-resize   커서의 크기를 아래쪽(남쪽)으로 조정하는 데 사용되는 커서입니다.

  • se-resize   요소의 크기를 아래쪽 및 오른쪽(남동쪽)으로 조정하는 데 사용되는 커서입니다.

  • sw-resize   요소의 크기를 아래쪽 및 왼쪽(남서쪽)으로 조정하는 데 사용되는 커서입니다.

  • text   텍스트에 사용되는 커서입니다.

  • w-resize   요소의 크기를 왼쪽(서쪽)으로 조정하는 데 사용되는 커서입니다.

  • wait   프로그램이 사용 중임을 나타내는 커서(대개 모래 시계)입니다.

  • inherit   요소가 해당 cursor 속성을 부모 요소로부터 상속받습니다.

overflow

요소 콘텐츠가 해당 영역에서 오버플로되면 발생하는 현상입니다. 값은 다음과 같습니다.

  • auto   콘텐츠가 클리핑되는 경우에만 스크롤 막대가 표시됩니다.

  • hidden   콘텐츠가 요소에 맞게 클리핑되며 스크롤 막대가 표시되지 않습니다.

  • scroll   콘텐츠가 요소에 맞게 클리핑되며 스크롤 막대가 표시됩니다.

  • visible(기본값)   요소 바깥쪽에 있는 콘텐츠도 표시됩니다.

  • inherit   요소가 해당 overflow 속성을 부모 요소로부터 상속받습니다.

clip

요소의 사각형 크기입니다. 정의된 영역보다 큰 요소는 영역에 맞게 클리핑됩니다. 크기를 지정하려면 top, right, bottomleft 상자를 사용합니다.

top

클립 사각형의 위쪽 가장자리입니다. 값을 지정하면 목록에서 단위를 선택할 수 있습니다.

right

클립 사각형의 오른쪽 가장자리입니다. 값을 지정하면 목록에서 단위를 선택할 수 있습니다.

bottom

클립 사각형의 아래쪽 가장자리입니다. 값을 지정하면 목록에서 단위를 선택할 수 있습니다.

left

클립 사각형의 왼쪽 가장자리입니다. 값을 지정하면 목록에서 단위를 선택할 수 있습니다.

list-style-type

목록 항목 마커(글머리 기호)의 스타일입니다. 일부 브라우저의 경우에는 disc(속이 찬 원 모양)만 지원됩니다.

list-style-image

목록 항목 마커(글머리 기호)로 사용할 이미지 파일입니다. 이미지 파일은 미리 프로젝트 파일에 추가해 두어야 합니다.

list-style-position

목록 항목 마커가 배치될 위치입니다. 값은 다음과 같습니다.

  • inside   마커를 텍스트 왼쪽에 배치하고 텍스트를 마커 아래쪽에 래핑합니다.

  • outside(기본값)   마커를 텍스트 왼쪽에 배치하고 텍스트가 래핑될 때 들여 씁니다.

  • inherit   요소가 해당 list-style-position 속성을 부모 요소로부터 상속받습니다.

table-layout

표 열의 크기를 지정하는 방식입니다. 값은 다음과 같습니다.

  • auto(기본값)   열 너비가 셀 내용에 따라 설정됩니다.

  • fixed   열 너비가 표 너비 및 각 열에 대해 설정되는 너비에 따라 설정됩니다.

  • inherit   요소가 해당 table-layout 속성을 부모 요소로부터 상속받습니다.

border-collapse

표 셀 사이의 테두리가 단일 테두리로 축소되는지 아니면 셀마다 각각 테두리가 지정되는지 여부입니다.

border-spacing

인접한 셀의 테두리 간 거리입니다. 이 속성은 별도로 구분되는 테두리에만 적용됩니다. 값을 지정하면 목록에서 값 단위를 선택할 수 있습니다.

empty-cells

빈 셀을 숨길지 아니면 표시할지 여부입니다.

caption-side

캡션이 표의 위쪽에 표시될지 아니면 아래쪽에 표시될지 여부입니다.

표시: