어느 날 JSON 스키마 생성기를 작업하면서 <텍스트 영역>에 줄 번호를 표시하고 싶었습니다. 화려한 것도 없고 부드러운 줄 바꿈이나 조금 복잡한 것도 고려하지 않습니다. 몇 가지 조사를 통해 여러 가지 접근 방식을 찾았습니다. 배경 이미지 사용(TinyMCE는 PNG를 사용하여 이를 수행합니다) 주문목록. 그 중 하나도 마음에 들지 않았습니다! 첫 번째는 깔끔해 보이지 않았고 요소에 이미 적용한 스타일과도 일치하지 않았습니다.</p> <p>두 번째에는 순서가 지정된 목록을 유지하기 위해 여러 JavaScript가 필요했습니다. 즉, <li> 요소를 동적으로 추가/제거하고 스크롤 이벤트를 동기화하는 등의 작업이 필요했습니다.</p> <p>그래서 결국 하이브리드를 만들게 되었습니다. </p> <p>동적으로 생성된 SVG로 <em>CSS 사용자 정의 속성</em>으로 저장되고 배경 이미지로 사용되며 상위 <textarea> 요소에서 스타일을 상속합니다. 자세히 살펴보겠습니다. 자바스크립트 먼저 주요 방법은 다음과 같습니다. lineNumbers(element, numLines = 50, inline = false) 로그인 후 복사 요소는 사용할 요소, numLines는 렌더링할 라인 수, inline은 생성된 이미지를 요소에 저장할지(true), document.body에 저장할지(false) 여부를 나타냅니다.</p> <p>다음으로 사용자 정의 속성에 대한 접두사를 정의합니다.<br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>const prefix = '--linenum-'; </pre><div class="contentsignin">로그인 후 복사</div></div> <p>계속하기 전에 기존 속성을 재사용할지 여부를 확인합니다.<br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>if (!inline) { const styleString = document.body.getAttribute('style') || ''; const regex = new RegExp(`${prefix}[^:]*`, 'g'); const match = styleString.match(regex); if (match) { element.style.backgroundImage = `var(${match[0]})`; return; } } </pre><div class="contentsignin">로그인 후 복사</div></div> <p>다음으로 요소에서 스타일을 <strong>추출</strong>하여 동일한 글꼴 모음, 글꼴 크기, 줄 높이 등을 사용하여 SVG를 렌더링합니다. <br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>const bgColor = getComputedStyle(element).borderColor; const fillColor = getComputedStyle(element).color; const fontFamily = getComputedStyle(element).fontFamily; const fontSize = parseFloat(getComputedStyle(element).fontSize); const lineHeight = parseFloat(getComputedStyle(element).lineHeight) / fontSize; const paddingTop = parseFloat(getComputedStyle(element).paddingTop) / 2; const translateY = (fontSize * lineHeight).toFixed(2); </pre><div class="contentsignin">로그인 후 복사</div></div> <p>우리 자산에도 임의의 ID가 필요합니다.<br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>const id = `${prefix}${Math.random().toString(36).substr(2, 6)}`; </pre><div class="contentsignin">로그인 후 복사</div></div> <p>이제 SVG를 렌더링할 시간입니다.<br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>const svg = `<svg xmlns="http://www.w3.org/2000/svg"> <style> svg { background: ${bgColor}; } text { fill: hsl(from ${fillColor} h s l / 50%); font-family: ${fontFamily}; font-size: ${fontSize}px; line-height: ${lineHeight}; text-anchor: end; translate: 0 calc((var(--n) * ${translateY}px) + ${paddingTop}px); } </style> ${Array.from({ length: numLines }, (_, i) => `<text x="90%" style="--n:${i + 1};">${i + 1}</text>`).join("")} </svg>`; </pre><div class="contentsignin">로그인 후 복사</div></div> <p><strong>분류해 보겠습니다.</strong></p> <p><style> 섹션에서는 <textarea>에서 추출한 스타일을 간단히 설정합니다. 더 일찍. <text> 요소에 y 및 dy 속성을 사용하는 대신 --n-property를 사용하여 CSS를 사용하여 텍스트 요소를 변환합니다.</p> <p>마지막 부분에서는 numLines에서 생성된 배열을 반복하고 <text> 요소를 기본 SVG에 추가합니다.</p> <p>거의 다 왔습니다!</p> <hr> <p>생성된 SVG를 url() 속성으로 사용하려면 <strong>인코딩</strong>해야 합니다.<br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>const encodedURI = `url("data:image/svg+xml,${encodeURIComponent(svg)}")`; </pre><div class="contentsignin">로그인 후 복사</div></div> <p>마지막으로 요소 또는 문서 본문에 해당 속성을 설정합니다.<br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>const target = inline ? element : document.body; target.style.setProperty(id, encodedURI); element.style.backgroundImage = `var(${id})`; </pre><div class="contentsignin">로그인 후 복사</div></div> <p><strong>그리고 그게 다입니다!</strong></p> <p>나쁘지 않습니다. 축소 및 압축된 610바이트입니다!</p> <hr> <h2> 데모 </h2> <p>여기에서 데모를 볼 수 있으며 여기에서 전체 스크립트를 다운로드할 수 있습니다.</p> <p>아래는 인라인 속성 로직을 사용하지 않고 단순화된 Codepen입니다.</p> <p><iframe height="600" src="https://codepen.io/stoumann/embed/LYKQZKr?height=600&default-tab=result&embed-version=2" scrolling="no" frameborder="no" allowtransparency="true" loading="lazy" style="width: 100%;"> </iframe> </p> <hr> <h2> 장점과 단점 </h2> <p>장점과 단점이 있나요? 물론 있습니다! </p> <p>개인적으로 현재 프로젝트에서 <textarea> 내의 JSON 미리보기에 줄 번호를 추가하는 간단하고 명확한 방법이 필요했는데 이 방법이 적합했습니다.</p> <h3> 장점 </h3> <h4> DOM 조작 감소 </h4> <p>이 방법은 DOM 조작에 의존하지 않습니다. 줄 번호는 CSS 사용자 정의 속성 내에 저장된 단일 SVG로 생성됩니다.</p> <h4> 자동 동기화 </h4> <p>줄 번호는 배경 이미지의 일부이므로 텍스트 내용과 함께 자동으로 스크롤되므로 수동 동기화 논리가 필요하지 않습니다.</p> <h4> 요소 간 재사용성 </h4> <p>생성된 SVG를 CSS 사용자 정의 속성에 저장하면 여러 요소에서 재사용할 수 있습니다. 즉, 여러 요소에 동일한 줄 번호가 필요한 경우 모두 동일한 사용자 정의 속성을 참조하여 중복되는 SVG 생성을 피할 수 있습니다.</p> <h4> 확장성 </h4> <h2> SVG의 벡터 특성으로 인해 어떤 확대/축소 수준에서도 줄 번호가 또렷하고 명확하게 유지됩니다. </h2> <h3> 단점 </h3> <h4> 접근성 </h4> <p>정렬된 목록은 스크린 리더와 보조 기술을 통해 더 쉽게 액세스할 수 있는 반면, SVG 기반 줄 번호는 무시되거나 잘못 해석될 수 있습니다.</p> <h4> 맞춤화 복잡성 </h4> <p>순서가 지정된 목록에서 개별 줄 번호의 스타일을 지정하고 상호 작용하는 것은 간단합니다. 대조적으로, SVG 접근 방식을 사용하면 특정 줄 번호에 상호 작용을 사용자 정의하거나 추가하기가 더 어렵습니다.</p> <h4> 브라우저 호환성 </h4> <p>SVG 및 CSS 사용자 정의 속성은 모든 브라우저에서 일관되게 렌더링되지 않을 수 있습니다. 현재 구현에는 Safari에 문제가 있어 번역에서 (paddingTop / 10)을 공제해야 합니다.</p> <h4> 동적 콘텐츠 처리 </h4> <p>정렬된 목록은 줄 추가 또는 제거와 같은 동적 콘텐츠 업데이트를 처리하는 데 더 유연할 수 있는 반면, SVG 접근 방식에서는 전체 배경 이미지를 재생성하고 다시 적용해야 할 수도 있습니다.</p>
