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

과제정보

학과	컴퓨터과학과	학년	3학년
과목명	HTML 웹프로그래밍	자료	5건
공통	1. 주어진 HTML 요소(태그)에 대해서 다음 조건이 만족되도록 정리하시오.(15점) [HTML 요소 - header, hgroup, nav, section, article, aside, footer, mark, time, meter, progress, ruby, wbr, details, datalist, output] ① 각... 더보기 1. 주어진 HTML 요소(태그)에 대해서 다음 조건이 만족되도록 정리하시오.(15점) [HTML 요소 - header, hgroup, nav, section, article, aside, footer, mark, time, meter, progress, ruby, wbr, details, datalist, output] ① 각 요소는 주어진 순서대로 번호를 매겨서 정리한다. ② 각 요소에 대해서는 요소의 기능, 주요 속성(또는 하위 요소)의 기능, 그리고 간단한 활용 예시는 반드시 포함해서 설명해야 한다. ☞ 속성(하위 요소)이 없는 경우에는 속성(하위 요소) 설명은 생략된다. ☞ 활용 예시에는 해당 요소와 주요 속성(하위 요소)들의 사용 방법을 간단히 설명하는 정도의 예시를 포함한다. (예를 들어 <a> 태그의 href 속성의 경우: <a href=“http://www.knou.ac.kr”>방송대</a>) ☞ 요소의 속성 설명에는 기본적으로 전역 속성은 포함하지 않는다. 2. 다음과 같은 3가지 부류에 속하는 CSS 속성들을 모두 조사해서 다음 조건이 만족하도록 정리하시오.(15점) [CSS 속성의 부류 - 전환(transition)/애니메이션(키 프레임 설명 포함)/다단(multiple column)] ① 각 속성에 대해서 정리할 내용으로 속성의 기능, 속성값, 사용 방법은 반드시 포함해야 한다. ② 정리할 각 속성은 부류별로 구분하고, 각 부류별로 속성에 1번부터 번호를 매겨서 정리한다. 접기

소개글

"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 멀티 칼럼 레이아웃을 활용하여 다중 레이아웃을 쉽게 구현할 수 있다.

참고 자료

없음