THE Red: 견고한 UI 설계 - HTML
===

###### tags: `석기`

---

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

### HTML 명세를 읽는 법 / 확인하는 법

**QUIZ1**

<a>유효한가?</a>

- 유효한 문법이다.
- a 태그의 href는 필수가 아니다.

**QUIZ2**

<a>
    <div>
        유효한가?
    </div>
</a>

- 유효하다.
- a 태그가 인라인만 가능했지만, HTML5에서부터는 상관이 없어졌다.

**QUIZ3**

<p>
    <a>
        <div>
            유효한가?
        </div>    
    </a>
</p>

- 마지막에 공개.
- 유효하지 않다.
- p 요소 안에 a는 가능.
- a 요소는 투명한 요소. -> 부모의 content model를 따름.
- phrasing 안에 div (flow, palpable) 가 올 수 없다. (?)

**내 생각**
- **이게.. 중요한가?**

### HTML 분류

#### Flow content

- body 에 포함될 수 있는 모든 요소.
- base, style, title 요소를 제외한 모든 요소.

#### Metadata content


- 문서의 헤더에 포함된다.
- 실제로 화면에 출력하진 않다. -> display: none으로 처리됨.

#### Heading content

- h1, h2...

#### Sectioning content

- 문서의 개요를 형성.
- article, aside, nav, section

#### Phrasing content

- 단락을 형성하는 요소들/
- 예전에 inline contents

#### Embedded content

- 외부 자원을 참조하는 컨텐츠.
- img, picture, audio...

### Interactive content

- a, audio, button, 등등

---

## 검색 엔진 밥상 차려주기

==사용자에게 도달하지 않으면 아무 쓸모가 없다.==

### SEO에 영향을 주는 요인들

#### 페이지 타이틀

- 브라우저 제목에 달리는 요소.
- 검색엔진은 title 태그 안에 있는 요소를 가장 중요하게 여긴다.
- 브라우저 탭에 작성되기 때문에 사용자 경험에 큰 역할을 하기도 한다.
- 화면 낭독기 사용자는 웹 페이지 접속시 페이지 타이틀을 음성으로 전달 받음.
- 따라서 모두 중복되는 내용보다는 해당 페이지의 기능을 핵심적으로 묘사하는게 좋다.
- 중요하게, 간결하게.
- Javascript으로 동적으로 생성한 title도 크롤링 한다.

#### 메타 데이타


- lang 속성을 통해 화면 낭독에 더 최적화 / 검색 엔진에 조금 도움을 준다.
- 접근성 측면에서는 신경써야한다.
- meta`
- description: 검색엔진 화면에 노출되는 항목.
- keywords: 구글 검색엔진은 신뢰하지 않음.
- viewport: 모바일 디바이스에서 화면이 잘 보이는지.

---

## HTML 개요 알고리즘 이해

### Outline / Heading
- 개요 / 윤곽

- title vs heading
- title
- 문서의 제목. 한번만 사용.
- h*
- 섹션의 제목. 여러번 사용.
- 문서 개요를 형성하는 기본 / 필수 아이템.
- 웹 브라우저 및 화면 낭독기가 주목함.
- Sectioning Root
- HTML5에 새롭게 추가됨.
- 독립적인 개요를 생성하는 개요 컨테이너
- 섹셔닝 루트 외부에서 접근 불가.

- 아직은 알고리즘이 구현되지 않음 ... 사용하지말아아.
- Sectioning Content
- 
- HTML5 에서 새롭게 추가된 명세.
- 명시적 개요를 생성하는 개요 컨테이너
- 적절한 수준의 헤딩을 자식 요소로 사용해야함.
- 명시적 섹션
- heading과 함께 섹녀닝 콘텐츠(article, aside, nav, section)를 사용하여 섹션의 범위를 명시적으로 알수있게.
- 암시적 섹션
- heading만 사용. 쓰지말아라.
- 어색한 섹션
- h1이 없는데 h2가 있는 경우.

### 요약
1. Heading을 사용하고, 해당 heading과 섹션(article, aside, nav, section)을 1:1로 맵핑해라.
2. HTML5 개요 알고리즘에 의존해서 작성하지 말아라.

---

## HTML 의미론

### div, span
- 마지막으로 선택하는, 아무의미 없는 태그.
- 많이 쓰지 않았으면 좋겠다.
- span을 대체할 수 있는 것들
- a, em, strong, data, time, mark, ... 등

### Sectioning


### Header, footer


### section, article


### nav


### aside


### main



### dialog


- 모달 내부

### figure


**예시**


### mark


### address


- footer에 있는 제작자 정보들.

### ins, del


---

## 상호작용 콘텐츠의 올바른 용법

### Interactive Contents

#### a vs button

**a tag의 특징**

- 실행 결과를 가르킬 수 있는 고유한 URL이 있다면 a로.
- 탭간 이동.
- 대화 상자를 참조하는 경우 (모달)
- 마우스를 올려보면 주석표시로 어느 링크로 연결되는지 나온다.

**a tag - target**
- 외부 새로운 페이지로 링크.
- 사용자가 공격에 노출 될 수 있음.

> 해결방법: HTML적으로 해결 가능.

<a
    href = '...'
    target = '_blank'
    rel = 'noopener_noreferrer'
/>

`noopener_noreferrer` 속성을 통해 공격 방어.

#### details, summary


![Uploading file..._r7z3spidz]()

- 간편하게 열고 닫는 토글 기능이 지원된다.

#### input

- 타입을 아는것이 해당 태그를 다 아는 것.

---

## 이미지 마크업 최적화

### 이미지 포맷의 다양화

- jpg, png
- 용량이 크다.
- fallback으로 쓰인다.
- webp
- jps, png 대비 30~70% 수준의 용량이다.
- avif
- 저용량 + 고품질

#### 따라서 다음과 같이 조건절처럼 이미지를 렌더링하자.

<picture>
    <source srcset='pic.avif' type='image/avif'>
    <source srcset='pic.webp' type='image/webp'>
    <img src='pic.jpg' alt>
</picture>

- 세가지 이미지 모두 다운받지 않는다.
- 최적화가 알아서 됨.
- media 속성을 통해 반응형을 구현할 수 있음.

#### img tag

<img
     loading='lazy'
     decoding='async'
 >

- 빠른 로딩 속도 지원