웹페이지 링크에 화살표 아이콘 표시

포스팅을 하다보면 글이나 구문등을 강조하기 위해 밑줄이나 글자색을 수정하게 된다. 그리고 넣다보면 링크가 있는지 없는지 확인하기 위해 마우스 포인터를 올려보게 된다. 이런 사소하지만 안해도 되는 작업을 줄이기 위해 링크가 있다는 것을 알려주고 보기편한 작업이다. 링크가 있다는 표시인 아이코을 표시하는 CSS  수정을 통해 자동으로 되게하는 방법을 알아보고자 한다.

설치형 블로그는 어디든 적용할 수 있다.

 

링크 아이콘을 블로그에 업로드

먼저 링크 오른쪽이나 왼쪽에 아이콘을 넣기 위해서 해당 아이콘을 티스토리 같은 경우 업로드 한다. 이번에 사용할 아이콘은

이 아이콘 이다.

 

CSS 적용

.content-article a[href^="http"]:not([href*="codepen.io"])::after {
  content: '(external link)';
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  text-indent: 0.8em;
  white-space: nowrap;
  overflow: hidden;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/b/b2/External-link_%28CoreUI_Icons_v1.0.0%29.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
}

위의 코드에서 "index.png" 는 다운로드한 하여 블로그에 업로드한 이미지 파일 이름으로 바꾼다.

 

href^="http:// 는 보통 링크가 http로 시작하기 때문에 이로 시작하는 모든 링크를 말한다.

right center는 이미지 파일의 가로 세로 정렬 위치를 지정하고 아이콘 표시 위치를 말한다. 왼쪽으로 하고자 한다면 left로 모두 바꾼다.

href^="http://cfile 은 본문에 첨부되는 이미지에 화살표 아이콘이 붙는 것을 방지한다. 블로그에 첨부되는 이미지는 주소가 http://cfile로 시작한다. 따라서 링크 주소가 이걸로 시작하는 배경이미지가 없음으로 설정해 화살표 아이콘이 표시되지 않도록 한다.

HTML 적용

위의 모든 내용이 본문에만 적용되게 하도록 html 편집에서 article_rep_desc 을 검색하고 클래스를 추가해준다.

작성자의 경우에는 블로그에 클래스로 content-article 그런 역할을 하기때문에 위에 적용해주었다.