원래 제작 기록에는 고정 연락 버튼 두 개를 같은 크기로 하고 다른 디자인에서도 재사용하라는 요구가 있었다. 나는 그 조건에서 버튼의 크기만 따로 다루는 새 구현을 만들었다. 기존 연락값과 동작을 복제하기보다, 이미 있는 조작부에 공통 표시 규칙을 붙이는 방식이다.
공개 예제의 링크는 같은 문서의 예제 자료로 이동하고 버튼은 클릭 횟수만 센다. 실제 신청이나 발송은 없다. 문구를 바꾸고 너비를 좁혀도 같은 요소와 원래 클릭 함수가 유지되는지 함께 볼 수 있다. 이 구현은 원래 고객 사이트에서 추출한 코드나 자료 묶음이 아니라 이번에 독립적으로 작성한 CSS와 검사 함수다.
긴 문구를 기준으로 같은 두 열을 만든다
data-equal-actions를 붙인 부모는 내용에 맞춘 너비를 사용하되 부모 공간을 넘지 않게 제한한다. 바로 아래의 링크와 버튼은 같은 비율의 열에 놓이고 높이도 늘어나 맞춰진다. 짧은 문구에 작은 너비를 주는 대신 두 조작부가 같은 틀을 공유한다. 문구는 안쪽 span에 두고 줄바꿈을 허용한다.
길게 붙은 문자열도 끊어 표시할 수 있게 했다. 좁은 공간에서는 버튼 높이가 늘어날 수 있으며 글자를 잘라 감추는 방식으로 같게 보이지 않는다. 기본 최소 높이는 CSS 픽셀 기준 사십사다. 이것만으로 색상 대비나 모든 접근성 요구를 충족했다고 보장하지 않는다. 가로 크기와 실제 조작 조건은 별도 확인이다.
원래 행동과 브랜드 색은 그 요소의 주인에게 둔다
이 CSS는 기존 a와 button 요소의 링크를 쓰지 않고 이벤트도 연결하지 않는다. 예제의 클릭 함수는 예제 페이지가 원래 연결해 둔 것으로, 문구와 표시 설정을 바꾸어도 같은 함수가 남는지 출력에 표시한다. 예제 페이지의 기존 링크 함수는 기본 이동을 취소하고 자기 자료 영역으로 스크롤한다. 표시 CSS는 그 함수를 바꾸지 않는다. 새 접수 경로나 연락값을 만들지 않는 경계다.
배경과 글자 색상도 두 조작부의 원래 규칙이 맡는다. 대신 크기 계약을 위해 표시 방식과 글꼴 상속, 줄 높이, 여백과 포커스 외곽선은 바뀐다. 아무 스타일도 바꾸지 않는 구현은 아니다. 사이트에 붙일 때는 기존 고정 너비와 줄바꿈 금지, 더 강한 선택자 규칙을 함께 확인해야 한다.
임시 예제에서는 about:srcdoc 기준을 주자 조각 링크 이동이 되었지만, 실제 공개 영역은 base-uri를 허용하지 않는 보안 규칙을 사용한다. 공개 검사에서 링크가 바깥 페이지로 해석되는 실패를 확인했다. 이 제한을 풀지 않고 예제 페이지의 원래 클릭 함수가 내부 자료로 스크롤하도록 수정했다. 이는 예제 동작의 적응이며 크기 모듈이 링크나 이벤트를 교체하는 기능은 아니다. 임시 화면과 실제 공개 실행 영역을 따로 확인할 이유가 있었다.
한 개만 있으면 빈 두 번째 열을 남기지 않는다
hidden 상태인 조작부는 열에서 제외한다. 실제로 하나만 있으면 한 개의 틀로 표시하고 없는 기능을 추가하지 않는다. 아무것도 없을 때 검사 결과의 표시 개수는 영이다. 개수가 영이거나 하나이면 크기의 같음은 수학적으로 성립할 수 있으므로 같은 크기라는 결과만 보고 필요한 행동이 모두 있다고 판단하면 안 된다.
이 예제는 텍스트 문구를 대상으로 한다. 아이콘과 이미지가 들어 있는 버튼에는 그 요소의 크기와 줄 배치를 추가로 확인해야 한다. fixed 위치와 화면 아래의 읽기 여백, 스크롤 숨김 모션도 이 CSS가 맡지 않는다. 이미 있는 읽기 모듈과 연결할 때는 같은 속성을 두 코드가 바꾸지 않도록 책임을 나눈다.
다운로드할 코드와 읽기 전용 검사
ZIP에는 CSS, 읽기 전용 검사 함수, 한국어와 영어 예제, 독립 검사와 사용 안내가 들어 있다. 검사 함수는 현재 요소의 사각형과 표시 개수를 읽어 너비·높이의 같음, 부모의 가로 범위와 최소 높이, 요소의 스크롤 잘림을 알려 준다. 요소를 고치거나 네트워크로 보내는 기능은 없다. 검사 결과를 보는 프로그램도 해당 사이트가 정한다.
크기 차이 허용치는 기본 한 CSS 픽셀이며 영부터 사 사이에서 정한다. 허용치를 키워도 실제 사각형 값은 바뀌지 않는다. 검사 값이 실제 글자의 의미나 대비, 서버 접수와 전달을 판단하지도 않는다. 함수가 답할 수 있는 범위를 작게 유지해 다른 프로젝트에서도 결과를 해석하기 쉽게 했다.
코드와 구현 살펴보기
새 독립 CSS · 같은 크기의 텍스트 조작부
[data-equal-actions] {
display: inline-grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
align-items: stretch;
gap: var(--equal-action-gap, 8px);
width: max-content;
max-width: 100%;
box-sizing: border-box;
}
[data-equal-actions] > :is(a, button) {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-width: 0;
min-height: 44px;
margin: 0;
padding: var(--equal-action-padding, 10px 16px);
font: inherit;
line-height: 1.45;
text-align: center;
white-space: normal;
overflow-wrap: anywhere;
}
[data-equal-actions] > :is(a, button) > span {
min-width: 0;
overflow-wrap: anywhere;
}
[data-equal-actions] > [hidden] { display: none !important; }
[data-equal-actions] > :is(a, button):focus-visible {
outline: 3px solid var(--equal-action-focus, #956523);
outline-offset: 3px;
}
숫자 검사와 실화면 검사를 나누어 사용한다
열여덟 개의 독립 검사는 가상의 사각형으로 검사 함수의 계산과 오류 조건을 확인한다. 서로 다른 너비와 높이, 잘림과 숨김, 비정상 입력과 읽기 전용 보존을 다룬다. 이 검사는 브라우저가 CSS를 어떻게 배치하는지 확인한 결과가 아니다. 실제 공개 예제의 넓고 좁은 화면과 키보드 동작은 별도의 브라우저 확인 대상이다.
사이트에 붙인 뒤에는 긴 문구와 한 개만 남는 경우, 부모 공간이 좁아지는 경우를 보고 원래 링크와 클릭이 이어지는지 확인한다. 긴 문구로 높이가 커졌다면 고정 바가 중요한 내용을 덮는지도 살펴야 한다. 내가 공유하는 것은 작은 표시 틀과 확인 도구다. 전체 홈페이지의 문의 기능과 읽기 흐름까지 자동으로 완성하는 도구라고 설명하지 않는다.