[웹 표준에 맞는 HTML5 프로그래밍] 9차시 - UI 설계 확인하기

이미지 슬라이드(좌우)

1. CSS로 구현하기

- @keyframes를 이용함

- margin-lert로 좌측 좌표를 선언하여 좌우 슬라이드를 구현

2. JavaScript로 구현하기

- 지정 시간마다 반복되는 setinterval()함수를 활용

- animate 메소드를 통해 지정 시간 마다 요소의 left 속성을 할당하여 구현

 

이미지 슬라이드(상하)

1. CSS로 구현하기

- @keyframes를 이용함

- margin-top으로 상단 좌표를 선언하여 상하 슬라이드를 구현

2. JavaScript로 구현하기

- 지정 시간마다 반복되는 setinterval()함수를 활용

- animate 메소드를 통해 지정 시간 마다 요소의 top 속성을 할당하여 구현

 

페이드인-아웃 구현하기

1. CSS로 구현하기

- @keyframes를 이용함

- opacity로 투명도를 선언하여 페이드인-아웃을 구현

2. JavaScript로 구현하기

- 지정 시간마다 호출하는 setTimout()함수를 활용

-style.display 속성을 'none', 'block'으로 할당하여 페이드인-아웃을 구현