본문 바로가기

HTML_CSS

(2)
글자가 스르르 올라오는 애니메이션 주기(HTML CSS) 이번에는 글자가 스르르 올라오는 애니메이션을 한 번 만들어보자 이 애니메이션도 분명히 어디선가 쓰일 것이다. 여기는 문몰래의 코딩일지 입니다. 전체 코드는 이렇다. 그리 어렵지 않지만 여기서 핵심은 바로 opacity이다. 처음에는 투명도를 0으로 해서 안보이게 해놓고 margin-top : 50px를 줘서 일단 좀 아래로 보내 놓는다. 그다음 투명도를 1로 주고 완전히 보이게 한 다음 margin-top: 0을 줘서 원래 자리로 돌아오게끔 한다. 위치 변경은 transform을 줘도 좋고 top이나 bottom을 이용해서 줘도 좋을 것이다.
검은화면이 스스륵 지나가는 애니메이션 주기(HTML CSS) 최근에 조금 충격적인 이야기를 들었다. 백엔드 개발자도 HTML CSS를 잘 다뤄야지 진짜 현업 실무에서 털리지 않고 살아남을 수 있다는 것이다. 이건 SI업체에서 일하는 사람 혹은 나와 같이 일할 사람들은 다 알고 있는 사실이었을 수 있으나 나는 그걸 최근에 알았다. 그리고 내가 준비하는 백엔드 개발자는 백엔드 개발자도 아니었다. 오히려 프론트엔드 개발자에 가까웠고 찐 백엔드 개발자들이 다뤄야 하는 것들은 따로 있다는 것을 최근에 알게 됐다. 아무튼 그래서 이 사실을 알고 조만간 현업에 투입하는나는 HTML CSS 잘 다루지 못한다. 뭐 대강은 알지만은 깊이 있게 알지 못한다. 특히 Slick Slide, animation, display, 가상 클래스, 가상요소 주는 법등 이런 것은 완전 잼병이다. ..