현재 이 티스토리 블로그에는 텍스트에 하이퍼링크가 걸릴 경우 이러한<< 형태로 노란 형광펜 밑줄처럼 보이도록 설정해놓았다. 이것은 다음과 같은 CSS 소스에 의해 동작한다.
/*링크*/
.entry-content a {
color: #1a0dab !important;
border-bottom: 3px solid #FCFFA5;
box-shadow: inset 0 0px 0 white, inset 0 -8px 0 #FCFFA5;
}
.entry-content a:hover,
.entry-content a.touch{
color: #1a0dab;
background: #FCFFA5;
padding-top: 0px;
}본문을 지칭하는 entry-content 내부의 a 태그가 존재할 경우 칼라를 지정하고 border-bottom으로 아래쪽을 색칠, box-shadow로 글자 내부를 색칠하는 식이다. 그리고 hover (마우스 커서 올렸을 때) touch (클릭했을때) 경우에는 밑줄친 형광펜 색깔이 글자 전체를 덮도록 효과를 주는 내용이다.
사실 수익형 블로그는 현란한 블로그 스킨 꾸미기보다 깔끔한 가독성과 적절한 광고배치를 신경쓰는 것이 더 중요하지만, 나도 예전에는 스킨 수정에 열올리던 시절이 있었다. 기억이 가물한데 당시에 소니 머시기인가 하는 어떤 분의 블로그를 보다가 이렇게 글자에 밑줄식으로 꾸며놓은게 예뻐보였다.
그래서 HTML 방법을 물어봤더니 대뜸 ‘수익형 블로그에는 답변하지 않습니다’ 라고 하는 것이었다.
당시에는 지금처럼 본격적으로 애드센스 고민을 하던 시절도 아니고 말그대로 일상 게임 잡블에 ‘애드센스를 달아놓았을 뿐인’ 블로그였다. 그런데 다짜고짜 상업성 블로그라는 식으로 틱 하고 내뱉는 말에 어이가 없어서 내가 직접 구글링을 해서 낑낑대며 소스를 만들었다.
마음에 드는 블로그 디자인 있으면 F12 눌러서 간단하게 소스를 따오면 되는 거였는데 그런 방법도 몰랐고 지금처럼 챗GPT도 없던 시절이라 ‘방법’을 찾아서 직접 코드를 구성하는데 몇 시간이나 걸렸다. 그렇게 힘들게 득템한 것이라 그런지 그 후로 지금까지 블로그를 할 때마다 하이퍼링크 소스는 꼭 이걸 사용하는 편이다.
최근 개설한 워드프레스에도 이 하이퍼링크 글자 밑줄을 적용하였다. 먼저 CSS 소스부터 보자.
.single .entry-content p:not(.btn-theme):not(.wpml-banner)
a {
color: #1a0dab !important;
border-bottom: 0.2em solid #FCFFA5;
box-shadow: inset 0 0px 0 white, inset 0 -0.5em 0 #FCFFA5;
font-weight:bold;
text-decoration: none;
}
.single .entry-content p:not(.btn-theme):not(.wpml-banner) a:hover,
.single .entry-content p:not(.btn-theme):not(.wpml-banner) a.touch{
color: #1a0dab;
background: #FCFFA5;
padding-top: 0px;
font-weight:bold;
text-decoration: none;
}내용은 티스토리에 적용했을 경우와 동일하다. 기본적으로 a 태그가 있는 경우 밑줄을 표시해주고, hover와 touch에서 전체를 칠하는 식이다.
다만 그냥 이렇게만 적용하면 문제가 있는데, 본문 내에 들어가는 모든 링크에 이 내용이 적용된다는 것이다. 제목, 작성자, 목차, 등등… 가장 큰 문제는 내부링크용 버튼 서식을 넣은 부분에도 이 밑줄이 적용되면서 디자인이 깨진다.
그래서 여기에 한가지를 추가해주는데, p:not 이라고 되어있는 부분을 보면 해당 id 속성이 들어간 p 블럭예 대해서는 적용하지 않는다는 의미이다. 이렇게 특정 id에 적용하면서 또다른 id는 배제하는 옵션을 동시에 적용할 수 있다는 것을 이번에 알았다.
소스를 적용하니 워드프레스에서도 하이퍼링크 적용된 텍스트가 이렇게 파란색 굵은 글씨에 노란형광펜 밑줄 형태로 나온다. 은은한 밑줄로만 하는것을 선호하는 사람도 있고 개인마다 취향 차이인데 나는 아무래도 이렇게 강조하는게 마음에 들더라.
워드프레스를 만지다보니 티스토리 초창기에 밤새서 스킨 수정하던 때가 떠오른다.
