HTML 웹프로그래밍 중간과제

소개

1. 주어진 HTML 요소(태그)에 대해서 다음 조건이 만족되도록 정리하시오.(15점)
① 각 요소는 주어진 순서대로 번호를 매겨서 정리한다.

② 각 요소에 대해서는 요소의 기능, 주요 속성(또는 하위 요소)의 기능, 그리고 간단한 활용 예시는 반드시 포함해서 설명해야 한다. ☞ 속성(하위 요소)이 없는 경우에는 속성(하위 요소) 설명은 생략된다.

☞ 활용 예시에는 해당 요소와 주요 속성(하위 요소)들의 사용 방법을 간단히 설명하는 정도의 예시를 포함한다. (예를 들어 태그의 href
속성의 경우: 방송대)
☞ 요소의 속성 설명에는 기본적으로 전역 속성은 포함하지 않는다.

2. 다음과 같은 3가지 부류에 속하는 CSS 속성들을 모두 조사해서 다음 조건이 만족하도록
정리하시오.(15점)
CSS 속성의 부류

전환(transition)
애니메이션(키 프레임 설명 포함)
다단(multiple column)

① 각 속성에 대해서 정리할 내용으로 속성의 기능, 속성값, 사용 방법은 반드시 포함해야 한다.
② 정리할 각 속성은 부류별로 구분하고, 각 부류별로 속성에 1번부터 번호를 매겨서 정리한다

목차

1. 주어진 HTML 요소(태그)에 대해서 다음 조건이 만족되도록 정리하시오.(15점)
header, hgroup, nav, section, article, aside, footer, mark, time, meter, progress, ruby, wbr, details, datalist, output

본문내용

애니메이션(키 프레임 설명 포함)

1. animation-name
기능 : 요소에 적용할 애니메이션을 설명하는 하나 이상의 at-규칙 이름을 지정
속성값 :
none : 키프레임이 없음을 나타내는 특수 키워드. 다른 식별자의 순서를 변경하지 않고 애니메이션을 비활성화하거나 캐스케이드에서 오는 애니메이션을 비활성화하는 데 사용
custom-ident : 애니메이션을 식별하는 이름입니다. 이 식별자는 대소문자 를 구분하는 문자 a~ z, 숫자 0~ 9, 밑줄( _) 및/또는 대시( -)의 조합으로 구성됩니다. 대시가 아닌 첫 번째 문자는 문자여야 합니다. 또한 식별자 시작 부분에 두 개의 대시를 사용할 수 없습니다. 또한 식별자는 none, unset, initial또는 inherit.

2. animation-duration
기능 : 애니메이션 효과를 재생할 시간을 설정.
속성값 :
time : 초(s) 또는 밀리초(ms)로 지정될 수 있다. 값은 양수 또는 0이어야하며 단위는 필수이다. 기본값인 0의 값은 애니메이션이 작동하지 않아야 함을 나타낸다.
animation-duration: 1.64s, 15.22s;
animation-duration: 10s, 35s, 230ms;

3. Animation-delay
기능 : 애니메이션이 시작할 시점을 지정. 시작 즉시, 잠시 후에, 또는 애니메이션이 일부 진행한 시점부터 시작할 수 있다.
속성값 :
time : 애니메이션이 시작될 요소가 적용되는 순간부터의 시간 오프셋입니다. 이 값은 초 또는 밀리 초 (ms)로 지정할 수 있습니다. 이 값은 필수입니다.
사용방법 :
animation-delay: 3s;
animation-delay: 0s;
animation-delay: -1500ms;

4. Animation-iteration-count
기능 : 애니메이션 효과가 몇 번 반복될 지를 설정.
속성값 :
infinite : 애니메이션은 영원히 반복.

참고자료

· 없음