배경
배경 색상
background-color : red; 배경 이미지
background-image : url('이미지 경로') 배경 이미지 > 그라데이션
background-image: linear-gradient(to bottom, pink, yellow);예시) linear-gradient : 선형 그라데이션
예시) radial-gradient(pink, yellow) : 원형;
예시 ) conic-gradient( pink, yellow) : 콘형;
배경 이미지는 2개 이상 사용 가능
먼저 선언한 배경 이미지가 보여지게 됨.
background-image: url("../img/chikawa.jpeg"), url('../img/chikawa2.jpeg');
배경 이미지 위치
background-position : top right;
background-position : center;
background-position : 50px 150px;
배경 이미지의 반복
background-repeat: repeat
background-repeat: no-repeat
background-repeat: repeat-x
background-repeat: repeat-y배경 이미지 사이즈
background-size: auto이미지 크기 변화 없이 그냥 나열
background-size: cover;화면에 이미지를 가득 채워주는 속성
background-size : contain; 화면에 빈틈이 있어도 이미지 전체를 다 보여주는 속성
background-size: 400px 300px;크기를 지정해줄 수도 있다.
배경 이미지의 스크롤 여부 지정
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;scroll : scroll 시 내부 스크롤을 내리면 이미지가 따라서 내려가지 않음. (기본값)
fixed : scroll 시에도 이미지가 고정되어 바뀌지 않음
local : scroll 시 내부,외부 스크롤을 내리면 이미지가 따라서 내려감.
background 단축 속성
단축속성으로 적용 가능한 속성들
- background-color
- background-image
- background-position
- background-repeat
- background-size
bachkground : color image reapeat position/size attachment
ex)
background : red url("../..") no-repeat center/cover fixed object -fit
<img> 나 <video> 등 대체요소의 내용이 지정된 너비와 높이에 맞춰지는 방식
object-fit : cover; // 화면에서 보여지기 적절하게
object-fit : fill; (기본값)// 이미지크기 상관없이 꽉
object-fit : contain; // 이미지 크기에 맞게
object-fit : none; // 이미지 크기에 적잘하게
object-position
<img> 나 <video> 등 대체요소의 콘텐츠 정렬반식
object-position : center top; 색상
색상이름 표기법
blue, red, olive 와 같이 정해진 이름으로 표기하는 것
기본 16색 + 200색 정도가 이름이 정해져 있다.
이 216색을 웹 안전 색상이라고 한다.
웹 안전색상 ?
어떤 운영체제, 어떤 브라우저에서도 '안전하게' 그려지는 색상
Hex 색상코드
16진수 여섯자리로 색상을 표기하는 방법
ex) #ffffff
실무에서 가장 많이 사용되는 방법
rgb 색상코드
rgb 요소에는 0 - 255 사이의 숫자를 입력할 수 있다.
rgba(0,0,0,0.35) 맨마지막 0.35는 투명도를 의미
absolutely love this part