링크의 상대와 대상의 차이점에 대한 자세한 설명_경험 교환

target="_blank"의 존재가 필요한지 아닌지, 아직도 사각지대에 있는 분들이 많은 것 같아요. 관련 문헌을 확인해보니 우리가 생각했던 상황이 아닌 것으로 나타났습니다. 실제로 target="_blank"는 표준 이하가 아니며, 이것이 오해이기 때문에 rel 및 JS를 사용한 솔루션은 필요하지 않습니다. rel과 target의 진정한 의미에 대해서는 여기서 어떤 논쟁도 있어서는 안 된다는 점을 이해하게 될 것입니다. 아래에서는 문헌을 검토하면서 얻은 지식을 공유하겠습니다. 먼저 target과 rel의 의미를 이해해 보겠습니다.

target을 사용하면 선택한 하이퍼링크 콘텐츠를 표시할 위치를 지정할 수 있습니다. 즉, 링크된 콘텐츠가 어떤 창에 표시될 것인지를 의미합니다. target의 속성 값에는 _blank, _self, _parent, _top이라는 네 가지 예약된 이름이 있습니다. _blank는 브라우저가 항상 새로 열린 이름 없는 창에서 target="_blank"로 링크된 문서를 로드한다는 것을 의미합니다. 여기서 "이름 없음"이 무엇을 의미하는지 이해하지 못할 수도 있습니다. 실제로 target은 새로 열린 창에 ID를 할당할 수 있습니다. 예: target="name" 이는 target="name" 링크를 통해 로드된 문서가 "name"이라는 창에 표시된다는 의미입니다. ID가 "name"인 창이 없으면 브라우저는 연결된 문서를 표시하기 위해 "name"이라는 새 창을 만듭니다. 현재 창의 ID가 "이름"이면 링크된 문서가 원본 내용을 대체하여 현재 창에 표시됩니다. 그리고 _self는 실제로 현재 문서를 의미합니다. 의 기본 대상은 _self입니다. _parent는 연결된 문서가 상위 창에 표시되도록 합니다. 이 속성 값은 최상위 프레임인 경우 해당 기능은 _self와 동일합니다. _top도 프레임에 적용되지만 그 효과는 대상 문서를 표시하기 위해 프레임을 지우는 것입니다. 이는 프레임에서 프레임 없는 구조로 이동하는 데 유용합니다.

이제 우리는 타겟이 브라우저와 밀접하게 관련된 타겟이 표시하는 속성이라는 것을 알았습니다. 그렇다면 rel은 무엇입니까? 많은 사람들이 이를 target의 대체 속성으로 간주하는 이유는 무엇입니까? 이제 상대에 대해 알아봅시다. 실제로 하나의 rel뿐만 아니라 rev라는 해당 속성도 있습니다. 이 두 속성의 의미는 소스 문서에서 대상 문서로의 관계입니다. 여기서 소스 문서는 링크가 위치한 현재 문서로 이해될 수 있고, 대상 문서는 링크가 열리는 문서로 이해될 수 있습니다. 실제로 rel과 rev는 대상 문서를 표시하는 방법에 대한 브라우저 관련 속성이 아니라 문서 이전의 링크 관계입니다.

그럼 rel과 rev의 관계는 무엇인가요? 다음은 이를 하나씩 나열하고 그 의미를 설명합니다.

다음, 다음 문서에 대한 링크
prev, 이전 문서에 대한 링크
head, 최상위 문서에 대한 링크;
toc, 컬렉션의 디렉토리에 대한 링크
소스 위의 문서에 대한 링크
하위, 소스 아래에 대한 링크,
인덱스; 이 문서의 색인
용어집,

여기서 next 및 prev는 그룹입니다. 현재 문서와 대상 문서의 이전 관계가 동일 수준의 관계임을 나타내는데 와 같이 쓸 수 있습니다. Head와 toc는 목차에서 최종 문서로의 링크 또는 문서에서 목차로의 링크를 나타내는 조합을 형성할 수 있습니다. 상위 및 하위는 그룹으로, 현재 문서가 상위 문서 또는 하위 문서에 연결되어 있음을 나타냅니다. 색인과 용어집은 각각 헤드와 결합하여 문서를 색인화하거나 문서를 색인화하여 용어집 또는 용어집을 문서로 구성할 수 있습니다.

아직 명확하지 않을 수도 있습니다. 예를 들면 다음과 같습니다. 여기에 영화 문서 리소스를 정리했기 때문에 이러한 리소스를 무협 영화, 전쟁 영화, 로맨스로 분류해야 합니다. 영화, 공포영화, 다큐멘터리. 그런 다음 영화 루트 디렉터리의 다음 하위 범주에 연결해야 하는 경우 연결 관계는 rel=child rev=parent여야 합니다. 그리고 현재 채널 페이지가 무술 영화인 경우 로맨스 영화 채널로 전환해야 합니다. 또는 다른 채널을 사용하는 경우 링크 관계는 다음과 같아야 합니다: rel=next rev=prev, 무술 영화에서 영화 "와호장룡"의 문서로 링크하는 경우 링크 관계는 rel=head여야 합니다. rev=toc, "와호장룡"이 인덱스에 링크되면 링크 관계는 rel=index rev=head가 됩니다.

현재 CSS는 rel 및 rev의 속성 값을 캡처할 수 없으므로 관계가 다른 링크에 대해 다른 스타일을 제공할 방법이 없으므로 이제 rel 및 rev는 의미를 만드는 데만 사용됩니다. 웹페이지가 더 완벽해졌습니다.