HTML속성 + 모범사례

sturrxxl·2020년 12월 14일

프론트엔드 체크리스트

목록 보기

2/2

프론트엔드 체크리스트 2 > HTML → 속성과 모범사례

HTML 문서의 최상단 요소이며, 루트 요소 (Root Element) 라고도 함

<html lang="ko" dir="ltr">
// left to right

lang → HTML에서 특정 텍스트가 어떤 언어로 작성됐는지 지정하는 lang 속성
(간혹 오른쪽에서 왼쪽으로 읽어야 하는 언어들도 있으므로)
dir → 요소 내에 위치한 텍스트들의 방향성을 명시

사용자에게 가능한 한 빨리 콘텐츠를 렌더링하기 위해 스크롤없이 볼 수있는 콘텐츠의 CSS를 추출하는 기술
<head></head> 태그 사이에 최소화 된 상태로 한 줄로 추가되어 임베딩 됨

 <style> /* inlined critical CSS */ </style>

css critical ➡︎ 변환사이트

HTML5의 시맨틱 엘리먼트들이 적절히 사용됨
(header, section, footer, main... 등).
에러 페이지를 위한 리다이렉트 페이지
404 페이지(존재하지 않는 페이지)에러 5xx 페이지(서버에러)의 에러 리다이렉트 페이지가 존재하는지
rel="noopener" 외부 링크를 target="_blank"를 이용하여 연 경우, tab nabbing 피싱 공격을 방지하기 위하여 rel="noopener" 속성을 사용해야만 한다.

tab nabbing 피싱 공격
새롭게 열린 탭(또는 페이지)에서 기존의 문서의 location을 피싱 사이트로 변경해 정보를 탈취하는 공격 기술

🌱 프론트엔드 체크리스트 참고하여 정리해 나가기
https://github.com/kesuskim/Front-End-Checklist

✓ Reference
https://tech.lezhin.com/2017/06/12/tabnabbing

프론트 개발자가 되는 과정