CSS: 다채로운 웹 링크 underlines_CSS/HTML 사용자 정의

CSS 자체는 HTML 링크의 밑줄을 변경하는 기능을 직접 제공하지는 않지만, 몇 가지 기술을 사용하는 한 단조로운 웹 링크의 밑줄을 다채롭게 만들 수 있습니다.

1. 기본 원칙

먼저 HTML 링크의 밑줄을 사용자 정의하는 첫 번째 단계는 그래픽을 만드는 것입니다. 이 그래픽을 가로 방향으로 반복하여 밑줄 효과를 만듭니다. 밑줄 뒤에 웹 페이지의 배경을 표시하려면 투명한 .gif 그래픽을 사용할 수 있습니다.

둘째, 밑줄 그래픽의 높이가 큰 경우 텍스트 높이를 적절하게 늘려서 한 줄의 텍스트 하단과 다음 텍스트 줄의 상단 사이에 더 큰 공간이 있어야 합니다. p { 줄 높이: 1.5 } .

사용자 정의 링크 밑줄 예

셋째, 사용자 정의 밑줄을 표시하려면 기본 밑줄을 숨겨야 합니다. 즉, { text-꾸밈: 없음 }입니다.

넷째, 링크 요소에 밑줄 그래픽을 설정하고 맞춤 밑줄을 구성합니다. 밑줄 그래픽을 underline.gif라고 가정하면 밑줄 그래픽을 설정하는 CSS 코드는 { background-image: url(underline.gif) }입니다.

다섯째, 밑줄 그래픽이 가로 방향으로 반복해서 나타나도록 해야 하지만 세로 방향으로는 나타나지 않아야 합니다. 그렇지 않으면 텍스트 뒤에 숨겨지게 됩니다. 밑줄이 가로 방향으로만 반복되도록 하는 코드는 다음과 같습니다. a { background-repeat:peat-x };

여섯째, 글꼴 크기에 관계없이 링크 텍스트 아래에 그래픽이 나타나도록 하려면 background-position 속성을 사용하여 링크 요소 하단에 그래픽을 배치합니다. 화살표와 같은 밑줄 그래픽의 경우 그래픽의 가로 정렬을 고려할 수도 있습니다. 오른쪽 하단 모서리에 밑줄 그래픽을 배치한다고 가정하면 CSS 코드는 다음과 같습니다. a { background-position: 100% 100% }.

일곱째, 링크 텍스트 아래에 맞춤 그래픽을 위한 공간을 남겨두려면 적절한 공백을 추가해야 합니다. 링크 텍스트를 기준으로 한 밑줄 그래픽의 구체적인 위치는 텍스트 크기와 관련이 있지만 일반적으로 아래쪽 여백을 밑줄 그래픽 높이와 동일하게 만든 다음 필요한 경우 조정할 수 있습니다. 예: { padding-bottom: 4px }.

여덟째, 밑줄 그래픽은 링크 요소의 하단에 배치되므로 링크가 끊어지지 않도록 해야 합니다(링크가 여러 줄에 걸쳐 허용되는 경우 다음 줄의 링크 텍스트만 사용자 정의 밑줄). CSS의 공백 속성을 사용하여 링크 텍스트가 줄 바꿈되는 것을 방지합니다. 즉, { 공백: nowrap;

요약하면 링크 요소에 대한 CSS 스타일 속성을 정의하는 전체 예는 다음과 같습니다.

　아 {
​​ 텍스트 장식: 없음
​​ 배경: url(underline.gif) 반복-x 100% 100%
​​ 패딩 하단:
​​ 공백: nowrap
​ }

마우스를 가리킬 때만 사용자 정의 밑줄이 나타나도록 하려면 원래 링크 요소에 직접 설정된 CSS 배경 속성을:hover로 변경하세요. 예를 들면 다음과 같습니다.

　아 {
​​ 텍스트 장식: 없음;
​​ 패딩 하단:
​​ 공백: nowrap
​ }

a:hover {
​​ 배경: url(underline.gif) 반복-x 100% 100%;
​ }

2. 사례 감상

밑줄 그래픽이 대각선.gif(잔물결)와 flower.gif(꽃) 두 개가 있다고 가정합니다. 전자의 높이와 너비는 3과 9이고 후자의 높이와 너비는 11과 15입니다. 다음은 두 가지 유형의 밑줄을 설정하는 전체 예입니다.

맞춤 링크 밑줄 예시

해당 웹페이지의 소스코드는 다음과 같습니다.
​ 참고: 대각선.gif 및 flower.gif는 웹 페이지가 있는 동일한 디렉토리에 복사되었습니다.

　
​
​