텍스트 링크 및 문제에 대한 밑줄을 제거하는 단계
기본적으로 또는 "anchor"요소를 사용하여 HTML에 연결된 텍스트 내용은 밑줄이 그어져 있습니다. 종종 웹 디자이너는 밑줄을 제거하여이 기본 스타일을 제거하기로 선택합니다.
많은 디자이너는 특히 링크가 많은 밀집된 블록에서 밑줄이 쳐진 텍스트 모양을 신경 쓰지 않습니다. 밑줄 친 모든 단어는 실제로 문서의 읽기 흐름을 깰 수 있습니다. 많은 사람들은 밑줄이 자연 문자를 변경하는 방식 때문에 단어를 구별하고 읽는 것을 더 어렵게 만듭니다.
그러나 텍스트 링크에서 이러한 밑줄을 유지하는 것이 합법적 인 이점이 있습니다. 예를 들어 큰 텍스트 블록을 탐색 할 때 적절한 색 대비가있는 밑줄이있는 링크를 사용하면 독자가 페이지를 즉시 스캔하고 링크가있는 곳을 쉽게 알 수 있습니다. 당신이 여기있는 About.com의 웹 디자인 기사와 사이트의 다른 기사를 보시면이 밑줄 친 링크의 스타일을 볼 수 있습니다.
텍스트에서 링크를 제거하기로 결정한 경우 (곧 다루겠습니다) 텍스트를 스타일링하여 링크가 일반 텍스트와 구별되도록하는 방법을 찾아야합니다. 이는 앞서 언급 한 색상 대비로 가장 많이 이루어 지지만, 색상만으로는 색맹과 같은 시각 장애가있는 방문객에게 문제가 될 수 있습니다. 색맹의 특정 형태에 따라 콘트라스트가 완전히 없어져 링크 된 텍스트와 링크되지 않은 텍스트의 차이를 볼 수 없습니다. 이것이 밑줄 친 텍스트가 여전히 링크를 보여주는 가장 좋은 방법으로 여겨지는 이유입니다.
그래도 그렇게하고 싶다면 밑줄을 어떻게 끄 시나요? 이것이 시각적 인 특성이기 때문에 우리는 웹 사이트에서 시각적 인 모든 것을 처리하는 부분 인 CSS로 바꿀 것입니다.
계단식 스타일 시트를 사용하여 링크의 밑줄 끄기
대부분의 경우 단 하나의 텍스트 링크에서 밑줄을 긋지 않으려 고하지 않습니다. 대신 디자인 스타일에 따라 외부 스타일 시트에 스타일을 추가하여 모든 링크에서 밑줄을 제거해야합니다.
a {텍스트 장식 : 없음; }그게 다야! 그 간단한 CSS 라인은 모든 링크에서 밑줄을 끕니다 (사실 "text-decoration"의 CSS 속성 사용).
이 스타일을 통해 더 구체적으로 표현할 수도 있습니다. 예를 들어, "nav"요소의 밑줄이나 링크 만 끄려면 다음과 같이 작성할 수 있습니다.
nav a {텍스트 장식 : 없음; }이제 페이지의 텍스트 링크에 기본 밑줄이 표시되지만 nav에있는 텍스트 링크는 제거됩니다.
많은 웹 디자이너가 선택한 한 가지는 텍스트 위로 마우스를 가져 가면 링크를 "켜기"로 전환하는 것입니다. 이것은 다음과 같이 : hover CSS 가상 클래스를 사용하여 수행됩니다.
a {텍스트 장식 : 없음; } a : hover {text-decoration : 밑줄; }인라인 CSS 사용
외부 스타일 시트를 변경하는 대신 다음과 같이 스타일을 HTML의 요소 자체에 직접 추가 할 수도 있습니다.
이 링크에는 밑줄이 없습니다 .이 방법의 문제점은 스타일 정보를 HTML 구조 내에 배치하는 것이지 모범 사례는 아닙니다. 스타일 (CSS)과 구조 (HTML)는 분리되어 있어야합니다.
모든 사이트의 텍스트 링크에 밑줄이 제거되도록하려면 각 스타일에 개별 스타일로이 스타일 정보를 추가하면 상당한 양의 추가 마크 업이 사이트 코드에 추가됩니다. 이 페이지 팽창은 사이트의 로딩 시간을 늦추고 전반적인 페이지 관리를 훨씬 어렵게 만들 수 있습니다. 이러한 이유 때문에 모든 페이지 스타일링 요구 사항에 대해 항상 외부 스타일 시트를 사용하는 것이 좋습니다.
폐회 중
웹 페이지의 텍스트 링크에서 밑줄을 제거하는 것만 큼 쉽기 때문에 그렇게 할 때의 결과에 유의해야합니다. 실제로 페이지의 모양을 정리할 수도 있지만 전반적인 유용성을 희생시키면서 그렇게 할 수 있습니다. 다음 번에 페이지의 "텍스트 장식"속성을 변경할 때 고려하십시오.
Jennifer Krynin의 원본 기사입니다. 제레미 지라드 (Jeremy Girard)에 의해 9/19/16에 편집 됨