[콘텐츠 모델]
metadata : 콘텐츠 style(표현), script(동작) 설정 or 다른 문서와의 관계 등 정보 포함 요소
-> base, link, meta, noscript, script, style, title
-> <head>태그 내 들어감
flow : 문서에 사용되는 대부분 요소
-> a, abbr, address, map>area, article, aside, audio, b, bdo, blockquote, br, button, canvas, cite, code,
datalist, del, details, ...
sectioning : 헤딩, 푸터 범위 결정 하는 요소. 아웃라인 有
-> article, aside, nav, section
heading : 섹션의 헤더 정의 요소
-> h1 ~ h6
phrasing : 문서 텍스트, 문단 내부 레벨로 마크업 하는 요소
-> a, br, button, textarea, time, ...
embedded : 이미지, 비디오, 플래시 등 외부 콘텐츠 문서 내 표현 요소
-> audio, canvas, embed, iframe, img, math, ...
interactive : 사용자와 상호작용 요소
-> a, audio[controls], details, iframe
-> (대표적으로 form 요소들이 여기에 해당 됨)
[시멘틱 마크업]
컴퓨터(브라우저)가 잘 이해할 수 있는 코드
▶ 시멘틱
코드 조각의 의미를 나타냄
<b>굵은</b> vs <strong>중요한</strong>
-의미에 맞는 요소 사용
-문서 구조화
-목표 : 인간, 기계 모두 이해 가능
-> 결과가 같더라도 브라우저/개발자는 차이를 해석할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>semantic</title>
</head>
<body>
<b>굵은</b> vs <strong>중요한</strong><br>
<!--b : 글자 굵게
strong : 중요한 내용 강조 표시 (글자 굵게)-->
<i>기울어진</i> vs <em>강조하는</em><br>
<!--i : 글자 기울기
em : 중요한 내용 강조 표시 (기울기)-->
<u>밑줄친</u> vs <ins>새롭게 추가된</ins><br>
<!--u : 글자 밑줄
ins : 새롭게 추가된 내용 밑줄 표시-->
<s>중간선이 있는</s> vs <del>삭제된</del><br>
<!--s : 중간선
del : 삭제/취소 된 내용 표시-->
</body>
</html>
[HTML5 시멘틱 요소]
HTML5에서 새로 생긴 시멘틱 요소들
https://developer.mozilla.org/en-US/docs/Glossary/Semantics
Semantics - MDN Web Docs Glossary: Definitions of Web-related terms | MDN
In programming, Semantics refers to the meaning of a piece of code — for example "what effect does running that line of JavaScript have?", or "what purpose or role does that HTML element have" (rather than "what does it look like?".)
developer.mozilla.org
<article>
문서, 사이트 등에서 독립적으로 배포하거나 재사용할 수 있는 자체 포함된 구성.
사용자가 제출한 댓글, 대화형 위젯, 신문 기사, 블로그 항목, 제품 카드 등이 있음.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>semantic</title>
</head>
<body>
<article class="forecast"> <!--기사 전체 : 독립적 항목 표시-->
<h1>Weather forecast for Seattle</h1>
<article class="day-forecast"> <!--2018. 3/3 독립적 항목 표시-->
<h2>03 March 2018</h2>
<p>Rain.</p>
</article>
<article class="day-forecast"> <!--2018. 3/4 독립적 항목 표시-->
<h2>04 March 2018</h2>
<p>Periods of rain.</p>
</article>
<article class="day-forecast"> <!--2018. 3/5 독립적 항목 표시-->
<h2>05 March 2018</h2>
<p>Heavy rain.</p>
</article>
</article>
</body>
</html>
<aside>
콘텐츠가 문서 주요 콘텐츠와 간접적으로만 관련된 문서의 일부 나타냄.
사이드바, 콜아웃 상자로 주로 표시.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>semantic</title>
</head>
<body>
<p>Salamanders are a group of amphibians with a lizard-like appearance,
including short legs and a tail in both larval and adult forms.</p>
<aside> <!--본문과 관련있는 '사이드 내용'임 표현-->
<p>The Rough-skinned Newt defends itself with a deadly neurotoxin.</p>
</aside>
<p>Several species of salamander inhabit the temperate rainforest of
the Pacific Northwest, including the Ensatina, the Northwestern
Salamander and the Rough-skinned Newt. Most salamanders are nocturnal,
and hunt for insects, worms and other small creatures.</p>
</body>
</html>
<figcaption>
상위 요소의 나머지 내용 설명 캡션, 범례.
(그림 캡션 요소).
<figure> 내에서 쓰임.
<figure>
상위 요소의 나머지 내용 설명 캡션, 범례.
'이러한 이미지가 있다' 표현 위한 속성 같음.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>semantic</title>
</head>
<body>
<figure> <!--다음은 '코끼리 사진이다' 표현 위함>
<img src="./elephant.jpg"
alt="Elephant at pasture">
<figcaption>An elephant at pasture</figcaption> <!--사진 설명 캡션-->
</figure>
</body>
</html>
<footer>
상위 섹션 콘텐츠/루트 요소에 대한 바닥글.
섹션 작성자, 저작권 데이터, 문서 링크 정보 포함.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>semantic</title>
</head>
<body>
<article>
<h1>How to be a wizard</h1>
<ol>
<li>Grow a long, majestic beard.</li>
<li>Wear a tall, pointed hat.</li>
<li>Have I mentioned the beard?</li>
</ol>
<footer>
<p>© 2018 Gandalf</p>
</footer>
</article>
</body>
</html>
<header>
소개, 탐색 보조 도구 그룹 소개 콘텐츠.
제목, 로고, 검색 양식, 작성자 이름 등 포함 가능.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>semantic</title>
</head>
<body>
<header class="page-header"> <!--해당 내용 소개, 제목-->
<h1>Cute Puppies Express!</h1>
</header>
<main>
<p>I love beagles <em>so</em> much! Like, really, a lot. They’re adorable and their ears are so, so snuggly soft!</p>
</main>
</body>
</html>
<main>
문서 주요 내용.
기본 콘텐츠 영역 구성 : 문서 중심 주제, 응용 프로그램 중심 기능 관련 - 확장 콘텐츠
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>semantic</title>
</head>
<body>
<header>Gecko facts</header> <!--아래 내용 소개, 제목-->
<main> <!--문서의 중심 내용-->
<p>Geckos are a group of usually small, usually nocturnal lizards.
They are found on every continent except Australia.</p>
<p>Many species of gecko have adhesive toe pads which enable them to
climb walls and even windows.</p>
</main>
</body>
</html>
<mark>
맥락 내 강조/참조 구절 표시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>semantic</title>
</head>
<body>
<p>Search results for "salamander":</p>
<hr>
<p>Several species of <mark>salamander</mark> inhabit the temperate
rainforest of the Pacific Northwest.</p>
<p>Most <mark>salamander</mark>s are nocturnal, and hunt for insects,
worms, and other small creatures.</p>
</body>
</html>
<nav>
현재 문서 내 / 다른 문서로의 탐색 링크 제공 목적 '페이지 섹션' 표시
메뉴, 목차, 색인
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>semantic</title>
</head>
<body>
<nav class="crumbs"> <!--탐색 섹션 / 목차, 메뉴-->
<ol>
<li class="crumb"><a href="#">Bikes</a></li>
<li class="crumb"><a href="#">BMX</a></li>
<li class="crumb">Jump Bike 3000</li>
</ol>
</nav>
<h1>Jump Bike 3000</h1>
<p>This BMX bike is a solid step into the pro world.
It looks as legit as it rides and is built to polish your skills.</p>
</body>
</html>
<section>
문서 내 일반적인 독립 실행형 섹션.
구체적 의미론적 요소는 x.
섹션 내 제목 必 (예외 제외).
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>semantic</title>
</head>
<body>
<h1>Choosing an Apple</h1>
<section> <!--구간 설정-->
<h2>Introduction</h2>
<p>This document provides a guide to help with the important task of choosing the correct Apple.</p>
</section>
<section>
<h2>Criteria</h2>
<p>There are many different criteria to be considered when choosing an Apple — size, color, firmness, sweetness, tartness...</p>
</section>
</body>
</html>
<time>
특정 기간.
미리 알림 같은 사용자 지정 기능 허용 가능.
-24시간제 시간
-그레고리력의 정확한 날짜
-유효한 기간
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>semantic</title>
</head>
<body>
<p>The Cure will be celebrating their 40th anniversary on
<time datetime="2018-07-07">July 7</time> in London's Hyde Park.</p>
<p>The concert starts at <time datetime="20:00">20:00</time> and
you'll be able to enjoy the band for at least
<time datetime="PT2H30M">2h 30m</time>.</p>
</body>
</html>
[블록 & 인라인]
block level : 한 줄에 하나의 요소 표시
-일반적인 모든 요소 포함.
-div, h1 ~ h6, p, ul, li, table 등
-개행 생김
inline level : 한 줄에 여러개 요소 표시
-block 레벨 자식 요소.
-span, i, img, em, strong 등
-자식 태그로 블록 레벨 요소 불가능 (예외 : <a> 인라인 레벨 요소는 자손으로 블록 레벨 요소 가능)
[질문 - 해결]
<figure>, <figcaption> 관련 질문
1. <figure>은 그림이나 문서라고 표현해줄 때 사용
<figcaption>은 <figure>에서 표현된 그림이나 문서의 부가적인 설명을 적을 때 사용
-> 맞게 이해했는지
2. <figcaption>은 브라우저 상에서도 표현되는 설명이라는 점에서 alt와는 차이점이 있는지 확인해결
1.
맞음
2.
frgcaption : 부가 설명
alt : 대체 텍스트
-> img가 이미지 소스 오류 등 이유로 이미지가 표시되지 못할 때 alt의 내용 대체하여 표기하는 속성
'[Language] > VIEW' 카테고리의 다른 글
| [3주차 미션]4. CSS 이해하기 (0) | 2022.05.22 |
|---|---|
| CSS 이해하기 (0) | 2022.05.22 |
| [부스트코스] HTML 태그 - 2주차 미션 (0) | 2022.05.15 |
| HTML 태그 (0) | 2022.05.15 |
| [부스트코스] html 이해하기 / 1주차 미션 (0) | 2022.05.09 |
