차근차근 배움터

첫번째 레이아웃은 컨테이너 하나가 중앙에 정렬되어 있다 그리고 헤더가 있고 헤더 안에 로고, 서치바, 기타 네비게이션 아이콘들이 있다 그리고 아래 사이드바가 있고, overview가 오른쪽에 있다. max-width 를 사용하는 이유 viewport가 120rem 보다 작으면 줄어들 수 있기 때문 변수는 색상 뿐만 아니라 그림자 속성 같은 것도 저장할 수 있다 미묘하게 다른 회색을 지정했다. flex: 0 0 18%; grow 0 > 늘어나지도 않고 shrink 0 > 줄어들지도 않고 18%를 유지

이번 프로젝트의 목표는 flex-box 사용법을 익히는 것이기 때문에 architecture와 같은 것들에 신경쓰지 않을 것이다. 이번에는 scss의 변수를 지정하는 것이 아니라 css 지정 변수를 사용할 것이다. 왜 이것이 좋냐? prefixer 그 변환하는 과정을 거치지 않아도 되기 때문이다. css 변수는 연속적으로 상속된다. root psedo class 여기 변수를 선언하면 모든 문서에서 사용할 수 있다 :root 를 이용하여 변수를 선언하고 var(변수이름) 형태를 이용해서 활해보았다 _base.scss /* COLORS Primary: #eb2f64 Primary light: #FF3366 Primary dark: #BA265D Grey light 1: #faf9f9 Grey light 2:..

신나는 프로젝트를 하나 만들 것이다 이 인터페이스를 구현할 것이다 { "name": "trillo", "version": "1.0.0", "description": "Trillo app", "main": "index.js", "scripts": { "watch:sass": "node-sass sass/main.scss css/style.css -w", "devserver": "live-server", "start": "npm-run-all --parallel devserver watch:sass", "compile:sass": "node-sass sass/main.scss css/style.comp.css", "prefix:css": "postcss --use autoprefixer -b 'last 10..

flex-wrap 기본값 : no-wrap wrap을 하게 되면 감싸기 때문에 넘치는 요소들이 다음 줄로 내려가게 된다 align-content align-content stretch 속성은 container 늘리는 것 justify-content와 유사하다

1. align-self 2. flex-grow 3. align-self 개별 요소 하나만 정렬 방향을 바꿀 수 있다 그리고 order를 이용해서 순서도 변경할 수 있다 제일 앞에 두고 싶으면 -1을 이용한다 기본값은 order: 0 이다 flex-grow 최대한 많은 공간을 차지한다. flex-grow의 숫자는 다른 요소들과 비교하여 크기를 측정하기 때문에, 그 때만 관련이 있다. 그리고 개별 아이템에 flex: 1을 설정하게 되면 나머지 공간을 다 차지하게 된다. flex-basis 20% flex-basis 200px 을 해도 윈도우 창이 작아지면 200px보다 크기가 줄어드는 문제가 발생할 수 있다 그 때 flex-shirnk 를 사용하면 기본값 1 flex-shrink를 0으로 설정하면 창이 작..

flex-direction 은 방향, 시작점을 말한다 content 가로 축 정렬 기준 space-around 는 양 옆이 x 그리고 아이템 사이가 2x 의 크기로 정렬된다. justify-content: flex-end 와 flex-direction: end 의 차이는 정렬과 시작점이라고 볼 수 있는 건가? align-items: stretch 아래처럼 늘이는 기능을 한다 align-items: baseline 텍스트를 기준으로 정렬한 justify-content 가 가로축이 아니라 "주축"이다. 즉 현재 정렬이 어느 방향인지에 따라서 content 축이 바뀌는 것! 현재 축을 어떻게 아냐면? 기본은 가로겠지만 flex-direction을 통해서 설정할 수 있는 것이다!

이러한 개념들을 배울 것이다. 명확하게 딱 모르는 것들도 있으니 다시 배워보자

Trillo 프로젝틑와 함께 Flexbox 개념과 CSS 속성 마스크, SVG 같은 것들을 배울 예정이다. 현대에 float 기능을 알 필요가 없다고 해서... 하지만 일단 아래 분의 조언처럼 먼저 섹션 7 강의로 건너 뛰었다!

Udemy 강의가 업데이트 되지 않는 바람에 시간을 꽤 쏟았다 @import 구문 대신에 변수를 담고 있는 scss 파일의 경우는 @use 를 사용하여 불러온다. @use "abstracts/_variables" as variables; Compilation Error Error: Invalid UTF-8. 이게 뭐지........... 한참을 봤다 @use "abstracts/_variables" as variables; @import "abstracts/_functions"; @import "abstracts/_mixins"; 이렇게 세 구문을 썼는데 두 번째 문장은 문제 없고, 세 번째 문장에서만 계속 FAIL 떠서 한창을 찾다가 발견한 아주 간단한 방법... 그 해당 파일의 인코딩 문제였다. VS..

Scroll Restoration 이라고 부르는 React에서 스크롤 위로 올라가게 하는 법 https://v5.reactrouter.com/web/guides/scroll-restoration Home v6.14.2 I'm on v5 The migration guide will help you migrate incrementally and keep shipping along the way. Or, do it all in one yolo commit! Either way, we've got you covered to start using the new features right away. reactrouter.com import { useEffect } from "react"; import { useLo..