Foundation-기본 타이포그래피
기술
Foundation의 Typography는 요소에 대한 매력적이고 간단한 기본 스타일을 만드는 제목, 단락, 목록 및 기타 인라인 요소를 정의합니다.
다음 표는 Foundation에서 사용되는 다양한 유형의 타이포그래피를 나열합니다.
| Sr. 아니. | 타이포그래피 및 설명 |
|---|---|
| 1 | 단락 단락은 다양한 글꼴 크기, 강조 표시된 단어, 줄 높이 등으로 정의 된 문장 그룹입니다. |
| 2 | 머리글 h1에서 h6까지의 HTML 제목을 정의합니다. |
| 삼 | 연결 텍스트 나 이미지를 클릭하면 다른 문서를 여는 하이퍼 링크가 생성됩니다. |
| 4 | 분할기 <hr> 태그를 사용하여 섹션 사이를 나누는 데 사용됩니다. |
| 5 | 정렬 된 목록과 정렬되지 않은 목록 Foundation은 정렬 된 목록, 정렬되지 않은 목록을 지원하여 사물을 나열합니다. |
| 6 | 정의 목록 정의 목록은 이름 값 쌍을 표시하는 데 사용됩니다. |
| 7 | 인용구 그것은 평상시보다 훨씬 더 크게 정의하는 텍스트 블록을 나타냅니다. |
| 8 | 약어 및 코드 약어는 단어 또는 구의 단축 용어를 정의하고 코드는 코드 조각을 나타냅니다. |
| 9 | 키 입력 특정 기능을 수행하는 데 사용됩니다. |
| 10 | 접근성 Foundation은 페이지의 콘텐츠에 액세스하기위한 몇 가지 지침을 제공합니다. |
Sass 참조
표에 나열된 다음 SASS 변수를 사용하여 구성 요소의 스타일을 변경할 수 있습니다.
| Sr. 아니. | 이름 및 설명 | 유형 | 기본값 |
|---|---|---|---|
| 1 | $header-font-family 헤더 요소의 글꼴 패밀리를 지정합니다. |
문자열 또는 목록 | $ body-font-family |
| 2 | $header-font-weight 헤더의 글꼴 두께를 지정합니다. |
끈 | $ global-weight-normal |
| 삼 | $header-font-style 헤더의 글꼴 스타일을 제공합니다. |
끈 | 표준 |
| 4 | $font-family-monospace 코드 샘플과 같이 고정 폭 유형을 사용하는 요소에 사용되는 글꼴 스택입니다. |
문자열 또는 목록 | Consolas, 'Liberation Mono', Courier, monospace |
| 5 | $header-sizes 제목의 화면 크기를 정의하고 각 키는 중단 점이며 각 값은 제목 크기의 맵입니다. |
지도 | |
| 6 | $header-color 헤더의 색상을 제공합니다. |
색깔 | 상속하다 |
| 7 | $header-lineheight 헤더의 줄 높이를 정의합니다. |
번호 | 1.4 |
| 8 | $header-margin-bottom 헤더의 하단 여백을 제공합니다. |
번호 | 0.5rem |
| 9 | $header-text-rendering 텍스트 렌더링 방법을 정의합니다. |
끈 | optimizeLegibility |
| 10 | $small-font-size <small> 요소의 글꼴 크기를 지정합니다. |
번호 | 80 % |
| 11 | $paragraph-margin-bottom 단락의 아래쪽 여백을 지정합니다. |
번호 | 1rem |
| 12 | $paragraph-text-rendering 텍스트 렌더링 단락을위한 방법. |
끈 | optimizeLegibility |
| 13 | $code-color 코드 샘플에 텍스트 색상을 제공합니다. |
색깔 | $ 블랙 |
| 14 | $code-font-family 코드 샘플에 글꼴 패밀리를 제공합니다. |
문자열 또는 목록 | $ font-family-monospace |
| 15 | $code-border 코드 주위의 테두리를 지정합니다. |
명부 | 1px 단색 $ 중간 회색 |
| 16 | $code-padding 텍스트 주위의 패딩을 지정합니다. |
번호 또는 목록 | rem-calc (2 5 1) |
| 17 | $anchor-color 링크의 기본 색상입니다. |
색깔 | $ 원색 |
| 18 | $anchor-color-hover 마우스 오버시 링크의 기본 색상을 지정합니다. |
색깔 | scale-color ($ anchor-color, $ lightness : -14 %) |
| 19 | $anchor-text-decoration 링크의 기본 텍스트 장식. |
끈 | 없음 |
| 20 | $anchor-text-decoration-hover 마우스 오버시 링크의 기본 텍스트 장식. |
끈 | 없음 |
| 21 | $hr-width 구분선의 최대 너비를 정의합니다. |
번호 | $ global-width |
| 22 | $hr-border 구분선의 기본 테두리를 지정합니다. |
명부 | 1px 단색 $ 중간 회색 |
| 23 | $hr-margin 구분선의 기본 여백입니다. |
번호 또는 목록 | rem-calc (20) 자동 |
| 24 | $list-lineheight 목록의 항목에 대한 행 높이를 정의합니다. |
번호 | $ paragraph-lineheight |
| 25 | $list-style-type 순서가 지정되지 않은 목록에 글 머리 기호 유형을 제공합니다. |
끈 | 디스크 |
| 26 | $list-style-position 순서가 지정되지 않은 목록의 글 머리 기호 위치를 정의합니다. |
끈 | 외부 |
| 27 | $list-side-margin 왼쪽 (또는 오른쪽) 여백을 정의합니다. |
번호 | 1.25rem |
| 28 | $defnlist-term-weight <dt> 요소의 글꼴 두께를 제공합니다. |
끈 | $ global-weight-bold |
| 29 | $defnlist-term-margin-bottom <dt> 및 <dd> 요소 사이의 간격을 제공합니다. |
번호 | 0.3rem |
| 30 | $blockquote-color <blockquote> 요소의 텍스트 색상을 적용합니다. |
색깔 | $ 진한 회색 |
| 31 | $blockquote-padding <blockquote> 요소 내부에 패딩을 제공합니다. |
번호 또는 목록 | rem-calc (9 20 0 19) |
| 32 | $blockquote-border <blockquote> 요소에 대한 측면 테두리를 제공합니다. |
명부 | 1px 단색 $ 중간 회색 |
| 33 | $cite-font-size <cite> 요소의 글꼴 크기를 정의합니다. |
번호 | rem-calc (13) |
| 34 | $cite-color
|
색깔 | $ 진한 회색 |
| 35 | $keystroke-font <kbd> 요소의 글꼴 패밀리를 정의합니다. |
문자열 또는 목록 | $ font-family-monospace |
| 36 | $keystroke-color <kbd> 요소의 텍스트 색상을 정의합니다. |
색깔 | $ 블랙 |
| 37 | $keystroke-background <kbd> 요소의 배경색을 제공합니다. |
색깔 | $ 밝은 회색 |
| 38 | $keystroke-padding <kbd> 요소의 패딩을 지정합니다. |
번호 또는 목록 | rem-calc (2 4 0) |
| 39 | $keystroke-radius <kbd> 요소의 테두리 반경을 표시합니다. |
번호 또는 목록 | $ global-radius |
| 40 | $abbr-underline <abbr> 요소에 아래쪽 테두리 스타일을 제공합니다. |
명부 | 1px 점선 $ black |