Submit Search
Upload
9.component style
•
1 like
•
526 views
Daniel Lim
Follow
styled-components
Read less
Read more
Report
Share
Report
Share
1 of 16
Download now
Download to read offline
Recommended
Swagger? OAS? with NodeJS
Swagger? OAS? with NodeJS
Daniel Lim
Swagger와 OAS를 알아보고 NodeJS에서 활용해보자!
Sass 공부하기 slidshare
Sass 공부하기 slidshare
SangHun Lee
learn sass!!
처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차
Michael Yang
처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차
Michael Yang
1.케스케이딩 스타일 시트(CSS) 이해하기 2.CSS의 진화 과정 3.CSS와 HTML의 상호작용 원리 4.CSS 일반 규칙과 CSS3에서 추가된 속성 5.클래스 선택자와 아이디 선택자의 차이점
철지난최신CSS
철지난최신CSS
Wonjun Hwang
KitWorks Team Study
CSS Trend
CSS Trend
Wonjun Hwang
KitWorks Team Study
CSS Convention - BEM
CSS Convention - BEM
Wonjun Hwang
Kitworks Team Study
NAVER TECH CONCERT_FE2019_플랫폼 UI 개발 전략의 모든 것
NAVER TECH CONCERT_FE2019_플랫폼 UI 개발 전략의 모든 것
NAVER Engineering
UI 개발에 특화 된 FE 개발자로서 설계에 대한 대규모 플랫폼인 스마트에디터 One의 UI를 구현하면서 설계 부터 구현까지 발생한이슈들과 해결 과정의 경험담을 공유합니다.
Recommended
Swagger? OAS? with NodeJS
Swagger? OAS? with NodeJS
Daniel Lim
Swagger와 OAS를 알아보고 NodeJS에서 활용해보자!
Sass 공부하기 slidshare
Sass 공부하기 slidshare
SangHun Lee
learn sass!!
처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차
Michael Yang
처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차
Michael Yang
1.케스케이딩 스타일 시트(CSS) 이해하기 2.CSS의 진화 과정 3.CSS와 HTML의 상호작용 원리 4.CSS 일반 규칙과 CSS3에서 추가된 속성 5.클래스 선택자와 아이디 선택자의 차이점
철지난최신CSS
철지난최신CSS
Wonjun Hwang
KitWorks Team Study
CSS Trend
CSS Trend
Wonjun Hwang
KitWorks Team Study
CSS Convention - BEM
CSS Convention - BEM
Wonjun Hwang
Kitworks Team Study
NAVER TECH CONCERT_FE2019_플랫폼 UI 개발 전략의 모든 것
NAVER TECH CONCERT_FE2019_플랫폼 UI 개발 전략의 모든 것
NAVER Engineering
UI 개발에 특화 된 FE 개발자로서 설계에 대한 대규모 플랫폼인 스마트에디터 One의 UI를 구현하면서 설계 부터 구현까지 발생한이슈들과 해결 과정의 경험담을 공유합니다.
Compass 사용법
Compass 사용법
Byoung Do Ahn
CSS3를 이용한 Compass 사용버
Compass
Compass
Judy Park
CSS관련 전처리기가 여러가지 있는데...그 중 compass에 관심이 가서 회사서 같이 공유하려고 만든자료입니다. 다른 분들께도 도움이 되었으면 좋겠네요.
[EWD2014]CLASS05
[EWD2014]CLASS05
JY LEE
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지
yongwoo Jeon
Web Standards Seminar 2006
Web Standards Seminar 2006
Taeyoung Yoon
Web Standards Seminar 2006
CSS 다시 파서 어디에 쓰나
CSS 다시 파서 어디에 쓰나
Chang W. Doh
Emocon 2017 S/S 발표: 개인 프로젝트였던 자바스크립트 기반의 CSS Parser를 왜 만들었는가에 대한 우문우답. Project GitHub: https://goo.gl/mK6DTU NPM Reg.: https://goo.gl/aEFYSI
웹표준 (XHTML + CSS)
웹표준 (XHTML + CSS)
ymtech
웹표준 (XHTML + CSS)
Bootstrap 살펴보기
Bootstrap 살펴보기
영배 현
[D2 campus]착 하면 척! chak 서비스 개발기
[D2 campus]착 하면 척! chak 서비스 개발기
NAVER D2
[D2 campus]착 하면 척! chak 서비스 개발기
Web_03_Front-end Advance
Web_03_Front-end Advance
team air @ Dimigo
한국디지털미디어고등학교 프로그래밍 교육 동아리 teamair에서 교육한 내용을 공유합니다.
디자인 시스템 디자인하기
디자인 시스템 디자인하기
sangyong lee
스케치 서울 썸머 밋업 + GDG 에서 발표한 문서입니다.
The LESS 기초 : The Dynamic Styleshee Language Basic
The LESS 기초 : The Dynamic Styleshee Language Basic
jeong seok yang
하드코딩하는사람들 상서님의 Less 발표자료 입니다.
03 jsx
03 jsx
Jay Lee
김민준님의 리엑트를 다루는 기술을 읽고 작성한 세미나 자료입니다.
Masonry
Masonry
seoultech,Design, Jung Hoe Jun
벽돌 쌓기 모양으로 요소를 배열해주는 라이브러리
HTML과 CSS
HTML과 CSS
dgmong
HTML과 CSS
Bootstrap에 대해서 정기철
Bootstrap에 대해서 정기철
Kichul Jung
Bootstrap research
CSS Reset
CSS Reset
Toby Yun
Asp.net Razor
Asp.net Razor
Sang Yun Kim
ASP.net Razor
테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)
테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)
SangIn Choung
상업적 이용 및 출처없는 무단제재를 금합니다. 테스트 교육 과정 중 3장 중 1절 테스터도 알아야 할 웹 개발 소개와 형상관리, 빌드, Jenkins 등의 기본 내용을 담고 있습니다.
TailwindCSS
TailwindCSS
Wonjun Hwang
Kitworks Team Study
내가 생각하는 개발자란?
내가 생각하는 개발자란?
Daniel Lim
지금까지 일을 하면서 느낀 점을 간략하게 정리했습니다.
개발자를 넘어 기술 리더로 가는 길을 읽고
개발자를 넘어 기술 리더로 가는 길을 읽고
Daniel Lim
스태프 엔지니어에 대하여 알아봅니다.
More Related Content
Similar to 9.component style
Compass 사용법
Compass 사용법
Byoung Do Ahn
CSS3를 이용한 Compass 사용버
Compass
Compass
Judy Park
CSS관련 전처리기가 여러가지 있는데...그 중 compass에 관심이 가서 회사서 같이 공유하려고 만든자료입니다. 다른 분들께도 도움이 되었으면 좋겠네요.
[EWD2014]CLASS05
[EWD2014]CLASS05
JY LEE
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지
yongwoo Jeon
Web Standards Seminar 2006
Web Standards Seminar 2006
Taeyoung Yoon
Web Standards Seminar 2006
CSS 다시 파서 어디에 쓰나
CSS 다시 파서 어디에 쓰나
Chang W. Doh
Emocon 2017 S/S 발표: 개인 프로젝트였던 자바스크립트 기반의 CSS Parser를 왜 만들었는가에 대한 우문우답. Project GitHub: https://goo.gl/mK6DTU NPM Reg.: https://goo.gl/aEFYSI
웹표준 (XHTML + CSS)
웹표준 (XHTML + CSS)
ymtech
웹표준 (XHTML + CSS)
Bootstrap 살펴보기
Bootstrap 살펴보기
영배 현
[D2 campus]착 하면 척! chak 서비스 개발기
[D2 campus]착 하면 척! chak 서비스 개발기
NAVER D2
[D2 campus]착 하면 척! chak 서비스 개발기
Web_03_Front-end Advance
Web_03_Front-end Advance
team air @ Dimigo
한국디지털미디어고등학교 프로그래밍 교육 동아리 teamair에서 교육한 내용을 공유합니다.
디자인 시스템 디자인하기
디자인 시스템 디자인하기
sangyong lee
스케치 서울 썸머 밋업 + GDG 에서 발표한 문서입니다.
The LESS 기초 : The Dynamic Styleshee Language Basic
The LESS 기초 : The Dynamic Styleshee Language Basic
jeong seok yang
하드코딩하는사람들 상서님의 Less 발표자료 입니다.
03 jsx
03 jsx
Jay Lee
김민준님의 리엑트를 다루는 기술을 읽고 작성한 세미나 자료입니다.
Masonry
Masonry
seoultech,Design, Jung Hoe Jun
벽돌 쌓기 모양으로 요소를 배열해주는 라이브러리
HTML과 CSS
HTML과 CSS
dgmong
HTML과 CSS
Bootstrap에 대해서 정기철
Bootstrap에 대해서 정기철
Kichul Jung
Bootstrap research
CSS Reset
CSS Reset
Toby Yun
Asp.net Razor
Asp.net Razor
Sang Yun Kim
ASP.net Razor
테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)
테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)
SangIn Choung
상업적 이용 및 출처없는 무단제재를 금합니다. 테스트 교육 과정 중 3장 중 1절 테스터도 알아야 할 웹 개발 소개와 형상관리, 빌드, Jenkins 등의 기본 내용을 담고 있습니다.
TailwindCSS
TailwindCSS
Wonjun Hwang
Kitworks Team Study
Similar to 9.component style
(20)
Compass 사용법
Compass 사용법
Compass
Compass
[EWD2014]CLASS05
[EWD2014]CLASS05
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지
Web Standards Seminar 2006
Web Standards Seminar 2006
CSS 다시 파서 어디에 쓰나
CSS 다시 파서 어디에 쓰나
웹표준 (XHTML + CSS)
웹표준 (XHTML + CSS)
Bootstrap 살펴보기
Bootstrap 살펴보기
[D2 campus]착 하면 척! chak 서비스 개발기
[D2 campus]착 하면 척! chak 서비스 개발기
Web_03_Front-end Advance
Web_03_Front-end Advance
디자인 시스템 디자인하기
디자인 시스템 디자인하기
The LESS 기초 : The Dynamic Styleshee Language Basic
The LESS 기초 : The Dynamic Styleshee Language Basic
03 jsx
03 jsx
Masonry
Masonry
HTML과 CSS
HTML과 CSS
Bootstrap에 대해서 정기철
Bootstrap에 대해서 정기철
CSS Reset
CSS Reset
Asp.net Razor
Asp.net Razor
테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)
테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)
TailwindCSS
TailwindCSS
More from Daniel Lim
내가 생각하는 개발자란?
내가 생각하는 개발자란?
Daniel Lim
지금까지 일을 하면서 느낀 점을 간략하게 정리했습니다.
개발자를 넘어 기술 리더로 가는 길을 읽고
개발자를 넘어 기술 리더로 가는 길을 읽고
Daniel Lim
스태프 엔지니어에 대하여 알아봅니다.
스크럼 101
스크럼 101
Daniel Lim
출근했더니 스크럼 마스터가 된 건에 관하여 라는 책을 읽고 중요한 내용만 정리 하였습니다. 내용이 괜찮으시면, 책을 구매해서 읽어보시는 것을 추천 드립니다!
nodejs_101.pdf
nodejs_101.pdf
Daniel Lim
nodejs는 Single Thread로 동작하지만, Asynchronous I/O 를 지원합니다.
For You
For You
Daniel Lim
10주년 결혼기념일 이벤트 by 수연
Nest js 101
Nest js 101
Daniel Lim
nestJS 에 대한 설명과 주요 설정을 알아 봅니다.
피드백 시스템
피드백 시스템
Daniel Lim
“칭찬은 고래도 춤추게 한다”라는 유명한 말의 뜻처럼 긍정적인 말이 주는 긍정적인 효과를 기대한다. 팀원을 공개 칭찬하는 것은 모범 사례를 만들어 낸다. 회사 내부적으로는 지속적인 피드백이 발생한다.
13.code split
13.code split
Daniel Lim
Reactjs에서 code split에 대하여 알아봅니다.
12.context api
12.context api
Daniel Lim
Reactjs에서 전역상태 관리
11.react router dom
11.react router dom
Daniel Lim
react router
7.component life cycle
7.component life cycle
Daniel Lim
component life cycle
8.hooks
8.hooks
Daniel Lim
Hooks
6.component repeat
6.component repeat
Daniel Lim
Reactjs에서 컴포넌트 반복 처리
4.event handling
4.event handling
Daniel Lim
React에서 event 처리에 대하여
5.ref 101
5.ref 101
Daniel Lim
ReactJS에서 ref를 사용에 대하여
3.component 101
3.component 101
Daniel Lim
16.8 이후 hook 기반의 컴포넌트 정리
2.jsx 101
2.jsx 101
Daniel Lim
jsx의 기초 정리
1.react 101
1.react 101
Daniel Lim
react의 기초 개념 정리
CuKu V1.3
CuKu V1.3
Daniel Lim
쿠버네트스 버젼 1.3 입니다.
Kubernetes object에 대하여
Kubernetes object에 대하여
Daniel Lim
Kubernetes object에 대하여 - pod - service - ingress
More from Daniel Lim
(20)
내가 생각하는 개발자란?
내가 생각하는 개발자란?
개발자를 넘어 기술 리더로 가는 길을 읽고
개발자를 넘어 기술 리더로 가는 길을 읽고
스크럼 101
스크럼 101
nodejs_101.pdf
nodejs_101.pdf
For You
For You
Nest js 101
Nest js 101
피드백 시스템
피드백 시스템
13.code split
13.code split
12.context api
12.context api
11.react router dom
11.react router dom
7.component life cycle
7.component life cycle
8.hooks
8.hooks
6.component repeat
6.component repeat
4.event handling
4.event handling
5.ref 101
5.ref 101
3.component 101
3.component 101
2.jsx 101
2.jsx 101
1.react 101
1.react 101
CuKu V1.3
CuKu V1.3
Kubernetes object에 대하여
Kubernetes object에 대하여
9.component style
1.
컴포넌트스타일 임광규 2020.ReactJS 1
2.
스타일링방식 컴포넌트에대한스타일링방식중다음에대하여알아봅니다. 일반CSS:컴포넌트를스타일링하는가장기본적인방식 Sass:자주사용되는CSS전처리기(per-processor)중하나로확장된CSS문법을사용하여 CSS코드를더욱쉽게작성할수있도록지원 CSSModule:스타일을작성할때CSS클래스가다른CSS클래스의이름과절대퉁돌하지않 도록고유한이름을자동으로생성해주는옵션 styled-components:스타일을자바스크립트파일에내장시키는방식으로스타일을작성함 과동시에해당스타일이적용된컴포넌트를만들수있도록지원 2020.ReactJS 2
3.
일반CSS css파일을import하여사용하는방식입니다. className(html에서는class)이름이나TAG,id등을기반으로스타일을정의합니다. 사용법 import './App.css'; 2020.ReactJS 3
4.
Sass Sass(SyntacticallyAwesomeStyleSheets)는CSS전처리기로복잡한작업을쉽게할수 있도록해주고스타일코드의재활용성을높여줄뿐만아니라코드의가독성을높여서유지보 수를더욱쉽게합니다. 파일확장자는.sass또는.scss로구분되며두확장자의문법이다릅니다. 2020.ReactJS 4
5.
.sassvs.scss Sass는두가지확장자를지원합니다.두문법의차이는.sass는중괄호({})와세미콜론(;)을사 용하지않습니다.반면.scss는기존CSS를작성하는방식과문법이크게다르지않습니다. .sass $font-stack: sans-serif body front: 100%
$font-stack .scss $font-stack: sans-serif; body { front: 100% $font-stack; } 2020.ReactJS 5
6.
node-sass설치 Sass를사용하기위해서는node-sass라는라이브러리를설치해주어야합니다. 이라이르버리는Sass를CSS로변환해줍니다. $ yarn add
node-sass or $ npm i node-sass 2020.ReactJS 6
7.
CSSModule CSSModule는CSS를불러와서사용할때클래스이름을고유한값,[파일이름]_[클래스이 름]__[해시값]형태로만들어서컴포넌트스타일클래스이름이중첩되는현상을방지해주는기 술입니다. 따로설정필요없이확장자를 [컴포넌트이름].module.css 로저장하면적용됩니다. 2020.ReactJS
7
8.
사용예제 CSSModule.module.css .wrapper { background: black; padding:
1rem; color: white; } CSSModule.js import React from 'react'; import styles from './CSSModule.module.css'; console.log(styles); export default () => { return <div className={styles.wrapper}>안녕하세요</div> } 2020.ReactJS 8
9.
결과예제 styles객체에는css를key-value형태로변환한JSON객체가있습니다. {wrapper: "CSSModule.wrapper__2DaeQ" } 2020.ReactJS
9
10.
classnames classnames라이브러리는CSS클래스를조건부로설정할때매우유용한라이브러리입니다. $ yarn add
classnames 사용예 import classNames from 'classnames'; classNames('one', 'two'); // = 'one two' classNames('one', {two:true}); // = 'one two' classNames('one', {two:false}); // = 'one' classNames('one', ['two', 'three']); // = 'one two three' 2020.ReactJS 10
11.
sass와함께사용이가능합니다. sass를사용할때도파일이름뒤에.module.scss확장자를사용해주면CSSModule로사용 할수있습니다. 2020.ReactJS 11
12.
localglobal :global:웹페이지전역에서사용되는경우사용 :local:CSSModule이아닌파일에서CSSModule사용할경우사용 :global .wrapper { /*
스타일 */ } :local .wrapper { /* 스타일 */ } 2020.ReactJS 12
13.
styled-components 자바스크립트파일안에스타일을선언하는방식입니다. 여러방식을CSS-in-JS라고부르며이와관련된라이브러는정말많습니다. 이중styled-components는가장많이사용되고있습니다. 설치 $ yarn add
styled-components 2020.ReactJS 13
14.
사용예 import React from
'react'; import styled, { css } from 'styled-components'; const Box = styled.div` /* props로 넣어 준 값을 직접 전달해 줄 수 있습니다. */ background: ${props => props.color || 'blue'}; padding: 1rem; display: flex; `; export default () => <Box color="black">테스트</Box> 2020.ReactJS 14
15.
styled-components장점 .props를이용할수있다. props로전달받은값을쉽게스타일에적용가능 props를참조하여조건부스타일링가능 .스타일된컴포넌트를제작할수있다. 재활용이가능한컴포넌트를생성 .템플릿문자를이용하여중복되는부분을간단하게사용 2020.ReactJS 15
16.
참고자료 다양한방식의리액트컴포넌트스타일링방식CSS,Sass,CSSModule,styled- components 2020.ReactJS 16
Download now