Cascading (캐스케이딩)
수많은 스타일 요소들 중 어떤 스타일을 브라우저에 그릴지 결정해주는 CSS 우선순위 적용 원리
*CSS 는 위에서 아래로 읽어내려가면서 속성이 적용됨 (덮어쓰기 가능)
기준1. 중요도
CSS의 선언 위치에 따라 중요도를 판단
기준2. 구체성(명시도)
-선택할 대상을 구체적으로 특정할 수록 명시도 높아짐
-명시도가 높아지면, 우선순위도 높아짐
[구체성 정도]
부모에게 상속받은 속성 < 전체 선택자 < 태그 선택자 < 클래스 선택자, 가상 선택자 < ID 선택자
기준3. 선언순서
-나중에 선언한 스타일이 우선적용 됨
ex. 같은 선택자로 CSS 속성값을 여러 번 적용할 경우, 가장 마지막에 선언한 속성값이 적용 됨
배경(Background) 속성
-
background-color=> 배경 색상 지정 -
background-image:url()=> 요소에 배경이미지를 한 개, 혹은 여러 개 지정 -
background-image:=> 요소에 그라데이션 효과 지정
-linear-gradient(방향, 시작색상, 종료색상) = [선형]
-radial-gradient(방향, 시작색상, 종료색상) = [원형]
-conic-gradient(방향, 시작색상, 종료색상) = [Corn형] -
background-position=> 요소의 배경이미지 위치 지정 -
background-repeat=> 요소의 배경이미지 반복여부, 반복방향 지정 -
background-size=> 요소의 배경이미지 크기 지정 [cover | auto | contain] -
background-attachment:=> 요소의 배경이미지 스크롤 여부 지정
-scroll; = 움직이지만 스크롤 바로는 움직여지지 않음
-fixed; = 고정, 스크롤 안 됨
-local; = 스크롤 바로 내리거나 올릴 수 있음
Background 단축속성
-
background 관련 속성들을 한 번에 지정 가능
[background: color image repeat position/size attachment]속성 이미지 반복여부 지정할 위치 크기 스크롤 여부
↑ (해당 순서대로 입력해야 제대로 속성 반영 됨)
object-fit
<img>나 <video> 등 대체소요의 내용이 지정된 규격과 맞춰지는 방식을 지정
*(img, video 같은 태그로 배경 속성을 넣으면 속성값이 적용되지 않기에 object-fit 활용)
object-fit:cover=> 여백없이 꽉 채움object-fit:contain=> 여백있어도 img 전체부분이 보이도록 채움object-fit:none=> img의 원본크기 그대로 보이게 함
object-position=> img, video 같은 대체요소의 콘텐츠 정렬방식 지정
ex. object-position : 100px 40px
색상
색상표기법
-
색상이름=> red, blue, white... -
Hex색상코드=> color: #222222 -
rgb 색상코드=> color: rgb(251, 247, 71)
+a) 투명도 적용 => color: rgba(250, 0, 12, 0.35)←투명도 수준
+a) 불투명도 적용 => opacity : 0.33
calc()
괄호 안의 사칙연산을 수행하고, 그 결과값을 속성값으로 사용
ex. calc(50px + 50px), calc(100% - 120px)
주의!
(곱셈), /(나눗셈)=> ex. calc(A/B) [공백 X]
+(덧셈), -(뺄셈)=> ex. calc(A - B) [공백 O]
z-index
Position을 이용해 위치를 옮기다 보면 요소끼리 겹치는 경우가 생기는데, 이 때 어떤 요소가 먼저 앞으로 나올지를 결정하는 속성
+a) 속성값에 Position이 설정되어 있지 않으면 Z-index는 적용되지 않음
transition
CSS 속성에 애니메이션을 추가 [속성 변화의 전, 후 사이를 부드럽게 이어줌]
-
transition-property=> 어떤 속성에 transition을 적용할 것인지 지정
ex. transition-property:color -
transition-duration=> transition에 걸리는 시간 지정
transition-timing-function:=> transition의 속도 패턴 지정
linear = 일정 속도로 변화
ease = 시작은 빠르게 가다가 점점 느려짐
ease-in = 천천히 시작해서 빨라지며 끝남
ease-out = 빠르게 시작해서 천천히 끝남
ease-in-out = 천천히 시작, 정상속도 되었다가, 빨라지며 끝남
transition-delay=> transition 요청 받은 후, 실제 실행되기까지 기다려야 하는 시간의 양 지정
transition 단축속성
- transition 관련 속성들을 한 번에 지정 가능
[transition: color 0.4s ease-in-out 1.5s]
속성 duration timing-function delay
↑ (해당 순서대로 입력해야 제대로 속성 반영 됨)
