React가 아닌 vanilaJS를 다룰 때 scss를 사용하고 싶은데 WebStorm에서는 검사기에 따로 설정을 해줘야한다. 0. NodeJS 설치 https://nodejs.org/en/download/ Download | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 당연하지만 노드는 다운 받아야한다. 1. sass 설치 npm i -g sass 번들러가 따로 있다면 글로벌로 설치하지 않아도 좋다. windows에서는 node-sass를 사용하지 않고 sass를 사용함에 조심해야한다! 2. File Inspector 설정 내 WebStorm은 설치부터 한글이 기본이라서 '파일 감시기..

예전 프로젝트에서 이거 때문에 삽질 좀 했던 것 같은데 또 까먹었다. 별거 없기 때문에 쓸 것도 없다. Check 1. 부모 요소에서 overflow 설정 부모 컴포넌트에서 overflow가 hidden; auto; scroll;이 아닌지 확인해준다. sticky는 뷰포트가 아니라 부모 컨테이너에 영향을 받는다고 한다. Check 2. 부모 요소의 크기를 설정해줬는가? 크기를 적절하게 설정해줘야 한다. 부모의 위치에 대해서 붙기 때문에, 개발자 도구에서 크기를 가지도록 설정해주면 된다. Check 3. [가장 중요⭐] align-self: start 해주기! align-self는 flex 내부 요소의 정렬을 스스로 설정할 수 있도록 지원해준다. start로 넣어주면 flex container 앞쪽으로 정..

간혹 정부 관련된 홈페이지에서 많이 보이는 효과인 hover 시 밑에 줄이 생기는 애니메이션 입니다. css 만으로도 구현이 가능합니다. 방법은 정말 여러 개가 있을 수 있겠습니다. box-shadow로 transition을 줘도 되구요. 저는 저 선이 좀 둥글둥글 했으면 좋겠어서 pseudo element를 추가해줘서 구현했습니다. 1. Pseudo Element 가끔 개발자 도구로 보다보면 저렇게 ::after나 ::before 같은 걸 볼 수 있는데 저게 바로 의사 요소(pseudo element) 입니다. 우리가 자주 쓰는 hover나 active와 같은 클래스는 의사 클래스(psudo class)라고 하는데요. 마찬가지로 내장되어 암시적으로 사용할 수 있는 css 요소입니다. 어떤 클래스를 기준..