색상과 배경을 위한 스타일
웹에서 색상 표현
- a는 알파값으로 0~1까지의 값으로 불투명도를 나타낸다.
- 1에 가까워 질수록 불투명하고, 0은 완전 투명이다.
- 알파값 소수점 앞의 0은 생략 가능하다.
<예제>
배경 색과 배경 이미지
background-color
- 16진수로 세밀한 색조정 가능
- rgb값으로 0-255로 조절 가능
background-clip
- 배경을 어디까지 적용할 것인지 지정
- 테두리까지, 패딩한 구역까지(테두리 앞까지), 내용부분만
background-image
- 배경 이미지 파일 경로를 지정
background-size
- auto : 배경 이미지만 표시(이미지 큰데 영역이 작으면 일부분만 표시)
- 배경 이미지에 픽셀을 줘서 크기 조절 가능
- 백분율을 사용해서 크기 조절 가능
- contain : 이미지가 배경이미지를 다 덮도록(사이즈가 맞다면 딱 들어맞게 됨)
- cover : 이미지가 다 덮어버리며, 여백이 있다면 확대를 해서 여백이 없도록 들어감
background-position
- 수평, 수직
- 이미지의 위치를 조정
- 기본적으로 길이값으로 사용
background-orgin
- 각 박스에 딱 붙도록 하는 기능
background-attachment
- fixed : 화면을 스크롤해도 이미지가 계속 따라다님
- scroll : 스크롤을 움직이면 이미지가 따라오지 않음
<예제>
<예제 - background-clip>
<예제 - background-image>
배경화면으로 저 이미지 바로 출력됨
<예제 - background-size>
<예제 - background-position>
<예제 - background-orgin>
<예제 - background-attachment>
그라데이션 효과로 배경 꾸미기
선형 그라데이션
방향
- 선을 따라 그라데이션 효과가 주어짐
- grad클래스 마지막은 오른쪽 아래로 방향을 맞추는 것
각도
색상 중지점
그라데이션이 멈추는 지점을 지정하는 것
원형 그라데이션
모양
- radial : 원형
위치
원에서 10퍼 부분이 중심점이고, 거기서 10퍼를 그라데이션 만든ㄷ아
크기
- 측면이랑 모서리랑 가장 가까운거
- 측면이랑 모서리에서 가장 먼거
그라데이션 반복
- 시작과 종료를 반복하는 것
- 노란색으로 시작해서, 노란색 20픽셀까지, 빨간색 20픽셀부터 시작, 빨간색 40픽셀까지 -> 반복
<예제>
<예제>
<예제>
<예제>
<예제>
<예제>
<예제>
