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

소개글

과제물의 문제에 적합한 형식과 내용으로 정성을 다해 작성했습니다.
여러 참고자료를 바탕으로 주요내용을 최대한 이해하기 쉽도록 정리했습니다.
리포트를 효율적으로 작성하시는 데 작은 도움이라도 되시기를 진심으로 바랍니다.^^

문단 모양(왼쪽 여백 0, 오른쪽 여백 0, 줄간격 130%)
글자 모양(바탕체, 장평 100%, 크기 11 pt, 자간 0%)

목차

1. [교재 2장]에서 다룬 HTML 요소 중에서 HTML5로 업그레이드되면서 새롭게 추가된 요소를 모두 찾아서 다음 조건이 만족되도록 정리하시오.

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

3. 참고문헌

본문내용

⑥background-origin 배경 이미지가 시작되는 위치를 지정한다. 속성값 border-box는 테두리를 확장하고, padding-box는 테두리를 확장하지 않으며, content-box는 콘텐츠 영역만을 확장한다. 단, background-attachment 값이 fixed면 동작하지 않는다.
div { background-image: url(tose.gif); background-origin: content-box; }

⑦background-size 배경 이미지의 크기를 지정하는 요소로 속성값에 따라 영영에 크기를 맞춘다. 속성값으로 폭과 높이가 오는데, 이때 auto, px, %가 사용된다. 두 번째 값이 생략되면 auto가 적용된다. 속성값 cover는 배경 이미지 배율을 크게 하여 배경 이미지를 영역에 포함시키고, 이때 배경 이미지의 일부분은 그 영역을 벗어날 수 있다. 속성값 contain은 콘텐츠 영역 안쪽에 폭과 높이 모두 가능한 가장 큰 사이즈로 조정한다.
div {background-size: 100px 50px;}
h1 {background-size: cover;}

⑧background-clip 배경 색상이나 이미지가 적용되는 영역을 지정한다. 속성값 border-box는 테두리를 확장하고, padding-box는 테두리를 확장하지 않으며, content-box는 콘텐츠 영역만을 확장한다.
h1 {background-clip: content-box;}

⑨background 이상 설명한 속성들을 일괄 지정할 때 사용한다. 형식은 -color -image -position / -size -repeat -orgin -clip -attachment의 순서를 따른다. 다만, background-size 속성 사용 시에는 반드시 /를 사용해야 한다. 여러 색의 이미지 파일을 사용하면서 배경색을 지정할 경우에는 background-color 속성을 리스트의 맨 뒤에 위치시킨다.

참고 자료

이관용(2018). HTML5. 한국방송대학교출판문화원.
http://tcpschool.com/
https://html.spec.whatwg.org/dev/
https://www.w3schools.com/