링크 URL 뒤에 이모티콘이나 어썸 폰트 아이콘 붙이는 방법 (::after css를 활용)

링크 URL 뒤에 이모티콘이나 어썸 폰트 아이콘 붙이는 방법 (::after css를 활용)

웹사이트나 블로그에서 URL 링크를 표시하는 방법으로 색상을 강조하거나, 링크 밑줄을 보이게 하는 방법이 있습니다. 링크 이모티콘이나 아이콘을 활용하는 방법도 있는데요. 티스토리 관리자 페이지에서도 확인할 수 있습니다.

링크 다음에 있는 어썸 폰트

링크 표시를 좀 더 직관적으로 확인할 수 있게 링크 뒤에 어썸 폰트 또는 이모티콘(이모지)를 자동으로 붙이는 방법을 찾아보았는데요. 티스토리 블로그에 적용하면서 그 과정에 대해서 정리해보았습니다.

::after를 이용하여 링크 뒤에 이모티콘, 아이콘, 어썸 폰트 적용하기 (css)

이전 글에서 ::before를 활용하여 앞쪽에 장식하는 요소를 붙이는 방법에 대해서 작성하였습니다. 비슷하게 ::after를 이용하여 링크 뒤에 아이콘을 노출할 수 있습니다.

가상요소 ::after

::after는 마치 class를 지정하여 속성을 준 것처럼 선택자를 선택할 수 있는 가상 요소입니다.

예를 들어 p 태그 앞에 css 요소를 지정하고 싶다면 ::before요소를 넣고, 태그 뒤에 요소를 지정하고 싶다면 ::after 속성을 지정해서 css 속성을 부여할 수 있습니다.

가상 요소 css	위치
::before	요소의 시작 전
::after	요소의 끝
::first-line	요소의 첫 줄 텍스트
::first-letter	요소의 첫 번째 글자
::selection	사용자가 드래그(선택)한 영역의 텍스트
::placeholder	Input 필드의 힌트 텍스트

::after 요소 지정하기 (css 삽입)

CSS에 ::after 속성을 적용하면 content에 작성한 내용이 출력되는 방식입니다.

div ::after {
content: "";
}

요소 ::after { content: "";} 이런 식으로 작성하여 css에 html에 없는 가상요소를 만들어서 content에 작성한 코드를 노출합니다. 텍스트, 이미지, 특수문자, 어썸 폰트 등을 출력할 수 있습니다.

div로 설정할 수도 있지만 p 태그 등 다양한 요소를 설정할 수 있습니다. 링크를 예로 들면 다음과 같습니다.

a::after {
  content: "🔗";
}

링크 html 속성인 a 링크 뒤에 '🔗'이러한 링크 이모티콘을 출력한다라는 의미입니다. 이러한 방식으로 티스토리 블로그에 링크 뒤에 항상 원하는 내용을 자동으로 보이게 할 수 있습니다.

티스토리 블로그 css 편집 - 링크 속성에 ::after 설정하기

링크 뒷 부분에 요소를 지정하고 싶다면 ::after를 사용해야합니다.

제가 현재 사용 중인 미넴 스킨 기준으로 적용한 ::after CSS 코드는 다음과 같습니다.

.content-article .contents_style a[href]::after {
    content: '\f35d';
    font-style: normal;
    font-size: 14px;
    opacity: .7;
    vertical-align: top;
    text-decoration: none !important;
    margin-left: 5px;
    margin-right: 5px;
    transform: scale(.9);
    position: static;
    width: 1em;
    text-align: right;
}

위의 css를 꾸미기-스킨 편집-html 편집-css에 적용하여 티스토리 글 본문의 모든 링크 글에 자동으로 링크 아이콘이 생성되게 하였습니다.

::after 이용하여 링크 뒤에 출력된다

티스토리 블로그에 적용하고 싶다면, .content-article이 적용할 속성div이름으로 .content-article .contents_style이 부분을 원하는 본문 div이름으로 적용하시면 됩니다.

a::after로 작성해도 되지만 a[href]::after으로 a 링크에 붙는 속성 값 href도 같이 작성해보았습니다.

css 코드 좀 더 살펴보기

css에 삽입

content	출력할 이모티콘, 글자, 어썸 폰트
font-style	normal (기본값), italic (이탤릭), oblique(기울어진 글꼴)
font-size	글자 크기
opacity	불투명도
vertical-align	수직 정렬
text-decoration	링크 밑줄 모양 속성
margin-left	바깥쪽 여백 마진 (왼쪽)
margin-right	바깥쪽 여백 마진 (오른쪽)
transform	scale 속성 (요소 크기 및 이동)
position	배치 방법
width	넓이
text-align	텍스트 글 정렬 방법

어썸 폰트 유니코드

content에서 어썸 폰트 \f35d를 노출시킨다는 의미입니다. 링크 뒤에 어썸 폰트 링크 아이콘'\f35d'를 출력한다는 뜻인데요. 어썸 폰트 적용하는 방법과 코드 찾기는 이전글에서 확인할 수 있습니다.

opacity는 1기 기본 값으로 0.1, 0.2와 같이 투명도를 추가할 수 있습니다. 1은 투명하지 않은 원래 상태이며 0.5은 절반 정도 투명한 상태를 의미합니다.

vertical-align은 인라인 요소와 inline-block요소에만 적용됩니다. div 속성에는 적용되지 않습니다. top이라고 설정한 이유는 요소의 font의 가장 큰 철자의 맨 위에 맞춰서 정렬하기 위해서입니다. 다른 요소로 sub, super, baseline, bottom등으로 정렬 위치를 설정할 수 있습니다.

text-decoration은 글의 꾸밈 요소입니다. 밑줄을 없애고 싶었기 때문에 보이지 않게 none으로 설정하였습니다.

transform은 요소의 크기를 줄이거나 키울 수 있습니다. 크기를 100%보다 조금 작은 90% 정도로 줄이고 싶이고 싶어서 scale (.9)로 설정하였습니다.

position은 배치 방법을 말합니다. 기본 값인 static으로 설정하였습니다.

참고글
https://www.w3schools.com/cssref/css3_pr_opacity.asp
https://developer.mozilla.org/ko/docs/Web/CSS/transform
https://developer.mozilla.org/ko/docs/Web/CSS/position