분류 전체보기 (42) 썸네일형 리스트형 3-3. CSS in React Reactjs에서 CSS를 활용하는 3가지 방법 - 3. styled-components styled-components 는 JS 와 CSS가 분리된 것을 보완하는 가장 널리 쓰이는 방법! 별도 설치가 필요하다 yarn add styled-components npm install styled-components 설치 완료~! styled-components를 사용할 컴포넌트 내에서 import 해 사용한다 import styled from "styld-components"; 이전 포스팅과 동일하게 Header의 ul태그에 스타일을 주고 싶다면! const List = styled.ul` display: flex; &:hover { background-color: blue; } `; 위와 같이 사용할 수 .. 3-2. CSS in React Reactjs에서 CSS를 활용하는 3가지 방법 - 2. css 모듈 이용하기 css module을 이용하면 className 을 임의화하여 css가 global이 아닌 local이 되도록 함! 1. css 파일을 module.css로 바꿔주기 (CRA를 통해 만든 프로젝트이기때문에 가능) 2. css 파일에 className 넣어주기 /* Header.module.css */ .navList { display: flex; } .navList:hover { background-color: blue; } 3. import 방식을 변경해주기 like javascript (꼭 styles라고 할 필요 없음. 사용하려는 변수 넣어주면 됨) // 기존 import 'Header.css'; //변경 import s.. 3-1. CSS in React Reactjs에서 CSS를 활용하는 3가지 방법 - 1. css 파일 import 하기 .css 작성법은 react 라고 해서 특별할 것이 없다. ${적용할 범위} { css 속성: 값 } 작성한 css 파일을 App.js에서 import 해준다. import '../style.css' // 각자 경로에 맞춰 class App extends Component { ... } export default App css 파일 작성법은 동일하지만 react 에서 class 를 사용하고 싶으면 className이라 써야한다. css파일을 사용할 경우 단점은 컴포넌트와 css가 분리되어 있다는 것. React 의 장점인 컴포넌트의 캡슐화, 모듈화에 반한다. 전체 어플리케이션에서 하나의 컴포넌트를 가져오면 그 안에 j.. 소스트리 다운 및 git 사용 소스트리 다운로드는 아래 링크를 참조하여 진행함https://coding-factory.tistory.com/249** 위 링크와 설치 시 차이가 있던 점은 Atlassian이 없었음 ㅠㅠ 구글계정 로그인하고 이미 아틀라시안 등록됐고 빅툽?클라우드 계정 만들라해서 그냥 그거만 만듦. [AWC EC2] Ubuntu서버에 git 설치하고 프로젝트 clone하기 지난번 포스팅에서 다음 포스팅엔 S3서버 설치를 하겠다했으나!! 나의 필요에 의해 AWS Ubuntu 서버에 git을 설치하고 프로젝트를 clone해 오는 과정을 기록하려 한다! 먼저 터미널 접속 후 아래 명령어로 git 설치 ! sudo apt install git 설치가 완료되었다면, 설치 버전을 확인해서 한번더 설치가 잘 끝났단 사실을 확인할 수 있어요! git --version git 계정 정보를 서버에 저장할게요! github을 사용하시는 분들은 user.name이 github닉네임!! git config --global user.name "유저명" git config --global user.mail "메일" 그럼 클론받을 프로젝트를 담을 경로를 생성하고 경로로 이동하겠습니당! sudo mkd.. [css] display:flex flexbox 학습 2 지난 포스팅에 flexbox 의 기본 개념을 학습할 수 있는 게임과 개념들을 소개했다. 그리고 이번엔 flexbox의 속성을 이용해 디펜스 게임을 할 수 있는 링크를 소개하려 한다. http://www.flexboxdefense.com/ Flexbox Defense Your job is to stop the incoming enemies from getting past your defenses. Unlike other tower defense games, you must position your towers using CSS! www.flexboxdefense.com tower-group-1의 영역으로 잡힌 곳에 적절한 css 속성을 추가해 tower 들이 보라색들을 공격해 점수를 따내는 게임이다 각 레.. 2-1. React Router React Router router 기능 사용을 위해 react-router-dom 설치 yarn add react-router-dom npm install react-router-dom https://www.npmjs.com/package/react-router-dom Hash Router / Browser Router 대표적으로 두가지 방식의 라우터가 있다. 가장 기본적인 라우터 설정을 예시로 알아보자 Router.js import React from "react"; import { HashRouter as Router, Route } from 'react-router-dom'; import Home from "../Router/Home"; // 보여줄 컴포넌트와 그 경로 export default .. [css] display:flex flexbox 학습 옛날(?)엔 css 속성을 다룰때 display: block 과 margin, padding 값으로 요소들을 정렬하곤 했다. 물론 이 속성들이 지금은 안쓰이냐? 절대 아니다! 특히 margin, padding은 여전히 UI요소를 적절히 배치하는데 중요한 속성들이다 그러나 display: flex 를 사용하여 훨씬 쉽고 편하게 요소들을 정렬하는 속성이 있다 관련 내용을 게임을 통해 학습할 수 있는 사이트가 있다. http://flexboxfroggy.com/#ko 다음은 위 사이트의 내용을 정리 한 것. display: flex; 와 함께 사용할 수 있는 css 속성들 justify-content flex-start: 요소들을 컨테이너의 왼쪽으로 정렬 flex-end: 요소들을 컨테이너의 오른쪽으로 정렬 .. 이전 1 2 3 4 5 6 다음
