본문 바로가기
코딩/CSS

<a>태그 target 속성, rel 속성, class 속성

by rosemarie 2023. 4. 24.
반응형

target 속성과 속성값

target 속성: 클릭으로 링크를 오픈할 때 어디에서 오픈할지 정하는 속성

- "_self" : 현재 창에서 링크를 오픈

- "_blank": 새 창에서 링크를 오픈

 

rel 속성:

- a 태그가 있는 페이지와 a 태그의 href 속성으로 설정한 페이지가 어떤 관계인지 나타냄

- 검색엔진이 링크에 대한 더 많은 정보를 수집하기 위해 사용

이 속성은 반드시 href 속성이 설정되어야만 사용 가능


noopener, opener

  • 자바스크립트에 window.opener하는 속성: 현재 연 창의 정보를 나타냄
    • 이로부터 이전 창의 url 주소를 가져와서 자신의 주소를 가져와서 자신의 주소를 가려 사용자를 속이는 피싱 방법도 있음

 

rel="noopener"

 

  • target 속성을 지정하면 새롭게 열린 브라우징 맥락(브라우저 탭)에 이름을 지정하고 보조적인 브라우징 맥락을 생성한다. 이렇게 열린 브라우징 맥락 간에 서로 통신할 수 있으며 브라우징 맥락은 자신을 연 브라우징 맥락에 대한 정보를 가짐. 만약 악의적으로 opener 브라우징 맥락에 접근한다면 보안상의 문제가 발생할 수 있음
  • noopener 속성을 사용하면 열리는 브라우징 맥락은 보조 브라우징 맥락이 아닌 새로운 top-level 브라우징 맥락으로 생성됨. 이는 하이퍼링크를 클릭해서 열린 새로운 브라우저 탭의 window.opener 속성에 null 값이 주어지면서 window.opener 속성을 통한 컨트롤을 막음.
  • 기존 메인페이지를 특정 url로 이동시키는 window.opener 속성을 사용할 수 없음

보안을 위해 nonreferrer과 함께 사용할 것을 권장.

 

 

 

rel="opener": window.opener에 값을 명시적으로 전달할 때 씀 -> 자식 창을 열 때 필요함


noreferrer

  • 하이퍼링크를 클릭하여 다른 페이지로 이동하면 브라우저가 우리에게 HTML 문서를 보여주기까지 웹서버와 클라이언트 간에 요청과 응답으로 정보를 주고 받음. HTTP 헤더는 서버와 클라이언트의 동작을 설명하는데 사용됨. HTTP 헤더의 referrer 정보에는 현재 페이지 이전 웹 페이지 주소를 가지고 있다. (구글 애널리틱스에서 내 사이트의 방문자가 어느 채널을 통해 방문했는지 분석할 수 있는 것이 이런 정보들을 모아서 보여주는 것이다.)
  • noreferrer를 사용하면 referrer 헤더를 포함하지 않는다. 내 페이지에서 다른 사이트 페이지로 링크를 걸고 거기에 noreferrer 키워드를 사용하면 사용자가 내 페이지의 하이퍼링크를 클릭하여 다른 사이트로 이동할 때 내 사이트에 대한 정보가 HTTP 헤더에 포함되지 않기 때문에 그 사이트에서 사용자가 내 사이트를 통해서 방문한 것을 모르고 direct로 방문했다고 생각
  • nonreferrer는 이전 페이지와의 연결을 끊는 속성임
  • 링크를 클릭했을 때 브라우저가 HTTP referer 헤더를 넘기지 않음
  • 새로 생긴 페이지에서 특정 URL로 이동시키는 window.opener 속성을 사용할 수 없음 
    • 보안 위해 noopener과 함께 사용할 것을 권장
<a href="https://www.google.com/chrome" rel="noreferrer">크롬 내려받기</a>

nofollow

  • nofollow 키워드는 링크된 페이지의 원저자 또는 발행인에 의해 보증되지 않거나 광고 링크나 유료 게재 링크에 nofollow를 지정하여 검색결과 순위에 영향을 주지 않도록 하는 것.
  • 구글 등 검색 엔진에서는 링크를 사용하여 사이트 인지도를 확인하고 사이트 순위에 영향을 줍니다. 내 사이트를 다른 사이트에서 링크를 건 횟수가 많을 수록 내 사이트에 대한 검색 결과의 순위는 높은 순위를 가집니다. 검색 엔진은 링크를 조작하는 가이드라인을 만들고, 비정상적인 링크는 패널티를 받습니다. 광고성 링크일 때는 nofollow 키워드를 사용하여 구글 검색 크롤러가 링크를 따라가지 않도록 지정합니다.
  • 광고성 링크를 달 때 사용
  • 내 사이트와 링크된 페이지를 연결하지 않기 바라거나 링크된 페이지를 크롤링하지 않기를 바라는 경우 사

->  크롤링 여부는 검색 엔진의 자유. nofollow를 무시하고 검색할 수 있음

 

'코딩 > CSS' 카테고리의 다른 글

svg 태그 viewbox 속  (9) 2023.04.25
CSS line-height  (0) 2023.04.24
CSS transition  (0) 2023.04.24
text-size-adjust  (0) 2023.04.24
CSS touch-action  (0) 2023.04.23