자기계발 캠퍼스

- HTML 글씨가 넣을 부분만 세팅하고 그 외에는 아무것도 없다. - CSS 내리는 눈 을 만드는 CSS 파일이다. border-raidus로 둥글게 만들어준 다음 position은 absolute로 선언해준다. fall이라는 애니메이션은 맨 위에서부터 맨 아래까지 내려오도록 translateY(100vh)을 선언했고 땅에 닿으면 눈이 안 보이게 opacity도 설정을 해주었다. - JS 이게 눈을 만드는 함수를 JS로 불러온다. 1. 위치 위치를 랜덤으로 설정해주기 위해서 Math.random과 window.screen.width를 사용하였다. 2. 애니메이션 설정 눈이 한 번에 내리지 않고 하나씩 내리게 하기 위해 delay를 랜덤으로 설정했다. opacity도 랜덤으로 설정하여 각기 다른 눈이 내..

CSS에서 뒤에 땡땡 붙여서 쓸 수 있는 가상 요소 중 ::before와 ::after에 대해 알아보자. 사실 말 그대로 직독직해하면 된다. CSS 파일 안에서 이런 식으로 사용하게 되는데 선택한 Element의 앞에 어떤 걸 추가하고 싶으면 ::before 뒤에 어떤 걸 추가하고 싶으면 ::after 이렇게 활용하면 된다. 예를 들어 이런 식이면 태그 뒤에 "이거 무조건 있어야 됨"이라는 글자가 표현된다. 이렇게 content만 넣어주면 부모인 p태그의 css 특성을 그대로 따라가지만 content 뒤에 css 속성을 넣어주어 글자 색깔이나 배경색 등등 따로 적용가능하다. 여기서 중요한 점 이렇게 ::before이나 ::after를 쓰기 위해서 content 속성은 무조건 추가해줘야 된다. conten..