CSS를 사용하여 링크 스타일 지정 방법: 자세한 초보자 자습서

이 튜토리얼에서는 CSS를 통해 웹 링크의 스타일을 지정하는 방법에 대해 설명합니다. 링크는 모든 웹사이트의 중심 부분입니다. 이를 통해 방문자를 다른 부분으로 이동하고, 출처를 참조하여 귀하가 만들고 있는 요점에 밑줄을 긋고, 독자가 더 관련성 있는 블로그 게시물을 찾도록 하는 등의 작업을 수행할 수 있습니다.

디자인을 변경하는 방법을 배우면 링크로 인식할 수 있고 웹사이트의 나머지 부분에 맞도록 할 수 있습니다. CSS는 이를 위한 다양한 방법과 속성을 제공하므로 하나씩 살펴보겠습니다.

링크 표준 및 기본 링크 스타일 지정

링크 디자인을 변경하는 방법에 대해 알아보기 전에 먼저 링크 구성을 이해해 보겠습니다. HTML에서 링크 요소는 다음과 같습니다.

 <a href="https://torquemag.io/">TorqueMag</a>

보시다시피 여러 부분으로 구성됩니다.

• <a> – 링크 요소를 생성하기 위한 연산자입니다. a ? HTML에서 링크는 앵커 태그 라고도 하기 때문입니다.
• href="" – 큰따옴표 안에 있는 모든 항목은 이 링크가 가리키는 위치입니다. 클릭한 사람이 방문하게 될 주소입니다.
• TorqueMag – 이것은 페이지에 나타나는 링크 텍스트입니다. 예를 들어 다음과 같습니다(클릭하지 마십시오. 이 링크는 아무데도 연결되지 않습니다).
• </a> – 링크 요소를 닫고 링크 텍스트가 여기에서 끝남을 브라우저에 알리는 부분입니다.

지금까지는 너무 쉽습니다.

기본적으로 링크가 어떻게 보이는지

흥미로운 점은 이러한 유형의 링크가 페이지에서 어떻게 보이는지 볼 때입니다. 아마 전에 본 적이 있을 것입니다.

HTML 문서에서 이전 링크를 선언하고 스타일 정보를 제공하지 않으면 기본 스타일이 적용됩니다.

1. 링크 텍스트는 파란색이고 링크 자체에 밑줄이 그어져 있습니다.
2. 마우스로 마우스를 가져가면 커서가 작은 손 모양 아이콘으로 바뀝니다.
3. 클릭하면 1초 동안 빨간색으로 바뀝니다.
4. 링크를 방문하면 색상이 보라색으로 바뀝니다.
5. 키보드의 tabulator 키를 통해 링크로 이동하면 주위에 파란색 윤곽선이 표시됩니다.

이러한 표준은 인터넷 초창기에 확립되었으며 90년대 이후로 크게 변하지 않았습니다. 재미있는 점은 의식적으로 생각해 본 적이 없더라도 웹 서핑을 통해 위의 대부분을 어느 정도는 알고 있었을 것입니다.

링크 상태에 대해 알아보기

위의 내용에서도 분명해지는 것은 링크의 모양에 영향을 주는 여러 상태가 있다는 것입니다. 개별 스타일에 영향을 줄 수 있는 다양한 CSS 의사 클래스로 이들을 대상으로 지정할 수 있습니다. 이것들은:

• – 앞서 언급 a 앵커 태그입니다. 모든 단계의 모든 링크를 대상으로 합니다.
• a:link – 방문하지 않은 일반 링크입니다. 기술적으로 :link 는 href 속성이 있는 모든 앵커 태그를 대상으로 합니다. 실제로는 그렇게 많이 쓰이지 않습니다. 많은 사람들이 a , href 속성이 없는 앵커 태그가 드물기 때문에 이러한 유형의 구분이 필요하지 않습니다.
• a:visited – 현재 사용자가 이전에 방문한 링크를 설명합니다. 즉, 브라우저 기록에 존재한다는 의미입니다.
• a:hover – 사용자가 링크 위로 마우스 커서를 가져갈 때 표시되는 스타일 지정을 대상으로 합니다.
• a:active – 링크 클릭 순간에 짧게 보이는 스타일.
• a:focus – 포커스가 있는 링크(예: 사용자가 탭 키를 사용하여 탐색한 링크). hover 와 focus 는 종종 함께 스타일이 지정됩니다.

주의해야 할 점은 여러 링크 상태에 대한 스타일을 한 번에 변경할 때 다음 순서로 변경해야 한다는 것입니다.

1. a
2. a:link
3. a:visited
4. a:focus
5. a:hover
6. a:active

링크 상태에 대한 스타일 지정은 서로를 기반으로 하여 계단식으로 형성됩니다. 따라서 순서는 의도한 대로 작동하는지 확인하는 데 중요합니다.

사용자 기대 충족

CSS를 통해 링크 스타일을 변경하는 방법에 대해 알아보기 전에 마지막으로 제쳐두고 사용자 기대에 대해 이야기합니다. 기본 링크를 링크로 쉽게 인식했을 가능성이 높은 이유는 특정 기본값이 사용자인 우리에게 아주 오랫동안 뿌리내렸기 때문입니다.

결과적으로 우리와 다른 모든 사람들은 링크가 어떻게 생겼는지에 대해 매우 명확한 기대치를 가지고 있습니다. 충족되지 않으면 사람들이 자신이 무엇인지에 대한 연결고리를 인식하기 어렵게 만들 수 있는 기대. 그렇기 때문에 웹사이트 디자인 작업을 할 때 이러한 기대치에 가깝게 유지하는 것이 좋습니다.

실용적인 용어로 다음을 의미합니다.

• 링크가 어떤 식으로든 강조 표시되었는지 확인하십시오. 색상이나 밑줄은 페이지에서 링크를 눈에 띄게 만드는 한 괜찮습니다. 이탤릭체 나 볼드체 같은 것은 피하십시오.
• 마우스를 가져갔을 때 링크가 변경되고 덜 클릭되면 피드백을 제공합니다( a:active , 기억?). 또한 대화형 요소를 나타내기 위해 커서가 손 기호로 바뀌는 것을 방해해서는 안 됩니다.

다음에서는 위의 모든 항목을 변경하는 방법을 알려 드리겠습니다. 그러나 사용자를 실망시키지 않도록 적당히 해야 합니다.

CSS를 통해 링크 텍스트의 스타일을 변경하는 방법

링크의 핵심을 구성하는 텍스트 부분을 변경하는 방법에 대해 먼저 이야기해 보겠습니다.

링크 텍스트 색상 수정

이 섹션에서 다루는 내용은 CSS를 통해 색상을 선언하는 방법에 대한 기사와 비교적 유사합니다. 따라서 실제로 세부 사항에 대해 알고 싶다면 해당 게시물도 살펴보는 것이 좋습니다.

여러 가지 방법으로 링크 텍스트의 색상을 변경할 수 있습니다. 색상 단어 및 HEX 코드, rgb() / rgba() , hsl() / hsla() 등과 같은 다양한 색상 표기법 시스템.

 #link-one { color: red; } #link-two { color: #3af278; } #link-three { color: rgb(61, 76, 128); }

위의 페이지는 다음과 같습니다.

가장 일반적으로 HEX 또는 rgb() 와 같은 것을 사용합니다. 색상 이름을 사용하는 것은 간단한 테스트 케이스 외에는 극히 드뭅니다.

사용하는 색상 시스템은 브라우저 호환성 또는 투명도가 필요한지 여부와 같은 다양한 요인에 따라 다릅니다. 그러나 보시다시피 링크에 색상을 지정하는 것은 color 속성을 통해 매우 간단하며 다른 모든 링크 상태에서도 동일한 방식으로 작동합니다. 결과적으로 :hover 또는 :focus 의 텍스트 색상도 쉽게 변경할 수 있습니다.

배경색 조정

텍스트 색상을 변경하는 것 외에도 링크의 배경색과 다양한 상태를 수정할 수 있습니다. 이것은 background-color 속성을 사용하는 것만큼 쉽습니다.

위의 예에 대한 마크업은 다음과 같습니다.

 #link-one { background-color: #fadbd8; color: red; } #link-two { background-color: #f26c2e; color: #3af278; } #link-three { color: rgb(61, 76, 128); } #link-three:focus { background-color: rgb(61, 76, 128); color: #fff; }

기타 텍스트 스타일 옵션

링크는 텍스트일 뿐이므로 CSS에서 텍스트 스타일을 지정하는 다른 모든 방법도 링크에 적용됩니다. 즉, 링크 및 해당 상태에 다른 속성을 할당하고 사용자가 링크 위로 마우스를 가져갈 때 글꼴 크기, 글꼴 패밀리 또는 기타 항목을 변경하도록 할 수 있습니다.

이는 특정 디자인에 적합할 수 있지만 CSS를 통해 링크 스타일을 지정하는 일반적인 방법은 아닙니다.

위의 효과를 얻기 위한 마크업은 다음과 같습니다.

 #link-one { background-color: #fadbd8; color: red; font-family: Arial; } #link-two { color: #3af278; font-weight: 600; text-transform: uppercase; } #link-three { color: rgb(61, 76, 128); } #link-three:focus { font-size: 36px; }

밑줄 작업

처음에 배웠듯이 링크는 기본적으로 밑줄이 그어져 있습니다. 그것을 없애고 싶다면 text-decoration: none; 을 사용할 수 있습니다. ( text-decoration 속성의 가장 일반적인 사용).

 a { text-decoration: none; }

어떤 사람들은 또한 일반 링크가 아닌 호버에만 밑줄을 추가하는 것을 선호합니다. 이 작업도 쉽습니다.

 a { text-decoration: none; } a:hover { text-decoration: underline; }

또한 border: bottom; text-decoration: underline; 링크 아래에 줄을 추가합니다. 사람들은 더 나은 스타일링 옵션을 제공하기 때문에 이것을 사용했습니다. 그러나 요즘에는 더 많은 사용자 정의를 허용하는 표준 underline 방법에 대한 새로운 속성이 있습니다.

예를 들어, text-underline-offset 을 사용하면 text-decoration 을 사용할 때 텍스트와 그 아래 줄 사이의 거리를 제어할 수 있습니다. text-decoration-thickness 를 사용하면 사용자 정의 선 너비를 설정할 수 있습니다. 따라서 border 경로로 가는 것이 더 이상 예전처럼 필요하지 않습니다.

그 외에도 애니메이션을 포함하여 링크 아래의 선으로 작업할 수 있는 방법이 정말 많습니다. 당신은 아마 그것에 대해 다른 기사를 쓸 수 있습니다.

마우스 오버 시 커서 스타일 변경

이미 말했듯이 링크 위로 마우스를 가져가면 마우스 커서가 작은 화살표에서 가리키는 작은 손으로 바뀝니다.

지금까지는 이것이 클릭 가능한 HTML 요소를 다루고 있다는 보편적인 표시입니다. 그러나 커서를 크기 조정 화살표 위의 십자형에서 로드 표시기로 변경할 수도 있다는 사실을 모를 수도 있습니다.

 a { cursor: crosshair; } a { cursor: move; } a { cursor: wait; } a { cursor: n-resize; } a { cursor: grab; }

궁금하시다면 위의 내용을 로컬 개발 환경에서 실행하여 효과를 확인해보세요. 여기에서 찾을 수 있는 더 많은 옵션이 있습니다.

그러나 포인터는 매우 보편적이기 때문에 이것은 확실히 사용자가 기대하는 것이며 일반적으로 이를 고수해야 합니다. 어떤 이유로 링크가 작동하지 않으면 다음 코드로 수정할 수 있습니다.

 a { cursor: pointer; }

웹 사이트에서 고유한 커서를 사용하려는 경우 사용자 정의 이미지를 사용할 수도 있습니다. 예를 들어 독일의 음악 상품 온라인 상점은 자체 테마 포인터 커서를 사용합니다.

브라우저 개발자 도구를 통해 수행하는 방법을 조사하면 다음 코드를 찾을 수 있습니다.

 a { cursor: url(../images/hand.cur),pointer; }

보시다시피 이미지 파일에 주소를 제공하여 사용자 정의 커서를 간단히 사용할 수 있습니다.

변경:focus

focus 을 맞추는 스타일은 접근성을 높이는 데 중요한 역할을 하므로 주변에 유지되도록 하세요. 기본적으로 강조 표시는 outline 속성을 통해 발생하며 주변에 상자가 나타납니다.

왜 border 가 아니라 outline 을 그리나요?

outline 는 페이지의 공간을 차지하지 않기 때문입니다. 대신 요소의 배경 위에 있습니다. 그렇게 하면 링크에 초점을 맞춰도 페이지 레이아웃 점프 또는 이와 유사한 것이 변경되지 않습니다.

그렇다면 포커스 링크에 대한 다른 스타일 옵션은 무엇입니까?

그들 중 많은. background-color 에서 color , font-size , box-shadow , 이름 지정에 이르기까지 모든 것이 필요합니다.

위의 것을 달성하는 방법은 다음과 같습니다.

 #link-one:focus { color: red; } #link-two:focus { box-shadow: 0 0 14px 0px; } #link-three:focus { font-size: 36px; }

a:focus 를 사용하면 기본적으로 원하는 모든 작업을 수행할 수 있습니다. 그러나 가장 흥미로운 응용 프로그램 중 하나는 outline 속성을 사용하여 브라우저 기본값을 간단히 사용자 지정할 수도 있다는 것입니다.

 a:focus { outline: 3px dotted green; }

위의 페이지는 다음과 같습니다.

링크 버튼 및 상자

물론 링크는 단순한 텍스트 링크가 아닙니다. 일부 위치에서는 탐색 메뉴와 같은 상자, 양식의 일부 또는 행동 유도문안으로 표시되는 경우가 많습니다.

이것은 달성하기가 너무 어렵지 않습니다. 기본적으로 링크 텍스트 주위에 공간을 추가하고 버튼이나 상자로 표시되도록 배경이나 테두리/윤곽선을 제공하는 방법을 찾아야 합니다. 그 외에는 여전히 이전에 사용했던 것과 동일한 링크 요소입니다.

flexbox 또는 grid와 같은 시스템에 패딩을 추가하는 것부터 이를 달성하는 여러 가지 방법이 있습니다. 아래는 당신이 그것을 할 수 있는 방법의 한 예일 뿐이며 더 많은 옵션이 있습니다.

 a { background-color: #1a0dab; color: #fff; padding: 1.5rem; }

이 경우 CSS에는 링크에 대한 스타일과 해당 링크가 있는 컨테이너가 모두 포함됩니다. 물론 이전과 동일한 링크 상태를 사용하여 여러 시나리오에 대해 다른 동작을 포함할 수 있습니다.

링크에 아이콘 포함

설명할 가치가 있는 빠른 것은 링크에 아이콘을 포함할 가능성도 있다는 것입니다. 그것은 어떤 것이 사용자를 현재 페이지에서 멀어지게 하는 아웃링크라는 것을 더욱 분명하게 하기 위해 일부 사람들이 하는 일입니다.

방법은 다음과 같습니다. 먼저 HTML:

 <a id=link-one href="#">Link Text</a> <a id=link-two href="#">Link Text</a> <a id=link-three href="https://wikipedia.org/">Link Text</a>

그런 다음 CSS:

 a[href^="http"] { background: url('external-link-icon.png') no-repeat right center; background-size: 16px 16px; padding-right: 15px; }

a[href^="http"] 는 href="" 에서 http 로 시작하는 주소를 가진 앵커 태그만 대상으로 합니다. 거기에 마크업은 아이콘인 배경 이미지를 추가하고 반복하지 않도록 설정하고 오른쪽으로 끝까지 이동하고 수직으로 가운데에 놓습니다. 나머지 마크업은 아이콘 크기를 정의하고 아이콘과 텍스트 사이에 약간의 공간을 만듭니다.

최종 생각: 링크에 대한 CSS 스타일 지정

CSS를 통해 링크 스타일을 변경하는 것은 기본 사항을 숙지하고 나면 그리 어렵지 않습니다. 가장 중요한 부분은 서로 다른 연산자와 의사 클래스가 대상으로 하는 서로 다른 상태를 취한다는 점을 이해하는 것입니다. 그 후에는 공통 CSS 속성을 사용하여 디자인을 원하는 대로 변경하기만 하면 됩니다. 이제 시작하는 데 필요한 모든 정보가 있습니다.

CSS를 통해 링크 스타일을 지정하는 가장 좋아하는 방법은 무엇입니까? 공유할 다른 팁이 있습니까? 댓글로 해주세요!