> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/make-better-netflix-website/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/make-better-netflix-website/architecture/css-version.md).

# CSS version

![Netflix 개선 프로젝트](https://img.shields.io/badge/Netflix%20Make%20Better!%20-%20-E50914?style=flat\&logo=netflix\&logoColor=E50914\&labelColor=000\&link=https://netflix.com)![Netflix 개선 프로젝트](https://img.shields.io/badge/Project%20Using%20Puer%20Modular%20CSS%20-%20-1572B6?style=flat\&logo=css3\&logoColor=1572B6\&labelColor=000\&link=https://netflix.com) 

## 스타일 구조

`React`의 모듈화 방식을 참고하여 구조를 구성했습니다.

* `엔트리`, `앱`, `구성`, `공통`, `컴포넌트`, `컨테이너`, `레이아웃`, `페이지`

```
stylesheets
│
├── style.css  # 엔트리 파일
├── app.css    # 앱 파일 
├── config.css # 구성 파일 (Color Scheme,...) 
│
├── common/             # 공통 모듈
│   ├── base.css        # 기본 스타일 (reset, a11y, ...)
│   ├── normalize.css   # 브라우저 기본 스타일 일반화
│   ├── typography.css  # 타이포그래피 스타일
│   ├── selection.css   # 셀렉션 스타일(::selection)
│   └── scrollbar.css   # 스크롤바 스타일
│
├── components/              # 컴포넌트 모듈
│   │   ## Header
│   ├── HomeLink.css         # 홈링크
│   │
│   │   ## ourstory
│   ├── OurStory.css         # 아워스토리
│   ├── Promotion.css        # 프로모션
│   │
│   │   ## NetflixIntro
│   ├── NetflixIntro.css     # 넷플릭스 인트로
│   ├── WatchOnTV.css        # 왓치 온 티비
│   ├── DownLoadAndWatch.css # 다운로드 앤 왓치
│   ├── WatchOnDevice.css    # 왓치 온 디바이스 
│   │
│   │   ## NetflixFaQ
│   ├── NetflixFaQ.css       # 넷플릭스 질문과 답변
│   ├── FaQList.css          # 질문과 답변 리스트
│   ├── FaQListItem.css      # 문과 답변 리스트 아이템
│   │
│   │   ## Footer
│   ├── AddressInfo.css      # 어드레스 인포
│   ├── Link.css             # 링크
│   ├── LinkList.css         # 링크 리스트
│   ├── LinkListItem.css     # 링크 리스트 아이템
│   │
│   │   ## Global
│   ├── Button.css           # 버튼
│   ├── Container.css        # 콘테이너
│   ├── Description.css      # 디스크립션
│   ├── Divider.css          # 디바이더
│   └── Dropdown.css         # 드롭다운
│
├── containers/           # 컨테이너 모듈  
│   ├── ourstory.css      # 아워스토리 
│   ├── netflixIntro.css  # 넷플릭스 인트로    
│   └── netflixFaQ.css    # 넷플릭스 FAQ  
│    
├── layout/         # 레이아웃 모듈  
│   ├── header.css  # 헤더   
│   └── footer.css  # 푸터  
│
└── pages/       # 페이지 모듈  
    └── home.css # 홈
```

![그림으로 본 스타일 구조 ](https://1395688247-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPJVY9pwxuf9ZCGI1gj%2F-MS56uo7yaD7aZzv1Fyr%2F-MS57Bij9cIGC5mM-BB-%2Fimage.png?alt=media\&token=84b63353-4fc0-4fb1-a3ab-a9d8dcfbd266)

## 네이밍 작성 규칙

스타일을 위한 이름 작성 규칙입니다.

### 컴포넌트

타이틀케이스(TitleCase) 방식으로 이름을 작성합니다.

```css
.Container { /* ... */ }
.HomeLink { /* ... */ }
.Link { /* ... */ }
.OurStory { /* ... */ }
.Promotion { /* ... */ }
```

### 페이지/레이아웃/공통/기타

카멜케이스(`camelCase`) 방식 + [BEM 개발 방법론](http://getbem.com/)(`Block__Element--Modifier`)으로 이름을 작성합니다.

```css
.netflixHeader { /* ... */ }
.netflixFooter { /* ... */ }

.ourStory { /* ... */ }
.ourStory__headline { /* ... */ }
.netflixIntro__downLoadAndWatch--reverse { /* ... */ }

.a11yHidden { /* ... */ }
```

## 웹 최적화 결과

![](https://1395688247-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPJVY9pwxuf9ZCGI1gj%2F-MPXR2fdlfKbJtBJigQW%2F-MPXRB5J-f16sXTkQPsm%2Fimage.png?alt=media\&token=ee450144-10ee-4e48-b2c8-cfd06d741ed3)