우리가 달성하고자 하는 효과는 이 사이트가 아닌 다른 사이트를 가리키는 모든 링크에 작은 아이콘을 추가하여 이 링크를 클릭하면 이 사이트에서 벗어날 수 있음을 사용자에게 알리는 것입니다. 물론 이는 더 복잡한 JavaScript를 통해 달성할 수 있지만 이제 CSS 3 속성 선택기를 통해 이 기능을 달성할 수 있습니다.
a[href^=”http:”] {
background:url(images/externalLink.gif) 오른쪽 상단 반복 없음;
오른쪽 패딩:10px;
}
위 코드의 의미는 다음과 같습니다. http:로 시작하는 모든 링크에는 작은 화살표 아이콘이 추가되어 사용자에게 이것이 외부 링크임을 상기시키며, 사용자는 클릭하면 사이트를 떠나게 됩니다. 이 기능은 매우 사용자 친화적이며 웹 디자인의 사용 편의성을 강조한다고 할 수 있습니다.
물론 이는 이 사이트를 가리키는 모든 링크가 상대 주소를 사용하기 때문입니다. 이 사이트에 대한 링크도 http:로 시작하거나 절대 주소와 상대 주소를 모두 사용하는 경우에는 어떻게 되나요? 다음 코드를 사용할 수 있습니다:
a[href^=”http:”] {
background:url(images/externalLink.gif) 오른쪽 상단 반복 없음;
오른쪽 패딩:10px;
}
a [href*=”www.dudo.org”] {
배경:없음;
패딩:0;
}
위의 두 가지 규칙은 http:로 시작하는 모든 항목에는 외부 링크 아이콘이 추가되고, http://www.dudo.org/ 로 시작하는 항목은 http로 시작되지 않습니다. 화살표 아이콘이 나타나지 않습니다.
기사 출처: http://www.dudo.org/article/CSSJS/use_new_tech_of_CSS.htm