차근차근 배움터

해당 강의에서 알려준 것보다는 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는 괄호와 기호들이 생략된 것을 볼 수 있다

Sass와 Npm eco system에 대해서 배워본다

실전에서 BEM Method 사용법 header block은 독립형 컴포넌트 block 컴포넌트의 modifier - 속성을 담당하면 -- 대쉬 두 개를 붙인다 element (요소) __ modifier (속성) -- 라고 정리하려 했는데 Q&A 게시판을 보니 강사가 설명한 BEM에 대한 토론이 근 3년 간 열 띠었던 것으로 보인다....! https://www.youtube.com/watch?v=7necWMY4qtU 유투브 강의로 보충을 해본다 Block이란 독립적으로 사용될 수 있는 부분 Element는 메뉴 바의 내부를 보면 독립적으로 쓰인다고 보기 애매하기 때문에 element라고 정리한다 버튼 > 자주 쓰이는 버튼이라면 block 일 수 있지만, 그렇지 않으면 element로 취급 __ 언더스..