웹 표준 Semantic Element

• SEO 검색엔진 최적화

• 의미가 있는 요소, 콘텐츠의 특정 의미를 정의하고 목적을 갖는 태그

• 태그에 의미를 부여함으로써 웹 사이트의 구조를 파악하기 쉽게 도와줌

• 시멘틱 태그의 종류

  • article : 독립적인 글을 다루는데 사용
  • aside : 페이지 콘텐츠 외의 콘텐츠를 정의
  • details : 사용자가 보거나 숨길 수 있는 추가 세부정보를 정의
  • figcaption : 일러스트레이트, 다이어그램, 사진, 목록 등과 같은 자체 포함된 콘텐츠 지정
  • footer : 문서, 섹션의 바닥글 지정
  • header : 문서, 섹션의 머릿글 지정
  • main : 메인 콘텐츠을 담는 태그, 문서에서 하나만 존재 해야함
  • mark : 하이라이트된 텍스트를 정의
  • nav : 웹 사이트의 메뉴, 탭, 탐색경로 등 탐색 링크가 포함된 부분 정의
  • section : 문서의 부분을 의미 주제별 콘텐츠 그룹을 정의
  • summary : <details> 요소에 의해 생성되는 대화형 위젯에서 기본적으로 보이는 제목 정의
  • time : 사람이 읽을 수 있는 형태의 날짜와 시간 데이터를 정의

• 요소가 명확한 계층 구조와 구조를 형성하도록 요소들을 올바르게 중첩해서 사용하기

• 특정한 상황이 아니면 div와 같은 의미 없는 요소나 속성을 사용하지 않기

• W3C validation 활용하여 웹 표준 검사하기

  The W3C Markup Validation Service

NodeList

• Node : 문서내에 모든 객체
• Element : Tag로 둘러싸인 요소
• NodeList : element.childern와 같은 속성(property)과 document.querySelectorAll 와 같은 메서드에 의해 반환되는 노드의 콜렉션
  • 유사 배열 객체 ⇒ 배열 메서드 사용불가
  • 배열로 변환이 필요

innerHTML

• 요소 내에 포함 된 HTML 또는 XML 마크업을 가져오거나 설정
• 보안에 위험, XSS(Cross Site Scripting)에 취약
• innerHTML 대신 다른 방법 사용하기
  • 요소의 텍스트 내용만을 바꿀 경우 innerText, textContent 사용하기
    • innerText : 요소 내에서 사용자에게 보여지는 텍스트 값을 가져옴
    • textContent : 태그와 상관없이 해당 노드가 가지고 있는 텍스트 값을 그대로 가져옴
  • 요소 자체를 삽입 하는 경우 insertAdjacentHTML 사용하기