[CSS] a태그 글자 강조하기 마우스 오버 색 변경

웹 페이지에서 사용자의 주의를 끌기 위해 링크된 텍스트를 시각적으로 강조하는 것은 중요합니다. 이 글에서는 CSS를 사용하여 a태그 글자 강조를 위해서 텍스트를 굵게 표시하고 마우스 오버 시 색상을 변경하는 방법에 대해 알아보도록 하겠습니다.

 

 

기본 스타일 지정

먼저, a태그에 기본적인 스타일을 지정해보도록 하겠습니다.

a {
  text-decoration: none;  /* 기본적으로 적용되는 밑줄 제거 */
  font-weight: bold;       /* 글자를 굵게 */
  color: #FF0000;          /* 글자색을 빨간색으로 */
}

위 코드를 적용하면, a태그의 텍스트는 굵게 표시되며 빨간색으로 글자가 강조됩니다.

 

마우스 호버 및 클릭 시 스타일 변경

사용자에게 상호작용을 유도하기 위해 마우스 호버나 클릭 시 다른 스타일을 적용할 수 있습니다.

a:hover {
  text-decoration: underline;  /* 마우스를 올리면 밑줄 생성 */
  color: #000000;              /* 글자색을 검은색으로 */
}

a:active {
  color: #00FF00;              /* 클릭 시 글자색을 초록색으로 */
}

이를 통해 사용자는 마우스를 올렸을 때 및 클릭했을 때의 상호작용을 할 수 있습니다.

 

a태그 작성

다음과 같은 HTML 코드가 있다고 가정해 보겠습니다.

<a href="https://devit.koreacreatorfesta.com/">devit.koreacreatorfesta.com</a>

 

• 이 코드는 "devit.koreacreatorfesta.com"이라는 링크를 생성합니다.
• 위 CSS 코드를 적용하면 다음과 같이 링크가 표시됩니다.
• 링크를 클릭하면 devit.koreacreatorfesta.com 웹사이트로 이동합니다.

 

소스코드 다운로드

위의 소스를 실행하면 아래와 같은 실행 결과가 나옵니다.

devit.koreacreatorfesta.com

 

위의 소스는 아래의 파일을 다운로드 할 수 있습니다. 

a태그글자강조.zip

0.00MB

 

결론

CSS를 활용하면 웹 페이지의 a태그 스타일을 다양하게 변경하여 사용자의 경험을 풍부하게 만들 수 있습니다. 원하는 효과와 디자인에 맞게 스타일을 조정하여 블로그 혹은 웹 페이지를 더욱 돋보이게 만들어 봅시다.