스타일링은 실제 밑줄과의 링크입니다

밑줄을 밑줄 스타일링하는 방법에 대해 논의하기 전에 먼저 질문에 대해 생각해 봅시다. 밑줄을 사용해야합니까?

그래픽 디자인에서 밑줄은 종종 충분히 부적절한 것으로 간주됩니다. 초점을 강조하고 계층 구조를 구축하며 타이틀을 구별하는 더 좋은 방법이 있습니다.

Butterick의 "실제 조판"은 분명한 제안이 있습니다.

밑줄을 사용하려면 대신 굵게 또는 이탤릭체를 사용하십시오. 제목과 같은 특별한 경우에는 모든 수도, 소규모 수도 또는 글꼴 크기 변경을 고려할 수도 있습니다. 아직도 믿지 않습니까? 밑줄이 그어진 텍스트가 있는지 확인하기 위해 책, 신문 또는 잡지를 찾는 것이 좋습니다. 이 스타일은 주로 슈퍼마켓 타블로이드와 관련이 있습니다.

그러나 네트워크 환경은 다릅니다. 하이퍼 링크는 인터넷의 정의 특성입니다. 그들은 인터넷이 탄생 한 이후로 강조되었습니다. 이것은 일반적으로 이해되는 협약이며, 그 의미는 매우 명확합니다. 링크를 나타냅니다 .

그러나 많은 인기있는 웹 사이트는 이미 뉴욕 타임즈, 뉴욕 잡지, 워싱턴 포스트, 블룸버그, 아마존, 애플, 지부, 트위터, 위키 백과와 같습니다. Google의 수석 디자이너 Jon Wiley는 2014 년에 검색 결과 페이지에서 밑줄을 제거하면 더 깨끗한 모양을 만들 수 있다고 설명했습니다. 이 사이트의 대부분은 웹 출생 이후 브라우저의 기본 설정이었던 약간 다른 밝은 파란색 (#0000ee)을 유지한다는 점은 주목할 가치가 있습니다. 이것은 대부분의 사용자에게 시각적 팁을 제공하지만 WCAG 접근성 준수 테스트를 통과하기에는 충분하지 않을 수 있습니다.

색상은 정보를 전달하거나 동작을 나타내거나 신속한 응답을 나타내거나 시각적 요소를 구별하는 유일한 시각적 수단으로 사용될 수 없습니다. - WCAG 2.1

WCAG는 링크에 대한 밑줄이 엄격하게 필요하지 않지만 그렇게하는 것이 좋습니다. 컬러 블라인드 사용자는 링크를 인식 할 수 있어야합니다. 굵은 글꼴 무게를 사용하는 것과 같은 다른 방식으로 구별 할 수 있습니다. 또는 오랫동안 확립 된 시각적 보조 기능을 유지할 수 있습니다. 그러나 우리가 밑줄을 사용한다면, 우리는 그들이 예쁘게 보이기를 원했습니다 . 중간 디자이너 Marcin Wichar는 완벽한 밑줄을 다음과 같이 설명합니다.

[…] 눈에 띄지 만 지나치게 눈에 띄지는 않습니다. 텍스트에서 편안하게 텍스트 아래에서 적절한 거리에 있어야하며 하강하는 몸도 같은 공간을 차지해야합니다.

전통적으로이를 달성하려면 일부 CSS 트릭이 필요합니다.

우리가 과거에 사용한 팁

이것은 모든 개발자가 친숙한 트릭입니다 : border-bottom . 밑줄을 시뮬레이션하기 위해 border-bottom 사용하여 색상과 두께를 제어 할 수 있습니다. 이 의사 단체에는 한 가지 문제가 있습니다. 텍스트와의 거리는 너무 큽니다. 그것들은 내림차순 아래에 있습니다. line-height 사용 하여이 문제를 해결할 수 있지만 자체 문제가 발생합니다. 비슷한 기술이 box-shadow 사용합니다. Marcin Wichary는 background-image 사용하여 밑줄을 시뮬레이션하는 가장 복잡한 기술을 개척했습니다. 이것들은 모두 유용한 팁이지만 더 이상 필요하지 않습니다.

실제 밑줄 스타일을 설정하십시오

궁극적으로 두 가지 새로운 CSS 속성 덕분에 스타일을 희생하지 않고 링크를 구별 할 수 있습니다.

• text-underline-offset 밑줄의 위치를 ​​제어합니다.
• text-decoration-thickness 밑줄, 오버 스코어 및 스트라이크 로우의 두께를 제어합니다.

WebKit 블로그에 따르면 :

두 속성에 대해 from-font 지정할 수도 있으며, 이는 사용 된 글꼴 파일 자체에서 관련 메트릭 값을 추출합니다.

UX Agency Clearleft는 대담하게 사용합니다 (Pseudo)는 화려한 스타일과의 링크에 사람들의 관심을 끌기 위해 대담하게 사용합니다. 여기 유사 분만의 예는 다음과 같습니다.

 <code>a { text-decoration: none; border-bottom: #EA215A 0.125em solid; }</code>

이 유사 분만 코어는 문자 "y"의 내림차순 아래에 명확하게 위치합니다.

다음은 DevTools를 사용하여 새로운 CSS 속성을 사용하여 실제 밑줄에 동일한 스타일을 적용하는 것과 동일한 단락입니다.

 <code>a { text-decoration-color: #EA215A; text-decoration-thickness: .125em; text-underline-offset: 1.5px; }</code>

샘플 코드에서 EM 장치를 사용했음을 알 수 있습니다. 사양은 두께가 글꼴과 비늘을 향하도록 픽셀 대신 사용하는 것이 좋습니다.

이 속성은 Safari에 출판되었으며 Firefox 70에 나타납니다.

Microsoft Edge 브라우저가 Chromium으로 마이그레이션함에 따라 결국 다음 옵션을 제공하는 text-decoration-style 속성에 대한 크로스 브라우저 지원을 받게됩니다. Solid (기본값), 이중, 점선, 점선 및 물결 라인을 제공합니다. 이러한 새로운 속성을 조합하여 사용하면 다양한 가능성이 열립니다.

그러나 아마도 웹의 밑줄에서 가장 큰 개선은 개발자가 아무것도하지 않고도 달성 할 수 있다는 것입니다. 과거에, 내림차순은 밑줄에 의해 무자비하게 차단되었다. 개발자는 배경색과 일치하는 텍스트 그림자를 적용 하여이 단점을 해결하는 데 사용되었습니다. text-decoration-skip-ink 하강 신체를위한 공간을 떠날 수있는 더 나은 방법을 제공합니다.

편리하게, 그것은 밑줄에 대한 새로운 기본값으로 설정됩니다. 이는 밑줄 모양이 개선되었으며 대부분의 웹 개발자는 여전히이 부동산의 존재를 알지 못합니다. 밑줄이 글리프에 걸쳐있는 밑줄을 원한다면이 속성을 none 수 있습니다.

위 내용은 스타일링은 실제 밑줄과의 링크입니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!