차근차근 배움터

이번 프로젝트의 목표는 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 강의로 건너 뛰었다!

기존에 float을 이용하여 정렬하던 방식은 구식 하지만 강의에서 여전히 float 사용방법을 알아볼 것이다 기존에 작성된 프로젝트들이 구식일 가능성이 많기 때문에 유지보수를 위함이겠다

Sass 파일들 중에서 부분 파일들을 _ 언더스코어로 이름이 시작한다 다른 scss 파일 import 하기 여러가지 폴더를 생성하는데 abstract 폴더에는 variable 변수, mixin 믹신과 같은 css를 출력하지 않는 코드만 넣을 것이다. Sass 폴더에 이렇게 다양한 폴더로 구조화 했다

한 번만 명시할 속성들은 굳이 변수를 이용하지 않아도 괜찮다 bm method way 중첩하여 작성하는 방법 여기 부분이 .header__logo-box 와 같다고 해석된다 다른 예) 이렇게 생긴 scss 파일을 정리해 봤다 $color-primary: #55c57a; $color-primary-light: #7ed56f; $color-primary-dark: #28b485; $color-grey-dark: #777; $color-white: #fff; $color-black: #000; * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Lato", "Sans-serif"; font-weight: 400; font-size..