STYLE

STYLE

Style

스타일 적용에 관련된 속성

  • Shared Between CSS and SVG

    HTML 요소에 사용되는 일부 CSS 속성이 SVG 요소에게도 동일하게 사용이 가능하다.

    • Font

      • font

        폰트의 종류, 크기, 행간, 스타일, 굵기, 대소문자 처리를 한번에 설정하는 축약형 속성이다.

      • font-family

        글꼴을 지정한다.

      • font-size

        폰트의 크기를 설정한다.

      • font-size-adjust

        글꼴 대체가 발생할 때 텍스트의 가독성과 겉보기 크기를 유지하는 방법을 제공한다. 사용된 글꼴에 관계없이 지정된 매트릭이 동일하도록 사용된 글꼴 크기를 조정한다.

      • font-stretch

        텍스트를 넓히거나 좁힐 수 있다.

      • font-style

        글꼴의 모양을 설정한다.

      • font-variant

        영문 소문자를 작은 대문자로(소문자 크기의 대문자)로 변경한다.

      • font-weight

        폰트의 굵기를 설정한다.

    • Text

      • direction

        block-level 요소 내에 텍스트의 (쓰기)방향을 지정한다.

      • letter-spacing

        문자 간격을 조정한다.

      • text-decoration

        텍스트의 장식을 설정한다.

      • unicode-bidi

        direction 속성과 함께 문서의 양방향 텍스트 처리 방법을 설정한다.

      • word-spacing

        문장내 공백이 존재하는 경우 공백을 늘리거나 줄인다.

    • Etc

      • cursor

        커서의 모양을 설정한다.

      • display

        요소의 화면 출력 방식을 설정한다.

      • overflow

        요소 내의 콘텐츠의 크기가 정해진 요소 영역을 벗어나는 경우에 가로, 세로 방향으로 벗어나는 콘텐츠를 속기 방식으로 설정한다.

      • visibility

        요소의 화면 표시 여부를 설정하며 hidden 설정시 원래 가지고 있던 요소의 영역은 그대로 유지된다.

  • SVG Only

    SVG 요소에게 사용되는 전용 CSS 속성들을 나타낸다.

    • fill

      Shape의 면 처리를 한다.

    • stroke-dasharray

      도형의 외곽선을 그리는 데 사용되는 대시 및 간격 패턴을 정의한다.

    • stroke-dashoffset

      연관된 대시 배열 렌더링시 오프셋을 정의한다.

©2023 devdic.com, Korea

레퍼런스에 사용된 모든 소스 코드의 저작권은 devdic.com에 있으며 오류 및 기술 자료 제보(건의)는 언제든지 환영하며 감사드립니다.
일반적이지 않은 기술 설명에 대한 내용의 일부는 Mozilla의 MDN web docs에서 도움 받았음을 밝힙니다. 그들을 존경합니다.

master@cydemy.com