CSS calc()

CSS 코드에서 사칙 연산을 이용하는 방법.

.actions button i {
    margin-bottom: calc(var(--padding) / 2);
}

—padding은 이전에 :root에서 정의한 변수다.

+와 `` 연산자는 좌우에 공백이 있어야 한다. calc(50% -8px)은 백분율 값과 음수 길로 해석하여 유효하지 않지만, calc(50% - 8px)은 백분율과 길이의 뺄셈으로 해석한다. 마찬가지로, calc(8px + -50%)는 길이와 음의 백분율 간의 덧셈으로 처리한다.
*와 / 연산자는 좌우 공백을 요구하지 않지만, 그래도 추가하는 편이 일관성을 유지하기에 좋다.

아이콘과 텍스트 중앙 정렬

아이콘과 텍스트가 좌측을 기준으로 정렬되어있다.

중앙을 기준으로 정렬시키고 싶을 경우 쉽게 하는 방법이 있다.

.actions button i {
    margin: 0 auto;
    margin-bottom: calc(var(--padding)/2);
}

margin: 0 auto;는 아이콘의 상하단의 마진은 0으로 설정하고 좌우는 컴퓨터가 자동으로 설정한다.

이렇게 작성할 경우…

알아서 아이콘의 중앙선과 텍스트의 중앙선을 같게 만든다.

위처럼 이미지(하단의 꽃)의 크기도 클뿐더러 직사각형을 모양이다.

이를 작고 둥근 원형으로 만들어 보겠다.

.channel .metadata img {
    width: var(--avatar-size);
    height: var(--avatar-size);
    border-radius: 50%;
}

—avatar-size는 :root에서 선언한 변수다.

border-radius:는 사각형의 꼭짓점에서 변의 어느 지점만큼 라운딩 처리를 할 것인지 지정할 수 있다.

50% 이상은 더이상 변화가 없다. (50%와 같다.)

25%는 이런 느낌이다.

41분까지