캐스케이딩
- CSS에서의 cascading이란?
- 수 많은 스타일 요소 중 어떤 스타일을 브라우저에 그릴지 결정해주는 CSS 우선 순위 적용 원리
- 크게 세가지 기준이 있다.
- 중요도 / 구체성(명시도) / 선언 순서
- 기준 1. 중요도 CSS가 선언된 위치에 따라 우선 순위가 결정된다.
개발자 스타일 시트의 중요도 (개발자 스타일 시트 안에서도 중요도 순위가 나뉨)
❗ 중요도 우선순위 정리
-
기준 2. 구체성(명시도)
선택할 대상을 구체적으로 특정할수록 명시도가 높아진다.
명시도가 높아지면 우선 순위도 함께 높아진다.구체성 원리에 의해 아이디 선택자의 속성이 적용됨을 알 수 있다.
선택자는 광범위 할수록 우선순위가 낮고, 구체적이고 작은 범위일수록 우선순위가 높다. -
기준 3 선언 순서
만일 명시도가 동일한 여러 개의 선언이 중첩 되어 있을 경우
가장 나중에 선언한 스타일을 적용하게 된다.
-
❗ 만일 명시도(구체성)를 강제로 끌어올리고 싶다면?
→!important라는 명령어를 이용하기!
해당 명령어는 모든 조건을 무시하고 강제로 명시도를 최상위로 끌어올려준다.
우선 순위가 가장 낮았던 전체 선택자 속성 값에 해당 명령어를 주게 되면,
전체 선택자의 속성이 적용된다.
하지만 높은 우선 순위를 갖고 있는 만큼 주의를 기울여 사용해야 한다.
자칫 잘못 사용하면 해당 소스코드 전체의 우선순위를 꼬아버릴 수 있기 때문이다.
배경
background-color****요소의 배경에 색상 지정background-image요소의 배경 이미지를 한 개, 혹은 여러 개 지정
background-image: url("이미지 경로")→ 백그라운드 이미지는 한개만 지정할 수도 있지만, 여러개의 이미지를 중첩시키는것도 가능
이미지 중첩하기
background-image: url("이미지 경로") , url("이미지 경로2")
그라데이션 배경 만들기
background-image: liner-gradient(방향, 시작 색상, 종료 색상)
background-position요소의 배경 이미지의 위치 지정
/* 다섯가지 키워드를 조합해서 위치를 지정합니다 */
background-position: center;
background-position: top right;
background-position: left;
background-position: bottom center;
/* x축과 y축 수치 직접입력 */
background-position: 50px 24px; (각각 x축 y축)background-repeat요소의 배경 이미지의 반복 여부와 반복 방향 지정
background-repeat: no-repeat | repeat | repeat-x | repeat-ybackground-size요소의 배경 이미지의 크기 지정
background-size: cover | auto | contain
/* 직접 픽셀을 정해줄 수도 있습니다. */
background-size: 200px 120pxbackground-attachment요소의 배경 이미지의 스크롤 여부를 지정
background-attachment: fixed | scroll(기본값) | localbackground 단축 속성
background 관련 속성들을 한번에 지정하는 것도 가능
/* background : color imageUrl repeat position/size attachment */
background : red url("이미지 경로") no-repeat center/cover fixedobject-fit
<img> 나 <video> 등 대체요소의 내용이 지정된 규격과 맞춰지는 방식을 지정한다.
object-position
<img> 나 <video> 등 대체요소의 콘텐츠 정렬 방식을 지정한다.
object-position : 100px 40px;
object-position : center top;색상
색상 이름 표기법
- 말 그대로 색상의 이름을 적으면 된다.
- 웹 안전 색상이라고 불리는 216가지 색상을 이름으로 표기할 수 있다.
웹 안전 색상은 어떤 운영체제, 어떤 브라우저에서도 안전하게 그려지는 색을 뜻한다.
Hex 색상 코드
- 색상을 16진수 여섯자리로 색상을 표기하는 방법입니다.
- 헥스 색상 코드는 실무에서 가장 많이 사용되는 색상 표기 방법, 짧게 헥스 코드라고도 함.
- 헥스 코드는 #ffffff~#000000 사이의 값을 가진다.
rgb 색상 코드
- rgb(red좌표, green좌표, blue좌표) 값을 이용해 색상을 표기하는 방법입니다.
- 각 요소에는 0~255 사이의 숫자를 입력할 수 있다.
- rgba라는 추가 속성을 이용하면 색상에 투명도도 적용할 수 있습니다.
- a는 투명도 지정
opacity - 불투명도
- 요소의 불투명도를 설정
- 0~1사이의 숫자를 지정 할 수 있다.
단위2
상대단위 - vw / vh
vw 와 vh 는 요소의 규격을 viewport의 너비 값과 높이 값에 비례하여 결정한다.
viewport 란?
→ 화면 display상의 표시 영역을 뜻합니다.
참고
[인프런x코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
https://inf.run/uzui
