HTML웹프로그래밍 중간과제 HTML 요소(태그), CSS 속성 정리

소개

"HTML웹프로그래밍 중간과제 HTML 요소(태그), CSS 속성 정리"에 대한 내용입니다.

목차

I. 주어진 HTML 요소(태그)에 대해서 다음 조건이 만족되도록 정리하시오.(15점)
1. header
2. hgroup
3. nav
4. section
5. article
6. aside
7. footer
8. mark
9. time
10. meter
11. progress
12. ruby
13. wbr
14. details
15. datalist
16. output

II. 다음과 같은 3가지 부류에 속하는 CSS 속성들을 모두 조사해서 다음 조건이 만족하도록 정리하시오.(15점)
1. 전환(transition)
2. 애니메이션
3. 다단(multiple column)

본문내용

전환(transition)
 속성의 기능
 CSS 속성(들)의 전환 효과를 지정한다.
 CSS 속성(들)의 시작과 끝을 지정하여 전환 효과를 줄 수 있다.

<중 략>

애니메이션
* 키프레임(key frame): CSS 애니메이션에서, 각 정해진 구간별로 (키프레임 사이) 어떤 스타일을 적용할 지 지정한다.
 속성의 기능
 키프레임 애니메이션을 정의한 후, 애니메이션 속성을 이용하여 키프레임 애니메이션을 연결, 요소에 애니메이션을 적용한다.
 키프레임 애니메이션이 연결되지 않은 경우 적용되지 않는다.

<중 략>

* 위의 속성들을 아래와 같이 짧게 줄여 사용할 수 있다.
.class명 {
animation-name: fadeOut;
animation-duration: 4s;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-direction: alternate;
}

. class명 {
animation: fadeOut 4s 1s infinite linear alternate;
}

다단(multiple column)
 속성의 기능
 CSS 멀티 칼럼 레이아웃을 활용하여 다중 레이아웃을 쉽게 구현할 수 있다.

참고자료

· 없음