[CSS] 변형속성 | 애니메이션 | 모바일웹 | 반응형웹
24.03.12 19일차
목차
1. 변형속성
- transform
2. 애니메이션
3. 모바일 웹
4. 반응형 웹
1. 변형속성
transform : 각도회전
:hover : 마우스커서를 올릴 때
:active : 마우스를 클릭할 때
transition-duration : 지속시간 설정
transition-delay : 지연시간설정
세로기준 표
가로기준 표
2. 애니메이션
keyframes : 애니메이션을 재생할 각 프레임의 스타일 정의 (0%혹은 from부터 100%혹은 to 까지로 점차 바뀜)
animation-interation-count : 애니메이션의 반복횟수
animation-direction : 애니메이션의 진행 방향 설정
alternate : 순방향 진행 후 역방향 진행
animation-play-state : 애니메이션의 진행 상태
paused : 정지
3. 모바일 웹
index.html 파일에 접속기기를 인식하여 mobile 파일을 인식하는 스크립트를 작성해준다
- 모바일로 접속 시 mobile.html 파일로 연동
mobile.html 파일에 아이콘 링크를 걸어준다
filezilla 접속 후 index.html, mobile.html, icon을 html 폴더에 넣기
메인페이지 확인
모바일 페이지 확인
4. 반응형 웹
고정형 그리드는 화면이 작아지면 스크롤바가 나타남
가변그리드
화면 크기에 맞춰서 다른 디자인