(방송통신대 HTML웹프로그래밍 중간과제물)주어진 HTML 요소(태그)에 대해서 다음 조건이 만족되도록 정리하시오 다음과 같은 3가지 부류에 속하는 CSS 속성들을 모두 조사해서 다음 조건이 만족하도록 정리하시오

소개글

(방송통신대 HTML웹프로그래밍 중간과제물)주어진 HTML 요소(태그)에 대해서 다음 조건이 만족되도록 정리하시오 다음과 같은 3가지 부류에 속하는 CSS 속성들을 모두 조사해서 다음 조건이 만족하도록 정리하시오에 대한 보고서 자료입니다.

목차

1. 주어진 HTML 요소(태그)에 대해서 다음 조건이 만족되도록 정리하시오.(15점)
1) header
① 요소의 기능 ② 주요 속성(또는 하위 요소)의 기능 ③ 활용 예시
2) hgroup
① 요소의 기능 ② 주요 속성(또는 하위 요소)의 기능 ③ 활용 예시
...... 생략 ......
16) output
① 요소의 기능 ② 주요 속성(또는 하위 요소)의 기능 ③ 활용 예시

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

1) 전환(transition)
(1) transition-property
① 속성의 기능 ② 속성값 ③ 사용방법
...... 생략 .....
(5) transition
① 속성의 기능 ② 속성값 ③ 사용방법

2) 애니메이션(키 프레임 설명 포함)
(1) 키프레임
① 속성의 기능 ② 속성값 ③ 사용방법
...... 생략 ......
(10) animation
① 속성의 기능 ② 속성값 ③ 사용방법

3) 다단(multiple column)
(1) column-count
① 속성의 기능 ② 속성값 ③ 사용방법
...... 생략 ......
(10) column-fill
① 속성의 기능 ② 속성값 ③ 사용방법

3. 참고문헌

본문내용

대기 중과 완료 후의 스타일은 변경되지 않는다. forwards면 마지막 키프레임에서 지정된 스타일을 유지하고, backwards면 시작 전이나 대기시간 중에 처음 키프레임에서의 css 스타일을 유지한다. both면 forwards와 backward 모두 적용된다. 즉, 대기 중에는 최초의 키프레임에서 설정된 스타일을, 완료 후에는 마지막 키프레임에서 설정된 스타일을 적용한다.
③ 사용방법
animation-fill-mode: forwards;
(10) animation
① 속성의 기능
애니메이션의 모든 속성을 일괄 지정한다.
② 속성값
-name -duration -timing-function -delay -iteration-count -direction -fill-mode -play-state 순으로 지정하면 된다. 기본값은 “animation: none ease 0 1 normal none running;\"이다. 즉, animation 속성의 기본값은 각 속성의 기본값이 된다. animation duration과 animation delay의 경우 먼저 지정된 값이 animation duration이고, 나중에 지정된 값이 animation delay로 간주된다.
③ 사용방법
animation: myMovie 1s ease-in infinite alternate;
3) 다단(multiple column)
(1) column-count
① 속성의 기능
다단 구성 시 단의 개수를 지정한다. 이 속성으로 다단을 구성할 경우 모든 단의 폭이 균등하하게 맞춰지고 높이도 동일하도록 자동 조정된다. 또한 기본값으로 지정된 단 구성은 표시 가능한 영역의 폭 전체를 사용하여 표시된다.
② 속성값
속성값으로는 정수값과 auto가 있다. 기본값은 auto이다. 폭이 좁아 지정한 정수값의 단수를 표시할 수 없을 경우에는 그보다 적은 단수로 표시된다. auto로 지정되면, 단의 수는 column-width 등의 다른 속성에 의해 결정된다. 단, column-count와 column-width 두 속성의 값을 동시에 auto로 지정할 수 없다.
③ 사용방법
div { column-count : 3 ; }
(2) column-width
① 속성의 기능
단의 가로 폭을 지정한다.
② 속성값
기본값은 auto이고 0보다 큰 실수값에 단위를 붙여 사용한다. 표시 영역이 남는 경우에는 각 단을 넓혀서 표시되고, 그렇지 않은 경우에는 지정한 폭보다 좁게 표시된다. auto값을 가지면, 단의 폭은 column-count 등의 다른 속성에 의해 결정된다.
③ 사용방법
div { column-width : 3em; }
(3) columns
① 속성의 기능
단의 수와 폭을 일괄 지정한다.
② 속성값
column-count과 column-width 속성의 값을 가진다. 임의의 순서로 나열된다. 어느 한 값은 생략가능하고, 생략되면 그 속성의 초기값이 적용된다.
③ 사용방법
div { columns : 50px 3; }
(4) column-gap
① 속성의 기능
단과 단 사이의 간격을 지정한다.
② 속성값
초기값은 nromal이다. nromal이면 단의 간격은 브라우저에 의해 지정된다. (양의 실수 + 단위)의 값을 지정할 수 있다.
③ 사용방법
div { column-gap : 30px; }
(5) column-rule-style
① 속성의 기능
단 경계선의 종류를 지정한다.
② 속성값
초기값은 normal이다. boder-style의 속성값처럼 none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset 등이 속성값이 될 수 있다.
③ 사용방법
div { column-rule-style : dotted; }
(6) column-rule-width
① 속성의 기능
단 경계선의 굵기를 지정한다.
② 속성값
초기값은 medium으로 실제 굵기는 브라우저에 의존한다. thin, thickk, (양의 실수값 + 단위) 등이 속성값이 될 수 있다.
③ 사용방법
div { column-rule-width : solid; }
div { column-rule-width : 5px; }
(7) column-rule-color
① 속성의 기능
단 경계선의 색을 지정한다.
② 속성값
원하는 색상을 입력한다. 색은 RGB, RGBA, HSL, HSLA, 색이름, currentColor 등의 방식으로 지정할 수 있다.
③ 사용방법
div { column-color : #ff6699; }
(8) column-rule
① 속성의 기능
단 경계선의 속성을 일괄 지정한다.
② 속성값
속성값은 각 속성의 값으로 지정한다. 값이 생략되면 해당 속성의 초기값이 적용된다. 임의 순서로 나열된다.
③ 사용방법
div { column-rule : solid 20px #ff6699; }
(9) column-span
① 속성의 기능
요소를 여러 단에 걸쳐서 표시한다.
② 속성값
기본값은 none이다. none은 여러 단을 차지하지 않도록 한다. all 값은 지정된 요소가 모든 단에 걸쳐서 표시된다.
③ 사용방법
div { column-span : all ; }
(10) column-fill
① 속성의 기능
단끼리의 높이 밸런스를 지정한다. 즉, 각 단을 차지하는 콘텐츠 흐름을 조절하여 각 단의 길이 차이를 최소화할지 여부를 지정한다.
② 속성값
기본값 balance는 동일한 양의 콘텐츠로 채워져 각 단의 길이가 균형 있게 유지된다. auto로 지정하면 앞에 있는 단부터 순서대로 채워나간다.
③ 사용방법
div { column-fill : balance ; }
3. 참고문헌
이관용(2017). HTML웹프로그래밍. 한국방송통신대학교출판문화원.
이관용(2018). HTML5. 한국방송통신대학교출판문화원.
임효성(2021). (비전공자를 위한)첫 코딩 챌린지 : HTML5, CSS3. 골든래빗.
ANK Co.,Ltd.(2018). HTML5 & CSS3 사전. 성안당.
에릭 마이어, 에스텔 웨일(2021). CSS 완벽 가이드. 웹액츄얼코리아.

키워드

방송통신대HTML웹프로그래밍,   방송대HTML웹프로그래밍,   방통대HTML웹프로그래밍