220215 - html

Html lang=“ko” // 랭귀지코드 -> 작성하는것이 접근성 측면에서 좋다.

Html 자식요소로는 head, Body 만 온다.

Head // 다른 문서나 머신에게 문서에 대한 정보를 제공하는 데이터(메타 데이터)를 작성

Head 요소 내부의 필수적인 요소 3가지

Title // 문서 제목

Meta charset=“utf-8” // 작성을 안하면 특정 언어가 깨지게 된다.

Meta name=“viewport” // 뷰포트, 문서 랜더링시 어떤 방식으로 랜더링 될지 결정하는 스펙, 주로 모바일에서 자주 사용

Body // 문서의 핵심 내용, 기본적으로 사용자 눈에 보인다

Doctype

문서의 타입과 버전을 나타낼때 사용, 항상 해당문서의 첫번째 줄에서 작성, svg 에서도 사용됨

선언을 하지 않을 경우

• 해당 파일을 읽을 때 쿼크모드로 읽힘(하위 호환성 모드) 예상하지 못한 동작이 발생할 수 있고, 브라우저의 구현 상황에 따라 상이하게 동작. 다만 이메일에서 사용하는 html 에서는 사용하지 않음

콘텐트모델

1. 메타데이터 콘텐츠 // 나머지 콘텐츠의 동작이나 표현을 정의, 다른 문서와 이 문서간의 관계를 나타내거나 문서에 대한 정보를 표현할 때 link, style, title, meta, script 등
2. 플로우 콘텐츠 // 바디요소 내부에 들어가는 거의 대부분의 요소
3. 섹셔닝 콘텐츠 // 헤딩과 푸터의 범위를 정하는 콘텐츠 , article, aside, nav, section
4. 헤딩 콘텐츠 // 섹션의 헤더를 정의. h1~h6, group,
5. 프레이싱 콘텐츠(phrasing content) // 문서내에서 텍스트를 표시하는 요소
6. 임베디드 콘텐츠(embedded content) // 문서 내에서 외부 콘텐츠를 가져올때 사용. 이미지, 비디오, 오디오 등 외부문서를 가지고 올 수 있다. audio, canvas, embed, iframe, img, metaML, object, picture, svg, video
7. 인터렉티브 콘텐츠 // 유저와 상호작용이 발생하는 요소, 인터렉티브 요소안에 인터렉티브 요소를 넣을 수 없다. 속성이 있는 경우에 동작함, a(href), audio(controls), video(controls), button, details, iframe, img(use map), input, label, select, textarea
8. Palpable content // 플로우콘텐츠나 프레이싱 콘텐츠는 자식 노드가 적어도 한개 이상 존재해야한다. 자식 노드를 가지지 않거나 숨김 상태인 경우 palpable content 라고 한다.
9. 스크립트 서포팅 콘텐츠 // 스크립트를 지원하기 위해 사용하는 요소, script, template
10. Transparent content model // 어떤 콘텐츠에 속하느냐에 따라 콘텐츠 모델이 달라진다. > 예를 들어 a 요소가 p 요소 내부에 있는 경우 콘텐츠 모델은 phrasing content 처럼 취급된다.
11. 그외 - paragraphs // 콘텐츠 모델은 아니지만 플로우 콘텐츠 내에 텍스트가 들어있거나, 프레이싱 콘텐츠가 여럿 묶여있는 경우
12. The nothing content model // 자식 노드를 전혀 포함하지 않는 경우

 

---

 

초보자를 위한 HTML 강의 정리

 

https://inf.run/drB2

초보자를 위한 HTML 기초 - 인프런 | 강의