견고한 UI 설계를 위한 마크업 가이드 - HTML(1)

01. HTML을 어떻게 공부해야 하는가

주요 HTML 콘텐츠 분류

• Flow content
  : 바디에 포함할 수 있는 모든 요소
• Metadata content
  : 콘텐츠와 문서를 구조화 하는 요소를 의미
  : 다른 콘텐츠의 표시, 동작, 관계 등을 설정(display: none)
• Heading content
  : 섹셔닝 콘텐츠의 헤더
• Sectioning content
  : 문서의 개요를 형성. 헤더, 헤딩, 풋터의 범위
  (article, aside, section, nav)
• Phrasing content
  : 구문 콘텐츠, 단락을 형성하는 콘텐츠
• Embedded content
  : 외부 자원을 참조하는 콘텐츠
• Interactive content
  : 사용자와 상호 작용할 수 잇는 콘텐츠
  : 입력장치(키보드, 마우스)로 조작 가능
• Palpable content
  : 비어 있지 않은, 볼 수 있는 콘텐츠
• Script-supporting element
  : 랜더링하지는 않지만 사용자에게 기능 제공
• Transparent content models
  : 투명 콘텐츠 모델, 부모의 콘텐츠를 따름

퀴즈 오답노트!

1) <table> 콘텐츠의 제목을 마크업할 수 있는 HTML 요소 이름 두 가지를 고르시오.
=> figcaption, caption

2) <form> 요소를 전송할 때 입력 값을 서버로 전송하지 않는 요소는 무엇인가?
=> <input disabled>

3) 다음 중 HTML 문법으로 유효하지 않은 형식은?
=> <section> 요소의 자손으로 <main> 요소를 포함하기

4) 다음 중 HTML 문법으로 유효하지 않은 코드는?
=> <textarea row=4 col=4></textarea>

02. 검색엔진 밥상 차려주기

페이지 타이틀

• 구분자
  : -, |, :
• javascript
  : 검색 로봇은 자바스크립트에 의해 동적으로 생성한 페이지 타이틀도 크롤링 함
• 본문을 잘 설명하는 키워드 중심으로
  : 구체적이고 고유한 키워드 사용
• 페이지마다 반복하는 키워드 최소화
• 구체적인 키워드를 앞으로 배치
• 가능한 짧게

메타데이터

03. HTML 개요 알고리즘의 이해

Outline

=> 헤딩
=> 섹셔닝
=> 명시적/암시적 섹션
=> 어색한 섹션

• title 요소와 heading 요소의 차이점
  -> title 요소는 문서의 제목.
  문서에서 한 번만 사용 가능
  -> h* 요소는 섹션의 제목
  문서에서 여러번 사용 가능

Heading

문서의 개요를 형성하는 기본, 필수 아이템(생략 x)
웹 브라우저와 화면낭독기에 문서 개요를 드러내는 방법

Sectioning root

실제로 명세는 구현되어 있지만 브라우저에서는 구현되지 않아 있어 실무 사용에 권장하지 않음
-> 독립적인 개요 생성
-> 섹셔닝 루트 외부에서 내부 개요에 접근 불가

Sectioning Content

명시적 개요를 생성하는 개요 컨테이너
적절한 수준의 헤딩을 자식요소로 사용해야 함

• article: 기사, 본문, 맥락 독립적으로 배포 가능
• aside: 페이지의 주요 내용이 아닌
• nav: 사이트의 주된 탐색 메뉴
• section: 주제별로 나누거나 묶는

"섹셔닝 요소를 적극 사용하되 아웃라인 알고리즘(섹셔닝 루트, 헤딩 수준 자동 보정) 명세에는 의존하지 말 것"

명시적 섹션과 암시적 섹션

"명시적 섹션"
헤딩과 함께 섹셔닝 콘텐츠(article, aside, nav, section)를 사용하여 섹션의 범위를 명시적으로 알 수 있는 섹션

"암시적 섹션"
섹셔닝 콘텐츠를 사용하지 않고 헤딩만을 사용하여 암시적으로 개요가 생성되 섹션

어색한 섹션

• 헤딩이 없는 경우
• h1 태그를 건너뛰고 하위 h 태그를 사용하는 경우