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

제목의 화면 크기를 정의하고 각 키는 중단 점이며 각 값은 제목 크기의 맵입니다.

지도
small: (
   'h1': 24
   'h2': 20
   'h3': 19
   'h4': 18
   'h5': 17
   'h6': 16
)
medium: (
   'h1': 48
   'h2': 40
   'h3': 31
   'h4': 25
   'h5': 20
   'h6': 16
)
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

<cite>요소의 텍스트 색상을 제공합니다 .

색깔 $ 진한 회색
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