링크
참고:
하이퍼링크는 웹 사이트와 콘텐츠를 연결하는 데 필수적입니다. 링크를 만들려면 Word 또는 Google 문서에서 링크 삽입 옵션을 사용하십시오.
모든 기본 콘텐츠와 다양한 서식 옵션에 링크를 추가할 수 있습니다.
Word 및 Google Docs에서는 절대 링크만 허용되며, 일반적으로 브라우저에서 붙여넣기를 복사하는 것이 더 쉽습니다. 링크는 사이트에 상대적으로 자동 변환되는 반면 외부 링크는 절대적으로 유지됩니다.
링크는 종종 텍스트 링크 외에 사용되며 페이지에 인라인된 임베드된 임베드된 미디어 또는 참조된 조각 등이 여기에 해당합니다.
예:
콘텐츠 구조:
코드:
링크는 기본 콘텐츠로 간주되므로 프로젝트 또는 블록 CSS 코드에서 스타일링됩니다. 일반적으로 사용되는 JavaScript 코드는 없습니다.
보일러플레이트 프로젝트에는 링크 관련 스타일 코드가 없습니다.
특별한 언급: Microsoft Word Online에서는 이미지에 대한 링크를 사용할 수 없으므로 작성자가 이미지 바로 아래에 링크를 넣은 다음 클라이언트측에서 해당 링크를 래핑할 수 있는 방법이 해결됩니다(예: ).
/**
* Wraps images followed by links within a matching <a> tag.
* @param {Element} container The container element
*/
function wrapImgsInLinks(container) {
const pictures = container.querySelectorAll('picture');
pictures.forEach((pic) => {
const link = pic.nextElementSibling;
if (link && link.tagName === 'A' && link.href) {
link.innerHTML = pic.outerHTML;
pic.replaceWith(link);
}
});
}
특별한 언급: 클라이언트측의 외부 링크인지 또는 PDF(예:)인지에 따라 새 창에서 열어야 하는 특정 링크를 처리하는 것이 좋습니다.
/**
* Handles external links and PDFs to be opened in a new tab/window
* @param {Element} main The main element
*/
export function decorateExternalLinks(main) {
main.querySelectorAll('a').forEach((a) => {
const href = a.getAttribute('href');
if (href) {
const extension = href.split('.').pop().trim();
if (!href.startsWith('/')
&& !href.startsWith('#')) {
if (!href.includes('xyz.com') || (extension === 'pdf')) {
a.setAttribute('target', '_blank');
}
}
}
});
}