TIL 04.21(CSS)

CSS에 대한 강의를 수강했는데 생각보다 몰랐던 개념들이 너무 많다! 😨 알긴 알아도 모호하게 알았던 개념들이라 좀 새롭게 와닿는 것 같다.

특히 transform 부분에서 그랬는데 잘 안 쓰던 속성이라 그런 가 보다.

조만간 transform에 대한 내용들을 정리하고 개인 작업에서도 쓰도록 노력해야겠다.

SCSS에 대한 강의도 수강했는데 개인적으로 CSS 전처리기는 별로 좋아하지 않는다. 예전에 들었던 말 중에 전처리 비용에 대한 개념이 기억에 깊게 남아서 무의식적인 거부감이 든다.

물론 사용하면 엄청나게 편하긴 하다.

몰랐던 CSS transform

• scale은 x축과 y축을 지정할 수 있다.
  항상 scale은 scale(1.1)형태로 썼었다. 인자가 하나일 경우는 x축 y축에 모두 동일한 값이 들어간다. x축과 y축을 따로 지정할 수 있는 줄은 몰랐다.
• skew 기울임 속성
  scale과 마찬가지로 x축 y축을 지정할 수 있다. deg 형태로 단위가 들어감
• perspective(원점 지정 속성)
  transform의 내부 값으로 넣을 땐 제일 앞에 선언해야한다. perspective가 독립된 속성으로 들어갈 땐 부모의 관점에서 관찰하는 것으로 원점이 지정됨
• rotate(회전)
  일반 rotate는 원점 기준 2d 회전이다. 하지만 rotateX, rotateY 형태로 설정할 시 3차원 회전(Z축이 모니터 방향)

margin: 0 auto;에 대한 개념

• margin auto
  margin: 0 auto;는 밥 먹듯이 썼던 스타일링이다. 하지만 그게 width가 지정되어 있을 경우만 가능하다는 개념은 처음 알았다. 애초에 inline에는 안 먹히고, block은 차지할 수 있는만큼 늘어나려고 하니 당연한 개념이었다.