📋오늘의 목표📋
시멘틱에 대해서 알아보도록 하자. 근데 옆에서 엄마가 자꾸 말을 한다. 집중하기 힘들군...📕시멘틱 마크업
시멘틱(Semantic) : '의미론적인'
🏅시멘틱마크업이란
기계가 잘 이해할 수 있도록 코드를 짜자
1.의미에 맞는 태그와 요소를 쓰가
2.문서를 잘 구조화하기
📘어떤 코드를 쓰는게 좋을까?
아래 코드들은 사용자가 보기에는 같은 결과 값이지만 브라우저는 완전히 다르게 해석한다.
따라서 코드의 의미를 파악하고 적절하게 사용해야 시멘틱 마크업을 했다고 할 수 있다.
📖 <strong>태그
- 높은 중요도,심각성의 의미를 가진 시맨틱 태그
<strong>중요한</strong>📖 <em>태그
- 강조하는 의미를 가진 시맨틱 태그
<em>강조하는</em>📖 <ins>태그
- 추가된 텍스트의 범위를 나타내는 시맨틱 태그
- 밑줄이 그어짐
<ins>새롭게 추가된</ins>📖 <del>태그
- 제거된 텍스트의 범위를 나타내는 시맨틱 태그
- 중간선이 그어짐
<del>삭제된</del>📕새로 생긴 시멘틱 요소들
📖 <details>
- 토글을 생성한다.
<summary>요소를 통해 제공할 수 있습니다.
<details>
<summary>Details</summary>
Something small enough to escape casual notice.
</details>👉실행화면
Details Something small enough to escape casual notice.
📖 <figure>
- 삽화나 다이어그램, 사진 등과 같이 문서의 주요 흐름과는 독립적인 콘텐츠를 정의할 때 사용합니다.
<img>와는 다르게 설명을 넣을 수 있다.- 피규어, 설명, 콘텐츠는 하나의 단위로 참조됩니다.
📖 <figcaption>
- 부모
<figure>요소가 포함하는 다른 콘텐츠에 대한 설명 혹은 범례를 나타냅니다. <figure>요소 안에서만 가능하다.
<figure>
<img src="https://item.kakaocdn.net/do/5e6ec1e8ffc7f17cadc7e5edcc
0354a18f324a0b9c48f77dbce3a43bd11ce785"
alt="뚱꼬">
<figcaption>뚱꼬는 기여워</figcaption>
</figure>👉실행화면
뚱꼬는 기여워
📖 <main>
<body>의 주요 콘텐츠를 나타낸다.<hidden>속성 없이는 문서에 하나보다 많은<main>요소가 존재해선 안됩니다.
<main>
<p>P는 문단 태그</p>
</main>👉실행결과
P는 문단 태그
✔️<hidden> 속성이란
해당 요소가 아직, 또는 더 이상 관련이 없음을 나타내는 불리언 특성입니다.
브라우저는 hidden 특성을 가진 요소를 렌더링 하지 않습니다.📖 <mark>
- 중요한 부분을 하이라이트한다.
<p>진서현은 만으로 <mark>21살</mark>이다.</p>👉실행결과
진서현은 만으로 21살이다.
📖 <time>
- 일반텍스트로 보이는 날짜와 시간정보를 날짜,시간 정보임을 HTML에게 알려준다.
태그를 통해 자동연동에 쓰일 수 있음. <datetime>으로 time정보를 알려준다.
<p>The concert took place on <time datetime="2001-05-15 19:00">May 15</time>.</p>👉실행결과
The concert took place on May 15.
📕구역을 나누는 시멘틱 요소
📖 <header> 머리글 구획 요소
- 머리글에 해당되는 내용으로 제목, 로고, 검색 폼을 담는다.
<address>,<header>,<footer>를 부모로 가질 수 없다.<header>또는<footer>가 자손으로 올 수 없다.
<header>
<h1>Beagles</h1>
<time>08.12.2014</time>
</header>👉실행화면
Beagles
08.12.2014
📖 <nav> 메뉴 구획 요소
- 다른 페이지나 다른 위치로 이동하게 해주는 구역을 나타낸다.
<nav class="crumbs">
<a href="#some-element-id">회사 소개로 이동하기</a>
<h4 id="some-element-id">회사 소개</h4>
</nav>👉실행화면
회사 소개로 이동하기회사 소개
📖 <aside> 사이드(별도) 구획 요소
<aside>요소는 문서의 주요 내용과 간접적으로만 연관된 부분을 나타탠다. 주로 사이드바 혹은 콜아웃 박스로 표현한다.
<p>Salamanders are a group of amphibians with forms.</p>
<aside>
<p>The Rough-skinned Newt defends itself with a deadly neurotoxin.</p>
</aside>
<p>Seves.</p>➕이 부분은 CSS를 공부하고 나서 추가하도록 하겠음
📖 <article>
- 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타낸다.
사용 예제로 게시판과 블로그 글, 매거진이나 뉴스 기사 등이 있다. - 하나의 문서가 여러개의
<article>을 가질 수 있고 그 안에는 여러개의<section>을 가질 수 있다.
<article class="forecast">
<h3>Weather forecast for Seattle</h3>
<article class="day-forecast">
<h4>03 March 2018</h4>
<p>Rain.</p>
</article>
<article class="day-forecast">
<h4>05 March 2018</h4>
<p>Heavy rain.</p>
</article>
</article>👉실행화면
Weather forecast for Seattle
03 March 2018
Rain.
05 March 2018
Heavy rain.
📖 <section>
- 요소는 HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용합니다.
<section>
<h3>Introduction</h3>
<p>This document provides a guide to help with the important task of choosing the correct Apple.</p>
</section>👉실행화면
Introduction
This document provides a guide to help with the important task of choosing the correct Apple.
📖<footer> 하단 태그
<footer>는 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담는다.<address>,<header>, 다른<footer>를 부모로 가질 수 없다.<header>또는<footer>가 자손으로 올 수 없다.
<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>👉실행결과
How to be a wizard
- Grow a long, majestic beard.
- Wear a tall, pointed hat.
- Have I mentioned the beard?
© 2018 Gandalf
푸터의 역할에 대해서 더 알아보기
구획나누기에 대해서 더 알아보기
🏅오늘 느낀 점🏅
생각보다 HTML복잡하잖아? 
24년도까지 프로젝트 두개를 마치고 25년에는 개발 팀장을 할 수 있는 실력이 되자!