popo story popo story

* Sass: Syntactically Awesome Style Sheets 문법적으로 매우 멋진 스타일시트 Sass는 CSS 전처리기로 복잡한작업을 쉽게 하고, 스타일 코드의 재활용성을 높여준다. 또한 코드의 가독성을 높여서 유지보수를 더욱 쉽게 해준다 Sass 에서 지원하는 두 가지 확장자 (1) .scss (2) .sass 01. Scss $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } - Scss는 기본 CSS와 크게 다르지 않음 - 주로 Scss가 더 많이 사용됨 02. Sass $font-stack: Helvetica, sans-serif ..

CSS는 가장 기본적인 컴포넌트 스타일링 방식이다. CSS를 작성할때 가장 중요한것은 CSS 클래스를 중복되지 않게 하는것이다 CSS 클래스가 중복되는 것을 방지하는 여러가지 방안 (1) 이름을 지을때 규칙을 사용 (2) CSS Selector 활용 01. 이름을 짓는 규칙 : 클래스 이름에 컴포넌트 이름을 포함시키기 * BEM 네이밍? 해당 클래스가 어디에서 어떤 용도로 사용되는지 명확하게 작성 EX) .card_title-primary 02. CSS Selector CSS 클래스가 특정 클래스 내부에 있는 경우만 스타일을 적용할 수 있다. (ex) .App 안에 들어있는 .logo 에 스타일을 적용하고 싶다면 // css 파일 .App.logo { animation: App-logo-spin infi..

■ JSX의 장점 - 보기 쉽고 익숙하다 - 활용도가 높다! ■ JSX 문법 - 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다 function App() { 리액트 안녕! 잘 작동하니? } export default App;​ * 코드 상단에 import { Fragment } from 'react' ; 를 추가하면 대신 로 쓸 수 있다. Fragment는 문구 생략도 가능하다. function App() { 리액트 안녕! 잘 작동하니? } export default App;​ ■ 자바스크립트 표현 - JSX 내부에서 코드를 { } 로 감싸준다. function App() { const name = '리액트'; {name} 안녕! 잘 작동하니? } export default App;..