웹 페이지의 링크 색상을 변경하는 방법

다음은 HTML 및 CSS를 사용하여 웹 페이지에 표시된 링크의 색상을 변경하는 방법에 대한 단계입니다. 링크 색상은 HTML BODY 태그로 수행 할 수 있지만 CSS에서 다음과 같이 모든 스타일 설정을 수행하는 것이 좋습니다.

팁 : 웹 페이지 요소의 색상을 정의 할 때 HTML 색상 코드를 사용해야 할 수 있습니다. 주요 색상의 경우, 해당 색상 코드 값을 사용하는 대신 빨간색, 파란색, 녹색 및 검정과 같은 색상 코드를 사용하는 대신 해당 색상의 이름을 지정할 수도 있습니다.

다양한 유형의 하이퍼 링크 이해하기

하이퍼 링크는 상호 작용하기 때문에 페이지의 특수 요소입니다. 대화식임을 나타내려면 상태에 따라 다르게 표시됩니다. 하이퍼 링크에는 세 가지 다른 상태를 나타내는 원래 색상 외에도 세 가지 특수 색상이 있습니다.

  1. Visited link - 방문한 링크 의 색. 하이퍼 링크가이 색상 인 경우 사용자는 링크를 클릭하면 이미 본 페이지로 이동하게됩니다.
  2. 호버 링크 - 마우스가 링크 위로 마우스를 가져갈 때의 색상입니다. 하이퍼 링크가이 색상 인 경우, 사용자는 마우스 왼쪽 버튼 (클릭)을 누른 다음 버튼을 놓으면 링크가 방문하게됩니다. 호버색은 활성 링크와 방문 링크 모두 동일합니다.
  3. 활성 링크 - 클릭 할 때 링크의 색상입니다. 사용자가이 색상을 보게되면 마우스 버튼을 놓으면 브라우저가 링크를 방문하게됩니다.

팁 : 하이퍼 링크에 대한 추가 정보 및 관련 질문은 하이퍼 링크 정의를 참조하십시오.

CSS 링크 색상 예제

아래의 CSS 예제에서 하이퍼 링크 색상을이 페이지에 표시된 것과 유사하게 설정합니다. 먼저 모든 앵커는 # 2c87f0 (파란색 음영), # 636은 보라색 음영, 모든 호버 및 활성 링크 색상은 # c33 (빨간색)으로 설정됩니다. 아래 코드는 CSS 스타일 요소 또는 .css 파일에 추가 할 수 있습니다.

 a {color : # 2c87f0; } a : 방문한 {color : # 636; } a : 호버, a : 활성, a : 초점 {색상 : # c33; } 

페이지가 CSS를 사용하고 있지 않거나 CSS로 변환하지 않으려는 경우, HTML 코드의 BODY 태그에서이를 수행하는 방법이 아래에 나와 있습니다. 그러나 앞에서 언급했듯이 body 태그 대신 위의 CSS 코드를 사용하는 것이 좋습니다. 위의 코드를 CSS 파일에 추가하고 모든 웹 페이지를 해당 CSS 파일에 연결할 수 있습니다. 그런 다음 해당 CSS 파일의 배경색 값을 변경하여 연결된 모든 페이지의 배경색을 즉시 변경할 수 있습니다.

HTML 본문 태그 예제

매우 드물게 CSS를 사용할 수없는 경우도 있습니다. 이러한 경우 HTML 바디 태그에서 배경색, 텍스트 색상, 링크 색상 및 기타 값을 아래와 같이 정의 할 수 있습니다.

다음은 body 태그의 각 HTML 속성에 대한 설명입니다.

TEXT = 텍스트의 색.

링크 = 링크의 색.

VLINK = 방문한 링크 색상.

ALINK = 클릭하면 활성 링크의 색상 또는 링크가 변경됩니다.

BGCOLOR = 페이지 배경색.