CSS

Calc

calc() 함수를 사용하면, CSS에서도 속성 값에 계산식을 사용할 수 있다.

.div {
	width : calc(100% - 80px);
}

Is, Where

:is()함수와 :where()함수는 선택자 목록을 인수로 취하고, 해당 목록의 선택자 중 하나가 선택할 수 있는 모든 요소를 선택한다. 둘의 차이는, CSS점수 계산에 차이가 있는데, is는 10점으로 계산되고, where은 0점으로 계산된다.

https://velog.io/@geun99/%EB%B3%B5%EC%8A%B5%EB%B0%9C%ED%91%9C%EC%9A%A9-CSS-%EC%84%A0%ED%83%9D%EC%9E%90%EC%97%90-%EB%8C%80%ED%95%B4
참조) CSS 선택자에 대한 글.

:is(header, main, footer) {
  color: red;
  cursor: pointer;
}

Not

:not() 함수는 이미 지정된 css 스타일 중에서, 특정한 요소만 제외시키기 위해 사용하는 함수이다.

div p:not(.disabled) {
   color: blue;
}

Before and After

::before과 ::after은 가상요소로, 별도의 class를 지정하지 않아도 지정한 것 처럼 요소를 선택할 수 있다. before은 실제 내용 바로 앞에 생성되는 자식요소고, after은 바로 뒤에 생성되는 자식 요소이다.

p::before {
  content: "Hello";
  background-color: red;
  font-size: 20px;
  color: #fff;
  font-weight: 800;
}

p::after {
  content: "bye";
  background-color: red;
  font-size: 20px;
  color: #fff;
  font-weight: 800;
}

Variable

css에서도 변수를 사용할 수 있는데
--변수명 : 변수값 과 같은 형태로 선언하고, var(변수명) 과 같은 형태로 사용한다.
변수 값에는 공백이라도 들어가야 변수가 선언되며, 대소문자를 구분한다. 그리고 변수값은 하위 요소에 상속된다.

:root {
  --primary-color: teal;
  --font-size: 4rem;
  --bg-color: red;
  --p: 20px;
}

h1 {
  color: var(--primary-color);
  background: var(--bg-color);
  padding: var(--p);
}

h2 {
  font-size: var(--font-size);
}