Web
-
Node.js & ParcelWeb/CSS 2019. 10. 29. 22:00
오늘은 PostCSS를 배우기 위해서 Node.js와 Parcel을 설치했다. Parcel : https://en.parceljs.org/ Node.js : https://nodejs.org/en/download/current/ Parcel Blazing fast, zero configuration web application bundler parceljs.org Download | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 강의에 나와 있지 않은 세부사항들은 구글링을 통해서 채워가며, 그래도 모르겠는 부분들은 유추해가며 겨우겨우 설치에 성공했다. 다른 사람들의 댓글과 강사님의 답변으..
-
CSS GridWeb/CSS 2019. 10. 29. 20:11
Grid Column(***Line을 기준으로 작성한다.) .box:first-child{ grid-column: 1/3; } Row Start and End(*Line을 기준으로 작성한다.) .box:first-child{ grid-column-start: 1; grid-column-end: 5; } 이렇게 작성하면 grid-column-start: 1; grid-column-end: -1; -1을 적으면 자동적으로 맨 마지막 line으로 이동하게 된다. 위처럼 적으면 한 라인을 다 차지하게 됨. (1 ~ -1 : 모든 범위를 의미함.) Line naming grid-template-columns: [coffee-line] 1fr [macaroon-line] 1fr [cake-line] 1fr [ame..
-
CSS-master 수강시작Web/CSS 2019. 10. 29. 15:57
grid-auto-columns https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns grid-auto-rows https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows fr(fraction의 약자) https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fr 공부하다가 헷갈리는 개념은 MDN에 검색하면 된다. + Grid는 매우 편한 기능이다. 그런데 댓글을 보다가 알았는데 React Native는 Grid를 지원하지 않는다고 한다. 아직 이게 정확히 무슨 의미인지는 모르겠지만 Grid기능없이 flexbox로만 웹을 짜야한다면 비교..