opacity:0 을 했더니.....

개인 포트폴리오 사이트를 만드는 중이다. 맨 처음 화면을 까맣게 한 뒤에 버튼을 누르면 사라락 사라지고 본문이 본격적으로 보이게 하고 싶었다. 그래서 맨 처음 화면을 opacity:0으로 하고 transition도 줘서 사라락~ 사라지게 만들었다.
룰루랄라 다음 화면을 꾸미고 있는데 a태그에 cursor: pointer 모양이 생기지 않는 것이다!
fontawesome 아이콘을 사용하고 있었는데 이게 무슨 문제인가 싶어서 이것저것 살펴보다가, 크롬 개발자 도구를 열어서 element탭을 보니 진짜 범인은 따로 있었다.
opacity:0 으로만 처리했더니 얘가 투명해진 채로 그대로 남아있어서 a태그를 덮고 있었다. 투명 망토도 아니고....
사라락~ 하는 transition은 주되, DOM에서 아예 없애야 할 것 같아서 setTimeout으로 1초 후에 .remove()를 사용하여 해당 요소는 지워지도록 하였다.