Materialize CSS

https://materializecss.com/
문제 발생:

because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

참조 답변 링크:https://stackoverflow.com/questions/48521971/mime-type-error-when-adding-a-css-file-to-angular/49269425#49269425

index를 수정할 필요가 없습니다.html, 홈페이지에 아래 코드를 추가하면 위의 오류

를 보고합니다

angular만 수정하면 됩니다.json "styles": [ "src/styles.css", "node_modules/materialize-css/dist/css/materialize.min.css"],

0. 요약: Class
1. set background color

class: card-panel

사용 방법:

class="card-panel teal lighten-2"

class="card-panel dark"

2. set text color

class: colorName-text

사용 방법: apply a text color,just append-text to the color class

class="teal-text text-lighten-2"

class="dark-text text-darken-2"

3. set the body content's width

class: container set the body content's width to the window width of ~xxx% .s 90% .m 85% .l 70% .xl 70%

사용 방법:

ASD

4. align your content

vertical align 1.1 class: valign-wrapper1.2 사용 방법: div class="valign-wrapper">

horizon text align 2.1 class: left-alignright-aligncenter-align2.2 사용 방법:

This should be right aligned

5. quickly float things
which is used to avoid specificity issues

class: left , right

사용 방법: div class="left">div class="right">

6. navbar
6.1 navbar 정렬 설정

class: class="brand-logo center"로고 가운데 설정navbar links 가운데 설정

사용 방법:

6.2 Active Items

클래스active를 li 탭에 추가하면 현재 페이지를 표시합니다

class: class="active"

사용 방법:

JavaScript

6.3 Extended Navbar with Tabs
확장된 구성 요소를navbar에 추가하려면 클래스nav-extended를 외부에 추가해야 합니다

class: nav-extended

사용 방법:

6.4 Fixed Navbar

To make the navbar fixed , you have to add an outer wrapping div with the class navbar-fixed .

This will offset your other content while making your nav fixed.

You can adjust the height of this outer div to change how much offset is on your content.

class: navbar-fixed

사용 방법:

6.5 Navbar 드롭다운 메뉴

To add a navbar dropdown menu, add the ul dropdown structure into the page.

Add an element to trigger the dropdown menu

Make sure to supply the id of the dropdown structure to the data-target attribute of the dropdown trigger.

class: navbar-fixed

사용 방법:

---

\*****      \*****

---

## 1. Color
> 1. background color:    ``` class="card-panel teal lighten-2"```
> 2. text color:  ```class="blue-text text-darken-2"```

//Background Color This is a card panel with a teal lighten-2 class //Text color ,To apply a text color, just append ' -text ' to the color class like this This is a card panel with dark blue text

## 2. Grid   
> - standard 12 column fluid responsive grid system.
> 1.   grid     
> 2. container          70% ，       。
The container class is set to ~70% of the window width. It helps you center and contain your page content. We use the container to contain our body content.
> 3.  grid       ：
         ，  grid        12  
> 4.    column         row   ，     class       ```col ```      div         column。
> 5.  ```offset-s6```       6 
> 6. ```div class="col s7 push-s5"``` , ```class="col s5 pull-s7``` push    ，pull    
> 7.  ```class="section"``` used for simple top and bottom padding
> 8. ```class="divider"``` are 1 pixel lines that help break up your content.(     )
> 9. 

  





### 1.    columns contained inside a  row

this div is 6-columns wide on all screen sizes

### 2.   push and pull

This div is 7-columns wide on pushed to the right by 5-columns. 5-columns wide pulled to the left by 7-columns.

### 3.   offset

6-columns 6-columns

### 4.   section and divider

section1 stuff

### 5.  Promotion Table
3      div，     div     4-columns

Promo Content 1 goes heres Promo Content 2 goes heres Promo Content 3 goes heres

### 6.  Side Navigation Layout

Grey navigation panel Teal page content

### 7.  create responsive layouts
How to layout elements using our grid system. Show you how to design you layouts so that they look great on all screen sizes.
**Screen Sizes**
| | Mobile Devices | Tablet Devices | Desktop Devices  | Large Desktop Devices |
:-: | :-: | :-: | :-: | :-: |
|screen sizes|<= 600px |<= 600px | > 992px | > 1200px | 
class prefix | .s | .m | .l  | .xl 
container width| 90% | 85% | 70% | 70%
number of columns| 12 | 12 | 12 |12|
where s signifies the screen class-prefix (s = small, m = medium, l = large) 
#### 7.1 adding responsiveness
-             

I am always full-width (col s12) I am full-width on mobile (col s12 m6)

          
#### 7.2 Responsive Side Navigation Layout

L