[CSS]배경, 색상

https://www.inflearn.com/course/%EA%B0%95%EB%A0%A5-css-%EC%BD%94%EB%93%9C%EC%BA%A0%ED%94%84/dashboard

[코드캠프] 강력한 CSS 강의 - 인프런

---

 

🔎캐스캐이딩(Cascading)

수많은 스타일 요소 중 어떤 스타일을 브라우저에 그릴지 결정해주는 CSS 우선순위 적용 원리

 

중요도: CSS가 선언된 위치에 따라 우선순위가 결정된다.(브라우저 스타일 시트<사용자 스타일 시트<개발자 스타일 시트)

 

구체성(명시도): 선택할 대상을 구체적으로 특정할수록 명시도가 높아진다. 명시도가 높아지면 우선순위도 함께 높아진다.

!important

*{
	color: red!important;
}

!important를 통해서 강제로 명시도를 끌어올릴 수 있다.

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

 

선언 순서

나중에 선언한 스타일이 우선 적용된다.

 

 

🔎배경

✔️background-color

요소의 배경에 색상을 지정한다.

background-color: #f12db0;

 

✔️background-image

요소의 배경 이미지를 한개, 혹은 여러 개 지정한다.

background-image: url(”이미지 경로”)

 

그라데이션 지정도 가능하다.

background-image: linear-gradient(to top, red, blue);
backgound-image: linear-gradient(방향, 시작 색상, 종료 색상);

 

✔️background-position

요소의 배경 이미지의 위치를 지정한다.

background-position: top right | center | 50px 150px;

 

✔️background-repeat

요소의 배경 이미지의 반복 여부, 반복 방향을 지정한다.

background-repeat: no-repeat

기본값은 repeat이다.

 

✔️background-size

요소의 배경이미지의 크기를 지정한다.

background-size: auto ⇒ 기본값

background-size: cover ⇒ 이미지를 늘려서 컨테이너 크기에 맞게 넣는다.

background-size: contain ⇒ 크기를 늘리되 사진이 모두 컨테이너에 표현되도록 한다.

 

✔️background-attachment

요소의 배경 이미지의 스크를 여부를 지정한다.

background-attachment: scroll;: 기본값

background-attachment: fixed;: 이미지 고정(스크롤에 이미지가 따라 움직이지 않는다.)

background-attachment: local;: 내부에서도 스크롤 적용

 

✔️background 단축속성

background 관련 속성들을 한 번에 지정할 수 있다.

background-color/background-image/background-position/background-repeat/background-size

⇒background: color image repeat position/size attachment

⇒background: red url(”../start.png”) no-repeat center/cover fixed

 

✔️object-fit

<img>나 <video>등 대체요소의 내용이 지정된 너비와 높이에 맞춰지는 방식을 지정한다.

object-fit: fill: 기본값

object-fit: cover: 이미지 안에 빈틈이 생기지 않는 범위에서 적절하게 이미지가 늘어난다.

object-fit: contain: 이미지 안에 빈틈이 생기더라고 이미지의 전체가 보여지도록 보여준다.

object-fit: none: 이미지를 그대로 보여줌

 

✔️object-position

<img>나 <video> 등 대체요소의 콘텐츠 정렬 방식을 지정한다.

object-position: center top;

 

 

🔎색상

색상 이름

• 기본 16색+200색=총 216가지의 색상 표현 가능⇒웹 안전 색상(어떤 운영체제, 어떤 브라우저에서도 안전하게 그려지는 색을 뜻한다.)
• 색의 이름을 표기하는 방식

 

Hex 색상코드

• VSCode: color-picker
• 16진수 여섯자리로 색상을 표기하는 방법

 

rgb/rgba

• a는 알파로 색상에 투명도도 적용할 수 있다.
• opacity속성으로도 색상의 투명도를 조절할 수 있다.
• red, green, blue 값을 이용해 색상을 표기하는 방법

 

🔎단위2

✔️상대단위-vw/vh

요소의 규격을 viewport의 너비값과 높이값에 비례하여 결정한다.

viewport란? 브라우저내에서 실제 화면이 그려지는 영역을 의미한다.

예를 들어 viewport가 1200px*920px인 경우

10vw ⇒ 1200*0.1=120px

50vh ⇒ 920*0.5=460px;

100vw ⇒ 1200*1=1200px;

이다.