차근차근 배움터

기존에 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..

해당 강의에서 알려준 것보다는 Sass-Compiler 플러그인 사용 방법을 아는 것이 좋다

SCSS 파일을 CSS 파일로 변환하는 작업을 하는 데 .... 이상하게 NPM INSTALL이 안 돼서 헤매다가 일단 SCSS PLUGIN 사용해서 해결했다 W는 Watch의 약자로 지켜보는 것 하지만 아래와 같이 굳이 강사님의 방법을 쓰지 않고 편하게 플러그인을 사용하면 될 것 같다 실제로 Ritwick Dey의 Live Sass Compiler가 시장에 출시되었으므로 더 이상 node-sass npm 패키지에 신경 쓸 필요가 없습니다 . 더 좋고, 더 안정적이고, 사용하기 더 쉽기 때문에 대신 사용하세요. 그의 라이브 서버 도 마찬가지입니다 . Jonas가 코스를 촬영할 때 이러한 기능을 사용할 수 없었습니다. 그렇지 않았다면 분명히 대신 사용했을 것입니다.

Npm은 무엇인가? Node JS에서 시작하는데 오픈 소스 JavaScript 런타임으로 개발자가 JavaScript 응용 프로그램을 서버에서 쓰고 실행할 수 있게 해주죠 이런 패키지를 사용하고 공유하려면 그걸 설치하고 관리할 일종의 도구가 필요해요 여기서 노드 패키지 관리자 또는 NMP가 등장하죠 NMP는 아주 간단한 명령줄 프로그램으로 그걸 할 수 있게 해주죠 node.js 설치 후 npm init npm을 이용해서 패키지를 설치한다 > sass 기본적으로 노드 SASS는 프로젝트를 개발할 때 사용하는 도구죠 그래서 save dev라고 입력

개발자라면 command line 커맨드 라인을 알아야 하거늘 두려워 하지 말고 배우면 command line이 더 편해지는 날이 온다! 물론 나는 기본적인 명령어를 알지만 복습과 놓친 부분이 있을까봐 확인하고 간다. cd 이동하고 싶을 떄 사용 dir 현재 디렉토리 확인 Mac에서는 ls인 것으로 알고 있다 clear 깨끗하게 하기 mkdir 디렉토리 만들기 copy a.js .. 복사할 파일과 경로를 입력하면 복사 완료 move a.js ./test 이동할 파일과 경로를 입력하면 이동 완료 del a.js delete에서 따온 단축이름 - Mac에서는 rm 을 사용한다 # tab을 입력하면 자동완성 > 이거 몰랐다 그간 긴 폴더 이름 일일이 입력했었는데 ... start 파일이름.확장자 > "큰 따옴..

믹신 mixin 이란? 여러 줄의 코드로 된 거대한 변수 심지어 인자도 전달할 수 있다 scss 에서의 함수 % Extend 관련이 있는 두 주제일 때만 extend를 사용한다. mixin과 비슷하지만 extends는 %있는 곳에 기존의 것을 넣는 방식이다

float 때문에 스타일 속성이 적용되지 않는 문제 darken lighten 다시 float 와 link 의 개념을 정리해야 할 것 같다 flaot은 둥둥 떠다니는 것! 생각해보면 float이란 position: absolute랑 무슨 차이가 있는지 궁금해져서 찾아 봤더니 position absolute는 제일 절대적으로 값을 설정할 수 있는 것이고 position: relative를 주느냐 마느냐에 따라서 고정하고 싶은 상위 요소를 선택할 수 있지만 float은 자신을 포함하고 있는 박스를 기준으로 값이 고정된다. 하지만 여기서 문제가 하나 발생할 수 있다 이 float 요소 다음 요소들이 자리를 못 잡고 헤매는 아래와 같은 경우이다. 그래서 사용해야 하는 게 아래와 같은 기능! 예시 너무 깔끔한 설..

CSS Preprocessor인 Sass Sass 코드를 작성하면 Sass compiler가 Css code로 변환한다 Scss는 css의 모습을 유지하고 있지만 Sass는 괄호와 기호들이 생략된 것을 볼 수 있다