Dream Coding portfolio 강의를 수강하면서 생각지 못했던 주의점들 위주로 정리했다.
body, input, textarea, button {
font-family: arial, sans-serif
}-
button, input과 같은 form에 관련된 태그들은 body에서 정의한 폰트 CSS 값들을 상속받지 않아서 따로 정의해야 한다.
-
* { }여기 안에 스타일을 지정하는 순간, HTML에 있는 모든 요소들을 다 찾아서 스타일을 적용해 주는데, 폰트와 같이 텍스트 베이스 요소에만 필요한 특정한 스타일링이라면, 해당하는 요소들만 골라서 설정해 주면 좋다. -
Font Awesome에서 i 태그로 받아왔는데, svg로 보여질 수 있다. 이럴 경우 Font Awesome CDN을 Webfont로 받아오면 된다.
-
animation-duration을 250ms ~ 350ms 정도 주면 적당하다. 1초 생각보다 김
-
span으로 count를 주고 싶어서 border-radius: 50%를 했는데 (span이 inline이기 때문에) 찌부라진 동그라미가 되었다. display: inline-block으로 지정하고 width, height값을 주자.
-
사라졌다가 다시 보이는 애니메이션 효과를 주면서 filter된 항목들을 보여주고 싶었는데 타이밍을 맞추기가 어려웠다. 애니메이션 클래스를 붙여주고 원하는 동작이 이루어진 다음에, setTimeout으로 그 후에 원하는 동작을 하게끔 할 수 있다.
filter
버튼의 data-filter에 값을 넣었는데, 버튼 내부의 span은 e.target이 아니라서 dataset.filter에서 undefined가 나왔다. 이럴 경우 span을 클릭하면 버튼을 클릭한 효과가 안 나오는 문제가 생긴다. 그래서 콘솔 창에서 breakpoint를 찍고, watch에서 e.target.parentNode까지 올라가서 탐색할 수 있는지 알아보았다.
const filter = e.target.dataset.filter || e.target.parentNode.dataset.filter;