.editor-styles-wrapper .link-preview-wrapper, .link-preview-wrapper { width: 100%; max-width: 100%; margin: 1em 0; /* 뷰포트(화면 폭)가 아니라 이 카드가 실제로 놓인 부모 컨테이너의 폭을 기준으로 반응하게 하기 위한 컨테이너 쿼리 기준점입니다. 예: 좁은 사이드바 안에 넣으면 화면이 넓어도 "좁은 상태"로, 넓은 본문 컬럼 안에 넣으면 화면이 좁아도 "넓은 상태"로 반응합니다. 주의: container-type(=inline-size 컨테이너)을 건 요소는 자기 자신의 너비를 "자식 콘텐츠 크기"로부터 유추하지 못하게 됩니다(사이즈 containment). 이 요소가 flex/grid 아이템으로 놓이는 부모(예: 구텐베르크 그룹/컬럼의 flex 레이아웃) 안에 있으면, 기본값인 min-width:auto와 맞물려서 너비가 0으로 찌그러지는 게 바로 이 컨테이너 쿼리의 잘 알려진 부작용입니다. 그래서 width:100%를 명시적으로 줘서 "콘텐츠 크기 유추"에 기대지 않고 항상 부모 폭을 그대로 채우도록 고정했습니다. */ container: link-preview / inline-size; } .editor-styles-wrapper .link-preview-caption , .link-preview-caption { font-size: 13px; color: var(--wp--preset--color--black); margin-top: 4px; text-align: left; } .editor-styles-wrapper .link-preview-card, .link-preview-card { display: flex; border: 1px solid var(--wp--preset--color--accent-6); border-radius: 10px; overflow: hidden; max-height: 7em; max-width: 100%; text-decoration: none; background: var(--wp--preset--color--white); transition: transform 0.2s ease-in-out; } .editor-styles-wrapper .link-preview-card:hover, .link-preview-card:hover { transform: scale(1.05); background-color: var(--wp--preset--color--accent-1); box-shadow: 0 0 15px var(--wp--preset--color--accent-6); } .editor-styles-wrapper .link-preview-card .thumbnail, .link-preview-card .thumbnail { width: 100%; max-width: 15em; overflow: hidden; aspect-ratio: 2 / 1; } .editor-styles-wrapper .link-preview-card .thumbnail img, .link-preview-card .thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: unset !important; box-shadow: unset !important; } .link-preview-card .content { padding: 10px; flex: 1; } .link-preview-card .title { font-weight: bold; margin-bottom: 5px; } .link-preview-card .desc { color: var(--wp--preset--color--accent-2); font-size: 14px; margin-bottom: 5px; } .link-preview-card .url { font-size: 12px; color: var(--wp--preset--color--black); word-break: break-all; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; } @container link-preview (max-width: 600px) { .editor-styles-wrapper .link-preview-card, .link-preview-card { flex-direction: column; max-height: initial; } .editor-styles-wrapper .link-preview-card .thumbnail, .link-preview-card .thumbnail { /* max-height: 15em; */ max-width: 100%; } /* 예외 처리: .img-die 안에서는 원래대로 */ .img-die .link-preview-card { flex-direction: row; } .img-die .link-preview-card .thumbnail img { max-width: 5em; } } /* 1:1, 2:3 + 기본 레이아웃은 (화면 폭이 아니라) 부모 컨테이너 폭과 무관하게 항상 썸네일+텍스트가 한 줄로 나란히 배치되도록 고정합니다. 아래 선택자가 위 .link-preview-card{flex-direction:column}(컨테이너 쿼리 600px 이하)보다 우선순위가 높아서(클래스 4개 vs 1개) 컨테이너 쿼리 조건과 무관하게 항상 이깁니다. */ .link-preview-wrapper.link-preview-ratio-1-1.link-preview-layout-default .link-preview-card, .link-preview-wrapper.link-preview-ratio-2-3.link-preview-layout-default .link-preview-card { flex-direction: row; } /* ---------------------------------------- 썸네일 비율 (layout=default 일 때 — 썸네일 박스에 직접 적용) ---------------------------------------- */ .link-preview-wrapper.link-preview-ratio-2-1.link-preview-layout-default .thumbnail{ aspect-ratio:2/1; } .link-preview-wrapper.link-preview-ratio-4-1.link-preview-layout-default .thumbnail{ aspect-ratio:4/1; } .link-preview-wrapper.link-preview-ratio-16-9.link-preview-layout-default .thumbnail{ aspect-ratio:16/9; } /* 1:1, 2:3처럼 세로가 더 긴(또는 같은) 비율은 기존 .thumbnail{width:100%; max-width:15em} 규칙을 그대로 두면 가로가 먼저 15em으로 못박히고, 거기에 세로 캡까지 따로 걸리면서 두 캡이 서로 부딪혀 실제로는 1:1도 2:3도 아닌 임의의 상자 모양이 나왔습니다("가로 사이즈가 고정되어 있어서 비율대로 안 맞다"의 원인). 그래서 이 두 비율만 방식을 뒤집었습니다: 가로를 고정하는 대신 세로(height)를 10em으로 고정하고, 가로는 width:auto + aspect-ratio로 거기서 계산되게 했습니다. 즉 "세로 최대 10em, 가로는 비율에 맞게 자동 계산"이 되어 항상 정확한 1:1 / 2:3 모양이 나옵니다. */ .link-preview-wrapper.link-preview-ratio-1-1.link-preview-layout-default .thumbnail, .link-preview-wrapper.link-preview-ratio-2-3.link-preview-layout-default .thumbnail{ width: auto; max-width: none; height: 10em; flex: 0 1 auto; /* 화면이 아주 좁아지면 비율을 유지한 채로 같이 줄어듭니다 */ } .link-preview-wrapper.link-preview-ratio-1-1.link-preview-layout-default .thumbnail{ aspect-ratio:1/1; } .link-preview-wrapper.link-preview-ratio-2-3.link-preview-layout-default .thumbnail{ aspect-ratio:2/3; } /* 비율을 명시적으로 고르면(기본 2:1이 아니면), 기존 카드에 걸려있던 .link-preview-card { max-height: 7em } 제한을 풀어줍니다. 이 제한이 썸네일의 aspect-ratio 계산 결과보다 우선 적용되면서 1:1을 골라도 카드 자체가 7em(약 112px) 높이로 잘려버려 실제로는 정사각형이 아니라 가로로 눌린 모양으로 보이던 게 원인이었습니다. */ .link-preview-wrapper.link-preview-ratio-2-1.link-preview-layout-default .link-preview-card, .link-preview-wrapper.link-preview-ratio-2-3.link-preview-layout-default .link-preview-card, .link-preview-wrapper.link-preview-ratio-4-1.link-preview-layout-default .link-preview-card, .link-preview-wrapper.link-preview-ratio-1-1.link-preview-layout-default .link-preview-card, .link-preview-wrapper.link-preview-ratio-16-9.link-preview-layout-default .link-preview-card { max-height: none; } /* ---------------------------------------- content 위치: 커버 ---------------------------------------- */ .link-preview-wrapper.link-preview-layout-cover .link-preview-card{ position:relative; display:block; overflow:hidden; height: 100%; max-height: 100%; aspect-ratio: 2 / 1; } .link-preview-wrapper.link-preview-layout-cover .thumbnail{ position:absolute; inset:0; margin:0; aspect-ratio: auto; max-width: 100%; } .link-preview-wrapper.link-preview-layout-cover .content { display: flex; box-sizing: border-box; height: 100%; opacity: 0; transition: opacity 0.1s ease-in-out; position:absolute; left:0; right:0; bottom:0; z-index:1; padding: 10px; flex-direction: column; justify-content: flex-end; } .link-preview-wrapper.link-preview-layout-cover .content:before{ content:""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top,var(--wp--preset--color--base) 30%, transparent); } .link-preview-wrapper.link-preview-layout-cover .content:hover { opacity: 1; } .link-preview-wrapper.link-preview-layout-cover.link-preview-ratio-2-1 .link-preview-card{ aspect-ratio:2 / 1; } .link-preview-wrapper.link-preview-layout-cover.link-preview-ratio-2-3 .link-preview-card{ aspect-ratio: 2 / 3; } .link-preview-wrapper.link-preview-layout-cover.link-preview-ratio-4-1 .link-preview-card{ aspect-ratio:4/1; } .link-preview-wrapper.link-preview-layout-cover.link-preview-ratio-1-1 .link-preview-card{ aspect-ratio:1/1; } .link-preview-wrapper.link-preview-layout-cover.link-preview-ratio-16-9 .link-preview-card{ aspect-ratio:16/9; } /* -------- 에디터 확인용 -------- */ .editor-styles-wrapper .link-preview-wrapper.link-preview-layout-cover.link-preview-ratio-2-3:before { content: "2-3 비율 커버 링크 미리보기 : width: 100% 기준 업로드 유의"; position: absolute; z-index: 10; background: red; }