CSS 앵커 배치로 요소를 서로 테더링

Jhey Tompkins

현재 한 요소를 다른 요소에 테더링하려면 어떻게 해야 하나요? 위치를 추적하거나 래퍼 요소 형식을 사용할 수 있습니다.

<!-- index.html -->
<div class="container">
  <a href="/link" class="anchor">I’m the anchor</a>
  <div class="anchored">I’m the anchored thing</div>
</div>

/* styles.css */
.container {
  position: relative;
}
.anchored {
  position: absolute;
}

이러한 솔루션은 일반적으로 적합하지 않습니다. 자바스크립트가 필요하거나 추가 마크업을 도입하는 경우 CSS 앵커 배치 API는 테더링 요소에 CSS API를 제공하여 이 문제를 해결하는 것을 목표로 합니다. 다른 요소의 위치와 크기에 따라 하나의 요소를 배치하고 크기를 조정하는 수단을 제공합니다.

도움말의 구조를 자세히 설명하는 샘플 브라우저 창을 보여주는 이미지입니다.

브라우저 지원

'실험용 웹 플랫폼 기능' 플래그 뒤의 Chrome Canary에서 CSS 앵커 포지셔닝 API를 사용해 볼 수 있습니다. 플래그를 사용 설정하려면 Chrome Canary를 열고 chrome://flags 페이지로 이동하세요. 그런 다음 '웹 플랫폼 실험용 기능' 플래그를 사용 설정합니다.

Oddbird팀에서 폴리필(polyfill)도 개발 중입니다. github.com/oddbird/css-anchor-positioning에서 저장소를 확인하세요.

다음을 사용하여 앵커링 지원을 확인할 수 있습니다.

@supports(anchor-name: --foo) {
  /* Styles... */
}

이 API는 아직 실험 단계이며 변경될 수 있습니다. 이 도움말에서는 중요한 부분을 개략적으로 설명합니다. 또한 현재 구현도 CSS Working Group 사양과 완전히 동기화되지 않습니다.

문제

이렇게 해야 하는 이유는 무엇인가요? 주요 사용 사례는 도움말 또는 툴팁과 같은 환경을 만드는 것입니다. 이 경우 참조하는 콘텐츠에 도움말을 테더링해야 하는 경우가 많습니다. 요소를 다른 요소에 테더링하는 방법이 필요할 때가 많습니다. 또한 사용자가 UI를 스크롤하거나 크기를 조절하는 등 페이지와 상호작용하더라도 테더링이 끊기지 않을 것으로 예상됩니다.

또 다른 문제는 테더링된 요소가 뷰에 유지되기를 원하는 경우(예: 도움말을 열 때 표시 영역 경계에 의해 잘리는 경우)입니다. 이는 사용자에게 좋은 경험이 아닐 수 있습니다. 도움말을 조정하려고 합니다.

현재 솔루션

현재 이 문제에 접근할 수 있는 몇 가지 방법이 있습니다.

첫 번째는 기본적인 '앵커 래핑' 접근 방식입니다. 두 요소를 모두 가져와서 컨테이너에 래핑합니다. 그런 다음 position를 사용하여 앵커를 기준으로 도움말을 배치할 수 있습니다.

<div class="containing-block">
  <div class="tooltip">Anchor me!</div>
  <a class="anchor">The anchor</a>
</div>

.containing-block {
  position: relative;
}

.tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
}

컨테이너를 이동할 수 있으며 대부분의 경우 모든 항목이 원하는 위치에 그대로 유지됩니다.

앵커의 위치를 알고 있거나 추적할 수 있는 방법도 있습니다. 커스텀 속성과 함께 도움말에 전달할 수 있습니다.

<div class="tooltip">Anchor me!</div>
<a class="anchor">The anchor</a>

:root {
  --anchor-width: 120px;
  --anchor-top: 40vh;
  --anchor-left: 20vmin;
}

.anchor {
  position: absolute;
  top: var(--anchor-top);
  left: var(--anchor-left);
  width: var(--anchor-width);
}

.tooltip {
  position: absolute;
  top: calc(var(--anchor-top));
  left: calc((var(--anchor-width) * 0.5) + var(--anchor-left));
  transform: translate(-50%, calc(-100% - 10px));
}

앵커의 위치를 모르는 경우에는 어떻게 해야 할까요? JavaScript에 개입해야 할 수 있습니다. 다음 코드와 같은 작업을 할 수 있지만, 이제 스타일이 CSS에서 JavaScript로 누출되기 시작합니다.

const setAnchorPosition = (anchored, anchor) => {
  const bounds = anchor.getBoundingClientRect().toJSON();
  for (const [key, value] of Object.entries(bounds)) {
    anchored.style.setProperty(`--${key}`, value);
  }
};

const update = () => {
  setAnchorPosition(
    document.querySelector('.tooltip'),
    document.querySelector('.anchor')
  );
};

window.addEventListener('resize', update);
document.addEventListener('DOMContentLoaded', update);

이에 대해 다음과 같은 의문이 제기되기 시작합니다.

  • 스타일은 언제 계산하나요?
  • 스타일은 어떻게 계산하나요?
  • 스타일은 얼마나 자주 계산하나요?

문제가 해결되었나요? 사용 사례에 해당할 수 있지만 한 가지 문제가 있습니다. 바로 솔루션이 조정되지 않는다는 것입니다. 응답이 없습니다. 고정된 요소가 표시 영역에 의해 잘리면 어떻게 되나요?

이제 이러한 상황에 어떻게 반응할지 결정해야 합니다. 해야 할 질문과 결정의 수가 점점 늘어나기 시작했습니다. 한 요소를 다른 요소에 고정하기만 하면 됩니다. 이상적인 환경에서는 솔루션이 주변 환경에 맞게 조정되고 반응합니다.

이러한 어려움을 덜기 위해 자바스크립트 솔루션을 이용할 수도 있습니다. 이 경우 프로젝트에 종속 항목을 추가하는 비용이 발생하고 사용 방법에 따라 성능 문제가 발생할 수 있습니다. 예를 들어 일부 패키지는 requestAnimationFrame를 사용하여 위치를 올바르게 유지합니다. 즉, 사용자와 팀원들은 패키지와 패키지 구성 옵션을 숙지해야 합니다. 결과적으로 질문과 결정이 줄어들지 않고 바뀔 수 있습니다. 이는 CSS 앵커 배치에 대한 '이유'의 일부입니다. 따라서 게재순위를 계산할 때 실적 문제를 고려하지 않아도 됩니다.

이 문제에 많이 사용되는 패키지인 'floating-ui'를 사용하는 코드는 다음과 같습니다.

import {computePosition, flip, offset, autoUpdate} from 'https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.2.1/+esm';

const anchor = document.querySelector('.anchor')
const tooltip = document.querySelector('.tooltip')

const updatePosition = () => {  
  computePosition(anchor, tooltip, {
    placement: 'top',
    middleware: [offset(10), flip()]
  })
    .then(({x, y}) => {
      Object.assign(tooltip.style, {
        left: `${x}px`,
        top: `${y}px`
      })
  })
};

const clean = autoUpdate(anchor, tooltip, updatePosition);

이 코드를 사용하는 이 데모에서 앵커의 위치를 변경해 보세요.

'도움말'이 예상한 대로 작동하지 않을 수 있습니다. Y축에서 표시 영역 밖으로 이동할 때는 반응하지만 x축에는 반응하지 않습니다. 문서를 자세히 살펴보면 자신에게 맞는 솔루션을 찾을 수 있습니다.

하지만 내 프로젝트에 적합한 패키지를 찾는 데는 많은 시간이 걸릴 수 있습니다. 추가 결정이며 원하는 대로 작동하지 않으면 당황스러울 수 있습니다.

앵커 위치 지정 사용

CSS 앵커 배치 API를 입력합니다. CSS에 스타일을 유지하고 결정해야 하는 횟수를 줄이기 위한 것입니다. 여러분은 동일한 결과를 달성하고자 하지만 목표는 개발자 환경을 개선하는 것입니다.

  • JavaScript가 필요하지 않습니다.
  • 사용자의 안내에 따라 브라우저에서 최적의 위치를 찾습니다.
  • 더 이상 서드 파티 종속 항목이 없음
  • 래퍼 요소가 없습니다.
  • 최상위 레이어에 있는 요소와 함께 작동합니다.

위에서 해결하려고 했던 문제를 재현하고 해결해 보겠습니다. 대신 돛이 달린 배에 비유해 보겠습니다. 이는 고정된 요소와 앵커를 나타냅니다. 물은 포함하는 블록을 나타냅니다.

먼저 앵커를 정의하는 방법을 선택해야 합니다. 앵커 요소에 anchor-name 속성을 설정하여 CSS 내에서 지정할 수 있습니다. 대시 ID 값이 허용됩니다.

.anchor {
  anchor-name: --my-anchor;
}

또는 anchor 속성을 사용하여 HTML에 앵커를 정의할 수 있습니다. 속성 값은 앵커 요소의 ID입니다. 이렇게 하면 암시적 앵커가 생성됩니다.

<a id="my-anchor" class="anchor"></a>
<div anchor="my-anchor" class="boat">I’m a boat!</div>

앵커를 정의한 후에는 anchor 함수를 사용할 수 있습니다. anchor 함수는 다음 세 가지 인수를 사용합니다.

  • 앵커 요소: 사용할 앵커의 anchor-name입니다. 또는 값을 생략하여 implicit 앵커를 사용할 수도 있습니다. HTML 관계를 통해 또는 anchor-name 값이 있는 anchor-default 속성을 사용하여 정의할 수 있습니다.
  • 앵커 측: 사용하려는 위치의 키워드입니다. top, right, bottom, left, center 등이 될 수 있습니다. 또는 백분율을 전달할 수 있습니다. 예를 들어 50% 는 center와 같습니다.
  • 대체 값: 길이 또는 비율을 허용하는 대체 값(선택사항)입니다.

anchor 함수를 고정된 요소의 인셋 속성 (top, right, bottom, left 또는 상응하는 논리적 속성)의 값으로 사용합니다. calc에서 anchor 함수를 사용할 수도 있습니다.

.boat {
  bottom: anchor(--my-anchor top);
  left: calc(anchor(--my-anchor center) - (var(--boat-size) * 0.5));
}

 /* alternative with anchor-default */
.boat {
  anchor-default: --my-anchor;
  bottom: anchor(top);
  left: calc(anchor(center) - (var(--boat-size) * 0.5));
}

center 인셋 속성이 없으므로 고정된 요소의 크기를 알고 있는 경우 calc를 사용하는 것이 좋습니다. translate를 사용하면 안 되나요? 다음과 같이 사용할 수 있습니다.

.boat {
  anchor-default: --my-anchor;
  bottom: anchor(top);
  left: anchor(center);
  translate: -50% 0;
}

하지만 브라우저는 고정된 요소의 변환된 위치를 고려하지 않습니다. 따라서 게재순위 대체 및 자동 배치를 고려할 때 이 기능이 중요한 이유를 알 수 있습니다.

위의 맞춤 속성 --boat-size가 사용된 것을 알 수 있습니다. 그러나 앵커 요소의 크기를 앵커 요소의 크기로 설정하려는 경우 해당 크기에 액세스할 수도 있습니다. 직접 계산하는 대신 anchor-size 함수를 사용할 수 있습니다. 예를 들어, 보트를 앵커 너비의 네 배로 만들려면 다음과 같이 하면 됩니다.

.boat {
  width: calc(4 * anchor-size(--my-anchor width));
}

anchor-size(--my-anchor height)를 사용하여 높이에 액세스할 수도 있습니다. 또한 이를 사용하여 축 중 한쪽 또는 양쪽의 크기를 설정할 수 있습니다.

absolute 위치가 지정된 요소에 고정하려면 어떻게 해야 하나요? 규칙은 요소가 형제일 수 없다는 것입니다. 이 경우 relative 위치가 지정된 컨테이너로 앵커를 래핑할 수 있습니다. 그런 다음 여기에 고정할 수 있습니다.

<div class="anchor-wrapper">
  <a id="my-anchor" class="anchor"></a>
</div>
<div class="boat">I’m a boat!</div>

이 데모를 확인해 보세요. 앵커를 이리저리 드래그하면 보트가 따라오게 됩니다.

스크롤 위치 추적

경우에 따라 앵커 요소가 스크롤 컨테이너 내에 있을 수 있습니다. 동시에 고정된 요소가 컨테이너 외부에 있을 수도 있습니다. 스크롤은 레이아웃과 다른 스레드에서 발생하므로 추적할 방법이 필요합니다. anchor-scroll 속성을 사용하면 됩니다. 고정된 요소에 설정하고 추적하려는 앵커의 값을 제공합니다.

.boat { anchor-scroll: --my-anchor; }

모서리에 있는 체크박스를 사용하여 anchor-scroll를 켜거나 끌 수 있는 이 데모를 사용해 보세요.

이 비유는 이상적인 세상에서와 마찬가지로 배와 돛이 모두 물속에 있다는 점에서 약간 평이합니다. 또한 Popover API와 같은 기능을 통해 관련 요소를 서로 가깝게 유지할 수 있습니다. 하지만 앵커 위치 지정은 최상위 레이어에 있는 요소에서 작동합니다. 여러 흐름에서 요소를 테더링할 수 있다는 것은 API의 주요 이점 중 하나입니다.

앵커에 도움말이 있는 스크롤 컨테이너가 있는 다음 데모를 살펴보세요. 팝오버인 도움말 요소는 앵커와 같은 위치에 배치되지 않을 수 있습니다.

그러나 팝오버가 각 앵커 링크를 추적하는 방법을 알 수 있습니다. 스크롤 컨테이너의 크기를 조절할 수 있으며 위치가 자동으로 업데이트됩니다.

위치 대체 및 자동 배치

여기에서 앵커의 배치 능력이 한 단계 올라갑니다. position-fallback는 제공된 대체 집합에 따라 고정된 요소를 배치할 수 있습니다. 원하는 스타일로 브라우저를 안내하고 브라우저가 자동으로 위치를 조정하도록 합니다.

일반적인 사용 사례는 앵커 위 또는 아래에 표시되는 표시 간에 전환해야 하는 도움말입니다. 이 동작은 컨테이너에 의해 도움말이 잘릴지 여부에 따라 달라집니다. 이 컨테이너는 일반적으로 표시 영역입니다.

마지막 데모의 코드를 자세히 살펴보면 position-fallback 속성이 사용 중인 것을 확인할 수 있습니다. 컨테이너를 스크롤하면 앵커식 팝오버가 점프하는 것을 확인할 수 있습니다. 이는 각각의 앵커가 표시 영역 경계 근처에 있을 때 발생했습니다. 이때 팝오버가 표시 영역에 머무르도록 조정하려고 합니다.

명시적인 position-fallback를 만들기 전에 앵커 배치를 사용하면 자동 배치도 제공됩니다. 앵커 함수와 반대쪽 인셋 속성에서 모두 auto 값을 사용하여 무료로 이 플립을 얻을 수 있습니다. 예를 들어 bottom에 anchor를 사용하는 경우 top를 auto로 설정합니다.

.tooltip {
  position: absolute;
  bottom: anchor(--my-anchor auto);
  top: auto;
}

자동 위치 지정의 대안은 명시적인 position-fallback를 사용하는 것입니다. 이를 위해서는 게재순위 대체 세트를 정의해야 합니다. 브라우저는 사용할 수 있는 항목을 찾은 다음 해당 위치 지정을 적용할 때까지 이러한 작업을 수행합니다. 제대로 작동하는 것을 찾을 수 없으면 기본적으로 첫 번째 정의된 규칙이 사용됩니다.

위와 아래의 도움말을 표시하려는 position-fallback는 다음과 같을 수 있습니다.

@position-fallback --top-to-bottom {
  @try {
    bottom: anchor(top);
    left: anchor(center);
  }

  @try {
    top: anchor(bottom);
    left: anchor(center);
  }
}

이를 도움말에 적용하면 다음과 같습니다.

.tooltip {
  anchor-default: --my-anchor;
  position-fallback: --top-to-bottom;
}

anchor-default를 사용하면 position-fallback를 다른 요소에 재사용할 수 있습니다. 범위가 지정된 맞춤 속성을 사용하여 anchor-default를 설정할 수도 있습니다.

보트를 다시 사용하는 이 데모를 생각해 보세요. position-fallback 세트가 있습니다. 앵커의 위치를 변경하면 보트가 컨테이너 안에 머무르도록 조정됩니다. 본문 패딩을 조정하는 패딩 값도 변경해 봅니다. 브라우저가 위치 지정을 어떻게 수정하는지 확인하세요. 컨테이너의 그리드 정렬을 변경하여 위치를 변경합니다.

이번에는 시계 방향으로 위치를 사용하려고 할 때 position-fallback가 더 상세합니다.

.boat {
  anchor-default: --my-anchor;
  position-fallback: --compass;
}

@position-fallback --compass {
  @try {
    bottom: anchor(top);
    right: anchor(left);
  }

  @try {
    bottom: anchor(top);
    left: anchor(right);
  }

  @try {
    top: anchor(bottom);
    right: anchor(left);
  }

  @try {
    top: anchor(bottom);
    left: anchor(right);
  }
}

예

지금까지 앵커 배치의 주요 기능을 살펴봤습니다. 이제 도움말 외에도 몇 가지 흥미로운 예를 살펴보겠습니다. 이 예에서는 앵커 게재위치를 사용하는 방법에 대한 아이디어를 얻을 수 있습니다. 사양의 수준을 높이는 가장 좋은 방법은 실제 사용자의 의견을 따르는 것입니다.

컨텍스트 메뉴

Popover API를 사용하는 컨텍스트 메뉴부터 시작해 보겠습니다. V형 아이콘이 있는 버튼을 클릭하면 컨텍스트 메뉴가 표시됩니다. 이 메뉴에는 펼칠 수 있는 자체 메뉴가 있습니다.

여기서 마크업은 중요한 부분이 아닙니다. 하지만 각각 popovertarget를 사용하는 버튼이 3개 있습니다. 이제 popover 속성을 사용하는 요소가 3개 있습니다. 이렇게 하면 JavaScript 없이 컨텍스트 메뉴를 열 수 있습니다. 다음과 같이 표시될 수 있습니다.

<button popovertarget="context">
  Toggle Menu
</button>        
<div popover="auto" id="context">
  <ul>
    <li><button>Save to your Liked Songs</button></li>
    <li>
      <button popovertarget="playlist">
        Add to Playlist
      </button>
    </li>
    <li>
      <button popovertarget="share">
        Share
      </button>
    </li>
  </ul>
</div>
<div popover="auto" id="share">...</div>
<div popover="auto" id="playlist">...</div>

이제 position-fallback를 정의하고 컨텍스트 메뉴 간에 공유할 수 있습니다. 팝오버의 inset 스타일도 설정 해제합니다.

[popovertarget="share"] {
  anchor-name: --share;
}

[popovertarget="playlist"] {
  anchor-name: --playlist;
}

[popovertarget="context"] {
  anchor-name: --context;
}

#share {
  anchor-default: --share;
  position-fallback: --aligned;
}

#playlist {
  anchor-default: --playlist;
  position-fallback: --aligned;
}

#context {
  anchor-default: --context;
  position-fallback: --flip;
}

@position-fallback --aligned {
  @try {
    top: anchor(top);
    left: anchor(right);
  }

  @try {
    top: anchor(bottom);
    left: anchor(right);
  }

  @try {
    top: anchor(top);
    right: anchor(left);
  }

  @try {
    bottom: anchor(bottom);
    left: anchor(right);
  }

  @try {
    right: anchor(left);
    bottom: anchor(bottom);
  }
}

@position-fallback --flip {
  @try {
    bottom: anchor(top);
    left: anchor(left);
  }

  @try {
    right: anchor(right);
    bottom: anchor(top);
  }

  @try {
    top: anchor(bottom);
    left: anchor(left);
  }

  @try {
    top: anchor(bottom);
    right: anchor(right);
  }
}

이를 통해 적응형 중첩 컨텍스트 메뉴 UI가 제공됩니다. 선택 항목으로 콘텐츠 위치를 변경해 보세요. 선택하는 옵션을 선택하면 그리드 정렬이 업데이트됩니다. 이는 앵커 위치가 팝오버를 배치하는 방식에 영향을 미칩니다.

집중력과 팔로우

이 데모에서는 :has()를 가져와 CSS 프리미티브를 결합합니다. 개념은 포커스가 있는 input의 시각적 표시기를 전환하는 것입니다.

런타임 시 새 앵커를 설정하면 됩니다. 이 데모에서는 범위가 지정된 맞춤 속성이 입력 포커스에서 업데이트됩니다.

#email {
    anchor-name: --email;
  }
  #name {
    anchor-name: --name;
  }
  #password {
    anchor-name: --password;
  }
:root:has(#email:focus) {
    --active-anchor: --email;
  }
  :root:has(#name:focus) {
    --active-anchor: --name;
  }
  :root:has(#password:focus) {
    --active-anchor: --password;
  }

:root {
    --active-anchor: --name;
    --active-left: anchor(var(--active-anchor) right);
    --active-top: calc(
      anchor(var(--active-anchor) top) +
        (
          (
              anchor(var(--active-anchor) bottom) -
                anchor(var(--active-anchor) top)
            ) * 0.5
        )
    );
  }
.form-indicator {
    left: var(--active-left);
    top: var(--active-top);
    transition: all 0.2s;
}

하지만, 이를 더 발전시키려면 어떻게 해야 할까요? 일종의 안내 오버레이에 사용할 수 있습니다. 도움말은 관심 장소 사이를 이동하고 콘텐츠를 업데이트할 수 있습니다. 콘텐츠를 크로스페이드할 수 있습니다. display 또는 뷰 전환에 애니메이션을 적용할 수 있는 불연속 애니메이션을 여기에서 작동할 수 있습니다.

막대 그래프 계산

앵커 위치 지정을 사용해 할 수 있는 또 다른 흥미로운 작업은 calc와 결합하는 것입니다. 차트에 주석을 다는 팝오버가 있는 차트를 가정해 보겠습니다.

CSS min 및 max을 사용하여 가장 높은 값과 가장 낮은 값을 추적할 수 있습니다. 이를 위한 CSS는 다음과 같을 수 있습니다.

.chart__tooltip--max {
    left: anchor(--chart right);
    bottom: max(
      anchor(--anchor-1 top),
      anchor(--anchor-2 top),
      anchor(--anchor-3 top)
    );
    translate: 0 50%;
  }

차트 값을 업데이트하는 JavaScript와 차트 스타일을 지정하는 CSS가 있습니다. 하지만 앵커 배치가 레이아웃 업데이트를 처리해 줍니다.

크기 조절 핸들

하나의 요소에만 고정할 필요는 없습니다. 요소에 여러 앵커를 사용할 수 있습니다. 막대 그래프 예에서 이를 눈치채셨을 것입니다. 도움말은 차트에 고정한 다음 적절한 막대에 고정되었습니다. 이 개념을 좀 더 확장하면 이를 사용하여 요소의 크기를 조절할 수 있습니다.

앵커 포인트를 맞춤 크기 조절 핸들처럼 취급하고 inset 값을 활용할 수 있습니다.

.container {
   position: absolute;
   inset:
     anchor(--handle-1 top)
     anchor(--handle-2 right)
     anchor(--handle-2 bottom)
     anchor(--handle-1 left);
 }

이 데모에서는 GreenSock Draggable이 핸들을 드래그 가능하게 만듭니다. 그러나 <img> 요소는 핸들 사이의 간격을 채우도록 조정되는 컨테이너를 채우도록 크기가 조절됩니다.

SelectMenu?

마지막 기회는 다가올 미래에 대한 살짝 예고해 줍니다. 그러나 포커스 가능한 팝오버를 만들 수 있으며 이제 앵커 위치가 생겼습니다. 스타일을 지정할 수 있는 <select> 요소의 기반을 만들 수 있습니다.

<div class="select-menu">
<button popovertarget="listbox">
 Select option
 <svg>...</svg>
</button>
<div popover="auto" id="listbox">
   <option>A</option>
   <option>Styled</option>
   <option>Select</option>
</div>
</div>

암시적 anchor를 사용하면 이 작업이 더 쉬워집니다. 하지만 기초적인 시작점을 위한 CSS는 다음과 같습니다.

[popovertarget] {
 anchor-name: --select-button;
}
[popover] {
  anchor-default: --select-button;
  top: anchor(bottom);
  width: anchor-size(width);
  left: anchor(left);
}

Popover API의 기능을 CSS 앵커 위치와 결합하기만 하면 됩니다.

:has() 같은 콘텐츠를 처음 소개할 때 편리합니다. 마커가 열린 상태에서 회전할 수 있습니다.

.select-menu:has(:open) svg {
  rotate: 180deg;
}

다음에는 어디로 가야 할까요? 작동하는 select로 만들려면 무엇이 더 필요한가요? 이 정보는 다음 도움말을 위해 저장하겠습니다. 하지만 걱정하지 마세요. 스타일을 지정할 수 있는 선택 요소가 곧 제공될 예정입니다. 계속해서 지켜봐 주세요.

간단하죠?

웹 플랫폼은 진화하고 있습니다. CSS 앵커 배치는 UI 컨트롤 개발 방식을 개선하는 데 중요한 부분입니다. 이렇게 하면 까다로운 결정에서 벗어날 수 있습니다. 하지만 이전에는 불가능했던 작업을 할 수 있게 됩니다. 예를 들어 <select> 요소의 스타일을 지정할 수 있습니다. 고객님의 의견을 듣고 싶습니다.

사진: CHUTTERSNAP(Unsplash 제공)