HTML - 두번째 방 설정하기
-
부모의 영역을 따라가는게 바람직한데 두가지 방법이있다. inherit 그리고 100%
- margin-left : auto - > 왼쪽으로 공백을 준다.
- margin-right : auto - > 오른쪽으로 공백을 준다.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href ="../css/style.css" type= "text/css" rel="stylesheet" >
</head>
<body>
<!-- ------------header box-------------------------------------------------------- -->
<header id ="header">
<div class = "content-box">
<!-- <h1><a href="../index.html">강깸 온라인</a></h1> -->
<!-- <section>
<h1 >서두</h1>
<nav id ="main-menu">
<h1>메인메뉴</h1>
<ul>
<li class = "first"><a href="a.html">학습가이드</a></li>
<li ><a href="b.html">강좌선택</a></li>
<li class ="aa"><a>AnswerIs</a></li>
</ul>
</nav>
<section>
<h1>강좌검색폼</h1>
<form>
<fieldset>
<legend>검색입력필드</legend>
<lable>과정검색</lable>
<input type="text">
<input type="submit" value="검색">
</fieldset>
</form>
</section>
<nav>
<h1>회원메뉴</h1>
<ul>
<li><a href="../index.html">HOME</a></li>
<li><a href="../member/login.html"></a>로그인</li>
<li><a href="../member/signup-agree.html">회원가입</a></li>
</ul>
</nav>
<nav>
<h1>바로가기메뉴</h1>
<ui>
<li><a href="">마이페이지</a></li>
<li><a href="list.html">고객센터</a></li>
</ui>
</nav>
</section> -->
</div>
</header>
<!-- ------------visual box-------------------------------------------------------- -->
<div id ="visual">
<div class = "content-box">
</div>
</div>
<!-- ------------body box-------------------------------------------------------- -->
<div id ="body">
<div class = "content-box">
<!--
<aside>
<h1>고객센터</h1>
<nav>
<h1>고객센터메뉴</h1>
<ul>
<li><a href="">공지사항</a></li>
<li><a href="">자주하는 질문</a></li>
<li><a href="">수강문의</a></li>
<li><a href="">이벤트</a></li>
</ul>
</nav>
<nav>
<h1>협력업체</h1>
<ul>
<li><a href="">노트펍스</a></li>
<li><a href="">나무랩연구소</a></li>
</ul>
</nav>
</aside>
<main>
</div>
<section>
<h1>공지사항</h1>
<section>
<h1>경로</h1>
<ol>
<li>home</li>
<li>고객센터</li>
<li>공지사항</li>
</ol>
</section>
<section>
<h1>공지사항 검색폼</h1>
<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>
</section>
<section>
<h1>공지사항목록</h1>
<table border ="1">
<tr>
<td>번호</td>
<td>제목</td>
<td>작성자</td>
<td>작성일</td>
<td>조회수</td>
</tr>
<tr>
<td>3</td>
<td><a href="detail.html">안녕하세요. 뉴렉처선생님강의들으면서 연습하고있습니다.</a></td>
<td>kangkkaem</td>
<td>2022-01-09</td>
</tr>
<tr>
<td>3</td>
<td><a href="detail.html">html 수업 듣고있는데 너무 재밋어요.</a> </td>
<td>kangkkaem</td>
<td>2022-01-09</td>
</tr>
<tr>
<td>3</td>
<td><a href="detail.html">어떻게 변화가될지기대됩니다.</a></td>
<td>kangkkaem</td>
<td>2022-01-09</td>
</tr>
</table>
</section>
<section>
<h1>페이지정보</h1>
<div>
1 / 1 pages
</div>
</section>
<nav>
<h1>페이저</h1>
<div>
<div>이전</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div>다음</div>
</div>
</nav>
</section>
</main> -->
</div>
</div>
<!-- ------------footer box-------------------------------------------------------- -->
<footer id ="footer">
<div class = "content-box">
<!-- <section>
<h1>회사정보</h1>
<section>
<h1>소유권자정보</h1>
<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>
</section>
<section>
<h1>저작자연락처</h1>
<div>
Copyright ⓒ kangkkaem.com 2021-2022 All Right Reserved. Contact admin@kangkkame.com
</div>
</section>
</section> -->
</div>
</footer>
</body>
</html>
css
@import url(reset.css);
.content-box{
height: inherit;
width: 960px;
margin-left: auto;
margin-right: auto;
background: #ff000020;
}
/* ---------------------------- */
#header{
height: 70px;
background: yellow;
}
#visual {
height: 171px;
background: green;
}
#body {
height: 300px;
background: red;
}
#footer{
height: 100px;
background: gray;
}
댓글남기기