오늘 공부한 내용 ⌨️

• NPM, NPM scripts, node_modules, package.json, package-lock.json 각각 의미에 대해서
  • 따로 정리 할 예정
• Sass(SCSS)로 반응형 웹 구현하기
  • 참고로 SASS 아니고 Sass다. (제발!)
    http://sassnotsass.com/
  • 공통으로 쓰일 가능성이 있는 컴포넌트에 여백을 주지 말자! 컴포넌트 자체에 여백을 주지 말고 해당 컴포넌트가 사용되는 상위 선택자 내로 선택자 범위를 좁혀서 스타일링 하도록 하자.
    
    
• 구체성

  • 구체성이란 선택자를 얼마나 구체적으로 선언했느냐를 수치화 한 것으로, 구체적일수록 우선 적용된다. 다른 말로 명시도 라고도 한다.

  • 구체성에 따라 아래 코드에서 p 태그에는 skyblue가 적용된다!

    p {
    	color: lime;
    }
    
    body p {
    	color: skyblue;
    }

  • 구체성의 예시는 아래와 같다!!

https://specifishity.com/

	- 구체성(명시도) 수치는 X-Y-Z 형태로 이루어지며 각 항목은 다음과 같다.
	X: ID 선택자의 수
    Y: 클래스 선택자, 속성 선택자, 가상 클래스의 수
    Z: 요소 선택자, 가상 요소 선택자의 수     
    *, +, >, ~ 등의 Universal selector(전체 선택자)는
    구체성 수치를 증가시키지 않는다.
    

• 깃허브 issue 작성하는 법
  • 기술면접 스터디 조장님께서 올려주신 Issue 작성법에 대해 배웠다! (감사합니다!)
  • Issues 탭에서 New Issue (초록 버튼)을 누르고 글을 작성한 뒤 라벨에서 주제를 선택해 Submit new issue 버튼을 누르면 된다~

어려웠던 내용 🤯

Sass(SCSS)는 처음이라…

mixin들이 너무 많아서, 또 정의한 mixin에 매개변수는 뭐가 있는지, 또 mixin의 매개변수의 순서는 어떻게 되는지 파악하는데 시간이 많이 걸려서 힘들었다!

수업이 조금 빨라서 좀 힘들었다! 죄송합니다. 제가 느린거겠죠..

궁금한 내용 / 부족한 내용 🧐

내 실력이 많이 부족합니다.

느낀 점 🤔

어제 @use와 @forward의 차이점을 알고나서 오늘은 좀 수월하려나 싶었는데 그건 나의 착각이었다…!

수많은 mixins와 수많은 폴더구조에 허우적대는 나를 발견할 수 있었다..!

얼른 고정형, 반응형 웹사이트부터 복습을 끝내고 SCSS도 복습하고싶다.