시멘틱태그
시멘틱이란 ? 의미론적인, Semantic : connected with the meanings of words.
특정한 태그에 의미를 부여해서 웹페이지를 만들기위해 사용
div(콘텐트 블럭화)와 같은 기능을 수행
but, 태그에 의미를 부여함으로써 웹페이지구조를 쉽게 이해 할 수있다.
과거 의미를 다달리써서 표준화시킴
시멘틱태그 3종류
- header : body안에있음, 주로 머릿말 ,제목표현
- main : 본문
- footer : 회사소개, 저작권, 약관, 제작정보 등
HTML5 의 섹션태그
<h1></h1>, <h2></h2>등 넘버링 해결을 위한 태그.
<section> </section> 으로 감싸면 자동 넘버링이 된다.
<h1><h2><h3> 를 신경 쓸필요없다.
지역화가능
섹션태그 종류:
- section: 가장 범용적, section만 써도되지만 아래 태그들을 추가적으로 특화시켜만듦
- article : 실제 본문 (문장을 감싸고 있는 블록), 실질적인 내용
- aside : 본문과 먼것, 본문이외 내용
- nav : 링크, 네비게이션,
VS code 실습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header id="header">
<h1>뉴렉처 온라인</h1>
<section>
<h1>헤더</h1>
<nav>
<h1>메인메뉴</h1>
<ul>
<li>학습가이드</li>
<li>강좌선택</li>
<li>AnswerIs</li>
</ul>
</nav>
<section>
<h1>강좌검색폼</h1>
<form>
과정검색
</form>
</section>
<nav>
<h1>회원메뉴</h1>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="../member/login.html">로그인</a></li>
<li>회원가입</li>
</ul>
</nav>
<nav>
<h1>고객센터메뉴</h1>
<ul>
<li>마이페이지</li>
<li>고객센터</li>
</ul>
</nav>
</section>
</header>
<section id="aside">
<h1>고객센터</h1>
<nav>
<h1>고객센터메뉴</h1>
<ul>
<li><a href="list.html">공지사항</a></li>
<li>자주하는 질문</li>
<li>수강문의</li>
<li>이벤트</li>
</ul>
</nav>
<nav>
<h1>협력업체</h1>
<ul>
<li>노트펍스</li>
<li>나무랩연구소</li>
</ul>
</nav>
</section>
'2021 Newlecture > HTML & CSS' 카테고리의 다른 글
| Block 레이아웃 / overflow / 값 할당 단위 (0) | 2021.03.08 |
|---|---|
| CSS / 선택자 / 연산자 / 엘리먼트 우선순위 (0) | 2021.03.03 |
| Button / Image / pre / CSS 그룹화 , id 적용 (0) | 2021.03.02 |
| Section, 지역화, 블록태그, 인라인태그, 테이블태그 (0) | 2021.02.26 |
| 상대경로와 절대경로 차이 /크롬 확장프로그램/ HTML 문서구조 (0) | 2021.02.23 |
| 파일구조 준비 / Visual Studio 환경변수 설정 (0) | 2021.02.22 |
| HTML / Markup language / HyperText (0) | 2021.02.22 |
| 인터넷이란 ? / Visusal studio 설치 및 실행 (0) | 2021.02.22 |