Skip to content

Commit 4fa5756

Browse files
linuxullinuxul
committed
[feat] 09. 컴포넌트 스타일링 CSSModule velopert#9.5
1 parent 217b288 commit 4fa5756

7 files changed

Lines changed: 65 additions & 4 deletions

File tree

‎study/styling-react/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,12 @@
2828
"fs-extra": "^10.0.0",
2929
"html-webpack-plugin": "^5.5.0",
3030
"identity-obj-proxy": "^3.0.0",
31+
"include-media": "^2.0.0",
3132
"jest": "^27.4.3",
3233
"jest-resolve": "^27.4.2",
3334
"jest-watch-typeahead": "^1.0.0",
3435
"mini-css-extract-plugin": "^2.4.5",
36+
"open-color": "^1.9.1",
3537
"postcss": "^8.4.4",
3638
"postcss-flexbugs-fixes": "^5.0.2",
3739
"postcss-loader": "^6.2.1",

‎study/styling-react/src/App.js‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,28 @@ import logo from './logo.svg';
22
import './App.css';
33
import { Component } from 'react';
44
import SassComponent from './SassComponent';
5+
import CSSModele from './CSSModule';
56

67
class App extends Component {
78
render() {
89
return (
910
<div>
10-
<SassComponent></SassComponent>
11+
<CSSModele></CSSModele>
1112
</div>
1213
);
1314
}
1415
}
1516

17+
// class App extends Component {
18+
// render() {
19+
// return (
20+
// <div>
21+
// <SassComponent></SassComponent>
22+
// </div>
23+
// );
24+
// }
25+
// }
26+
1627
// class App extends Component {
1728
// render() {
1829
// return (

‎study/styling-react/src/CSSModule.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import styles from './CSSModule.module.css';
2+
3+
const CSSModele = () => {
4+
console.log(styles)
5+
return (
6+
<div className={`${styles.wrapper} ${styles.inverted}`}>
7+
안녕하세요, 저는 <span className="something">CSS Module!</span>
8+
</div>
9+
)
10+
}
11+
12+
export default CSSModele

‎study/styling-react/src/CSSModule.module.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
2+
.wrapper {
3+
background: black;
4+
padding: 1rem;
5+
color: white;
6+
font-size: 2rem;
7+
}
8+
9+
.inverted {
10+
color: black;
11+
background: white;
12+
border: 1px solid black;
13+
}
14+
15+
:global .something {
16+
font-weight: 800;
17+
color: aqua;
18+
background: green;
19+
}

‎study/styling-react/src/SassComponent.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
.SassComponent {
44
display: flex;
5+
background: $oc-gray-2;
6+
@include media('<768px') {
7+
background: $oc-gray-9;
8+
}
59

610
.box {
711
background: red;

‎study/styling-react/src/styles/utils.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@import '~include-media/dist/include-media';
2+
@import '~open-color/open-color';
3+
14
$red: #fa5252;
25
$orange: #fd7e14;
36
$yellow: #fcc419;

‎study/styling-react/yarn.lock‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2148,9 +2148,9 @@
21482148
"@types/react" "*"
21492149

21502150
"@types/react@*":
2151-
version "18.2.55"
2152-
resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.55.tgz#38141821b7084404b5013742bc4ae08e44da7a67"
2153-
integrity sha512-Y2Tz5P4yz23brwm2d7jNon39qoAtMMmalOQv6+fEFt1mT+FcM3D841wDpoUvFXhaYenuROCy3FZYqdTjM7qVyA==
2151+
version "18.2.56"
2152+
resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.56.tgz#2d3e9021a0b6eb5bfc227761cc61b1c6dc6e0cd8"
2153+
integrity sha512-NpwHDMkS/EFZF2dONFQHgkPRwhvgq/OAvIaGQzxGSBmaeR++kTg6njr15Vatz0/2VcCEwJQFi6Jf4Q0qBu0rLA==
21542154
dependencies:
21552155
"@types/prop-types" "*"
21562156
"@types/scheduler" "*"
@@ -5258,6 +5258,11 @@ imurmurhash@^0.1.4:
52585258
resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
52595259
integrity sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==
52605260

5261+
include-media@^2.0.0:
5262+
version "2.0.0"
5263+
resolved "https://registry.yarnpkg.com/include-media/-/include-media-2.0.0.tgz#21f80a4b40addd1da5d500cf8bf3b123cb1136a6"
5264+
integrity sha512-LSJcffPYIZ/Kln0rIi5UhqQbZxElDCMYA4dPC5MI1rkwwjptgEiOicHnzB0MMhMNJver0+4zULb4MKlgDyapZg==
5265+
52615266
indent-string@^4.0.0:
52625267
version "4.0.0"
52635268
resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
@@ -6904,6 +6909,11 @@ onetime@^5.1.2:
69046909
dependencies:
69056910
mimic-fn "^2.1.0"
69066911

6912+
open-color@^1.9.1:
6913+
version "1.9.1"
6914+
resolved "https://registry.yarnpkg.com/open-color/-/open-color-1.9.1.tgz#a6e6328f60eff7aa60e3e8fcfa50f53ff3eece35"
6915+
integrity sha512-vCseG/EQ6/RcvxhUcGJiHViOgrtz4x0XbZepXvKik66TMGkvbmjeJrKFyBEx6daG5rNyyd14zYXhz0hZVwQFOw==
6916+
69076917
open@^8.0.9, open@^8.4.0:
69086918
version "8.4.2"
69096919
resolved "https://registry.yarnpkg.com/open/-/open-8.4.2.tgz#5b5ffe2a8f793dcd2aad73e550cb87b59cb084f9"

0 commit comments

Comments
 (0)