[CSS] 이미지와 그라데이션 효과로 배경 꾸미기

1.1 배경색과 배경범위 지정

• background-color
• background-clip : border-box padding-box content-box

1.2 배경 이미지 지정

• background: url() <repeat> <position> <attachment>
• background-image: url("이미지파일경로")
• background-repeat : repeat-x repeat-y no-repeat
• background-position: <수평위치> <수직위치>;
  • 수평 위치 : left | center | right | 길이값 | %
  • 수직 위치 : top | center | right | 길이값 | %
• background-origin : border-box padding-box content-box
• background-attachment : scroll | fixed
• background-size : auto | contain | cover | 크기 | %

1.3 그라데이션 효과

• 선형 그라데이션 : linear-gradient(to <방향>, <색상>, <색상>)

#grad{
                width: 400px;
                height: 300px;
                background-color: blue;
                float: left;

                background: linear-gradient(to right bottom, blue, white);
            }

#grad2{
                width: 400px;
                height: 300px;
                float: left;
                margin: 0 10px;

                background-color: pink;
                background : linear-gradient(to bottom, pink, white 30%, rgb(248, 117, 117));
                /*linear-gradient( 방향, 사진 색상, 30% 위치의 중지점과 색상, 끝 색상 ) */
            }

코드 실행결과

• 원형 그라데이션 : radial-gradient(<모양> <크기> at <위치>, <색상>, <색상>)