타이포그래피

    Ignite UI for Angular Typography Sass 모듈을 사용하면 애플리케이션의 모든 구성 요소, 특정 타이포그래피 스케일 또는 특정 구성 요소에 대한 타이포그래피를 수정할 수 있습니다.

    개요

    애플리케이션은 서로 스케일 카테고리를 공유할 수 있는 여러 타이포그래피scales를 정의할 수 있습니다. Ascale category는 ,,type styles,font-family,font-size에font-weight 대한line-height​letter-spacing 정보를 포함하는 집합text-transform 이다.

    Ignite UI for Angular 각 테마$material-type-scale 별 -,$fluent-type-scale,,$bootstrap-type-scale,$indigo-type-scale 그리고 4가지 기본 타입 스케일을 노출하며, 이 스케일은 다시 믹싱에서typography 타이포그래피 스타일을 설정하는 데 사용됩니다. 하지만 추가적인 타입 척도를 만들 수는 있습니다.

    대부분의 경우 타이포그래피를 약간만 수정하면 되므로 아직 읽지 않았다면 CSS 변수 문서의 타이포그래피 섹션을 먼저 읽어 보는 것이 좋습니다. Sass를 사용하여 타이포그래피를 수정하는 것은 전체 타이포그래피 규모와 관련된 더 깊은 변경을 원하는 경우에만 필요합니다.

    Usage

    Important

    기본적으로 타이포그래피 스타일은 적용하지 않습니다. 애플리케이션에서 타이포그래피를 사용하려면 CSS 클래스를ig-typography 최상위 요소로 설정하고 믹스신을typography 기본.scss 파일에 포함해야 합니다.

    ​Titillium Web을 Ignite UI for Angular의 Material 테마에서 기본 글꼴로 선택했습니다. 사용하려면 직접 호스팅하거나 Google Fonts에서 포함해야 합니다.

    <link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700" rel="stylesheet"/>

    유형 스케일에서 카테고리 스타일을 설정하고 검색하는 데 사용되는 여러 믹스인과 함수가 있습니다. 사람들은:

    • type-style[함수] - 타입 스케일 카테고리에서 사용할 스타일 규칙 집합을 반환합니다.
    • type-scale[함수] - 13개의 스타일 카테고리 집합을 반환합니다.
    • type-scale-category[함수] - 타입 스케일과 카테고리에서 스타일 규칙 맵을 반환합니다.
    • type-style[믹싱] - 특정 타입, 스케일, 카테고리에서 스타일 규칙을 선택지에 추가합니다.
    • type-style-vars[믹싱] - 특정 타입 스타일의 스타일 규칙을 선택기에 추가합니다.
    • typography[믹싱] - 전역 애플리케이션 타이포그래피 스타일을 정의합니다.

    앞서 언급한 믹스인과 기능이 각각 무엇을 하는지 자세히 살펴보겠습니다.

    The Type Style

    이type-style 함수는 단순히 특정 인자가 스케일 카테고리의 스타일 집합의 일부로 전달되도록 보장하는 인터페이스와 유사한 함수입니다. 예를 들어, 스케일 범주에 대한h1 새로운 스타일 규칙 세트를 정의하고 싶다고 가정해 봅시다. 이를 위해 간단히 이렇게 쓸 수 있습니다:

    $h1-style: type-style(
  $font-size: rem(112px),
  $font-weight: 600,
  $line-height: rem(96px),
  ...,
);

    The Type Scale

    활자 척도는 척도 범주로 사용되는 13가지 타이포그래피 스타일의 지도를 생성합니다. 새로운 유형 스케일을 생성하려면 다음을 수행하십시오.

    $my-type-scale: type-scale(...);
    Important

    13개의 스케일 카테고리 각각에 대해 타입 스타일을 제공해야 합니다. 위에 제시된 함수를 사용하여type-style 스타일을 생성할 수 있습니다.

    $my-type-scale: type-scale(
  $h1: $h1-style,
  [$h2...$overline],
);

    기존 타입 스케일을 확장하여 수정할 수 있습니다. 타입 스타일h1을$material-type-scale 변경하려면 다음과 같은 방법이 있습니다:

    $my-type-scale: extend(
  $material-type-scale,
  (
    h1: type-style(...),
  )
);

    눈금에 추가 유형 스타일을 추가하는 것도 마찬가지로 쉽습니다.

    $my-type-category: type-style(
  $font-weight: 600,
  $font-size: rem(42px),
  $text-transform: uppercase,
  ...,
);

$my-type-scale: extend(
  $my-type-scale,
  (
    "my-category": $my-type-category,
  )
);

    The Typography Mixin

    타이포그래피 믹스인은 기본 h1-h6 및 p 요소의 스타일 지정 방법을 포함하여 애플리케이션의 전역 타이포그래피 스타일을 정의합니다.

    현재 2개의 인수를 허용합니다:

    • $font-family- 애플리케이션에서 사용할 전역 폰트 계열.
    • $type-scale- 애플리케이션에서 사용할 기본 타입 스케일.

    타이포그래피 스타일을 사용하려면 믹스인을 그 이후에typography 포함core 하세요. 위에서 정의한 타입 스케일을$my-type-scale 기본 타입 스케일로 만들어 봅시다.

    @include typography(
  $font-family: $material-typeface,
  $type-scale: $my-type-scale
);

    우리는 type-scale -$material-typeface,$fluent-typeface,,$bootstrap-typeface and$indigo-typeface와 유사한 네 가지 변수를 서체에 노출합니다. 믹싱을typography 포함할 때 어떤 타입 스케일과 함께 사용할 수 있습니다.

    Custom Type Styles

    믹스신은type-style 특정 유형의 스케일에서 스케일 카테고리의 스타일 규칙을 가져오는 데 사용할 수 있습니다. 더 나아가, 추가적인 스타일 규칙을 추가할 수 있습니다.

    .my-fancy-h1 {
  @include type-style('h1') {
    color: royalblue;
  }
}

    위 코드는 클래스 스타일 셀렉터를 생성하며, 이 선택기는.my-fancy-h1 스케일 카테고리h1의$my-type-scale 모든 스타일 규칙과 색상에color 설정된 속성을 추가합니다royalblue. 이제 어떤 요소의 클래스를 로.my-fancy-h1 설정하면, 다른h1 요소와 비슷하게 보이지만 컬royalblue 러가 됩니다.

    Component Typography

    Ignite UI for Angular의 대부분 컴포넌트는 텍스트 스타일링을 위해 스케일 카테고리를 사용합니다. 예를 들어, 구성 요소는igx-card 다음과 같은 스케일 범주를 사용합니다:

    • h6- 카드 제목 스타일링에 사용됩니다.
    • subtitle-2- 스타일링 카드 자막과 작은 타이틀에 사용됩니다.
    • body-2- 카드 텍스트 콘텐츠 스타일링에 사용됩니다.

    카드의 텍스트 스타일을 변경하는 방법은 두 가지가 있습니다. 첫 번째는 다음 조건을 수정하는 것입니다.h6,subtitle-2, 그리고/또는body-2 스케일은 재료 유형 규모 타이포그래피 믹싱으로 넘어갑니다. 그래서 카드 제목을 더 작게 만들고 싶다면, 글꼴 크기를 바꾸기만 하면 됩니다h6 규모 범주.

    // Create a custom h6 scale category style
$my-h6: type-style(
  $font-size: rem(12px),
);

// Create a custom type scale with the modified h6
$my-type-scale: extend(
  $material-type-scale,
  (
    h6: $my-h6,
  )
);

// Pass the custom scale to the global typography mixin
@include typography($type-scale: $my-type-scale);
    Warning

    위 코드는 스케일 카테고리를h6 전반적으로 수정하여 스케일을 사용하는h6 모든 컴포넌트의 외관과 느낌에 영향을 미칩니다. 이것은 앱 전체에서 모든h6 요소가 동일하게 보이도록 일관성을 유지하기 위해 하는 것입니다. 저희는 저희 경우처럼h6 특정 부품에만 수정을igx-card 적용하고 싶을 수 있다는 점을 이해합니다. 이 때문에 각 컴포넌트는 카테고리 구성을 수용하는 고유한 타이포그래피 믹스신을 갖게 됩니다.

    // Create a custom h6 scale category style
$my-h6: type-style(
  $font-size: rem(12px),
);

// You can specify which categories from the type sale the card uses
$card-categories: (
  title: 'h6',
  title-small: 'subtitle-1',
  subtitle: 'subtitle-2',
  content: 'body-2',
);

.my-cool-card {
  // Overwrite the 'h6' type style for this scope
  @include type-style-vars('h6', $my-h6);

  // Pass the custom card catergories to the card typography mixin
  @include card-typography($card-categories);
}

    우리는 더 이상 믹싱을typography 포함하지 않고, 카테고리 수정$my-type-scale과 함께 스케일을 전달h6 합니다. 이제 우리가 만드는 것은 우리가 만든 커스텀 H6 스타일을 믹싱에type-style-vars 전달하는 것뿐입니다.

    카드 타이포그래피 믹스인을 사용하여 카드 구성 요소의 모든 요소에 대한 타이포그래피 스타일을 업데이트할 수 있습니다. 위의 예에서 $card-categories 맵의 title-small 키에는 subtitle-1 유형 스타일이 할당됩니다. 이 변경으로 카드의 작은 제목이 약간 커집니다. 기본적으로 카드 구성 요소는 subtitle-1보다 글꼴 크기가 작은 작은 제목에 대해 subtitle-2 유형 스타일을 사용합니다. mixin을 사용하면 이 기본값을 무시하고 새 스타일을 적용할 수 있습니다.

    Converting Units

    또한 부동산 단위 변환을 위한 세 가지 타이포그래피 함수도 있습니다. 함수를 통해 단위를 또는 또는px​em​rem​em로 변환rem 할 수 있습니다.px 우리가 해야 할 일은 세 함수 중 하나를 호출하고 변환하고 싶은 값을 전달하는 것입니다.

    To 'px'

    .my-component {
  margin: px(3.23rem);
}

    To 'rem'

    .my-component {
  margin: rem(10px) rem(5px);
}

    To 'em'

    .my-component {
  margin: em(10px) em(5px);
}

    값을 변환할 때 변환은 기본 글꼴 크기인 16px(여기서 16px = 1em/rem)를 기반으로 한다는 점을 기억하는 것이 중요합니다. 원하는 경우 변환 함수에 대한 인수로 사용자 정의 기본 글꼴 크기를 제공할 수 있습니다. 이렇게 하면 결과 값이 지정된 기본 글꼴 크기를 기준으로 계산됩니다.

    .my-component {
  margin: rem(10px, 26px);
  // The result will be 0.385rem
}

    이렇게 하면 26px의 글꼴 크기에 따라 10px 값이 rem으로 변환됩니다.

    CSS Classes

    타입 스케일 카테고리에 따라 모든 컴포넌트에 텍스트 스타일을 추가하는 것 외에도, 기본 h1-h6와 p 요소도 스타일링합니다. 이로 인해 의미와 스타일링을 구분할 수 있습니다. 예를 들어, 태그h1에typography 기본 스타일링이 있더라도, 클래스 ofh3를 부여해 aig-typography__h3 처럼 보이도록 수정할 수 있습니다.

    <h1 class="ig-typography__h3">Some text</h1>

    기본적으로 제공되는 모든 CSS 클래스 목록은 다음과 같습니다.

    • ig-typography__h1
    • ig-typography__h2
    • ig-typography__h3
    • ig-typography__h4
    • ig-typography__h5
    • ig-typography__h6
    • ig-typography__subtitle-1
    • ig-typography__subtitle-2
    • ig-typography__body-1
    • ig-typography__body-2
    • ig-typography__button
    • ig-typography__caption
    • ig-typography__overline

    Additional Resources

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.