CSS (Cascading Style Sheet)
3가지 기준이 있음
중요도 : CSS가 선언된 위치에 따라 우선순위가 결정된다.
브라우저 스타일시트 < 사용자 스타일시트 < 개발자 스타일시트
브라우저 스타일시트 : 기본적으로 적용되어있는 스타일시트
ex) a태그 색상, 버튼 기본 크기 등
사용자 스타일시트 : 사용자 폰트 지정, 고대비 모드 사용 등
개발자 스타일시트 : 웹페이지에 개발자가 만들언놓은 스타일시트
<link>로 연결한 css 파일 < <style> 요소 안에 있는 CSS < 인라인 스타일 CSS
구체성(명시도) : 선택할 대상을 구체적으로 특정할수록 명시도가 높아진다. 명시도가 높아지면 우선순위도 함께 높아진다.
선언 순서 : 나중에 선언한 스타일이 우선 적용된다.
background / background-color: 배경 색 지정
background-image:
url(”./url”); 이미지 출력
linear-gradient(to left, yello, red); 선형 그라데이션 출력
radial-gradient(); 원형 그라데이션
conic-gradient(); 콘형 그라데이션
,로 이어주면 배경을 여러개로 할 수 있음 ex) 그라데이션 위의 아이콘 배경
url(”image”), linear-gradient(yello, green);
background: red;
background-color: blue;
background-image: url("./image.jpg");
background-image: linear-gradient(to left, yello, red);
background-image: radial-gradient
background-image: conic
background-position : 요소의 배경 이미지의 위치를 지정
top
bottom
left
center
right
수치로도 가능(첫 번째가 x, 두 번째가 y)
background-repeat: 요소 배경 이미지의 반복여부
repeat : 반복(default)
no-repeat : 반복 x
repeat-x: x축으로만 반복
repeat-y: y축으로만 반복
background-size: 요소의 배경 이미지의 크기를 지정
auto : 기본 고유값(default)
cover : 이미지로 배경을 꽉 채워줌(확대)
contain : 이미지가 모두 보일 수 있는 한에서 확대함
수치로도 가능(첫 번째가 x, 두 번째가 y)
background-attachment : 배경의 스크롤 옵션
scroll : 외부 스크롤에 맞춰 이미지가 이동함(default), 내부 스크롤은 고정
fixed: 이미지 고정
local : 외부와 내부 스크롤에 맞춰 이미지가 이동함
순서를 지켜야한다고 함;;
