HTML/CSS (6)

CSS

얘네 변수, 함수 있는거 처음 앎

✔️ :root

전역 CSS 변수 선언, 문서 트리 내에 루트 요소를 선택한 것이기 떄문에 html을 선택한 것과 같다.

-- 하이픈 2개 다음 속성 이름을 적고 속성 값을 적는다.

:root {
  --main-color: hotpink;
  --pane-padding: 5px 40px;
}

밑에 나오는 var()와 같이 사용한다.

✔️ var( )

CSS 변수값으로 지정할 수 있다.
var( ) 는 값으로만 사용될 수 있고, 속성 이름이나 선택자로는 사용할 수 없다.

첫번째 인수에 가져올 사용자 지정 속성 이름을 넣고, 두번째 인수에는 대체값(선택)을 넣는다.

.component {
  background: var(--main-color, black);
}

✔️ calc( )

CSS 속성 값으로 계산식을 지정할 수 있다.

+, -, *, / 사칙연산이 가능하며 서로 다른 단위끼리 계산이 가능하다.
⚠️ 계산식을 넣을 때 좌우공백을 꼭 넣어주어야 한다.

width: min(1200px, calc(100% - 80px)); 

반응형 사이트 계산할 때 유용하다.

✔️ min( ), max( )

( ) 안에서 쉼표로 구분하여 가장 작은/큰 값을 설정한다.

min을 예로 들어 min(100px, 30px)이면 30px를 택하고, min(25%, 30%)이면 25%를 선택한다. max는 그 반대의 개념이다.

width와 max/min-width를 따로 쓰지않고 함께 쓸 수 있어 사용된다.

width: 50%;
max-width: 1000px;

width: min(50%, 1000px);

두 예시는 같은 동작을 한다.

✔️ clamp( )

설정된 이상적인 값을 기준으로 상한과 하한 사이의 값을 고정한다.
반응형 폰트를 설정할 때 사용할 수 있다.

최초값, 이상적인 값, 최대 값을 입력한다.
⚠️ clamp는 상대 크기를 기준으로 하기 때문에 px와 같은 절대 단위는 사용할 수 없다.

가변적이지만 min 값보단 작아질 수 없고, max 값보단 커질 수 없다.

font-size: clamp(1rem, 2.5vw, 2rem);

→ 2.5vw를 가진 글꼴 크기를 가지며 최소 1rem, 그리고 최대 2rem 크기까지 커질 수 있다.