#semantic
노트 5개
Frontend › Web
구조화된 콘텐츠와 기계가 읽는 웹음성 비서·검색 엔진·AI 답변 엔진은 웹 페이지를 그대로 보여 주지 않고 내용을 뽑아 합치고 추론한다. 화면에만 맞춘 마크업은 기계가 오해한다. 시맨틱 HTML로 관계를 드러내고, schema.org 어휘의 링크드 데이터(JSON-LD)로 개념의 의미를 붙이고, CMS가 구조를 강제하게 만들면 어떤 인터페이스에서도 정확한 답이 나간다.
Frontend › Web
목록과 표 마크업ul·ol·dl의 허용 자식과 중첩 규칙, ol·li의 번호 속성, dl을 div로 묶는 법, 그리고 표의 자식 순서(caption → colgroup → thead → tbody → tfoot), th·scope·headers, colspan·rowspan, colgroup·col로 열 꾸미기, 표 CSS를 정리한다. 목록인지·용어 쌍인지·표인지 고르는 기준도 함께 둔다.
Frontend › Web
시맨틱 HTML과 문서 구조태그로 모양이 아니라 의미를 표시하는 시맨틱 HTML. 랜드마크 태그, 제목 계층(h1~h6), <article>과 <section>을 언제 쓰는지, 요소의 암묵적 역할과 role 속성의 한계를 접근성 관점에서 정리했다. 아웃라인 알고리즘은 구현되지 않았으니 제목 수준은 직접 매긴다.
Frontend › Web
텍스트 의미 요소와 문자 참조문단·인용·강조·기술 문서·정의·수정 이력·줄 바꿈을 표현하는 HTML 텍스트 요소를 용도별로 고르는 법. blockquote·q·cite의 구분, em·strong·mark·i·b·u·s의 의미 차이, code·kbd·samp·var·data·time, abbr·dfn, br·hr·wbr, 그리고 꼭 이스케이프해야 하는 문자 참조를 정리한다.
Frontend › Web
HTML 기초와 HTML5웹 문서의 구조와 의미를 태그로 표현하는 마크업 언어와 그 핵심 문법. 요소와 태그, 대체·빈 요소, 생략 가능한 태그, 불리언·열거형·전역 속성, data-* 속성, 속성 하나로 끝나는 기능(enterkeyhint·form·download·loading·fetchpriority·integrity·popover 등), DOCTYPE, form 데이터 규칙, HTML5까지 다룬다.