전체 글
-
css reset프로그래밍/HTML, CSS 2020. 10. 18. 16:00
styled-component 를 사용하는 경우, GlobalStyles 를 만들어 적용할 수 있다. import reset 하여 전체 css reset 이 가능하다. 만든 GlobalStyles.js 파일은 index.js 에서 import 시켜준다 // GlobalStyles.js import { createGlobalStyle } from 'styled-components'; import reset from 'styled-reset'; const GlobalStyles = createGlobalStyle` ${reset} *{ box-sizing:border-box } ... `; export default GlobalStyles; // App.js import theme from 'styles/t..
-
github pages 배포프로그래밍/Git 2020. 9. 30. 16:25
배포하려면, 작업하던 파일을 그대로 올리는 게 아니고 build 용 파일을 생성한 후 올려야 한다. 웹 브라우저는 html, css, js 3개의 형식 파일만 해석할 수 있기 때문이다. react 로 build 하면 모든 파일을 html, css, js 파일로 바꿔준다. 이런 과정을 컴파일 또는 build 라고 한다. build 파일은 우리가 만든 코드가 최적화돼 있고, 매우 가볍게 압축돼 있다 github pages 배포 0. repository 는 public 저장소로 한다 1. gh-pages 라는 브랜치를 만들고, remote 에도 꼭 반영해준다 (배포하고자 하는 소스 코드가 해당 branch 에 있다는 것을 알려주고자 반드시 gh-pages 라는 이름으로 만들어야 한다) git branch gh..
-
Bootstrap Container, Grid프로그래밍/HTML, CSS 2020. 9. 30. 15:10
✔ BS Container - container, container-fluid 2가지 종류가 있다 .container { /* 반응형으로 동작, 고정폭을 가진다. width, margin 설정을 통해 container 와 browser window 사이 여백을 조정 */ width: 1200px; } .container-fluid { /* viewport 전체 폭을 모두 차지하는 container box */ } ✔ BS Grid - 화면을 분할해 원하는 레이아웃을 잡기 위해 정의된 것으로, 1개의 row 를 12개 column 으로 분할할 수 있고, 각각을 조합할 수 있다 - 화면 크기별로 5개 옵션을 제공하므로, 화면 크기에 따라 column 의 개수 조합을 다르게 설정할 수 있다 .col- (ext..