html/CSS 웹사이트 본문 링크밑줄 예쁘게 효과주기

블로그나 웹사이트의 텍스트에 링크를 걸면 밑줄이 생기거나 글자 색깔이 바뀌죠. 또한 링크가 걸린 곳에 마우스를 데면 글자색이 바뀌거나 배경이 바뀌는 효과도 본 적이 있으실 겁니다. 오늘은 html 태그와 CSS를 활용하여 링크에 예쁘게 효과를 주는 방법 공유합니다. 

 

먼저 변경전 제 티스토리 블로그의 링크 효과입니다. 

변경전 링크 효과

링크가 걸린 부분은 하늘색으로 색깔이 지정되고 여기에 마우스를 같다데면 밑줄이 생깁니다. 그렇게 예쁘지도 않고 너무 진부합니다. 그래서 아래와 같이 바꿔보려고 합니다.

 

변경후 링크효과

색깔도 좀더 예쁜 밝은 하늘색으로 바꿨고 밑줄도 눈에 띄게 효과를 줬습니다. 마우스를 갖다데면 배경이 바뀌는 효과를 주니 훨씬 세련되고 예쁘네요.

html/CSS 

어느 웹사이트나 구조는 비슷합니다. CSS에서 .a 로 시작하는 클래스가 링크효과를 주는 부분입니다. 티스토리 블로그의 경우 .area_view a 가 본문 링크에 효과를 주는 부분입니다. 여기서 주의할 점은 .area_view a 에서 코드를 추가하면 본문 외에도 원하지 않는 부분까지 링크효과가 걸립니다. 따라서 본문의 텍스트에만 링크효과를 주기 위해서 .area_view p a {링크 효과 관련 코드} 이런 식으로 코드를 수정해줘야 합니다. 

티스토리 링크효과 수정하기

티스토리에서 티스토리 관리모드→꾸미기→스킨변경→스킨편집→html편집→CSS 로 들어가서 Ctrl+F로 .area_view a 를 찾습니다. 그리고 기존 코드를 지우거나 주석처리를 하고 아래 코드를 붙여넣어주세요. 

/*190112 링크 언더라인, 배경 효과 */
.area_view p a {
    text-decoration: none;
    font-weight: bold; /*텍스트두껍게*/
    border-bottom: 3px solid #b4e7f8; /*밑줄색깔*/
    box-shadow: inset 0 -4px 0 #b4e7f8; /*그림자색깔*/
    color: inherit;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}
/*마우스 갖다 데었을때 */
.area_view p a:hover {background: #b4e7f8} 

본문에 링크가 걸렸을 때 텍스트를 두껍게 하는 효과도 자동으로 줄 수 있습니다. 그리고 효과의 컬러도 바꿀 수 있습니다. 다른 컬러를 사용하고 싶다면 그 색깔의 색상코드를 알아야 합니다. 색상코드를 검색하는 방법은 아래 링크를 참조하세요. 

프로그램으로 색상코드 찾기

마치며..

어떤가요? 바로 위의 링크효과를 보면 뭔가 색다르고 예쁘지 않나요? 제가 디자인 감각이 뛰어나거나 html을 잘하진 않습니다. 그저 여기저기 서핑하다 오 괜찮다 싶으면 그 사이트의 html 코드를 살펴보게 되더라구요. 모방은 창조의 어머니 아니겠어요? 여기저기 참고하다보니 저의 티스토리 블로그도 조금씩 예뻐지는거 같습니다.