{"id":27349429,"url":"https://github.com/chebread/css-usage","last_synced_at":"2025-06-17T05:35:51.367Z","repository":{"id":264993469,"uuid":"832487878","full_name":"chebread/css-usage","owner":"chebread","description":"CSS, CSS 프레임워크/라이브러리 사용법 정리","archived":false,"fork":false,"pushed_at":"2024-07-23T06:18:50.000Z","size":2,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-12T19:17:17.305Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chebread.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-23T06:07:06.000Z","updated_at":"2024-08-17T19:34:45.000Z","dependencies_parsed_at":"2024-11-27T14:18:58.631Z","dependency_job_id":null,"html_url":"https://github.com/chebread/css-usage","commit_stats":null,"previous_names":["chebread/css-usage"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chebread%2Fcss-usage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chebread%2Fcss-usage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chebread%2Fcss-usage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chebread%2Fcss-usage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chebread","download_url":"https://codeload.github.com/chebread/css-usage/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248618275,"owners_count":21134202,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-04-12T19:17:21.681Z","updated_at":"2025-04-12T19:17:25.016Z","avatar_url":"https://github.com/chebread.png","language":null,"readme":"## CSS Module 사용법\n\n### CSS 작성법\n\n- `foo.module.css` 로 파일명을 선언합니다.\n\n- camelCase를 사용하여 클래스 이름을 선언합니다.\n\n```css\n/* box.module.css */\n\n.Box {\n  background: black;\n  color: white;\n  padding: 2rem;\n}\n```\n\n### 싱글 스타일링\n\n```jsx\nimport React from \"react\";\nimport styles from \"./Box.module.css\";\n\nfunction Box() {\n  return \u003cdiv className={styles.Box}\u003e{styles.Box}\u003c/div\u003e;\n}\n\nexport default Box;\n```\n\n### 멀티 스타일링\n\n`${style.foo1} ${style.foo2}` 스타일링\n\n```jsx\nimport React from \"react\";\nimport styles from \"./App.module.css\";\n\nconst App = () =\u003e {\n  return (\n    \u003cdiv className={`${styles.container1} ${styles.container2}`}\u003e\n      \u003ch1\u003eI have two Classes\u003c/h1\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default App;\n```\n\n`[styles.container1, styles.container2].join(\" \")` 스타일링\n\n```jsx\nimport React from \"react\";\nimport styles from \"./App.module.css\";\n\nconst App = () =\u003e {\n  return (\n    \u003cdiv className={[styles.container1, styles.container2].join(\" \")}\u003e\n      \u003ch1\u003eI have two Classes\u003c/h1\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\nclsx 스타일링\n\n\u003e https://www.npmjs.com/package/clsx\n\n```jsx\n\u003cdiv className={clsx(styles.colorRed, styles.backgroundYellow)}\u003e\n  // ....\n\u003c/div\u003e\n```\n\nclassnames 스타일링\n\n### 조건부 스타일링\n\n인라인 조건부 스타일링\n\n```jsx\n\u003cinput className={`${styles.one} ${condition ? styles.two : ''}`}\u003e\n```\n\n변수 조건부 스타일링\n\n```jsx\nimport React from 'react';\nimport styles from './MyComponent.module.css';\n\nconst MyComponent = ({ isSpecial }) =\u003e {\n  // 조건에 따라 클래스를 동적으로 할당\n  const containerClassName = isSpecial ? styles.specialContainer : styles.normalContainer;\n\n  return (\n    \u003cdiv className={containerClassName}\u003e\n      \u003cp className={styles.text}\u003eHello, World!\u003c/p\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default MyComponent;\n```\n\n- clsx 조건부 스타일링\n\n```jsx\n\u003cinput className={\n    clsx(styles.input, // 조건이랑 상관없이 무조건 들어감\n         {\n          [styles.inputError]: !isSuccess \u0026\u0026 isPasswordConfirm,\n          [styles.colorBlue]: isChecked\n          [styles.something]: true\n         }\n        )}\n  /\u003e\n```\n\n### 전역 스타일링\n\n특정 클래스 스타일을 전역으로 사용하고 싶으면, `:global` 을 붙이면 됩니다.\n\n`:global` 을 사용했다면, `import foo.module.css` 파일을 하지 않아도 전역 스타일을 사용할 수 있습니다.\n\n```css\n/* foo.module.css */\n\n:global .foo {\n\t...\n}\n```\n\n또한 CSS 파일의 전체 스타일을 전역으로 사용하고 싶다면, `global.css` 처럼 일반 CSS를 활용하면 됩니다.\n\n```css\nhtml,\nbody {\n\t...\n}\n```\n\n### 로컬 스타일링\n\n`.module.css` 가 아닌 `.css` 파일에서 `.module.css` 처럼 사용하고 싶다면, 클래스 스타일 앞에 `:local` 을 붙이면 된다.\n\n```css\n/* foo.css */\n\n:local .foo {\n\t...\n}\n```\n\n### 동적 스타일링\n\n`style` 태그를 사용하여 동적 스타일링을 구현할 수 있다.\n\n```css\n/* CardPreview.module.css */\n\n.card {\n  display: flex;\n  padding: 0px 12px 4px 12px;\n  align-items: center;\n  margin: 0 auto 0 auto;\n  width: 208px;\n  height: 123px;\n  border-radius: 5px;\n  border: none;\n  cursor: pointer;\n  transition: 0.3s;\n  box-shadow: 3px 3px 10px #667085;\n}\n\n.chip {\n  width: 40px;\n  height: 26px;\n  background-color: #cbba64;\n  border-radius: 4px;\n}\n```\n\n```jsx\nimport { useState } from \"react\";\nimport styles from \"./CardPreview.module.css\";\nimport BlackButton from \"../Button/BlackButton/BlackButton\";\n\nconst PostCssCardPreview = () =\u003e {\n  const [cardColor, setCardColor] = useState(\"\");\n\n  const handleBlackButton = () =\u003e {\n    cardColor === \"\" ? setCardColor(\"black\") : setCardColor(\"\");\n  };\n\n  return (\n    \u003carticle\u003e\n      \u003csection className={styles.card} style={{ backgroundColor: cardColor }}\u003e\n        \u003cdiv className={styles.chip} /\u003e\n      \u003c/section\u003e\n      \u003cBlackButton onClick={handleBlackButton} /\u003e\n    \u003c/article\u003e\n  );\n};\n\nexport default PostCssCardPreview;\n```\n\n### 스타일 재사용\n\n\u003e - https://velog.io/@art11010/CSS-Modules\n\u003e - https://github.com/css-modules/css-modules/blob/master/docs/composition.md\n\n#### Composition\n같은 css 파일에서 특정 className에 해당하는 스타일 코드를 composes하면 하여 특정 className 정의한 스타일 코드를 그대로 가져옴\n\n```css\n.className {\n color: green;\n background: red;\n}\n\n.otherClassName {\n composes: className;\n color: yellow;\n}\n```\n#### Dependencies\n다른 css 파일에서 특정 className에 해당하는 스타일 코드를 composes 할 수 있음\n\n```css\n.otherClassName {\n composes: className from \"./style.css\";\n}\n```\n\n### SCSS로 전환\n\n파일명을 `foo.module.scss` 로 변경하면 됩니다.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchebread%2Fcss-usage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchebread%2Fcss-usage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchebread%2Fcss-usage/lists"}