반응형

온라인 강의/Advanced CSS and Sass [Udemy] 70

73. Defining Project Settings and Custom Properties

이번 프로젝트의 목표는 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:..

72. Project Overview

신나는 프로젝트를 하나 만들 것이다 이 인터페이스를 구현할 것이다 { "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..

70. A Basic Intro to Flexbox: Flex Items

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으로 설정하면 창이 작..

69. A Basic Intro to Flexbox: The Flex Container

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을 통해서 설정할 수 있는 것이다!

31. Converting Our CSS Code to Sass: Variables and Nesting

한 번만 명시할 속성들은 굳이 변수를 이용하지 않아도 괜찮다 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..

반응형