배경&색상

Cascading

CSS: Cascading Style Sheet
한 요소가 여러가지 속성값을 상속받게 될 경우, cascading을 통해 우선순위가 결정됨

1. 중요도

css가 선언된 위치에 따라 중요도를 판단

• 브라우저 스타일 시트 < 사용 스타일시트 < 개발자 스타일 시트
• 개발자 스타일 시트 내부 우선순위
  <link> 로 연결한 CSS 파일 < < style > 요소 안의 CSS < 인라인 스타일 CSS

2. 구체성(명시도)

선택할 대상을 구체적으로 특정할수록 명시도 높음

• 부모에게 상속받은 속성 < 전체 선택자 < 태그 선택자 < 클래스 선택자 & 가상선택자 < ID 선택자

3. 선언순서

나중에 선언한 스타일이 우선 적용됨

배경

요소의 배경을 지정하는 CSS 속성

/*요소의 배경에 색상을 지정*/
background-color: #f12db0  

/*요소의 배경 이미지를 1개 혹은 여러 개 지정*/
background-image: url("이미지 경로") 
background-image: url1("이미지 경로1"), url2("이미지 경로2")

/*그라데이션 배경*/
background-image: linear-gradient(방향, 시작색상, 종료색상) 

/*요소의 배경 이미지의 위치를 지정*/
background-position: center       /*다섯가지 키워드를 조합하거나*/
background-position: top right 
background-position: left
background-position: bottom center
background-postion: 50px 24px     /*x축과 y축 수치 직접입력*/

/*요소 배경이미지의 반복 여부와 방향을 지정*/
background-repeat: no-repeat 
background-repeat: repeat
background-repeat: repeat-x
background-repeat: repeat-y

background-size: auto /*요소의 배경 이미지의 크기를 지정-원본크기*/
background-size: cover /*요소를 다 채우도록 이미지를 확대/축소(비율 유지)*/
background-size: contain /*요소를 벗어나지 않는 최대 크기로 확대/축소(비율 유지)*/

background-attachment: scroll (기본값) 
/*요소 배경 이미지: 고정, 요소: 스크롤, 요소 배경 이미지 위치: 요소 왼쪽 상단 기준*/
background-attachment: fixed 
/*요소 배경 이미지: 고정, 요소: 스크롤, 요소 배경 이미지 위치: 웹페이지 왼쪽 상단 기준*/
background-attachment: local 
/*요소 배경 이미지 & 요소: 함께 스크롤, 요소 배경 이미지 위치: 요소 왼쪽 상단 기준*/

/*background 단축 속성*/
/*background : color imageurl repeat position/size attachment*/
background: red url("이미지 경로") no-repeat center/cover fixed

/* <img>나 <video> 등 대체요소의 내용이 지정된 규격과 맞춰지는 방식을 지정*/
object-fit: fill (기본값) /*가로와 세로를 모두 채우도록 종횡 비율을 조정*/
object-fit: cover  /*종횡 비율을 유지하면서 가로와 세로를 모두 채우도록 확대*/
object-fit: contatin /*종횡 비율을 유지하면서 가로 또는 세로 하나라도 채우도록 확대*/
object-fit: none /*가로 세로와는 관계없이 원본크기 그대로 불러옴*/

/* <img>나 <video> 등 대체요소의 콘텐츠 정렬 방식을 지정*/
object-postion: 50% 50% (기본값)
object-position : 100px 40px

색상

1. 색상 이름 표기법

'웹 안전 색상'이라고 불리는 216가지 색상을 이름으로 표기

color : red

2. Hex 색상코드

16진수 여섯자리로 색상을 표기(#ffffff ~ #000000)
짧게 헥스코드라고 부르며 실무에서 가장 많이 사용

color : #94FB11

3. rgb 색상코드

rgb(red 좌표, green 좌표, blue 좌표) 값을 이용해 색상을 표기

color: rgb(251, 241, 17)

rgba라는 추가 속성을 이용하면 투명도 추가가능

rgba(0, 0, 0, 0.5)

4. opacity(불투명도)

0~1 사이의 숫자를 지정

opacity : 0.22

단위

상대단위 - vw / vh

vw 와 vh 는 요소의 규격을 viewport 의 너비값과 높이값에 비례하여 결정
(viewport : 화면 display 상의 표시 영역)