워드프레스 블로그에 적용한 테마에 따라 차이가 있을 수 있겠지만, 따로 설정을 하지 않으면 링크가 가능한 모든 요소 아래 자동으로 밑줄이 생긴다. 블로그 화면에 링크 요소가 적으면 그래도 괜찮겠지만, 요소가 많아질수록 가독성이 떨어질 수 있으니 모두 없애는 것도 좋은 방법이다.
예를 들어 블로그 메인 화면에 최신 글 목록과 사이드바에 공지사항, 카테고리 등을 설정해두면 위처럼 클릭 요소마다 밑줄이 있는 것을 볼 수 있다. 그대로 둬도 상관은 없겠지만, 신경 쓰인다면 역시 없애는 것이 좋다.
설정을 위해서는 먼저 워드프레스 대시보드 – 디자인에 오면 사용자 정의(Customize) 메뉴 이동이 필요하다.
다음 화면이 열리면 오른쪽 아래 Additional CSS를 선택하면 된다.
CSS 창 화면 아무 빈 곳을 마우스 왼쪽 클릭한 뒤 위 코드를 입력하면 설정을 마칠 수 있다.
a {
text-decoration: none;
}
코드를 넣으면 CSS 창 옆의 미리 보기 화면에서 밑줄 목록이 사라진 모습을 볼 수 있다. 이후 CSS 창 위쪽의 발행 버튼을 누르면 블로그에도 적용된다.
만약 코드를 넣어도 변화가 없으면 뒤로 가기를 해서 다시 CSS 입력 창 접속 후 코드를 넣거나 ‘!important’로 우선순위를 적용하면 된다.
a {
text-decoration: none !important;
}
위 방법은 GeneratePress 테마 기준으로 작성했는데, 테마 종류에 따라 링크 클래스 이름(a)이 다르거나 설정 방법 등이 달라질 수 있다. 정확한 클래스 이름을 확인하려면 개발자 도구를 활용하면 된다.
블로그 개발자도구 검사로 CSS 요소 확인하는 방법
크롬 창 기준으로 F12 키 입력하면 화면 오른쪽에 개발자 도구 창이 나온다. 창 왼쪽 위의 점선 화살표를 클릭하면 화면 내 모든 요소가 클릭 가능한 상태가 되는데, 밑줄이 있는 요소를 클릭하면 이름과 속성을 볼 수 있다.
text-decoration: underline;
기본 설정은 underline으로 되어 있는데 위처럼 none;으로 바꿔주면 밑줄이 사라진다.
관련 글
GeneratePress 본문 이미지 두 개 나올 때 해결 방법
GP 마케터 테마 페이지 대표 이미지 중복 문제 해결 방법
GeneratePress 마케터 테마 선택 이유와 설치 방법
