3장
콘텐츠 모델
html에는 요소들이 가지고 있는 성격에 따라 요소의 종류를 정의한 규칙들이 있다. 요소는 이 규칙들을 준수해야 하며 반드시 html 권고안을 따라야 한다
이런 규칙에 대해 비슷한 성격의 요소들끼리 그룹화 한 것이 콘텐츠 모델이다
각각의 요소들은 하나 또는 여러 개의 콘텐츠 모델에 속하게 된다
-
Metadata Content : 콘텐츠의 style(표현), script(동작)을 설정하거나
다른 문서와의 관계 등의 정보를 포함하는 요소
-> base, link, meta, noscript, script, style, title 등 ..
head 태그 안에 들어가게 된다 -
Flow Content : 문서에 사용되는 대부분의 요소
body 태그 안에 들어가게 된다 -
Sectioning Content : 헤딩과 푸터footer의 범위를 결정하는 요소. 모두 html5에 새로 생겼고 문서의 구조 즉 아웃라인에 영향을 주는 태그들이다
-> article, aside, nav, section -
Heading Content : 섹션의 헤더를 정의하는 요소
-> h1 ~ h6 -
Phrasing Content : 문서의 텍스트 또는 텍스트를 꾸며주는 문단 내부레벨로 사용되는 요소들. 많은 태그들이 여기에 해당된다
-
Embedded Content : 외부 컨텐츠를 표현하는 요소들이다. 다른 리소스나 컨텐츠를 문서에 삽입하는 역할을 한다
-> audio, canvas, embed, iframe, img, math, object, svg, video -
Interactive Content : 사용자와 상호작용을 하는 요소, 대표적으로 폼 요소들이 있다
아 이런게 있구나 정도로 정리해뒀다. 지금 다 외워도 어차피 까먹을 것 같기에. 나중에 사용하게 될 때 다시 공부하자.
시맨틱 마크업
시맨틱 마크업 : 의미를 잘 전달하도록 문서를 작성하는 것
정보를 얼마나 잘 구조화 하느냐는 html을 배우면 계속 따라다닐 숙제일것이다. 시맨틱 Semantic은 기계(브라우저, 컴퓨터)가 잘 이해할 수 있도록 하는 것이다. 이는 적절한 요소를 사용하는 것에서 시작하기에 정해진 약속을 잘 지키면 되는 것이다.
구체적으로 마크업 할 때에는 의미에 맞는 태그, 요소를 사용하는 것이고
문서를 표현할 때에는 구조화를 잘 해주면 된다.
정해진 약속대로 코드를 작성하게 되면 기계 뿐만아니라 사람도 이해하기 쉬운 코드가 된다.
다음 왼쪽의 태그와 오른쪽의 태그를 비교하며 시맨틱마크업을 이해하고 넘어가자
<b>굵은</b> vs <strong>중요한</strong>
<i>기울어진</i> vs <em>강조하는</em>
<u>밑줄친</u> vs <ins>새롭게 추가된</ins>
<s>중간선이 있는</s> vs <del>삭제된</del>
<!-- 잘 이해하자. 이 둘을 실행하면 "같은 모습"으로 출력되나
실제로는 그 의미가 다르다.
우리의 눈으로는 같아 보이지만 브라우저는 이 두 태그를 다르게 이해하는 것이다!! -->블록 & 인라인
콘텐츠 모델은 원래 블록/인라인으로만 구분되었었다. 하지만 지금에도 블록레벨과 인라인레벨 요소는 시각적으로 차이가 아주 명확하다.
-
block level 요소 : 말 그대로 블록처럼 한 줄에 하나의 요소만을 표시한다. 그렇기에 자동으로 개행된다. 즉 해당 요소 양옆에 아무것도 오지 않게 한다.
div, h1~h6, p, li, table 등등
-
inline level 요소 : 블록레벨의 자식 요소이며 한 줄에 여러개의 요소를 표시할 수 있다. 자기 사이즈만큼의 블럭을 만들며 뒤에 다른 인라인 요소가 올 수 있다
span, i, img, em, strong 등등
끝.
