HTML - 아웃라인 영역 구분하기
-
문서의 메인과 ,title 문서의 header, footer 이런구조로 되어야한다.
-
div 로 아웃라인 영역을 구분했다.
<!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>
<div>
<h2>header</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>
</div>
</div>
<h2>aside</h2>
div>
<h3>고객센터메뉴</h3>
<ul>
<li>공지사항</li>
<li>자주하는 질문</li>
<li>수강문의</li>
<li>이벤트</li>
</ul>
</div>
<div>
<h3>협력업체</h3>
<ul>
노트펍스
나무랩연구소
</ul>
</div>
</div>
<div>
<h2>main</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>
</div>
<div>
<h2>footer</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>
</div>
</body>
</html>
댓글남기기