TIL 13일차_Sass(Scss) 맛만보기

BEM과 SCSS 맛만보기!

---

맛만보기 맛만보기 맛만보기 맛만보기.. 맛만보기?
이렇게 되뇌이다 보면 한글이 내가알던 한글인가 하는 느낌이 들 때가있는데
이를 게슈탈트 붕괴현상이라고 한다.

오늘은 코드스테이츠 수강생분 중 한분께서
Sass(Scss)에 대한 설명과 실습을 다루는 소모임을 여신다고해서
3시간가량 참여하였다.
자신이 아는 개념을 설명한다는 게 진짜 어려운 일일텐데,
많이 준비하신 듯 하고 대단하다고 생각했다.
실습을 하면서 들으니 확실히 집중도 잘되고 재밌었다.
감사합니다!!

BEM (Block Element Modifier)

트위틀러 과제를 진행하면서
css에 무수히 쏟아지는 셀렉터들을 보고

'이걸 다른사람이 보면 html이랑 엄청 번갈아 봐야, 웹페이지의 이미지가 그려지겠다.'

라는 생각을 했다.

BEM은 이러한 생각에 대한 대답을 어느정도는? 해주는 것 같다.
BEM은 html과 css구조를 짤 때, 독립적인 component로 구성하고 작명하겠다라는 개념으로, 일단은 단순히 이해했다.
html의 클래스명을 block__element--modifier 의 형식으로 작성하고 이를 scss를 사용해서
css만으로 웹페이지의 구조가 어느정도 보일 수 있도록 해주는 것 같다.

Sass (Scss)

Sass = Syntactically Awesome Style Sheet. 작명좋다.
Scss = sassy css
둘은 똑같고 약간의 생김새만 다른데,
이름에서 보이듯이 Scss는 Sass스러운 css라서, css의 문법을 거의 유지하는 듯하다. 그래서 더 대중적이라고 한다.

Node.js

이게 그 유명한 노드인가?
Node를 설치했다. 뭔가 업그레이드 된 기분 ^.^
Node.js는 자바스크립트의 런타임이다.

런타임?
런타임은 해당 언어가 돌아가도록 만들어주는 일종의 환경?컨테이너?
크롬브라우저도 자바스크립트 런타임의 하나.

Node.js를 설치하면 NPM이 같이 설치된다.
Node Package Manager는 개발을 할 때 필요한 기능들을 만들어 둔 파일드의 묶음. 이라고 생각하면 된다.

Today's ?!

• Scss랑 css를 연결하기 위해서 npm을 사용하는데,
  아직은 머릿속에 제대로 정리되지 않았다.
  내일 꼭꼭 이것들을 사용해서 트위틀러를 만들어 보자!

• align-items와 justify-content
  : 이것들은 정해진 속성 명 이었다...!
  예를 들어, justify-items 속성은 제안된 스펙은 존재하지만, 공식적으로 지원하지는 않는다고 한다.

  align-content는 flex-wrap:wrap으로 설정되고 두줄 이상이어야 의미가 있다는데 이건 아직 무슨말인지 모르겠고.

또한, 이 둘은 수평,수직 정렬이 아니라
justify는 축의방향, align은 축의 수직방향으로 생각해야한다고한다.
축의방향은 flex-direction으로 바꿀수 있기 때문이다.
예를 들어, flex-direction: row일 때, justify-content는 가로방향이지만,
flex-direction: column이 되면 justify-content는 세로방향이된다.