링크 밑줄 제거 또는 점선 또는 이중 밑줄 링크 만들기
기본적으로 웹 브라우저에는 특정 HTML 요소에 적용 할 특정 CSS 스타일이 있습니다. 이 기본값을 사이트 고유의 스타일 시트로 덮어 쓰지 않으면 기본값이 적용됩니다. 하이퍼 링크의 경우 기본 표시 스타일은 링크 된 텍스트가 파란색과 밑줄로 표시된다는 것입니다. 브라우저는 사이트 방문자가 어떤 텍스트가 링크되어 있는지 쉽게 볼 수 있도록이 작업을 수행합니다. 많은 웹 디자이너는 이러한 기본 스타일, 특히 밑줄을 신경 쓰지 않습니다. 고맙게도 CSS를 사용하면 밑줄 모양을 쉽게 바꾸거나 완전히 제거 할 수 있습니다.
텍스트 링크에서 밑줄 제거
밑줄이 쳐진 텍스트는 밑줄이 그어지지 않은 텍스트를 읽는 것이 더 어려울 수 있습니다. 또한 많은 디자이너는 밑줄 친 텍스트 링크 모양을 신경 쓰지 않습니다. 이러한 경우 이러한 밑줄을 모두 제거해야 할 수 있습니다.
텍스트 링크에서 밑줄을 제거하려면 CSS 속성 text-decoration를 사용합니다. 다음과 같이 작성하는 CSS입니다.
a {텍스트 장식 : 없음; }
CSS의 한 줄로 모든 텍스트 링크에서 밑줄을 제거 할 수 있습니다. 이것은 매우 일반적인 스타일 (요소 선택기를 사용함)이지만, 기본 브라우저 스타일보다 더 특수성이 있습니다. 이러한 기본 스타일은 밑줄을 작성하는 것이므로 덮어 쓸 필요가 있습니다.
밑줄 제거시주의 사항
시각적으로 밑줄을 제거하는 것은 정확히 수행하려는 작업 일 수 있지만이 작업을 수행 할 때는주의해야합니다. 당신이 밑줄 친 링크의 모습을 좋아하든 그렇지 않든, 당신은 그들이 어떤 텍스트가 링크되어 있고 어떤 링크가 아닌지를 분명하게 보여주고 있다고 주장 할 수는 없습니다. 밑줄을 치거나 기본 파란색 링크 색을 변경하는 경우 링크 된 텍스트가 계속 눈에 띄는 스타일로 바꾸어야합니다. 이렇게하면 사이트 방문자에게보다 직관적 인 경험을 할 수 있습니다.
비 링크에 밑줄을 긋지 마십시오.
링크와 밑줄에 대한 또 다른주의 사항은 링크를 강조하는 방법으로 링크가 아닌 텍스트에 밑줄을 그 으려고하지 않습니다. 사람들은 밑줄 친 텍스트가 링크가되기를 기대하기 때문에, 강조를 추가하기 위해 내용에 밑줄을 긋는 경우 (굵게 또는 기울임 꼴로 쓰는 대신), 잘못된 메시지를 보내고 사이트 사용자를 혼란에 빠뜨립니다.
밑줄을 점 또는 대시로 변경하십시오.
텍스트 링크 밑줄을 유지하고 밑줄의 스타일을 기본 모양 ( "soldi"줄)에서 변경하려면이 작업을 수행 할 수도 있습니다. 그 실선 대신 점들을 사용하여 링크에 밑줄을 긋 수 있습니다. 이렇게하려면 밑줄을 제거하지만 border-bottom 스타일 속성으로 바꿉니다.
a {텍스트 장식 : 없음; border-bottom : 1px 점선; }표준 밑줄을 제거 했으므로 점선으로 된 밑줄이 유일한 것입니다.
당신은 대시를 얻기 위해 똑같은 일을 할 수 있습니다. border-bottom 스타일을 대시로 변경하면됩니다.
a {텍스트 장식 : 없음; border-bottom : 1px 파선; }밑줄 색상 변경
링크에주의를 끌 수있는 또 다른 방법은 밑줄의 색상을 변경하는 것입니다. 색상이 귀하의 색 구성표에 맞는지 확인하십시오.
a {텍스트 장식 : 없음; border-bottom : 1px solid red; }이중 밑줄
이중 밑줄을 사용하는 트릭은 테두리의 너비를 변경해야한다는 것입니다. 1 픽셀 너비의 테두리를 만들면 하나의 밑줄처럼 보이는 이중 밑줄로 끝납니다.
a {텍스트 장식 : 없음; border-bottom : 3px double; }기존 밑줄을 사용하여 점선으로 표시되는 줄과 같은 다른 기능에 이중 밑줄을 지정할 수도 있습니다.
a {border-bottom : 1px double; }링크 상태를 잊지 마라.
호버, : 활성 또는 : 방문과 같은 다른 상태에서 링크에 테두리 아래 스타일을 추가 할 수 있습니다. "hover"가상 클래스를 사용하면 방문자에게 멋진 롤오버 스타일을 제공 할 수 있습니다. 링크 위로 마우스를 가져 가면 두 번째 점선 밑줄이 나타납니다.
a {텍스트 장식 : 없음; } a : 호버 {border-bottom : 1px 점선; }Jennifer Krynin의 원본 기사입니다. 제레미 지라드 편집