week1 navigation header

[wooooooood]

구현을 다 못해서 ㅜㅜ; 일단 한데까지 올려봅니다!

신경쓴 부분

• css로만 구현해보려고 했다
• 클래스명을 BEM 스타일로 쓰려고 했다
• semantic html로 작성하려고 했다

어려웠던 부분

• 모달을 닫는 걸 어떻게 해야 할지..
• BEM을 제대로 쓰고 있는건지..
• svg를 긁어오기 위해 코드를 잠깐 봤는데 내가 작성한 semantic html이랑 달라서 좀 긴가민가했다

후기

• 다 구현하진 못했는데, 이정도 구현 하는데만도.. 거의 2시간정도 걸려서.. 충격이었다.. 🫠
  • 괜히 폰트 바꿔본다고 시간을 쓰긴 했지만.. 그래도.. 흠..

codepen

[peanudge]

https://developer.mozilla.org/en-US/docs/Web/CSS/:target

저 이거 처음 알았어요 ㅎㅎ 저도 이렇게 할걸 그랬네요. JS 코드 안써도 되군요.

[peanudge]

visibility: hidden vs dispay:none

언제 visibility가 좋을까 궁금해서 찾아보니 visibility: hidden을 사용할 것이라면 opacity: 0 를 사용하는게 Repaint, Reflow 를 다시 발생시키안아서 더 좋을 것이라고 나오네요. visibility를 판단하신 이유가 궁금합니다 :)

개인적으로는 opacity 가 애니메이션 적용가능한 수치 값을 가지기도하니 공간을 따로 차지하지않을 경우 opacity가 좋지않을까 싶네요.

https://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone

@kevin is correct in that visibility: hidden and display: none will be equally performant since they both retrigger layout, paint and composite. However, opacity: 0 is functionally equivalent to visibility: hidden and does not retrigger the layout step, so I would advise using that if you don't mind the empty space still being allocated (otherwise use display: none).

[wooooooood]

제가 평소에 보여지고 안보여지는 토글은 display none을 사용했었는데 알고보니 display none은 transition이 안먹히더라구요..! 그래서 구글링하다가 복붙을 하게 되었는데 이런.. 비밀이 있었군요 ㅎㅎ;

[peanudge]

BEM 을 이전에 한번 사용해보고 다시보는데 익숙하지않았네요.(css-in-js에 익숙해서..) 그래서 CSS 관련 리뷰만 한번 해보았습니다.