CSS를 이용하여 링크 뒤에 아이콘 넣기

다양한 모양의 링크

 

링크를 나타내기 위한 방법으로는 이렇게 파란색에 밑줄을 그어 표현하는 것이 가장 일반적이지만,

때로는 디자인을 위해 다른 방법으로 링크를 표현해야하는 경우가 있습니다.

 

그중에서 링크 뒤에 특정한 기호나 아이콘을 달아서 링크를 표현해 보겠습니다.

 

한번만 사용할거면 그냥 <a>태그 안에 기호까지 포함해서 링크로 만들어 주면 되지만,

여러번 사용하는 경우 매우 번거로우므로 CSS로 특정 class의 링크 뒤에 기호가 들어가도록 구현하는 방법을 알아보겠습니다.

 

---

:after 셀렉터(선택자)

 

:after는 가상 클래스(pseudo-class) 셀렉터중 하나로, 지정된 요소 뒷부분에 내용을 넣을 때 사용하는 셀렉터입니다.

사용방법은 다음과 같습니다.

a:after {           
    content: '↗️';
}

 

완성된 링크

 

위와 같이 CSS를 완성하면, 모든 링크 뒤에 다음과 같이 ↗️ 기호가 붙게 됩니다.

 

---

디자인을 위해 원하는 모양의 기호를 붙이기 위해서는 다음과 같이 이미지 파일을 사용할 수 있습니다.

a:after {           
    content: " " url(./test.png);
}

이미지 파일을 넣은 링크

 

이미지가 바로 뒤에 붙는 것을 막기 위해 " " 를 넣어 공백을 만들어 주었습니다.

---

위의 방법으로도 충분히 원하는 링크를 만들 수 있지만,

링크가 많아지는 경우, 겨우 링크를 표시하기위해 여러개의 이미지파일을 불러오게 되는 부담이 생깁니다.

 

또한, 이미지의 크기나 색을 수정하는 것도 번거롭고, 확대할 때 깨진다는 문제도 있습니다.

 

이를 해결하기 위해서 벡터그래픽인 SVG파일을 사용할 수 있습니다.

SVG는 확대해도 깨지지 않고, 용량이 적고, 수정이 편하다는 장점이 있습니다.

한번 아이콘으로 사용할만한 SVG 파일을 찾아보겠습니다.

 

https://fonts.google.com/icons?selected=Material+Icons 

Material Symbols and Icons - Google Fonts

저는 구글 Meterial Icons에서 Open In New 아이콘을 찾아서 사용해 보았습니다.

SVG파일을 위에서 이미지를 불러오는 방식처럼 사용해도 좋지만, 다른 방법으로 사용하는 방법도 알아보겠습니다.

 

먼저 다운로드 한 SVG파일을 웹 브라우저로 연 뒤, 소스파일을 살펴보겠습니다.

사용할 SVG파일 코드

위와 같이 <svg>태그를 확인할 수 있는데요, HTML에서 사용할 경우 이 코드를 그대로 사용하셔도 됩니다.

하지만 우리는 CSS의 content : url() 항목에 넣어 사용하기 위해서 약간의 변환을 해보겠습니다.

 

https://yoksel.github.io/url-encoder/

위의 사이트를 이용하면 SVG 태그를 Data URL 형식으로 변경할 수 있습니다.

SVG 파일을 Data URL로 변환

변환된 값에서 background-image 부분을 제외한 영역을 복사해서 사용해 봅시다.

a:after {           
    content: " " url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E");
}

SVG 파일을 이용한 링크 1

 

성공적으로 SVG 그림이 링크 뒤에 붙은 것을 볼 수 있습니다.

하지만 사이즈를 조절할 필요가 있어 보입니다.

 

a:after {           
    content: " " url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='14px' viewBox='0 0 24 24' width='14px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E");
}

크기조절을 마친 링크 뒤 아이콘

 

url에서 height와 width값을 수정하면 위와 같이 크기 조절을 할 수 있습니다.

 

a:after {           
    content: " " url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='14px' viewBox='0 0 24 24' width='14px' fill='blue'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E");
}

링크 뒤 아이콘 색 변경

 

fill="" 부분을 수정하면 위와 같이 색상 변경도 가능합니다.