CSS [12] – 함수, Function 예시와 사용법

CSS Tutorial – Full Course for Beginners

Lesson 21 – 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: 최솟값, 최댓값 범위 내에서 값을 유연하게 처리