현재 한 요소를 다른 요소에 테더링하려면 어떻게 해야 할까요? 광고 소재의 위치를 추적하거나 래퍼 요소 형식을 사용해 보세요.
<!-- 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;
}
이러한 솔루션은 보통 이상적이지 않습니다. JavaScript가 필요하거나 추가 마크업을 도입해야 합니다. 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 작업 그룹 사양과 완전히 동기화되지 않습니다.
문제
이렇게 해야 하는 이유는 무엇인가요? 유용한 사용 사례로는 도움말 또는 팁과 유사한 환경을 만드는 경우가 있습니다. 이 경우 도움말에서 참조하는 콘텐츠에 도움말을 테더링하는 것이 좋습니다. 요소를 다른 요소에 테더링할 방법이 필요한 경우가 많습니다. 또한 사용자가 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);
이를 통해 다음과 같은 의문이 제기되기 시작합니다.
- 스타일은 언제 계산하나요?
- 스타일을 계산하려면 어떻게 해야 하나요?
- 스타일을 얼마나 자주 계산하나요?
문제가 해결되었나요? 고객님의 사용 사례에 맞지만 한 가지 문제가 있습니다. Google 솔루션이 적응하지 않습니다. 반응형이 아닙니다. 표시 영역에서 고정된 요소가 잘리면 어떻게 되나요?
이제 이에 대응할지와 그 방법을 결정해야 합니다. 필요한 질문과 의사결정의 수가 늘기 시작했습니다. 한 요소를 다른 요소에 고정하기만 하면 됩니다. 이상적인 환경에서는 솔루션이 조정되어 주변 환경에 반응합니다.
이러한 고충을 완화하기 위해 자바스크립트 솔루션을 이용할 수도 있습니다. 이 경우 프로젝트에 종속 항목을 추가하는 비용이 발생하고 사용 방법에 따라 성능 문제가 발생할 수 있습니다. 예를 들어 일부 패키지는 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);
이 데모에서 해당 코드를 사용하는 앵커의 위치를 변경해 보세요.
'도움말' 예상대로 작동하지 않을 수 있습니다. 이는 x축이 아닌 y축의 표시 영역을 벗어나는 것에는 반응하지 않습니다. 문서를 자세히 읽어보면 자신에게 적합한 솔루션을 찾을 수 있을 것입니다.
그러나 프로젝트에 적합한 패키지를 찾는 데는 많은 시간이 걸릴 수 있습니다. 이는 추가적인 결정이며, 원하는 대로 작동하지 않는다면 당혹스러울 수 있습니다.
앵커 배치 사용
CSS 앵커 포지셔닝 API를 입력합니다. 이 개념은 CSS에서 스타일을 유지하고 결정해야 하는 횟수를 줄이는 것입니다. 같은 결과를 얻고 싶지만 개발자 환경을 개선하는 것이 목표입니다.
- JavaScript가 필요하지 않습니다.
- 브라우저가 최적의 위치를 찾도록 합니다.
- 더 이상 서드 파티 종속 항목 없음
- 래퍼 요소가 없습니다.
- 최상위 레이어에 있는 요소와 함께 작동합니다.
위에서 해결하려는 문제를 재현하고 해결해 보겠습니다. 그러나 대신 앵무새가 있는 보트에 비유해 보세요. 고정된 요소와 앵커를 나타냅니다. 물은 포함하는 블록을 나타냅니다.
먼저 앵커를 정의하는 방법을 선택해야 합니다. 이렇게 하려면 앵커 요소에 anchor-name 속성을 설정하여 CSS 내에서 이렇게 할 수 있습니다. dashed-ident 값을 허용합니다.
.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 함수를 사용하면 됩니다. 예를 들어 보트를 앵커 너비의 4배로 만드는 방법은 다음과 같습니다.
.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 속성을 사용하는 요소가 세 개 있습니다. 그러면 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 제공)