티스토리 블로그 하이퍼링크 앵커 태그 꾸미는 방법

티스토리 블로그에서 하이퍼링크를 구성하는 앵커 태그를 꾸미는 방법에 대해 알아보도록 합시다~
하이퍼링크 앵커 태그를 우클릭하여 [검사]를 눌러주세요. 그러면 해당 요소의 속성값을 확인할 수 있습니다. 속성값을 확인하였으면 이제 HTML편집을 진행하겠습니다.

티스토리 하이퍼링크 앵커 태그

[블로그 관리 홈] => [꾸미기] => [스킨 편집]으로 이동한 다음에 우측에서 HTML 옆에 있는 CSS를 선택해 주세요. 다음과 같은 코드로 크게 누를 수 있는 버튼 형태로 변경처리하였습니다.

앵커 태그 꾸미는 방법

  • 티스토리 오디세이 스킨을 기준으로 본문의 요소 클래스 이름은 article-view입니다.
  • 그중 p(패러그래프) 태그에 속한 a(앵커) 태그를 대상으로 하겠습니다. (아래의 active는 마우스를 올려서 태그가 활성화되었을 때를 나타냅니다.)
  • text-decoration은 없습니다.
  • font-size는 루트 요소와 동일하도록 1rem을 설정하였습니다.
  • color는 우선 흰색으로 해보겠습니다.
  • padding로 a 태그 내의 글자의 패딩을 설정합니다.
  • display를 설정합니다.
  • border-radius를 설정하여 모서리를 동그랗게 했습니다.
  • transition all로 모든 속성에 대해 트랜지션을 설정하도록 합니다.
  • text-shadow를 통해 약간의 그림자 표시를 추가합니다.
  • background-color는 푸른빛이 나게 해놓았는데 취향에 맞게 변경하세요.
  • border-bottom으로 하단의 푸른색 그림자 표시를 추가합니다.
  • 액티브 상태일 때에는 트랜스폼 하여 3px만큼 위치를 옮깁니다. 그리고 하단의 푸른색 그림자를 2px로 축소하여 버튼을 누르는듯한 느낌이 나도록 합니다. (border-bottom - active.border-bottom을 transform으로 설정합니다.)
.article-view p > a {
    text-decoration: none;
    font-size: 1rem;
    color: #fff;
    padding: 5px 10px 5px 10px;
    display: inline-block;
    border-radius: 10px;
    transition: all 0.1s;
    text-shadow: 0px -2px rgba(0, 0, 0, 0.4);
    background-color: #207be4;
    border-bottom: 5px solid #165195;
}

.article-view p > a:active {
    transform: translateY(3px);
    border-bottom: 2px solid #165195;
}

댓글

댓글 쓰기