반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,body{
margin:0px;
}
header{
height:100px;
border:5px solid red;
}
nav{
height: 30px;
border:5px solid orange;
margin:70px 0 0 0;
}
nav ul{
display:flex;
list-style: none;
margin:0px;
}
section{
height: 500px;
border:5px solid green;
/*width:90%;*/
}
aside{
height: 500px;
width: 100px;
border:5px solid blue;
}
.flex_box{
display: flex;
}
footer{
height: 100px;
border:5px solid purple;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="">메뉴1</a></li>
<li><a href="">메뉴2</a></li>
<li><a href="">메뉴3</a></li>
</ul>
</nav><!-- 웹사이트 탐색 링크 영역-->
</header><!--웹페이지 상단부(페이지제목,로고)-->
<!--div class="flex_box"-->
<section><!--웹페이지 본문-->
<table border="1" style="width: 500px; margin:100px auto">
<thead>
<tr>
<th>번호</th>
<th>제목</th>
<th>작성자</th>
<th>등록일</th>
</tr>
</thead>
</table>
<!--article>
</article--><!--본문 관련 주제별 영역-->
</section>
<!--aside></aside--><!--본문에 벗어나는 주제를 담는 영역(광고,기타내용)-->
<!--/div-->
<footer></footer><!--웹페이지 하단부(웹페이지 저작자정보, 고객센터 정보 등)-->
</body>
</html>
반응형
'HTML, CSS' 카테고리의 다른 글
| [CSS] 메뉴버튼 위로 마우스가 올라가면 옆에 안내바 나타내기 (0) | 2024.10.28 |
|---|---|
| [CSS] input type="date" 모양 변경 (0) | 2024.08.18 |
| [CSS] select 모양 변경 (0) | 2024.08.18 |
| [CSS] checkbox css 체크모양 변경 (0) | 2024.08.17 |
| [CSS] radio css 꾸미기 (0) | 2024.08.17 |
