웹페이지 방문자에게 최상의 서비스는 읽기 좋은 글이죠. 설명이 필요한 텍스트에 정성 들여 링크를 걸어서 작성하였다면 알 수 있게 해야 클릭하겠죠?. 링크 텍스트 색을 적용해야 하는데 아임웹은 이게 안돼서 아쉬워요. 링크 텍스트 색으로 방문자에게 웹페이지의 정보를 효율적으로 전달하고 방문자는 오래 머물게 할 수 있습니다. 링크 텍스트가 컬러로 구분되지 않으면 작성자의 노력은 효과를 얻기 어렵습니다. 아임웹에서 1번만 설정하면 되는 방법. 링크 텍스트 사용자에게 유용한 꿀 팁입니다.
글의 내용
링크 텍스트 색상을 사용해야 하는 이유
‘링크 텍스트’는 텍스트를 클릭한 후 지정한 주소로 이동하여 원하는 정보를 볼 수 있도록 하는 기능인데요. 링크 텍스트를 쓰는 일은 웹페이지 방문자 관점으로 이해를 돕기 위한 정성이거든요.
그런데 링크 텍스트로 만들었는데, 보니 어떤 글이 링크 텍스트인지 구분이 안되는 거예요. 사이트 방문자가 어떤 글이 링크 텍스트인지 알아야 마우스를 가져가서 클릭하게 될텐데요.
글이 산만해 지는 게 싫어서 열심히 링크를 걸어두었는데,
아래 이미지처럼 보여진다면 링크 텍스트가 있다는 생각은 못하겠죠?
사실은 아래 이미지처럼 링크 텍스트가 있는 글입니다.
텍스트에 링크 스타일을 적용하면 링크를 설정한 텍스트는 본문의 텍스트 컬러와 다른 색상으로 표시할 수 있습니다.
글을 읽는 방문자가 읽다가 확인하면 좋을, 도움이 되는 사항을 링크로 방문하여 확인할 수 있게 해 주니까, 사이트에 대한 이미지가 좋을 것이고 오래 머무르게 되지 않을까요.
링크 텍스트 너머의 내용을 알고 있는 방문자에게는 번거로운 설명을 생략하여 빠른 읽기에 도움이 되겠죠.
링크가 있는 텍스트는 색상이 다르게 표시되므로 강조됩니다.
이미 방문한 링크 텍스트는 다른 색으로 표시되므로 방문자의 활동 내용을 나타내 줍니다. 마우스를 올리면 텍스트의 색상이 변하고 밑줄이 그어집니다.
링크 텍스트 컬러 적용 전 후 비교
웹페이지를 비교해 보실까요?
링크 텍스트에 색상이 적용된 페이지는 역동적으로 보입니다.
관점에 따라 산만하다고 느낄 수도 있는데 정보를 전달하는 글에서는 효과적인 도구라 생각됩니다.
링크가 있는 텍스트가 상태에 따라 지정된 컬러로 표시됩니다.
어떤 링크 텍스트를 방문했는지 한눈에 보이죠? 여러 단어를 나열했는데도 전체적으로 각 항목들이 하나 하나 눈에 잘 들어온다는 걸 알 수 있습니다.
아임웹에 링크 텍스트 컬러 적용하기
블로그를 쓸 때, 작성하는 글에 링크를 설정하면 링크 텍스트 색이 자동으로 파란색으로 밑줄로 바뀌잖아요. 이게 블로그 작성 도구에서는 기본적으로 지원되는 기능인데 아임웹은 홈페이지 제작도구라 그런지 이 기능이 없더라구요.
그래서 아임웹에 적용하는 진짜 간단한 방법을 찾아냈습니다.
각 문장이나 페이지 단위로 해시태그나 HTML 등으로 코딩하는 방법을 찾아봤더니 워드프레스 기준으로 CSS 코딩으로 알려주더군요.
아임웹은 워낙 많은 부분을 유용하게 지원하고 있어서 CSS나 코딩으로 손대면 문제가 될 수 있다고 경고하잖아요.
저 같은 코린이는 방법을 찾을 수 없더라구요.
포기하지 않으니 3일차에 새로운게 보이더라구요. 드디어 답을 찾았죠. 그것도 넘 쉬운 답을~, 일단 2일 동안 테스트 결과 만족합니다.
고생해서 배운 거 나눌 수 있어 기분이 좋으네요~
적용하는 방법은, 사이트관리자 메뉴 [SEO, 헤더설정] 에서
Header Code 또는 Body Code 작성 칸에 HTML 코드를 복사하여 붙여 넣기만 하면 됩니다.
아임웹 메뉴 : 관리자화면 → 환경설정 → SEO, 헤더설정
[SEO, 헤더설정] 메뉴에서 ‘공통 코드 삽입’ 영역으로 갑니다.
Header Code 또는 Body Code 둘 중 한 곳의 작성 칸에 아래 HTML코드를 붙여 넣습니다.
Header Code 에 넣으라는 코딩 전문가의 글을 보았는데 양쪽 모두 테스트했는데 두 곳 모두 가능했구요.
저는 Body Code 에 넣었습니다.
아래 코드를 복사해서 붙여 넣고 저장하면 끝 입니다.
<style>
a:link { color: teal; }
a:visited { color: maroon; text-decoration: none }
a:hover { color: yellow; text-decoration: underline }
a:active { color: red; text-decoration: none }
</style>
적용해 봤는데 Header Code 또는 Body Code 두 곳 모두 html코드가 작동하였습니다, 코드를 붙여 넣고 저장하기만 하세요. 저장 하고 아래와 같이 반영되어 보이는지 확인하면 됩니다.
| 코드에 포함된 내용 ＊link 기본적으로 링크가 걸린 텍스트는 텍스트 색상이 청록색으로 변경된다. ＊visited 방문한 상태의 링크 텍스트는 텍스트 색상이 고동색(갈색)으로 변경된다. ＊hover 마우스를 텍스트에 올려놓은 상태의 링크 텍스트는 밑줄과 색상이 노란색으로 변경된다. ＊active 클릭한 상태의 링크 텍스트는 텍스트 색상이 빨간색으로 변경된다. ＊위 예제에서 링크 걸린 텍스트의 글자색이 청록색이 아닌 고동색이라면, 그 페이지를 방문한 적이 있기 때문이다. |
사실, 저는 무엇 때문인지 원인을 찾지 못했는데 한 가지가 안돼요. hover 상태에서 밑줄은 되는데 지정한 노란색이 안돼요. 원래 색(링크 없는 텍스트 색)으로 보여주네요. 하여튼 색은 바뀌는 거니까 충분히 만족스럽습니다.
| Tip 링크 텍스트를 설정해서 글을 작성한 다음 단어의 위치를 수정하거나 링크 텍스트를 복사(Ctrl+C)해서 붙여 넣기(Ctrl+V) 하는 경우에는 HTML코드가 엉키는 걸 확인했습니다. 문장을 완성한 다음에 링크 주소를 입력하거나 링크 텍스트가 있는 글을 수정해야 한다면 새로 쓰고 수정하는게 좋을 거 같습니다. 코린이(HTML초보자)라 코드를 보다가 눈이 빠지는 줄 알았습니다.^^ |
오늘은 아입웹에서 지원되지 않는 기능을 코드로 구현해 봤습니다.
방문자를 위해 애써 링크 걸어 놓은 텍스트, 눈에 띄게 하는 방법!!
이틀 서핑하고 테스트 해서 겨우 방법을 찾았네요.
의외로 간단한 방법이었어요. 한번만 설정하면 홈페이지를 한방에 반영되는거니까요.
아임웹은 코딩을 모르는 사람도 실제 비즈니스에 사용할 수 있는
좋은 품질의 홈페이지를 구축할 수 있는 서비스를 제공하는 탁월한 회사입니다.
덕분에 저도 동영상 강의만 보고 홈페이지 만들기에 성공했으니까요.
좋은 물건이라도 사용하다 보면 아쉬운 부분이 있듯,
아임웹도 디테일한 부분에 조금 더 해보고 싶은 필요가 생기겠죠?
성장의 과정이니까요~
HTML코드로 표시하는 링크의 상태
HTML 링크의 상태는 다음과 같이 네 가지로 구분합니다.
| 링크의 상태 | 설명 |
|---|---|
| link a:link { color:teal; } | 아직 한 번도 방문한 적이 없는 상태 (기본) 예)아직 방문하지 않은 링크의 글자색을 청록색으로 정의 |
| visited a:visited { color:maroon; } | 한 번이라도 방문한 적이 있는 상태 예)사용자가 방문한 적이 있는 링크의 글자색을 고동색으로 정의 |
| hover a:hover { color:red; } | 링크 위에 마우스를 올려놓은 상태 예)마우스를 링크에 올려두었을 때, 글자색을 노란색으로 정의합니다. |
| active a:active { color:green; } | 링크를 마우스로 누르고 있는 상태 예)마우스로 링크를 클릭하고 뗄 때까지의 글자색을 초록색으로 정의. |
위와 같이 링크의 스타일을 정의하는 link, visited, hover, active 클래스를 사용할 때는 작성 순서를 수정하지 않아야 합니다.
순서는 a:hover는 a:link, a:visited 뒤에 와야 하고, a:active는 a:hover 뒤에 와야 합니다.
a:link, a:visited, a:hover, a:active (LVHA) 순서로 배치되어 있는 대로 복사해서 사용하셔야 됩니다.
[참고] HTML 링크 코딩에 대한 기초지식에 도움이 되는 사이트
끝까지 읽어주셔서 감사합니다.
아임웹 링크 텍스트 사용자라면 다음 글도 읽어보세요.
아임웹, 원하는 위치로 이동하는 링크 텍스트 사용 방법