CSS Selector로 외부링크 선택하기

CSS를 보통은 초보자가 배우고 쓰기 때문에 CSS Selector OOO 선택하기 시리즈로 글을 써볼까합니다.

 

이 글은 링크(<a>)중 외부링크만 선택하는 방법입니다. 선택에 앞서 기초내용부터 한번에 다룹니다.

 

때문에 잘 몰랏어도 한번 정독하면 사용할 수 있을것입니다.

 

 

CSS의 외부링크 선택법

사실 저는 초보자를 위한 글을 잘 쓰지 못합니다.

그냥 방법을 순차적으로 쓸것인데요. 공부에는 도움이 되지는 않아도 실제 쓸때는 도움은 될겁니다(?)

 

먼저, 태그 선택법

a{text-decoration: none;}

Selector 자리에 태그명을 입력한다면 입력한 태그가 선택된다.

위의 코드는 a태그를 선택하여 스타일로는 글자 꾸미기 = none 를 줬다.

 

 

 

둘째, Attribute 선택방법 (속성 선택자)

a[href="https://hi098123-skin.tistory.com/"]{color:red}

이번엔 특정한 Attribute를 선택해봤다.

이렇게 설정한다면 https://hi098123-skin.tistory.com/ 의 색상은 빨간색이된다.

 

아래에서 속성선택자에 대해 자세히 설명해봅니다.

 

[attribute]

특정 attirbute를 가지는 경우를 선택한다.

p[class]{color:red}

<p>선택 안됨</p>

<p class="hi098123">선택 됨</p>
<p class="hi098123-skin">선택 됨</p>

 

 

[attribute=value]

특정 attribute가 value와 정확히 일치하는 경우

a[href="https://hi098123-skin.tistory.com/"] {color: green;}

<a href="https://hi098123-skin.tistory.com/">선택되어 초록색이 됨</a>

 

 

[attribute~=value]

특정 attribute안에 value를 정확히 포함 하는 경우

다른데에서 정확히 포함이라는 단어를 쓰는지는 모르겠는데 이렇게 표현해봤다. 아래 예시를 보면 무슨의미인지 알수 있을것입니다.

p[class~="hi098123"]{color:lime}

<p>선택 안됨</p>

<p class="hi098123">선택 됨</p>
<p class="aa hi098123">선택 됨</p>

 

 

 

[attribute|=value]

조금 설명하기 복잡하다. attribute가 정확히 value이거나 value로 시작하면서 -(하이픈)으로 연결되어있어도 된다.

p[class|="hi098123"]{color:#424242}

<p class="hi098123">선택됨</p>
<p class="hi098123-skin">선택됨</p>
<p class="hi098123-aa">선택됨</p>

<p class="hi098123 skin">선택 안됨</p>

 

 

 

[attribute^=value]

attribute가 value로 시작하는 경우 선택한다.

p[class^="hi098123"] { color: red; }

<p class="hi098123">선택됨</p>
<p class="hi098123-skin">선택됨</p>
<p class="hi098123-aa">선택됨</p>
<p class="hi098123 skin">선택됨</p>

<p class="skin hi098123">선택 안됨</p>

 

 

 

[attribute$=value]

$는 정규식에서 끝부분을 의미하는데 CSS에서도 비슷한 의미를 가진다.

attribute가 value로 끝나는 경우 선택한다.

p[class$="hi098123"] { color: red; }

<p class="hi098123">선택됨</p>

<p class="hi098123-skin">선택 안됨</p>
<p class="hi098123-aa">선택 안됨</p>
<p class="hi098123 skin">선택 안됨</p>

<p class="skin hi098123">선택됨</p>
<p class="skin-hi098123">선택됨</p>

 

 

[attribute*=value]

value를 포함하는 경우 선택합니다.

p[class*="hi098123"] { color: red; }

<p class="hi098123">선택됨</p>
<p class="hi098123-skin">선택됨</p>
<p class="hi098123-aa">선택됨</p>
<p class="hi098123 skin">선택됨</p>
<p class="skin hi098123">선택됨</p>
<p class="skin-hi098123">선택됨</p>

<p class="skin">선택 안됨</p>

 

 

 

 

 

셋째, :not() 이용방법

a:not([href="https://hi098123-skin.tistory.com/"]) { color: blue; }

이번엔 반대로 https://hi098123-skin.tistory.com/ 주소가 아닌경우 파란색으로 설정한다.

https://hi098123.tistory.com/ 이렇게 표시된다.

 

 

 

이걸 모두 사용하면?

a{
	/* 전체 링크를 선택하여 스타일을 넣는다. */
}
a[href*="//hi098123-skin.tistory.com/"],a[href^="/"],a[href^="./"],a[href^="#"] {
	/* 내부 링크를 선택하여 스타일을 넣는다. */
}

이런식으로 CSS에서 선택자를 활용할 수 있습니다.

 

CSS 선택자로 외부링크만 선택이 불가하기 때문에 모든 링크를 외부로 보고

a 태그중(링크중에) 주소에 특정 주소를 포함하지 않는 경우를 선택하는 방법입니다.

• /, # 으로 시작하는 주소는 내부링크임.
• *= 으로 자신의 주소 링크를 넣어야 완전히 작동한다.

Attribute 여러개를 합쳐서 not 할수있는 방법이 없어서 이렇게 선택하면 됩니다.

 

일부러 https: 부분(스키마라고 불립니다.)은 제거합니다. 혹시나 http나 https등 다를수도 있기 때문이고요.

 

 

외부 링크를 external link라고도 부르는데 아래의 아이콘은 많이 본 적 있을겁니다.

external icon

외부링크임을 표시할 때 이런 아이콘은 CSS 셀렉터를 이용해 넣어줄 수 있습니다.

 

a:after { background:url("/icon/external-link.png") no-repeat;}

a[href*="//hi098123-skin.tistory.com/"]:after,
a[href^="/"]:after,a[href^="./"]:after,a[href^="#"]:after {
	background:none;
}

이렇게 아이콘 이미지를 넣는 방법도 있지만, 폰트기반의 아이콘을 넣는 방법도 있습니다.