외부링크 nofollow 속성 다른색 구분 새탭 아이콘

워드프레스 에디터의 새로 생긴 기능으로 링크를 걸고 Open in new tab(새탭열기), Mark as nofollow(보증하지 않는 링크(ex 미래를 장담할 수 없는 외부 링크 등))를 클릭으로 쉽게 넣을 수 있음.

구글도 추천하는 방식이니 외부 링크라면 반드시 nofollow 속성을 추가하는게 좋음

이렇게 속성을 추가하면 새 창 링크에는 target="_blank" 라는 속성이 붙고 nofollow 는 rel="noreferrer noopener nofollow" 라는 속성이 붙음, 이 속성을 CSS로 지정해

일반링크 새창링크 외부링크 표현 구분

이런 식으로 링크 방식에 따라 다른 색을 주거나 아이콘 추가하게 자동 세팅 가능함.

.entry-content a[target~="_blank"]:after{
	content:"\279A";
	position:relative;
	bottom:0.2em;
	left:-0.1em;
	font-size:0.8em;
}
.entry-content a[rel~="nofollow"]{
	color:#7cdf7c;
}

[target~="_blank"]속성이 있는 .entry-content a(본문 링크) 이후(:after)에 ➚ 아이콘을 넣고(위치 조절하려면 content 속성처럼 margin 못 쓸 땐 position:relative를 주고 bottom, left 로 조절하면 됨(코딩 잡기술))

[rel~="nofollow"]속성을 포함하는 .entry-content a의 색상을 초록색(#7cdf7c) 으로 칠하는 코드