위 : 마크 업 언어 - 문구 요소
원본 출처 7 장 앵커 포인트
HTML에서 링크를 말하는 올바른 방법을 앵커라고해야합니다. 그들은 우리가 문서뿐만 아니라 페이지의 특정 단락을 가리킬 수 있으며 정확한 링크를위한 편리한 도구로도 사용할 수 있습니다. 링크 객체가 초점에 가까워지게하십시오. 이 장에서는 각 방법의 장점을 설명하고 제목 속성이 링크 사용의 용이성을 향상시킬 수있는 방법을 소개하는 4 가지 앵커 사례를 볼 수 있습니다. 또한 CSS를 사용하여 링크 용 스타일을 설계합니다. 페이지의 특정 부분을 지정 해야하는 경우 앵커를 표시하는 것이 가장 좋은 방법입니다.
이것은 웹 사이트를 디자인 할 때 일반적인 상황입니다. 특정 페이지의 특정 부분에 링크하려고하지만 사용자는 다른 페이지에서 읽을 수 있습니다. 목표를 달성 할 수 있도록 옆에 논의 된 4 가지 방법 중 하나를 선택하십시오.
예에서 같은 페이지에서 특정 제목에 링크하려고한다고 가정 해 봅시다 : 메소드 A : 구멍의 이름
<p> <a href =#oranges> 오렌지 </a> </p>
... 일부 텍스트 ...
<이름 = 오렌지> </a>
<H2> 오렌지는 맛있습니다 </h2>
... 더 많은 텍스트 ...
빈 내용과 이름 속성이있는 앵커 태그를 사용하여 특정 링크 지점을 표시하십시오. 아마도 이것은 당신이 익숙한 방법 일 것입니다. 빈 내용을 제목 앞에 놓고 연결하고 ( # 기호 사용, 이름 속성의 값을 사용하여) 페이지의 특정 부분에 연결할 수 있습니다. 페이지에 스크롤 해야하는 긴 항목 목록이 포함되어 있으면이 방법을 통해 특정 프로젝트에 쉽게 연결할 수 있습니다.
그림 7-1은 About Oranges 링크를 클릭 한 후 결과를 보여줍니다. 이는 제목에 정확히 <a name = oranges> </a>를 식별하는 장소로 점프하는 것을 의미합니다.
그림 7-1. 특정 앵커 링크에 연결하려면 클릭의 예
효과는 좋지만 링크 위치를 식별하기 위해 빈 태그를 낭비하는 것은 의미와 약간 일치하지 않습니다. 방법 B는 이것을 향상시킬 수 있습니다. 방법 B : 이름 안의 모든 것
<p> <a href =#oranges> 오렌지 </a> </p>
... 일부 텍스트 ...
<H2> <이름 = 오렌지> 오렌지는 맛있습니다 </a> </h2>
... 더 많은 텍스트 ...
메소드 A와 마찬가지로, 우리는 여전히 이름 속성과 함께 <a> 태그를 사용하지만 이번에는 링크하고 싶은 제목 외부로 랩합니다. 이것은 더 의미적인 것처럼 보입니다. 메소드 A에서 우리의 연결 객체는 ... 글쎄, 아무것도 없지만, 방법 B에서는이 텍스트가 제목 태그의 일부일뿐만 아니라이 페이지의 연결 앵커 중 하나라고 설명합니다. 글로벌 스타일의 <a>에주의하십시오
메소드 B가 사용되면주의를 기울여야 할 곳이 있습니다. 모든 <a> 요소 (색상, 텍스트 크기, 텍스트 장식 등)에 대한 글로벌 CSS 스타일을 지정하면이 스타일은 <h2> 요소에 지정할 수있는 스타일을 무시합니다. 이런 일이 발생하는 이유는이 예에서 <a> 태그가 <h2> 태그 내에 위치한 어린이 요소이기 때문입니다.
예를 들어, CSS에 이와 같은 진술이있는 경우 :
에이{
색상 : 녹색;
글꼴 중량 : 대담한;
텍스트 결정 : 밑줄;
}
방법 B 와이 CSS는 다른 페이지에서 제목을 녹색으로 바꾸고 대담하고 밑줄을 긋게 만들 것입니다.
우리는 다음을 사용할 수 있습니다. 더 풍부한 이름 속성
메소드 B (및 메소드 a)를 사용하는 이점 중 하나는 이름 속성이보다 풍부한 앵커 이름을 처리 할 수 있다는 것입니다. 구체적으로, 그것은 이름 안에 기호를 사용하는 능력입니다.
예를 들어, 메소드 B를 사용하는 경우이 작업을 수행 할 수 있습니다 (여기서는 e를 나타냅니다) :
<p> <a href =#resum é> 내 이력서 é </a> </p>
... 일부 텍스트 ...
<h2> <이름 = resum é> dan 's rec é </a> </h2>
... 더 많은 텍스트 ...
이 기능은 영어 문자에 속하지 않는 문자를 다룰 때 매우 중요합니다.
그러나 언급 할 가치가있는 몇 가지 방법이 있습니다. 다음 방법은 앵커 포인트를 설정하기 위해 <a>를 사용할 필요가 없습니다. 메소드 C를 살펴 보겠습니다.
방법 C : 이름을 버립니다
<p> <a href =#oranges> 오렌지 </a> </p>
... 일부 텍스트 ...
<h2 id = 오렌지> 오렌지는 맛있습니다 </h2>
... 더 많은 텍스트 ...
아, ID 속성의 함수는 이름 속성과 같으며 페이지의 앵커 포인트도 지정할 수 있습니다. 또한 메소드 C는 메소드 A를 제거하고 B는 이름 속성을 추가 <a> 태그로 사용합니다. 우리는 소스 코드를 줄였습니다. 항상 좋은 일이었습니다.
ID 속성을 모든 태그에 추가 할 수 있으므로 페이지의 모든 요소에 앵커를 쉽게 추가 할 수 있습니다. 이 예에서는 제목에 앵커를 추가하기로 선택하지만 <div>, <form>, <p>, <ul> ... 및 기타 모든 태그에 쉽게 앵커를 추가 할 수도 있습니다. 하나는 새 한 마리와 함께 두 마리의 새를 죽입니다
실제로 대부분의 경우 기존 ID 속성에 스타일이나 스크립팅을 추가 할 수 있습니다. 이는 메소드 C의 또 다른 이점입니다.이 때문에 앵커를 설정하기 위해 추가 코드를 추가 할 필요가 없습니다.
예를 들어, 긴 페이지 하단에 주석을 남기는 양식이 있다고 가정하고 페이지 상단에 링크를 추가하려고합니다. 이 양식에는 고유 한 스타일을 지정하기 위해 id = 댓글이 있습니다. 이것은 이름 속성이있는 <a> 태그를 추가하지 않고 ID를 앵커로 직접 연결하는 방법입니다.
코드는 다음과 같습니다.
<p> <a href =#댓글> 주석을 추가! </a> </p>
... 많은 텍스트 ...
<form id = 댓글 action =/path/to/script>
... 형태 요소 ...
</form>
또한 페이지가 길면 하단의 상단 앵커에 링크를 추가하여 사용자가 상단으로 돌아갈 수 있도록합니다.
매우 적합 해 보이지만 앵커 이름을 지정할 때 상단을 사용하지 않는 것이 가장 좋습니다. 일부 브라우저는이 이름을 특별 목적으로 유지합니다. 이 이름을 사용하면 일관되지 않은 결과가 발생할 수 있습니다. 비슷한 이름을 선택하는 것이 가장 좋지만 문제를 일으키지는 않습니다. #gemesis를 사용합니까? 또는 가장? 당신은 당신 자신의 아이디어를 가지고 있습니다.
ID 속성이있는 고대 브라우저
ID 속성 만 앵커로 사용하는 경우, 언급 할 가치가있는 중요한 단점이 있습니다. 즉, 일부 고대 브라우저는이 방법을 지원하지 않습니다. 오, 이것은 실제로 자신의 앵커를 식별 할 때 반드시 고려되어야하며, 전방 호환성의 불행한 예이기도합니다. 마지막 예제 인 메소드 D : Method D : Tower를 살펴 보겠습니다.
<p> <a href =#oranges> 오렌지 </a> </p>
... 일부 텍스트 ...
<h2> <a id = 오렌지 이름 = 오렌지> 오렌지는 맛있습니다 </a> </h2>
... 더 많은 텍스트 ...
앵커 태그를 태깅 할 때 전진 호환성과 후진 호환성을 달성하려면이 방법을 좋아할 것입니다. 고대 브라우저와 미래의 브라우저는 모두 이름이 지정된 앵커 태그를 올바르게 식별 할 수 있지만 W3C는 XHTML1.0 권장 사항에서 이름 속성 (http://www.w3.org/tr/xhtml1/#c_8)을 권장하지 않기 때문에 ID 속성을 사용하여 향후 브라우저를 지원합니다.
방법 B와 마찬가지로 <a> 태그에 영향을 미치는 글로벌 스타일에주의를 기울여야합니다.
공유 이름
메소드 D를 사용하기로 선택한 경우 ID 및 이름 속성에 대해 동일한 이름을 선택할 수 있지만 (매우 편리 할 수 있음) 동일한 태그에있는 경우에만 가능합니다. 또한,이를 허용하는 특정 태그는 몇 가지 뿐이며, 정확히 <a>, <plet>, <frame>, <img>, <map>을 포함합니다. 따라서 우리는 id = oranges를 <h2>에서 앵커 태그로 이동합니다.
앵커 포인트를 설정하는 4 가지 방법을 보았으므로 각 방법의 장점과 단점을 요약하겠습니다.
이전 페이지 1 2 3 다음 페이지 전체 텍스트 읽기