[CSS] 20230120 CSS 속성셀렉터, ANIMATION 효과 넣기, VSCODE 타임라인

 

 

arof03.cafe24.com/속도비교.html
참고

1. div[id^=box] : id속성값이 box로 시작하는 애들한테 다 적용시킨다는 뜻

2. transform의 속성이 여러개 적어 있을 때는 작성순서에 따라 변형의 적용순서가 바뀐다는 것 꼭 기억~
3. perspective:n px 에서 n의 크기가 클수록 시점의 거리가 크니까 원근의 차이가 작게 나타나고,
n의 크기가 작을 수록 원근의 차이가 크게 나타난다. ( 멀미날 지경)

4. 역시나 animation도 한줄에 한번에 적기도 가능하다.
적는 순서는
animation: 이름 재생시간 [속도] [대기시간][반복횟수][방향][스타일]

오늘 바꾼 코드 내용 구분하기 좀 힘들었는데 타임라인 이라는 좋은 기능이 있다는 걸 발견해버렸따 호호

5. 일단 gnb에 transition효과를 넣어주는 과정이다. 많은 변화가 있었는데,
li 태그 안에 div class="sub"를 만들어넣어주는 과정이다.
주의할 점은 li태그 안에 만든다는 것

6. 여기는 그냥 footer 태그를 채워주는 과정이다
뭐 이것저것 상 많이 받으셨네요........

7. 이제 CSS 파일 손보기가 시작했다.
먼저 , gnb 태그를 손봐준다. 전에는 위치 잡는 용도로 position 속성을 사용했는데 그냥 width값을 주기로 바꿨다
8. 그리고 li 태그 안에 넣은 .sub에 transition효과와 이것저것을 지정해준다 . 그리고 position: absolute값을 정해줬다.
넘치는 애들은 보이지 말라고 overflow:hidden도 해줌ㅋ
9. 근데 이렇게 했더니 gnb의 효과가 다 사라져버림.. position도 지워서 다 망가졌으니 고쳐줘야한다
이번에는 gnb 의 li a태그에다가 position:relative를 줘서 안정적이게 만들었따.
10.@keyframes visual{ } : anmation을 넣어주기로 했다.
11. opacity 는 퍼센티지로 해줘도 된다

12. main_visual 의 anmaition-delay값을 차차 다르게 설정해줘서 효과를 다르게 연출해줬따
훨씬 더 완성도 있는 페이지 같아 보이기 시작함

13. 내가 지정해준 빈칸이 출력되게 white-space: pre-wrap;도 해줌

담주부터 쌤이 바뀐다했다
엥리...........