(방송통신대 HTML5 기말시험)HTML 요소 중에서 HTML5로 업그레이드되면서 새롭게 추가된 요소 CSS 속성 중에서 다음 부류에 속하는 속성(함수)들을 모두 찾아
본 자료는 4페이지 의 미리보기를 제공합니다. 이미지를 클릭하여 주세요.
닫기
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
해당 자료는 4페이지 까지만 미리보기를 제공합니다.
4페이지 이후부터 다운로드 후 확인할 수 있습니다.

소개글

(방송통신대 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/
  • 가격10,000
  • 페이지수12페이지
  • 등록일2020.10.21
  • 저작시기2020.10
  • 파일형식한글(hwp)
  • 자료번호#1138287
본 자료는 최근 2주간 다운받은 회원이 없습니다.
다운로드 장바구니