최근에 회사에서 작업하는데 검색된 모든 링크가 엄청 비슷한 보라색으로 보이더라구요
저는 분명.. 클릭하지 않았던 링크인데??
그래서 방문한 링크와 방문하지 않은 링크를 좀 더 확실하게 구분하고 싶어서 색상을 변경해볼려고합니다
집에서 확인하니 그래도 차이가 있네요??
원래 좀 더 확실하게 구분됐던거 같은데 제 눈이 이상해진걸까요ㅜㅜ
무튼 기분전환도 할 겸 색상을 좀 바꿔볼게요
저는 현재 '웨일(Whale)'을 사용중입니다.
크롬에서 제공하는 Stylus를 적용해보겠습니다. (웨일은 크롬 기반이라 문제 없이 적용 가능)
1. Stylus 플러그인 설치
https://chromewebstore.google.com/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=ko&pli=1
Stylus - Chrome 웹 스토어
Stylus로 웹페이지를 새롭게 디자인해보세요. 유명한 사이트의 테마, 스킨도 간단하게 설치할 수 있는 사용자 스타일 관리자입니다.
chromewebstore.google.com
추가 버튼 눌러서 웨일에 적용시켜주세요
설치가 완료되면 검색창 옆 '확장 앱' 에서 Stylus를 확인할 수 있습니다.
2. 구글에 Stylus 적용하기
[확장앱] - [Stylus] 를 클릭하면 위처럼 보입니다.
현재 제가 구글에서 실행해서 구글위치로 보입니다.
원하는 페이지로 이동 후 Stylus 실행해주면 됩니다.
그리고 스타일 작성 대상 클릭 해주세용
3. Stylus 코드 작성
드디어 코드를 작성 할 수 있는 페이지가 나옵니다.
이제 색상을 넣어볼게요 코드는 아래와같이 쳐주면 됩니다.
a:visited {
color: purple !important; /* 방문한 링크: 보라색 */
}
a:link {
color: blue !important; /* 방문하지 않은 링크: 파란색 */
}
색상은 원하는대로 넣어주시면 됩니다.
저는 1차적으로 원하는 색을 지정해서 넣어봤어요.
코드 작성하고 Ctrl + S 를 눌러주면 바로 적용됩니다.
: 적용결과
와! 색이 너무 쨍해요
눈아프니까 제가 원하는 코드로 변경하겠습니다
3-1. 원하는 색상코드 입력
a:visited {
color: #D9418C !important; /* 방문한 링크 */
}
a:link {
color: #002266 !important; /* 방문하지 않은 링크 */
}
blue purple 대신에 원하는 색상코드를 입력할 수 있습니다.
ㅋㅋㅋㅋㅋㅋ 엄청 구분되도록 변경해봤는데 재밌네요
다른 사이트도 원하는대로 커스텀이 가능합니다!