반응형
'이미지와 그라데이션 효과로 배경 꾸미기' 예제 파일이 아래와 같습니다.
아래 사진은 bg.png 파일입니다.
background html파일(1).txt
0.00MB
background html파일(2).txt
0.00MB
background html파일(3).txt
0.00MB
gradient-01.txt
0.00MB
gradient-02.txt
0.00MB
*그라데이션 원의 크기 지정
| 속성값 | 설명 |
| closest-side | 원형이라면 그라데이션 가장자리가 그라데이션 중심에서 가장 가까운 요소의 측면에 닿을 때까지 그립니다. 타원형이라면 그라데이션 중심에서 가장 가까운 요소의 가로 측면이나 세로 측면에 닿을 때까지 그립니다. 결과 화면은 그라데이션을 적용하는 요소가 변이 4개인 사각형입니다. 여기에서는 오른쪽 측면에서 그라데이션의 가장 자리가 닿을 때까지 그라데이션을 그립니다. |
| closest-corner | 그라데이션 가장자리가 중심에서 가장 가까운 요소의 코너에 닿도록 그립니다. 결과 화면은 그라데이션이 적용되는 사각형 요소에 꼭짓점(corner)이 4개 있는데, 그라데이션의 중심에서 가장 가까운 꼭짓점에 닿을 때까지 그라데이션을 그립니다. |
| farthest-side | 원형이라면 그라데이션 가장자리가 그라데이션 중심에서 가장 멀리 떨어져 있는 측면에 닿을 때까지 그립니다. 타원형이라면 그라데이션 가장자리가 그라데이션 중심에서 가장 멀리 떨어져 있는 가로 또는 세로 측면과 만나도록 합니다. |
| farthest-corner | 그라데이션의 가장자리가 그라데이션의 중심에서 가장 멀리 떨어져 있는 코너에 닿도록 합니다. 기본값입니다. |
반응형
'개발 및 관리 > HTML, CSS, Javascript, DOM' 카테고리의 다른 글
| 뷰포트(viewport), 미디어 쿼리 (0) | 2022.04.02 |
|---|---|
| CSS 고급선택자 - 화면 구성시 가장 참조가 될 듯 하다, 테스트파일 포함 (0) | 2022.04.02 |
| Javascript에 많이 사용하는, 레이아웃을 구성하는 CSS 박스 모델 (0) | 2022.03.26 |
| 텍스트 스타일 속성 (0) | 2022.03.26 |
| 글자 폰트, 글자 스타일, Google Fonts (0) | 2022.03.26 |
