45 lines
2.0 KiB
Plaintext
45 lines
2.0 KiB
Plaintext
홈 주제 탭 — 배포본 실측
|
|
출처: https://hyeonworks.com (frontend 2b2f443) — 2026-09-04, Playwright 로 getComputedStyle
|
|
재현: 홈에서 개발자도구 콘솔에 아래를 붙여 넣으면 같은 값이 나온다.
|
|
|
|
const s = document.querySelector('.home-comparison');
|
|
[...s.querySelectorAll('.home-topic-tabs button')].map(b => {
|
|
const cs = getComputedStyle(b);
|
|
return { text: b.textContent, selected: b.getAttribute('aria-selected'),
|
|
fontSize: cs.fontSize, fontWeight: cs.fontWeight,
|
|
color: cs.color, background: cs.backgroundColor,
|
|
pseudoAfter: getComputedStyle(b, '::after').content };
|
|
});
|
|
|
|
======================================================================
|
|
[탭]
|
|
|
|
고른 탭 "OAuth/OIDC 인증 경계" aria-selected=true
|
|
font-size 14px ← 2단계에서는 30px 이었다
|
|
font-weight 560 ← 2단계에서는 650
|
|
color rgb(23,24,27) (--ink)
|
|
background rgb(231,231,227) ← 알약. 색만으로는 「진한 글자」로 읽힌다
|
|
border-radius 17px
|
|
::after none ← 파란 밑줄 제거 확인
|
|
|
|
안 고른 탭 "JPA 피드 조회 성능" aria-selected=false
|
|
color rgb(108,111,118) (--faint)
|
|
background rgba(0,0,0,0) 투명
|
|
|
|
[묶음의 결속 — 「글자만 떠 있다」를 고친 부분]
|
|
|
|
.home-topic-panel border-top 1px rgb(200,203,207) (--line-strong)
|
|
.home-comparison ul border-top 0px ← 윗선을 패널로 옮겼다
|
|
탭 줄 아래 ~ 패널 위 간격 0px ← 탭이 그 선에 바로 얹힌다
|
|
|
|
선이 목록에 있으면 축 이름 줄만 선 위로 밀려 나가 탭과 한 덩어리처럼 보이고,
|
|
정작 목록은 저 혼자 시작한다. 그 상태가 home-topic-tabs-2.png 다.
|
|
|
|
[왼쪽 끝 정렬 — 알약의 좌우 여백(13px)만큼 줄을 당겼다]
|
|
|
|
첫 탭 글자 x = 261
|
|
축 이름 「구조」 x = 261
|
|
첫 행 「SPA」 x = 263
|
|
|
|
[구역 전체 높이] 529px
|