(방송통신대 HTML5 기말시험)HTML 요소 중에서 HTML5로 업그레이드되면서 새롭게 추가된 요소 CSS 속성 중에서 다음 부류에 속하는 속성(함수)들을 모두 찾아

소개글

(방송통신대 HTML5 기말시험)HTML 요소 중에서 HTML5로 업그레이드되면서 새롭게 추가된 요소 CSS 속성 중에서 다음 부류에 속하는 속성(함수)들을 모두 찾아에 대한 보고서 자료입니다.

목차

1. [교재 2장]에서 다룬 HTML 요소 중에서 HTML5로 업그레이드되면서 새롭게 추가된 요소를 모두 찾아서 다음 조건이 만족되도록 정리하시오.
2. [교재 5장]에서 다룬 CSS 속성 중에서 다음 부류에 속하는 속성(함수)들을 모두 찾아서 다음 조건이 만족되도록 정리하시오.
1)배경
2)그라데이션
(1)선형 그라데이션 (2)방사형 그라데이션
3)변형 4)전환 5)애니메이션(키 프레임 포함)
6)다단 7)카운터

3. 참고문헌

본문내용

방향, reverse면 역방향이다. alternate면 순방향으로 시작해 역방향과 순방향으로 번갈아 재생한다. alternate-reverse면 역방향으로 시작해 순방향과 역방향으로 번갈아 재생한다.
animation-direction: alternate;
⑧animation-play-state
애니메이션 살행 또는 일지정지 상태를 지정한다. 속성값이 running(기본값)이면 재생하고 paused면 정지한다.
animation-play-state: paused;
⑨animation-fill-mode
애니메이션 실행 이전의 스타일이나 실행 이후의 스타일의 유지 여부를 저정한다. none(기본값)이면 실행 전후의 어떤 스타일도 유지하지 않는다. forwards면 마지막 키프레임에서 지정된 스타일을 유지하고, backwards면 시작 전이나 대기시간 동안의 첫 번째 키프레임에서의 css 스타일을 유지한다. both면 forwards와 backward 모두 적용된다.
animation-fill-mode: forwards;
⑨animation
모든 속성을 일괄 지정한다. -name -duration -timing-function -delay -iteration-count -direction -fill-mode -play-state 순으로 나열된다. 기본값은 “animation: none ease 0 1 normal none running;\"이다.
animation: movie 1s ease-in Infinite Alternate;
6)다단
①column-count, column-width, columns
다단 구성 시 단의 개수를 지정하는 속성이다. column-width 속성을 사용하면 단의 폭에 따라 자동으로 단의 개수가 정해진다. 그러나 이 두 속성의 값을 동시에 auto로 지정할 수 없다. columns는 개수와 너비를 일괄 지정한다.
div { column-count : 3 ; }
div { columns : 100px 3 ; }
②column-gap
단과 단 사이의 간격을 지정하는 속성이다.
div { column-gap : 30px ; }
③column-rule
단과 단 사이의 구분선을 표현하기 위한 속성으로 border 속성의 형식과 값을 동일하게 사용한다. 세부속성인 columnrulewidth은 다단 구분선의 굵기를 지정하고, columnrulestyle은 border-style 속성과 동일하게 none, hidden, dotted 등의 구분선 형태를 지정하며, columnrulecolor는 색상을 지정한다.
div { column-rule : #f00 solid 2px ; }
④column-span
다단 구성 시 여러 단을 차지하는 요소를 지정하기 위한 속성으로, none값은 여러 단을 차지하지 않도록 하고, all 값은 지정된 요소가 여러 개의 단 영역을 차지하도록 한다.
div { column-span : all ; }
⑤column-fill
각 단을 차지하는 콘텐츠 흐름을 조절하여 각 단의 길이 차이를 최소화할지 여부를 지정한다. auto(기본값)는 단이 순서대로 채워져 단의 길이가 달라질 수 있다. balance는 동일한 양의 콘텐츠로 채워져 각 단의 길이가 균형 있게 유지된다.
div { column-fill : balance ; }
7)카운터
css 카운터는 문서에서의 위치에 따라 콘텐츠의 모양을 조절해준다.
①content
가상요소(::before, ::after)와 사용해 html문서에 쓰지 않고 요소의 앞이나 뒤에 콘텐츠를 생성하는 속성이다. 속성값으로는 normal(기본값), none, counter, attr, 문자열, open-quote, close-quote, no-open-quote, no-close-quote, url, initial, inherit 등이 있다.
p::before{content: \"더보기“;}
②counter-reset
하나 이상의 css 카운터를 생성하거나 초기화하는 속성이다. 속성값은 none(기본값)이나 아이디 숫자가 된다. 리셋값의 숫자가 생략되면 기본값은 0이다.
body {counter-reset: section 0;}
③counter-increment
css 변수의 값을 증가 또는 감소시키는 속성으로 속성값은 none(기본값)이나 아이디 숫자가 된다. 숫자의 경우 기본값이 1이나 음수도 사용 가능하다.
h2::before {
counter-increment: section;
content: \"Section \" counter(section) \": \"; }
④counter()
counter(name, style)함수는 숫자를 자동으로 생성해 콘텐츠에 추가하는 함수다. name는 카운터 이름이고, style(선택적 인자)은 list-style-type와 동일한 값으로 disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha, none 등이 사용된다.
h2::before {
counter-increment: section;
content: \"Section \" counter(section) \": \"; }
⑤counters()
counters(name, string, style)함수를 사용하면 다른 수준의 중첩된 카운터 사이에 문자열을 추가할 수 있다. 즉, counter로는 1차 선형구조의 번호만 생성되나, counters()는 1.1, 1.2, 1.3, 2.1, 2.2처럼 번호가 매겨지도록 할 수 있다.
li::before {
counter-increment: section;
content: counters(section, \".\") \" \";
}
3. 참고문헌
이관용(2018). HTML5. 한국방송대학교출판문화원.
http://tcpschool.com/
https://html.spec.whatwg.org/dev/
https://www.w3schools.com/

키워드

방송대HTML5,   방통대HTML5,   HTML5로업그레이드되면서,   새롭게추가된요소,   CSS속성