2021-11-18 TIL

🦁 Day15

💻 오늘 배운 것

1. transform-style: preserve-3d
   상속되는 속성이 아니다. 각 요소에 모두 써줘야한다.

2. 면접 대비를 위한 코딩습관
   코딩할 때 왜 그렇게 짰는지 왜 그 선택을 했는지 항상 생각하면서 코딩하는 습관을 들이자.

[예시] layout 짤 때 flex? grid?

• flex를 사용하는 이유
  wrap을 써서 반응형일 때 아이템이 자동적으로 아래로 배치되게 만들기 위해서, 혹은 아이템이 더 추가될 경우를 대비해서
• grid를 사용하는 이유
  아이템이 fix이고 UI가 깨지지 않도록 하기 위해서

3. flex-basis

• 한 요소에 flex-basis와 width가 같이 선언되어있으면 flex-basis가 width 속성을 덮어버린다. 하지만 width가 강제성이 더 높아서 실제 적용되는 건 width 값이 적용됨.
• 아무것도 설정되지 않은 상태에서 flex-basis의 기본값은 auto이다. 하지만 flex:1 과 같이 flex 속성을 선언하면 자동으로 flex-basis:0이 된다.
  
  
  

4. splitting.js 활용하여 3D 원형 text animation 만들기
   
   
   splitting.js라는 플러그인을 활용해서transform 속성으로 css text animation을 만들어보았다. 이게 바깥 원통(?)이랑 안쪽 원통의 text length가 비슷해야 글자끼리 안 겹치고 잘 나온다. 완벽한 반지 모양을 구현하진 못했다. 자세히 보면 테두리가 곡선이 아니고 글자단위로 각져있다. 각 글자 하나하나에 char 클래스를 부여해서 스타일을 주는 방식이라서 그런건데 각 글자에 곡선을 주는 스타일링을 할 수 있을지 고민해봐야겠다
   어쨌든 이거 만든다고 transform이랑 animation 속성 쓰면서 css가 얼마나 강력한지 다시 한번 깨닫게 되었다

<참고자료> https://www.youtube.com/watch?v=yfwD-AKRCcA

💭오늘 하루 느낀 점

몇일 전에 CSS 방법론 배우면서 모듈화 하는 법을 배웠었는데 모듈화하는게 너무 어렵다 그냥 피그마에 나와있는대로 화면에 똑같이 그려지게 하는 건 정말 쉬운데 모듈화를 고려하면서 CSS 스타일링을 하는 것이 너무 어려운 것 같다 연습이 많이 필요하다
연습을 많이 하려면 그만큼 시간을 들여서 해야하는데 요즘 계속 수업 시간 끝나고 나면 퍼져버린다😭 머릿속으로는 항상 '저녁 먹고 7시부터 바로 다시 공부해야지' 생각하고 있는데 매번 2시간 넘게 쉬게된다 에휴.. 오프라인으로 저녁 모각코가 있었으면 좋겠는데 그룹원들하고 얘기해봐야겠다