한국방송통신대학교 [HTML5] 기말(과제물형)입니다.

소개

"한국방송통신대학교 [HTML5] 기말(과제물형)입니다."에 대한 내용입니다.

목차

1. [교재 2장] HTML5로 업그레이드되면서 새롭게 추가된 요소.
2. [교재 5장] 배경, 그라데이션, 변형, 전환, 애니메이션(키 프레임 포함), 다단, 카운터에 속하는 속성(함수)

본문내용

그라데이션

1 linear-gradient

기능
선형 그라데이션 효과를 만들기 위해 사용하는 속성.

속성값
1. 진행 방향 : 원의 중심을 기준으로 하여 방향을 나타내는 키워드나 각도를 사용하여 지정. 키워드를 사용할 땐 앞에 to를 붙여 사용.
① 각도 → 숫자deg : 각도 방향으로 그라데이션 효과 지정. 원을 기준으로 12시 방향이 0deg이자 360deg.
② 키워드 → 기본값은 to bottom(=180deg, 위에서 아래로 그라데이션 지정)
그 외에도 to top(아래에서 위로), to left(오른쪽에서 왼쪽으로), to right(왼쪽에서 오른쪽으로), to bottom right(좌측 상단에서 우측 하단으로), to top left(우측 하단에서 좌측 상단으로) 등.
2. color-stop : 색상값을 지정. 최소 두 개 이상의 색상을 콤마로 나열해야 함.

사용 방법
linear-gradient(진행방향, color-stop1, color-stop2 ... )
1. 진행방향의 인자는, 반시계 방향으로 계산한 음수 각도로도 지정 가능.
*예시) linear-gradient(-45deg, red, blue) = liner-gradient(315deg, red, blue)
2. color-stop 뒤에 폭이나 높이에 대한 백분율(%) 등을 붙이면 그 색을 사용하는 비율을 정하게 되어 불균일한 그라데이션 효과를 나타낼 수도 있음.
*예시) linear-gradient(to top left, yellow 10%, red 20%)
3. 선형 그라데이션 패턴이 일정하게 반복되어 나타나는 효과를 주고자 할 땐 repeating-linear-gradient 속성을 사용. linear-gradient와 속성값, 사용 방법은 동일.

참고자료

· 없음