CSS 포지셔닝 anchor() 함수
2025. 5. 22. 01:31ㆍ웹퍼블리싱 실습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="anchor.css">
</head>
<body>
<div class="select">
<button>선택하세요1</button>
<ul>
<li><button>선택1</button></li>
<li><button>선택2</button></li>
<li><button>선택3</button></li>
</ul>
</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non accusamus dolorum quis repellat. Amet voluptas animi nulla hic quidem dignissimos ut facilis soluta. Eos asperiores dolores doloribus culpa numquam hic!</div>
<button class="select-button">선택하세요2</button>
<ul class="select-list">
<li><button>선택2-1</button></li>
<li><button>선택2-2</button></li>
<li><button>선택2-3</button></li>
</ul>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non accusamus dolorum quis repellat. Amet voluptas animi nulla hic quidem dignissimos ut facilis soluta. Eos asperiores dolores doloribus culpa numquam hic!</div>
<button class="popover-button" popovertarget="popover">툴팁</button>
<div popover id="popover" class="popover">툴팁입니다.</div>
</body>
</html>
/* CSS Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
line-height: 1.5;
font-family: Arial, sans-serif;
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
input,
button,
textarea,
select {
font: inherit;
}
a {
text-decoration: none;
color: inherit;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Custom Styles */
.select {
position: relative;
display: inline-block;
width: 200px;
}
.select button {
width: 100%;
padding: 10px;
font-size: 16px;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
text-align: left;
}
.select button:hover {
background-color: #e0e0e0;
}
.select ul {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
/* z-index: 10; */
}
.select ul li {
border-bottom: 1px solid #eee;
}
.select ul li:last-child {
border-bottom: none;
}
.select ul li button {
width: 100%;
padding: 10px;
font-size: 16px;
background: none;
border: none;
text-align: left;
cursor: pointer;
}
.select ul li button:hover {
background-color: #f9f9f9;
}
.select:hover ul {
display: block;
animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* anchor 연습 */
body:has(.select-button:hover, .select-list:hover) .select-list{
display: block;
}
.select-button {
anchor-name: --select; /* 내가는 원하는 기준, 네이밍 중요 -- 꼭 써야함 */
}
.select-list {
position: absolute;
display: none;
left: anchor(
--select left
); /* select의 기준으로 앵커이름과 위치값이 들어감 */
top: anchor(
--select bottom
); /* select의 기준으로 버튼의 아랫변 기준으로 나오게 */
}
/* */
.popover-button {
anchor-name: --popover;
}
.popover {
/* inset:anchor(--popover bottom) auto auto anchor(--popover left); */
inset: auto auto anchor(--popover top) anchor(--popover left);
}
/* 아직 호환성이 올라오지 않았지만 앵커 사이즈, 포지션 등 나오는 것들이 있음 */
Anchor 함수 활용해서 popover 시켜보기.
셀렉트 박스를 꾸미기 위한 예제 활용해서 Anchor를 활용하면 한 군데 좌표를 박아두고 left, top 같은 위치 조절이 가능하다.
부딪힐 수 있는 문제
- anchor 함수 지원 부족:
- anchor 함수는 CSS의 비교적 새로운 기능으로, 대부분의 브라우저에서 아직 지원되지 않거나 실험적 상태일 수 있습니다.
- MDN Web Docs에서 브라우저 호환성을 확인하세요.
- :has() 지원 제한:
- :has()는 최신 CSS 기능으로, 일부 브라우저(특히 구형 버전의 브라우저)에서는 지원되지 않을 수 있습니다.
- Can I Use에서 브라우저 호환성을 확인하세요.
- CSS 문법 문제:
- &:hover와 같은 문법은 Sass 또는 Less와 같은 CSS 전처리기에서 사용됩니다. 순수 CSS에서는 사용할 수 없으므로, 이를 표준 CSS로 변환해야 합니다.
- HTML 구조 문제:
- .select-button과 .select-list의 관계가 CSS 선택자에서 의도한 대로 작동하지 않을 수 있습니다.