[TIL] 211112
느낀점
- 날이 다르게 성장함을 느낀다. 이제 가상요소는 자유자재로 사용할 수 있다. 언제 사용해야 하는지도 안다. 정말 개발은 매력적이다. 어제 무언가를 배우면 오늘 어제의 나보다 잘했다는 것이 눈에 바로 보이기 때문이다.
- 회사 지원에 대한 이야기를 해 주셨다. 내 이력서는 총알이며, 장전됐으면 어디든 지원하라고 하셨다. 나는 정말 신중하게 선택하는 편이라 '내 포트폴리오에 이 회사를 지원해도 될까', '아직 덜 된게 아닐까' 라는 생각으로 매일을 살았고 여기까지 왔다. 그래서인지 더뎌지는 기분이었고 남들이 '제발 다 넣어봐' 라고 말 할 때도 너무 무서웠다. 이젠 달라져야겠다. 이러다가는 계속 공부만 하게 될 것 같다. 빨리 현업에서 제대로 된 실무 경험을 쌓고 싶다.
배운것
- 보통 현업에서는 사수에게 코드리뷰를 받고 디자이너에게 보여주고 수많은 기능테스트를 거친다.
- 회사마다 잘보이게 하려는 기준 브라우저가 있다.
- 모바일 디자인은 크롬 개발자도구를 캡쳐 후 디자이너가 준 캡쳐본을 겹쳐서 만든다.
- CSS 설계 기법은 크게 세 가지가 있다.
1. OOCSS: object oriented css: 객체지향 css
: 객체를 만든 후 스킨을 복제한다. 구조, 스킨으로 나뉜다. 구조는 레이아웃에 영향을 미치는 것, 스킨은 시각적으로 영향을 주는 것들을 말한다. 구조는 같은걸 쓰고 스킨들은 따로 클래스를 만든다.
컨테이너와 콘텐츠도 분리해야 한다.
스타일링이 부모에 종속되지 않게 해야 하며, 본인이 스스로 온전한 css 스타일을 구현하게 해야 한다. 정말 oo에 맞는 철학인 것 같다.
2. SMACSS: Scalar and Modular Architecture for css
OOCSS의 철학에 뿌리를 두었으며, css코드를 역할에 따라 분리한다. 여기는 베이스, 레이아웃, 모듈, 스테이트, 테마로 나뉜다.
베이스: font를 import 하고 제일 최상위 공통 스타일을 다룬다.
레이아웃: header, main, footer 등 대부분 페이지에 몇 개 존재하지 않아 아이디 선택자를 쓰기도 한다.
모듈: 레이아웃 내에 배치되는 모든 것을 말한다. 비슷한 모듈이어도 조금씩 다르면 btn-small, btn-long 등으로 적는다. 추가해주는 클래스는 서브클래스라고 부른다.
스테이트: 기존 스타일을 덮어쓰거나 확장하는 역할을 한다. 모듈과의 차이는 모듈은 적용되면 스타일 자체가 바뀌지 않는다. 그러나 스테이트는 자바스크립트에 의존한다. 상태가 변하면 자동으로 변하는 것! 자바스크립트로 넣었다 뺐다 할 수 있고 종속적이다.
테마: 색상이 바뀌거나 background image가 바뀌는 것을 굳이 구분해둔 것. (왜 있나 싶다고 말씀하셨다)
이 다섯개를 주석으로 나누거나 css 파일 별로 나눈다.
3. BEM: Block, Element, Modifier
id와 요소선택자를 사용하지 말자는 주장을 한다. 왜냐면 class만 이용함으로서 10점으로 가중치를 통일할 수 있기 때문이다.
클래스 네이밍에 굉장히 중점을 둔 방법론이다. 형태가 아닌 의미를 중심으로 둔 클래스 이름을 사용한다.
예를 들면 green-button 이 아닌 button-green!
이는 부모 클래스의 이름에 종속돼야 한다. 그래서 클래스 이름을 상속받는데 복잡하다는 단점이 있다.