TIL

BEM

Blcok, Element, Modifier 로 클렉스 이름을 정의한다.

.header__navigation--navi-text {
  color: red;
}

위 예제의 클래스 이름에서 header는 Block, naviagtion은 Element, navi-text는 Modifier를 나타낸다.

이름을 정의하는 방식은 어떻게 보이는가보다는 어떤 목적이냐가 주가 된다고 한다.
명확하지 않지만 대강 생각해보자면
Block은 Element를 감싸는 큰 틀같은 개념이다.
Element는 Block에 포함된 작은 분류들
Modifier 그런 Element의 속성을 나타낸다고 생각 해볼수 있겠다.

오늘은...

다시 돌아온 2주차 주말 어제부로 간단한 목업은 완성하였으므로 그것은 잠시 제쳐두고 이전부터 작업중인 계산기를 마저 손보았다. 그러던 와중에 1시에 잡힌 동기분의 scss강의 정확히는 기본적인 개념과 설치법 기본 사용법에 대한 강의였다. 당장 잘쓸수 있을지는 모르겟지만 뭐 두고 쓰다보면 배우겠지.

하나 머리에 더 집어넣은것으로 우선 만족하고 다시 계산기 수정에 돌입. 구글 계산기 와 같은 버튼으로 만들고 싶어서 여기저기 뒤적여서 html 심볼을 얻어내어 붙여넣는건 쉽게 성공 하지만 inv 전환키를 구현하고자하니 얻어낸 심볼을 텍스트로 전달이 안된다. 전달 방법을 찾기 위해 여기저기 다시 뒤적 뒤적.. 결국 못찾고(우선 내눈에 안보였으니까..) 다시 구글 계산기..

어떻게 만들어졌나 어떻게 표현 되었나 확인해보니..
방법은 다른것...
키두개를 설정하고 때에 따라 표시하는 방식 ...
그러면 내용을 바꿀필요가 없으니 적어만 두면 되는 것...

에휴... 다시 html 수정하고 js 파일 수정하여 적용 잘되지만 길이닷에 글씨가 잘린다. 해서 글자 크기도 변경 하는김에 버튼 공통속성은 key 클래스에 몰아 넣음.

후우 이젠 연산 과정만 다시 손을 보면 어찌저찌 구글 계산기 프로젝트는 마무리라고 할수 있을듯 싶다.. 이젠 자바스크립과 싸워야 겠네. 내일까지는 적당히 완성본을 만들수 있겠다 싶다.