CSS [10] – 변수(Variable), 함수(Function) 예시와 사용법 알아보기

Variables

/* || VARIABLES */
:root {
  /* COLOR */
  --BGCOLOR: #475569;
  --ALT-BGCOLOR: #1E203B;

}

/* || GENERAL STYLES */
body {
  font: 1.5rem "Nunito", sans-serif;
  min-height: 100vh;

  background-color: var(--BGCOLOR);
  background-image: radial-gradient(whitesmoke, var(--BGCOLOR));
  display: flex;
  flex-direction: column;
}

• 코드의 재사용과 유지보수성을 위해 변수를 사용
• :root 가상 클래스를 사용

.special {
  --PADDING: 0.1rem;
}

• 특정 선택자에만 변수를 덮어쓸 수 있음

@media (prefers-color-scheme: dark) {
  :root {
    --BGCOLOR: #000;
    --ALT-BGCOLOR: #333;
  }
}

• 같은 방식으로 특정 미디어 쿼리에만 변수를 덮어쓸 수 있음

Functions

...
--FS: min(2.25rem, 3vh);
/* --FS: max(1.75rem, 3vh); */

• 둘 중 더 작은/큰 값으로 적용 – 절대 단위, 상대 단위를 같이 작성

...
--FS: clamp(1.75rem, 3vh, 2.25rem);

• minimum, ideal, maximum 값 순서로 작성

@media screen and (min-width: 576px) {
  main {
    flex-flow: row nowrap;
    justify-content: space-between;
  }

  main section {
    width: calc(70% - 5px);
  }

  main aside {
    width: calc(30% - 5px);
  }
}

• 속성값으로 계산식을 사용할 수 있는 함수

a:any-link {
  color: firebrick;
}

a:hover,
a:focus {
  /* filter: brightness(150%); */
  filter: hue-rotate(180deg);
}

• any-link: visited, non-visited
• brightness: 이미지의 밝기 조절
  • brightness(0%) /* 완전한 검정 */
  • brightness(0.4) /* 40% 밝기 */
  • brightness(1) /* 변화 없음 */
  • brightness(200%) /* 두 배 밝기 */
• hue-rotate: 색조, 색상 변경

        <aside>
            <h2>Aside</h2>
            <p class="content">
                <span class="tooltip" data-tooltip="this is latin">Lorem</span>
                ipsum dolor sit amet consectetur adipisicing elit. Modi quo aperiam porro, odio
                mollitia suscipit eius
                similique corrupti! Facere nihil cum recusandae officia autem tenetur suscipit exercitationem atque
                tempora
                molestiae.
            </p>
        </aside>

.tooltip {
  border-bottom: 1px dashed orange;
  position: relative;
}

.tooltip:hover::before {
  content: attr(data-tooltip);
  position: absolute;
  top: -20px;
  white-space: nowrap;
  background-color: var(--DARK-COLOR);
  padding: var(--PADDING);
  border-radius: 15px;
}

• attr: 해당하는 속성(attribute)의 값을 가져오는 함수
• 속성 이름은 보통 data- 로 시작하도록 지음
• a[data-tooltip="this is latin"] 과 같이 선택자로도 사용 가능

...
grid-template-columns: repeat(4, minmax(100px, 300px));

• minmax: 최솟값, 최댓값 범위 내에서 값을 유연하게 처리