웹 페이지의 링크 또는 앵커
웹 사이트와 다른 형태의 통신 매체 간의 주요 차별화 요소 중 하나는 웹 디자인 용어로 기술적으로 알려진 "링크"또는 하이퍼 링크의 개념입니다.
오늘날 웹을 만드는 데 도움을주는 것 외에도 이미지뿐만 아니라 링크도 웹 페이지에서 가장 일반적으로 추가되는 것들입니다. 유감스럽게도이 항목은 추가하기 쉽고 (단 두 개의 기본 HTML 태그 ) 일반 텍스트 페이지와 달리 흥미롭고 상호 작용할 수 있습니다. 이 기사에서는 웹 페이지에 링크를 추가하는 데 사용되는 실제 HTML 요소 인 (앵커) 태그에 대해 학습합니다.
링크 추가
링크는 HTML에서 앵커라고하며이를 표현할 태그는 A 태그입니다. 일반적으로 사람들은 단순히 이러한 추가 사항을 "링크"라고 부르지 만 앵커는 실제로 어떤 페이지에 추가되는 것입니다.
링크를 추가 할 때 링크를 클릭하거나 탭하면 (터치 스크린에있는 경우) 사용자가 이동하게 할 웹 페이지 주소를 가리켜 야합니다. 이 속성과 함께 지정하십시오.
href 속성은 "하이퍼 텍스트 참조"의 약자이며 그 목적은 특정 링크를 원하는 위치로 지정하는 것입니다. 이 정보가 없으면 링크는 쓸모가 없습니다. 사용자에게 어딘가에 가져와야한다고 브라우저에 알리 겠지만 "어딘가"가 있어야하는 위치 정보를 사용할 수는 없습니다. 이 태그와이 속성은 서로 연결됩니다.
예를 들어 텍스트 링크를 만들려면 다음과 같이 작성합니다.
따라서 About.com 웹 디자인 / HTML 홈 페이지에 연결하려면 다음과 같이 작성하십시오.
이미지를 포함하여 HTML 페이지에서 거의 모든 것을 연결할 수 있습니다. 및 태그를 사용하여 링크로 만들 HTML 요소 또는 요소를 둘러 쌀 수 있습니다. href 속성을 생략하여 자리 표시 자 링크 를 만들 수도 있습니다.하지만 href 정보를 나중에 업데이트하거나 링크를 통해 액세스 할 때 실제로 아무것도 수행하지 않아야합니다.
HTML5를 사용하면 단락과 DIV 요소와 같은 블록 수준 요소를 연결할 수 있습니다. 분할 또는 정의 목록과 같이 훨씬 더 넓은 영역에 앵커 태그를 추가 할 수 있으며이 영역 전체를 클릭 할 수 있습니다. 웹 사이트에서 더 크고 손가락 친화적 인 히트 영역을 만들려고 할 때 특히 유용 할 수 있습니다.
링크 추가시 기억해야 할 사항
- 최종 태그가 필요합니다 . 다른 링크가 태그를 닫을 때까지 링크를 포함하는 것을 잊어 버리면 해당 링크를 따르는 모든 항목도 링크됩니다.
- 대부분의 경우, 큰 텍스트 블록이 아닌 단일 이미지와 짧은 텍스트 범위를 연결하는 것이 가장 좋습니다. 링크를 사용하면 페이지에 색상을 추가하고 읽을 수없는 스타일에 밑줄을 긋을 수 있습니다. 물론 CSS를 사용하여 이러한 링크 스타일을 변경하고 색상을 편집하거나 밑줄을 제거 할 수 있지만이 현실을 염두에 두는 것이 좋습니다.
- 링크가 잘못되지 않도록 링크를 확인하십시오. 링크 부패는 사용자와 검색 엔진이 귀하의 사이트를 무효하다고 판단 할 수 있습니다. 정기적으로 링크 검사기를 사용하여 페이지의 링크를 확인하십시오. 이것은 특히 타사 사이트 (관리하지 않는 사이트)에 연결하고 시간이 지남에 따라 페이지를 변경하여 죽은 링크를 남길 때 특히 그렇습니다. 링크 검사기는 필요한 업데이트를 수행 할 수 있도록 이러한 죽은 링크를 찾습니다.
- 귀하의 링크에서 "여기를 클릭하십시오"와 같은 텍스트를 피하십시오. 터치 스크린을 사용하는 사람들은 "클릭"할 수 없으므로 텍스트는 과거 시대의 제품처럼 느껴지고 오늘날의 다중 장치 중심 웹과 관련이 없다는 것을 기억하십시오.
기타 흥미로운 유형의 링크
A 요소는 다른 문서에 대한 표준 링크를 만들지 만 관심을 가질만한 다른 유형의 링크가 있습니다.
- 내부 링크 또는 앵커 - 웹 페이지의 어딘가에 대한 링크이며 반드시 상단이 아닙니다.
- 이미지 맵 - 이미지 맵 을 사용하면 이미지의 특정 영역에 매핑 된 이미지에 링크를 만들 수 있습니다. 게임이나 크리에이티브 탐색에 사용할 수 있습니다. 지도의 영역을 클릭 할 수있는지도를 자주 볼 수 있습니다. 대부분의 현대 웹 사이트에서는 이미지 맵이 사용되지 않는다는 점에 유의하십시오. 일부 모바일 장치에서 이미지 맵이 문제를 일으킬 수 있기 때문입니다.
- 요소 -이 요소는 다른 문서와 페이지를 현재 문서와 연관시키는 데 사용됩니다. 웹 페이지에서 클릭 가능한 영역을 만들지는 않지만 이해하는 것은 유용합니다.