HTML5 자리 표시 자 링크 란 무엇입니까?
HTML5까지 idUp, a 태그에는 href라는 하나의 속성이 필요합니다. 그러나 HTML5는 그 속성을 선택적으로 만듭니다. 속성없이 태그를 쓸 때 이것을 자리 표시 자 링크라고합니다.
자리 표시 자 링크는 다음과 같습니다.
이전개발 중 자리 표시 자 링크 사용
거의 모든 웹 디자이너는 웹 사이트를 디자인하고 구축하는 동안 자리 표시 자 링크를 한 번에 만들었습니다. HTML5 이전에는 다음과 같이 작성했습니다.
링크 텍스트자리 표시 자로 그리고 나는 고객에게 "텍스트가 작동하지 않는 이유는 무엇입니까?"라고 물어볼 수 있도록 그 자리 표시자를 가진 mockup 사이트를 보냈습니다.
자리 표시 자 링크로 해시 태그 (#)를 사용할 때의 문제점은 링크를 클릭 할 수 있다는 것이므로 클라이언트에 혼동을 줄 수 있다는 것입니다. 누군가 올바른 URL로 업데이트하는 것을 잊어 버리면 링크가 연결되지 않아 라이브 사이트에서 링크가 깨져 보일 수 있습니다.
대신 속성이없는 태그를 사용해야합니다. 페이지의 다른 링크처럼 보이게 표시 할 수 있지만 자리 표시 자이므로 클릭 할 수 없습니다.
라이브 사이트에 자리 표시 자 링크 사용
그러나 자리 표시 자 링크는 개발뿐 아니라 웹 디자인을위한 장소를 제공합니다. 자리 표시 자 링크가 빛날 수있는 장소는 탐색 영역입니다. 대부분의 경우 웹 사이트 탐색 목록에는 어떤 페이지에 있는지 나타낼 수있는 방법이 있습니다. 이들은 종종 "당신은 여기 있습니다"라는 지표입니다.
대부분의 사이트는 "you are here"마커가 필요한 요소의 id 특성에 의존하지만 일부는 class 특성도 사용합니다. 그러나 어떤 속성을 사용 하든지, 네비게이션이있는 모든 페이지에 올바른 요소에서 속성을 추가하고 제거해야합니다.
자리 표시 자 링크를 사용하면 원하는대로 탐색을 작성한 다음 페이지에 탐색을 추가 할 때 해당 링크에서 href 속성을 간단히 제거 할 수 있습니다. 내 전체 탐색 목록을 편집자의 스 니펫으로 저장하므로 빠른 복사 붙여 넣기를 한 다음 href를 삭제하면됩니다. 또한 CMS에서 동일한 작업을 수행 할 수 있습니다.
자리 표시 자 링크에 특별한 스타일을 추가하는 것 외에도 링크를 클릭 할 수 없습니다. 따라서 고객은 현재있는 위치의 탐색 링크를 클릭하면 다른 정보를 얻을 수 있다고 혼란스러워하지 않습니다.
자리 표시 자 링크 스타일 지정
자리 표시 자 링크는 웹 페이지의 다른 링크와 스타일 및 스타일이 다르기 쉽습니다. a 태그와 a : link 태그를 모두 스타일링하기 만하면됩니다. 예 :
a {color : red; font-weight : bold; 텍스트 장식 : 없음; } a : 링크 {색상 : 파란색; font-weight : normal; 텍스트 장식 : 밑줄; }이 CSS는 밑줄이없는 굵게 및 빨간색 자리 표시 자 링크를 만듭니다. 정기적 인 링크는 정상적인 무게, 파란색 및 밑줄 것입니다.
a 태그에서 옮기고 싶지 않은 스타일은 다시 설정해야합니다. 예를 들어, 자리 표시 자 링크에 대해 font-weight를 굵게 설정 했으므로 다음과 같이 설정해야합니다.
font-weight : normal;표준 링크의 경우 텍스트 꾸미기에서도 a 셀렉터를 사용하여 제거하면 마찬가지입니다. 다시 넣지 않으면 a : 링크 선택자에서 제거됩니다.