오늘은 이론적인 내용.
HTML의 콘텐츠 모델과
시멘틱마크업에 대해
알아보도록 하자.
이론이라 어쩔 수 없이
복붙을 이용했다...
나중에는 스스로 적을 수 있을만큼
이해했으면 좋겠다!
콘텐츠 모델
가지고 있는 성격에 따라 요소의 정의를
정리하는 규칙이 있다고 한다.
이 규칙을 그룹화 시켜놓은 것이
바로 콘텐츠 모델!
1. metadata
'콘텐츠의 스타일, 동작을 설정하거나
다른 문서와의 관계 등 정보를 포함하는 요소.'
라고 한다... 흠...어렵다.
<head>에 주로 들어가는 내용로 알아두자.
2. flow
문서의 자연스러운 흐름에 의해 배치되는 요소들이 포함된다.
대부분의 내용이 flow라 한다.
3.sectioning
문서의 구조와 관련된 요소들.
처음보는 <article>, <aside>, <nav>, <section>
이 태그들이 포함된다고 한다.
4.heading
h1, h2, h3, h4, h5, h6말 그대로 head를 정의한다.
5.phrasing
문서의 텍스트 또는 텍스트를 꾸며주는 문단 내부 레벨로 사용되는 요소.말이 어렵지만 button이나 Textarea를생각하면 된다.
6.embedded
오디오나 비디오, 이미지 등 멀티미디어 관련 요소.
7.interactive
사용자와 상호작용을 하는 요소.input이나 label 태그가 이에 해당한다.
시멘틱 마크업
시멘틱이란 기계가 잘 이해할 수 있도록 만드는 것이다.
시멘틱 마크업은 기계가 코드를 잘 이해할 수 있도록
태그를 짜는 것을 말하는 것!
예를 들면 <b> 태그와 <strong>태그가 있다.
둘 다 적어보면
이렇게 볼드처리된 채로 출력된다.
하지만 둘의 의미는 다르다.
<b>태그의 경우
단지 글자를 굵게 만들었을 뿐
그 이상, 그 이하의 뜻도 없다.
하지만 <strong>태그의 경우
본 글이 중요하다고 인식한다.
얘는 굵게 표시하려고 그런게 아니라
중요하니까 강조표시? 같은 걸 한거다.
시멘틱 마크업으로서
컴퓨터는 이 글이 중요하다는 것을
인식한 것이다.
이렇게 컴퓨터가 이해하기 쉽고
코드를 보는 사람도 이해하기 쉬운것이
시멘틱 마크업이다.
MDN사이트에서 시멘틱 요소에 대해
더 살펴보았다.
확실히 영어 단어만 봐도
무엇을 뜻하는지 알기 쉬웠다.
article 태그를 이용해
기사끼리 묶여서 나오게 하고
이미지 사진에는 figure 태그를 사용했다.
시멘틱 요소들을 쓸 때
특히 검색어에 효과적인 거 같았다.
중요하다고 표시하면
컴퓨터가 상위 검색어를 올려주는
그런 기특한 역할을 했다.
블록 & 인라인 레벨
앞선 수업에서 블록레벨과 인라인레벨에 대해
간단히 설명하고 넘어갔었다.
블록레벨은 꽉 채워진 부분이라고 생각하면 된다.
모양 자체가 정말 블록 같다.
반면, 인라인 레벨은 여러개를 붙여서
사용할 수 있는 레벨이였다.
블록레벨은 태그를 작성하고
그 다음을 적으면 자동 개행된다.
h태그나 p태그 같은 것!
h태그를 적고 다음 내용을 적으면
다음 줄에 적히는 것! 그것을 말한다.
but 인라인레벨의 경우
img 태그와 같이 주르륵 작성 가능했다.
인라인레벨은 블록레벨을 자손으로 가질 수 없다.
그말인즉슨 인라인레벨 안에 블록레벨이
못들어간다는 것이다.
하지만 반대는 가능.
그리고 예외는 있기 마련이다.
<a>태그의 경우 인라인레벨 안에
블록레벨이 존재할 수 있다.
벌써 HTML이 끝났다.
다음은 CSS이다. 떨린다....!
3강 끝 - !
'부스트코스' 카테고리의 다른 글
| 네이버 부스트코스 CSS 단위, 배경, 박스모델 (0) | 2021.03.21 |
|---|---|
| 네이버 부스트코스 CSS 이해하기 (0) | 2021.03.18 |
| 네이버 부스트코스 HTML 태그 2 (0) | 2021.03.17 |
| 네이버 부스트코스 HTML 태그 (0) | 2021.03.17 |
| 네이버 부스트코스 HTML 이해하기 (0) | 2021.03.17 |
댓글