HTML - 영역을 위한 시멘틱 태그
-
아웃라인 영역 비효율적인부분을 해결하기위해 시멘틱 태그가 등장했다.
-
시맨틱태그란 의미를 부여하고있는 태그이다.
제목은 제목으로 존재해야하기때문에 다시 제목을 원래대로 돌린다.
- 콘텐츠를 구분해줄 수 있게 의미가 살아있는 태그
-> 사람들이 가장 많이 사용하고 가장 많이 추천하는 이름으로 표준화가 진행됐다.
- 문서를 만들때 통일감을 줄수있다.
<h1> <header><h2></header> <div><h2></div> <main><h2></main> <footer><h2></footer>
수정됨
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href ="../index.html">홈</a>
<a href ="list.html">공지사항목록</a>
<a href ="../member/login.html">로그인</a>
<a href ="../member/signup-agree.html">회원가입</a>
<h1>공지사항 목록 페이지</h1>
<h1>강깸 온라인</h1>
<header>
<h2>서두</h2>
<div>
<h3>메인메뉴</h3>
<ul>
<li>학습가이드</li>
<li>강좌선택</li>
<li>AnswerIs</li>
</ul>
</div>
<div>
<h3>강좌검색폼</h3>
<form>
<fieldset>
<legend>검색입력필드</legend>
<lable>과정검색</lable>
<input type="text">
<input type="submit" value="검색">
</fieldset>
</form>
</div>
<div>
<h3>회원메뉴</h3>
<ul>
<li>HOME</li>
<li>로그인</li>
<li>회원가입</li>
</ul>
</div>
<div>
<h3>바로가기메뉴</h3>
<ui>
<li>마이페이지</li>
<li>고객센터</li>
</ui>
</div>
</header>
</div>
<h2>고객센터</h2>
<div>
<h3>고객센터메뉴</h3>
<ul>
<li>공지사항</li>
<li>자주하는 질문</li>
<li>수강문의</li>
<li>이벤트</li>
</ul>
</div>
<div>
<h3>협력업체</h3>
<ul>
노트펍스
나무랩연구소
</ul>
</div>
</div>
<main>
<h2>공지사항</h2>
<div>
<h3>경로</h3>
<ol>
<li>home</li>
<li>고객센터</li>
<li>공지사항</li>
</ol>
</div>
<div>
<h3>공지사항 검색폼</h3>
<form>
<fieldset>
<legend>검색어 입력필드</legend>
<lable>검색분류</lable>
<select>
<option value="title">제목</option>
<option value="writer">작성자</option>
</select>
<lable>검색어</lable>
<input type="text">
<input type="submit" value="검색">
</fieldset>
</form>
</div>
<div>
<h3>공지사항목록</h3>
<table border ="1">
<tr>
<td>번호</td>
<td>제목</td>
<td>작성자</td>
<td>조회수</td>
</tr>
<tr>
<td>3</td>
<td>안녕하세요. 뉴렉처선생님강의들으면서 연습하고있습니다.</td>
<td>kangkkaem</td>
<td>2022-01-09</td>
</tr>
<tr>
<td>3</td>
<td>html 수업 듣고있는데 너무 재밋어요. </td>
<td>kangkkaem</td>
<td>2022-01-09</td>
</tr>
<tr>
<td>3</td>
<td> 어떻게 변화가될지기대됩니다.</td>
<td>kangkkaem</td>
<td>2022-01-09</td>
</tr>
</table>
</div>
<div>
<h3>페이지정보</h3>
<div>
1 / 1 pages
</div>
</div>
<div>
<h3>페이저</h3>
<div>
<div>이전</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div>다음</div>
</div>
</div>
</main>
<footer>
<h2>회사정보</h2>
<div>
<h3>소유권자정보</h3>
<dl>
<dt>주소 : </dt>
<dd>서울특별시 마포구</dd>
<dt>관리자이메일:</dt>
<dd>kangkkaem@naver.com</dd>
<dt>사업자 등록번호 :</dt>
<dd>123-45-67890</dd>
<dt>통신 판매업:</dt>
<dd>신고제 2020-서울-0000 호</dd>
<dt>상호:</dt>
<dd>강깸</dd>
<dt>대표:</dt>
<dd>kangkkaem</dd>
<dt>전화번호 :</dt>
<dd>123-456-7899</dd>
</dl>
</div>
<div>
<h3>저작자연락처</h3>
<div>
Copyright ⓒ kangkkaem.com 2021-2022 All Right Reserved. Contact admin@kangkkame.com
</div>
</div>
</footer>
</body>
</html>
-> div랑 같은역할을 하지만 의미가 살아있는 태그 <header> <main> <footer> 를 넣었다.
댓글남기기