[CSS] 변형속성 | 애니메이션 | 모바일웹 | 반응형웹

24.03.12 19일차

목차

1. 변형속성

     - transform

2. 애니메이션

3. 모바일 웹

4. 반응형 웹

 

1. 변형속성

transform : 각도회전

 

:hover  : 마우스커서를 올릴 때

:active  : 마우스를 클릭할 때

기본값 / 마우스커서 올림 / 마우스 클릭

 

transition-duration : 지속시간 설정

마우스를 올리면 다섯개의 box가 5초에 걸쳐서 크기가 커진다

 

transition-delay : 지연시간설정

설정된 지연시간 때문에 차례대로 변형되는 표

 

세로기준 표

메뉴 스타일

마우스를 올리면 숨겨져있던 서브메뉴가 나옴

 

가로기준 표

nav 클래스의 li에 왼쪽기준정렬 설정

가로기준표 설정 적용 확인

 

 

2. 애니메이션

keyframes : 애니메이션을 재생할 각 프레임의 스타일 정의 (0%혹은 from부터 100%혹은 to 까지로 점차 바뀜)

 

animation-interation-count : 애니메이션의 반복횟수

 

반복횟수를 무한으로 지정

 

animation-direction : 애니메이션의 진행 방향 설정

alternate : 순방향 진행 후 역방향 진행

 

animation-play-state : 애니메이션의 진행 상태

paused : 정지

 

 

3. 모바일 웹

index.html 파일에 접속기기를 인식하여 mobile 파일을 인식하는 스크립트를 작성해준다

 - 모바일로 접속 시 mobile.html 파일로 연동

index.html

mobile.html 파일에 아이콘 링크를 걸어준다

홈화면 아이콘에 쓸 이미지 링크 설정

 

filezilla 접속 후 index.html, mobile.html, icon을 html 폴더에 넣기

 

메인페이지 확인

 

모바일 페이지 확인

 

 

4. 반응형 웹

고정형 그리드는 화면이 작아지면 스크롤바가 나타남

 

가변그리드

크기에 맞춰서 변하기 때문에 스크롤이 생기지않는다

 

화면 크기에 맞춰서 다른 디자인