nc2u Blog

HTML5 특정 요소와 연관되어 있지만 확정된 의미는 갖지 않는 데이터에 대한 확장 가능성을 염두에 두고 디자인 되었다. data-* 속성은 표준이 아닌 속성이나 추가적인 DOM 속성, Node.setUserData()과 같은 다른 조작을 하지 않고도, 의미론적 표준 HTML 요소에 추가 정보를 저장할 수 있도록 해준다.HTML 문법섹션문법은 간단하다. 어느 엘리멘트에나 data-로 시작하는 속성은 무엇이든 사용할 수 있다. 화면에 안 보이게 글이나 추가 정보를 엘리멘트에 담아 놓을 수 있다. 아래 data 사용법이 있다: ... JavaScript 에서 접근하기섹션JavaScript 에서 이 속성 값들을 읽는 방법은 너무 간단하다. 값을 읽기 위한 완전한 HTML 이름과 함께 getAttribute()..

: 문단, p 요소 보다 더 적합한 요소가 있을 때에는 해당 요소를 사용함 : 다른 소스로부터 가져온 인용 섹션. 인용된 소스의 URL 주소가 있다면 cite 속성으로 표시 : 형식화된 텍스트 블록을 표현 : 문단 레벨에서 주제의 분리, 마침 요소 없이 단독으로 사용목록– 순서가 있는 목록 : 순서가 바뀌면 의미가 바뀌는 목록 요소로 정의 요소가 목록 아이템을 정의 – 순서가 없는 목록 : 목록 아이템이 말머리 기호로 시작 요소로 정의 요소가 목록 아이템을 정의 – 정의 목록 : 사전식 정의를 위해 사용 정의 목록 요소 정의 목록 제목 요소 정의 목록 데이터(값) 요소 : 사진, 일러스트, 비디오 등을 표시 : figure요소 내용에 대한 캡션, 요소 내부에서 사용 : 스타일 또는 스크립트 목적으로 콘텐..

: 보통 제목으로 시작하는 콘텐츠의 의미적 그룹 : 문서의 동일 페이지 또는 다른 페이지를 연결하는 네비게이션 링크로 구성되는 섹션 : 문서나 페이지, 사이트에서 독립적으로 배포 혹은 재사용 할 수 있는 섹션 : 문서의 주요 콘텐츠와 별개의 영역 정의, 대체로 사이드바 형태 : 페이지 또는 섹션의 머릿글 그룹, 제목, 소개, 네비게이션 등이 포함. 섹션 요소가 아님 : 가장 가까운 조상 요소의 푸터. 섹션 요소가 아님 ~ : 세션의 제목, 헤딩은 명시적 섹션을 생성 : h1~h6 요소들을 그룹 짓기 위해 사용, 의 등급은 포함된 헤딩 요소의 가장 높은 등급 : 가장 가까운 조상 요소인 article 또는 body 요소의 연락처 정보를 의미