220331

KEEP

• OOCSS, BEM이라는 게 있구나
  • 지금까지는 코드를 짤 때 우선 필요한 걸 다 만들어 두고 나중에 중복되는 것만 따로 분리하는 식으로 만들었었는데, 이걸 보다 상세하게 아우르는 개념이 있을 줄이야. 그리고 class 작명하는 것도 누군가 체계를 만들어 둔 게 있구나. 이것들을 알고 사용하면 훨씬 편리하겠지만, 굳이 배우지 않아도 어느새 이런 방법들과 비슷하게 코드를 짜는 스스로를 발견할 수 있는 걸 보면 개념 정도만 알고 넘어가도 괜찮을 듯.
• 오늘도 CSS 부수기
  • 한 줄에 있는 div 두 개 중 하나는 좌측 정렬, 하나는 우측 정렬을 하고 싶을 때, 가운데에 div 하나를 추가하고 flex-grow 속성을 주면 추가적인 속성 부여할 필요 없이 각자 양쪽으로 정렬할 수 있다! 다른 div에는 flex-grow 속성이 없기 때문에 나홀로 속성을 부여 받은 녀석만 자리를 차지 위해 커지면서 나머지를 밀어내기 때문! 무조건 위치 속성을 부여할 생각부터 하지 말고 div를 이런 식으로 투명하게 활용하는 방법을 연습해 봐야겠다.
  • em은 부모 요소, rem은 루트 html의 폰트 크기에 비례! 이번 기회에 제대로 기억하고 넘어가기.
  • 링크의 밑줄을 제거할 때는 text-decoration 속성 이용하기
  • keyframes을 쓸 때는 from, to 또는 % 명시해야 작동한다!
  • div에 마우스를 올렸을 때 div가 아닌 다른 요소에 애니메이션을 주고 싶을 때는 div:hover p {} 이렇게 hover를 먼저 쓴다!
  • 크롬 개발자 도구 Layout 탭에 들어가면 웹 사이트의 레이아웃을 그리드 형태로 표시해준다! 레이아웃 공부할 때 유용할 듯.

TRY

• 리액트 빨리 배우고 싶다
  • 속성 강의랑 디테일 강의 다 구비해 놨으니까 얼른 배워서 이런저런 거 만들어 보고 싶다.