재단-글로벌 스타일
이 장에서는 글로벌 스타일 에 대해 알아 봅니다 . Foundation 프레임 워크의 전역 CSS에는 브라우저에서 스타일링이 일관되도록하는 유용한 재설정이 포함되어 있습니다.
글꼴 크기 조정
브라우저 스타일 시트의 글꼴 크기는 기본적으로 100 %로 설정됩니다. 기본 글꼴 크기는 16 픽셀로 설정됩니다. 글꼴 크기에 따라 격자 크기가 계산됩니다. 고유 한 기본 글꼴 크기와 영향을받지 않는 그리드 중단 점을 가지려면 $ rem-base 를 픽셀 단위 인 $ global-font-size 값으로 설정하십시오.
그림 물감
링크 및 버튼 과 같은 대화 형 요소 는 SASS 변수 $ primary-color 에서 가져온 기본 파란색 음영을 사용 합니다 . 구성 요소는 보조, 경고, 성공 및 경고 와 같은 색상을 가질 수도 있습니다 . 자세한 내용은 여기를 확인 하십시오 .
SASS 참조
변수
다음 표에는 _settings.scss 프로젝트에서 구성 요소의 기본 스타일을 사용자 정의하는 데 사용되는 SASS 변수가 나열되어 있습니다 .
| Sr. 아니. | 이름 및 설명 | 유형 | 기본값 |
|---|---|---|---|
| 1 | $global-width 사이트의 전역 너비를 나타냅니다. 그리드의 행 너비를 결정하는 데 사용됩니다. |
번호 | rem-calc (1200) |
| 2 | $global-font-size <html> 및 <body>에 적용된 글꼴 크기를 나타냅니다 . 기본적으로 100 %로 설정되어 있으며 사용자의 브라우저 설정 값이 상속됩니다. |
번호 | 100 % |
| 삼 | $global-lineheight 모든 유형의 기본 선 높이를 나타냅니다. $ global-lineheight 는 24px이고 $ global-font-size 는 16px로 설정됩니다. |
번호 | 1.5 |
| 4 | $primary-color 링크 및 버튼과 같은 대화 형 구성 요소에 색상을 제공합니다. |
색깔 | # 2199e8 |
| 5 | $secondary-color .secondary 클래스 를 지원하는 구성 요소와 함께 사용됩니다 . |
색깔 | # 777 |
| 6 | $success-color .success 클래스 와 함께 사용할 때 긍정적 인 상태 또는 작업을 나타냅니다 . |
색깔 | # 3adb76 |
| 7 | $warning-color .warning 클래스 와 함께 사용할 때주의 상태 또는 작업을 나타냅니다 . |
색깔 | # ffae00 |
| 8 | $alert-color .alert 클래스 와 함께 사용하면 부정적인 상태 또는 작업을 나타냅니다 . |
색깔 | # ec5840 |
| 9 | $light-gray 밝은 회색 UI 항목에 사용됩니다. |
색깔 | # e6e6e6 |
| 10 | $medium-gray 중간 회색 UI 항목에 사용됩니다. |
색깔 | #cacaca |
| 11 | $dark-gray 진한 회색 UI 항목에 사용됩니다. |
색깔 | # 8a8a8a |
| 12 | $black 블랙 UI 아이템에 사용됩니다. |
색깔 | # 0a0a0a |
| 13 | $white 흰색 UI 항목에 사용됩니다. |
색깔 | # 페 페페 |
| 14 | $body-background 바디의 배경색을 나타냅니다. |
색깔 | $ 흰색 |
| 15 | $body-font-color 본문의 텍스트 색상을 나타냅니다. |
색깔 | $ 블랙 |
| 16 | $body-font-family 본문의 글꼴 목록을 나타냅니다. |
명부 | 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif |
| 17 | $body-antialiased 앤티 앨리어싱 유형은 CSS 속성 -webkit-font-smoothing 및 -moz-osx-font-smoothing을 사용 하여이 속성을 true 로 설정하여 활성화됩니다 . |
부울 | 진실 |
| 18 | $global-margin 구성 요소의 글로벌 마진 값을 나타냅니다. |
번호 | 1rem |
| 19 | $global-padding 구성 요소의 전역 패딩 값을 나타냅니다. |
번호 | 1rem |
| 20 | $global-margin 구성 요소간에 사용되는 글로벌 마진 값을 나타냅니다. |
번호 | 1rem |
| 21 | $global-weight-normal 일반 유형의 전역 글꼴 두께를 나타냅니다. |
키워드 또는 번호 | 표준 |
| 22 | $global-weight-bold 굵은 글꼴의 전체 글꼴 두께를 나타냅니다. |
키워드 또는 번호 | 굵게 |
| 23 | $global-radius 테두리 반경이있는 모든 요소의 전역 값을 나타냅니다. |
번호 | 0 |
| 24 | $global-text-direction CSS의 텍스트 방향을 ltr 또는 rtl로 설정합니다. |
ltr |