Niquelao » 웹로그 아카이브 » 링크 유형 식별하기

» 웹로그 아카이브 » 링크 유형 식별하기 Niquelao 링크 유형 식별하기 2006년 9월 3일, Rumoroso 작성 웹 페이지의 접근성과 사용성에 긍정적인 영향을 미치는 좋은 관행 중 하나는 웹사이트 내 링크의 목적지에 따라 링크 유형을 식별하는 것입니다. 이를 위해 접근성 관련 조치 외에도 CSS를 통해 스타일 차이를 만들 수 있습니다(항상 링크로서 식별할 수 있는 일관성을 유지하도록 주의하면서). 이 관행을 통해 그래픽 브라우저를 사용하는 사용자는 접근하려는 문서가 예를 들어 pdf인지, 또는 목적지가 우리 포털 외부에 있는지 인식할 수 있습니다. 문제점 스타일을 적용할 수 있도록 클래스를 통해 각 링크 유형을 식별해야 합니다. 많은 경우 링크를 입력하는 사람은 콘텐츠 담당자이며 코드를 마크업할 권한이 없습니다. 해결책 javascript로 작성된 간단한 함수를 비침투적인 방식으로 도입하여 “title” 속성의 내용(있는 경우) 및/또는 대상 파일의 확장자에 따라 문서 유형을 식별할 수 있습니다. 참고 : 편집자/콘텐츠 담당자가 링크의 “title” 속성에 링크 대상 유형을 식별하는 공통 프로토콜을 채택하는 것이 좋은 관행입니다. 대부분의 편집 도구에서 이를 입력할 수 있기 때문입니다. 추가적으로, 스크립트에 “title” 속성이 없고 스크립트 자체에서 인식할 수 있는 문서를 가리키는 링크에 “title” 속성 텍스트를 포함하는 기능이 추가되었습니다. 예제 링크 Google pdf 형식 문서 이 링크에는 “title” 속성이 없으며 함수를 통해 추가됩니다: Word 파일 스크립트 스크립트는 아래에 자세히 설명되어 있으며 직접 다운로드할 수 있습니다 먼저 편집자/콘텐츠 담당자가 입력하고 링크 대상 유형을 설명하는 텍스트 조각이 담긴 배열을 선언합니다: var tFormat = [“enlace externo”, “formato pdf”, “formato word”]; 링크 유형을 선언합니다(이전과 동일한 순서로 선언): var Format = [“externo”, “pdf”, “doc”]; 각 링크 유형의 서식을 지정할 클래스를 선언합니다(이전과 동일한 순서로 선언). 이들은 CSS에서 해당 스타일을 갖게 됩니다: var classFormat = [“externo”, “pdf”, “doc”]; function enlaces() { // 문서의 모든 링크를 선택합니다 var links = document.getElementsByTagName(“a”); for (var i = 0; i < links.length; i++) { // 앵커가 아닌지 확인합니다 if(links[i].href.indexOf(”.”) > -1) { // “title” 속성이 있는지 확인합니다 if(links[i].getAttribute(“title”)) { // “title” 속성을 소문자로 가져옵니다 var title = links[i].getAttribute(“title”).toLowerCase(); // “title”에 배열에 표시된 텍스트 중 하나가 // 있는지 확인하는 루프를 실행합니다 // tFormat. 찾으면 텍스트와 같은 위치에 // 선언된 클래스를 추가합니다 // classFormat 배열에서 for(var f = 0; f < tFormat.length; f++) if(title.indexOf(tFormat[f]) > -1) links[i].className += ” ” + classFormat[f]; } // 모든 링크에 “title” 속성이 있는 것은 아니므로 // 만일을 대비하여 “href” 속성을 확인하여 // 대상 문서의 확장자를 가져와 // Format 배열에 선언된 것과 비교합니다. var ini = links[i].href.length-4; var fin = links[i].href.length; var wFormat = links[i].href.substring(ini,fin).toLowerCase(); for(var f = 0; f < Format.length; f++) if(wFormat.indexOf(Format[f]) > -1) { links[i].className += ” ” + classFormat[f]; // “title” 속성이 없으면 추가합니다 if(!links[i].getAttribute(“title”)) links[i].setAttribute(“title”, tFormat[f]) } } } } 마지막으로 스크립트를 로드합니다: window.onload = enlaces; 링크 유형 식별하기 카테고리: CSS, Javascript —> 댓글 2개 Jorge del Casar 2007년 5월 14일 잠시 동안 당신의 사이트를 읽고 있었는데 상당히 인상 깊었습니다. 매우 흥미로운 것들이 있네요, 축하드립니다. 모든 것이 완벽해질 때까지 여러 번 수정하시는 것을 보고 기여하고 싶은 마음이 생겼습니다. 스크립트 실행 시 링크에 이미 해당 클래스가 표시되어 있으면 해당 클래스가 중복된다는 점을 고려하지 않으셨습니다. 큰 문제는 아니지만, 시작 시 Format 배열의 클래스가 있는지 확인하고 있으면 다음 요소로 넘어가고 없으면 스크립트를 계속하는 것이 좋을 것 같습니다. 예제 링크 “pdf 형식 문서”에서 이 버그가 발생한 것 같습니다. 좋은 작업에 다시 한번 축하드립니다. 여기서 더 많은 것을 곧 볼 수 있기를 바랍니다. 추신: 이메일 유효성 검사를 확인해 주세요, 제 것이 허용되지 않는데 로그인에 점(또는 반복된 별표)이 있어서일 수 있습니다. Rumoroso 2007년 5월 14일 기여해 주셔서 감사합니다. 원칙적으로 해야 할 일은 다음 줄을: if(title.indexOf(classFormat[f]) > -1) 다음과 같이 수정하는 것입니다: if(title.indexOf(tFormat[f]) > -1 && links[i].className.indexOf(classFormat[f])) 테스트해 보지는 않았지만 작동할 것 같습니다. 이메일 유효성 검사 문제는 유효성 검사기 자체의 문제인 것 같습니다. 확인해 보겠습니다. 기여해 주셔서 감사합니다. 이것이 유일한 기여가 아니기를 바랍니다. RSS 2.0 피드를 통해 댓글을 팔로우할 수 있습니다 . 또한 자신의 사이트에서 트랙백을 보낼 수 있습니다. 이전 글: CSS 교환 스크립트 다음 글: 폼 다듬기 (에피소드 I) —> —> —> 이 저작물은 Creative Commons 라이선스 에 따라 이용할 수 있습니다 .

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.