M1 React 스킨 하이퍼 링크 텍스트 색상 변경

블로그 |2022. 2. 12. 13:10
반응형

M1 React 스킨 하이퍼 링크 텍스트 색상 변경

현재 이 블로그는 엠원스토리님의 M1 React 스킨을 사용중이다. 깔끔해 무척 마음에 든다. 아쉬운 점은 하이퍼 링크 텍스트 색상이 본문 색과 같아 링크가 걸렸는지 아닌지 알 수 없어 보이는 점이었다. 참고가 될만한 내, 외부의 다른 글을 찾아 애써 링크를 걸어두어도 다른 일반 텍스트와 구분이 안 되면 무용지물. 

 

링크된 텍스트의 색깔을 바꿔주기 위해 CSS를 들여다봐도. post로 시작하는 부분은 보이지 않았다. 곰곰 생각해 보니, 이 스킨은 새로 나온 반응형 스킨보다 오히려 기본형 스킨과 비슷했다. 그래서 .article을 찾아보았다. 있었다. 그런데 링크 색상이 따로 지정되어 있지 않았다. 

 

하이퍼링크 텍스트 색상 변경

 

그래서 위 사진에 빨간색 네모로 표시된 부분을 새로 넣어주었다. 첫줄은 링크된 글자 색깔을 바꿔주는 것이고, 아래 줄은 방문했던 링크 색깔도 바꿔주는 역할을 한다. 두번째 줄을 넣지 않으면, 전에 한 번이라도 갔던 페이지 링크는 그냥 검정으로 표시 된다. 

 

아래 사진처럼 의도했던 대로 표현되고 있다.

 

푸른 색으로 표시된 링크 텍스트

 

Dodger Blue

#1E90FF 는 Dodger Blue라고 한다. LA Dodgers 팀에 사용하기 위해 조합된 푸른색 가운데 하나라고 한다. 스카이 블루나 가루파랑이 예쁘지만, 텍스트 색깔로는 흐린 면이 있었다. 그렇게 밝으면서도 글씨가 좀 더 분명하게 보이는 색을 찾다 보니 이 색을 고르게 되었다.

Dodger Blue

 

아래 보이는 파랑은 Cornflower Blue다. Dodger Blue의 의미를 검색하다 알게된 색상인데, 이것도 마음에 든다. 좀 더 차분한 느낌이다. 코드 이름은 #6495ED.

Sunflower Blue

 


요약

1. 스킨 편집 > CSS

2. .article 찾는다.

3. 아래쪽에 '.article a:link {color:#1E90FF; text-decoration:none;}'을 넣어준다. '#1E90FF' 대신에 '#6495ED'도 괜찮아 보인다.

4. '.article a:visited {color:#1E90FF; text-decoration:none;}'도 넣어준다. 모든 링크가 본문 텍스트와 구별되어 의도했던 대로 표현된다.

공감♥를 눌러주세요! 큰 격려가 됩니다.
파트너스 활동으로 일정액의 수수료를 받을 수 있습니다.

댓글()