HTML 팁

신승준·2022년 6월 30일
0

* 참고 : https://poiemaweb.com/

태그, Tag

  • 참고 : https://poiemaweb.com/html5-tag-text

  • heading : 즉 h1과 같은 태그는 제목에만 쓰는 것이 좋다.

    • 검색 엔진은 제목 태그를 중요한 의미로 받아들일 가능성이 높다.
  • strong : b(bold) 태그와 비슷하나, 의미론적 중요성을 가진다. 웹 표준을 준수하고자 한다면 strong을 쓰는 것이 좋다.

  • em(emphasized) : italic체로 강조해주는 태그이다. i(italic) 태그와 비슷하나, 의미론적 중요성을 가진다. 즉 검색 엔진이 중요한 의미로 받아들일 가능성이 높다.

  • br : 한 줄 건너뛰게 된다.

  • hr : 한 줄이 그어진다.

  • pre(preformatted) : 형식화된 text를 보여준다. pre 태그 내의 내용들은 브라우저에 그대로 출력된다.

  • target : a 태그에 target = _blank를 부여하여 링크를 클릭하면 새로운 탭에서 사이트가 켜지도록 하는 경우가 많다.

    • 이럴 경우 window.opener 속성에는 이 탭을 호출한 부모 탭의 location, 즉 링크가 남아있다.
    • 이것을 해커가 원하는 주소로 바꿔서(로그인을 요구하는 듯한 사이트) 사용자의 정보를 탈취할 수 있다.
    • 따라서 window.opener 변경과 같은, location 변경 등의 자바스크립트 요청을 거부할 수 있도록 rel=noopener라는 속성을 추가해줘야 보안의 문제가 생기지 않는다.
    • 성능 상의 이점도 존재하는데 target = _blank로 생긴 탭은 부모 탭과 같은 쓰레드에서 움직여서 느려질 수 있다. 하지만 rel=noopener를 부여하면 부모 탭을 호출할 일이 없으므로 같은 쓰레드일 필요가 없으며 이로 인해 새로운 페이지와 부모 페이지가 서로로 인해 느려지지 않는다.
  • 있을 법한 것들은, 태그의 속성(attribute)을 검색해본다.




form

profile
메타몽 닮음 :) email: alohajune22@gmail.com

0개의 댓글