본문 바로가기
개발관련/front-end

첫 페이지 구현 1

Josiah 2021. 5. 12. 00:15
728x90

처음부터 position을 주는 것이 좋습니다 ㅎㅎ

 

 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>관리자-신고페이지</title>
<style type="text/css">

body {
margin: 0;
background-color: #E1DDDB;
height: 100px;
}

header {
background-color: #0C4A60;
width: 100%;/* 가변길이 화면 좁아져도 화면에 글 나오게 */
height: 200px;
text-align: center;
color: white;
padding-top: 30px; 
display: block;
}


/* ----------------------------리스트 초기화----------------------- */
ol, ul, li { /* 기호 안보이게 하기*/
text-align:center;
list-style:none;
margin: 0;
padding: 0; 
}

.nav {
display: block;
height: 40px;
padding: 0;
vertical-align: top;
background-color: #EF6C33; /*오렌지*/
width: 240px;
}
/* ------------------------a초기화--------------------------------------- */
a{ 
text-decoration: none; /*기본, 글자 중간에 선이든 뭐든 없음*/
color:inherit; /*기본*/
}

.nav a {
position: relative;
float: left;
display: block;
color: #f2f2f2;
text-align: center;
font-size: 16px;
padding-top: 8px;
text-decoration: none;
width: 80px;
height: 40px;
}

.nav a:hover {
font-weight: bold;
background-color: #6C7A89;
color: black;
}

.main {
margin: 0 auto;
padding: 0;
vertical-align: top;
background-color: yellow;
width: 1840px;
position: relative;
}

.content {
line-height:2em; /* 리스트 위아래 간격 키우게 하려고 */
background-color: #E0E7E9;
float: left;
width: 100%;
height: 1000px;
/* text-align:center; */
}

.main1 {
width: 1200px;
margin: 0 0 auto 200px;;
      
}

.main1>ul>li:first-child {
text-align: center;
font-size:14pt;
height:40px;
vertical-align:middle;
line-height:30px;
}

.tablefake>li:first-child>ul>li {
background-color:#c9c9c9;
font-weight:bold;
text-align:center;
}
.tablefake>li>ul {
clear:both;
padding:0px auto;
position:relative;
min-width:40px;
}

.tablefake>li>ul>li { 
float:left;
font-size:10pt;
border-bottom:1px solid silver;
vertical-align:baseline;
}    

.tablefake>li>ul>li:first-child {/*박스*/
width: 5%;
} 
.tablefake>li>ul>li:first-child+li { /*번호*/
width: 5%;
} 
.tablefake>li>ul>li:first-child+li+li {/*신고타입*/
width: 5%;
} 
.tablefake>li>ul>li:first-child+li+li+li {/*작성자*/
width: 15%;
} 
.tablefake>li>ul>li:first-child+li+li+li+li {/*상세설명*/
width: 34%;
}
.tablefake>li>ul>li:first-child+li+li+li+li+li {/*신고자*/
width: 12%;
}
.tablefake>li>ul>li:first-child+li+li+li+li+li+li {/*작성일*/
width: 12%;
}
.tablefake>li>ul>li:first-child+li+li+li+li+li+li+li {/*처리상태*/
width: 12%;
}
 
.pagesearch {
margin:0 auto; 
margin-top: 30px; 
width: auto; 
height:100px;
}
/*-------------------------------------------------------- 필드리스트 안보이게!! */

fieldset {
border:0 none;
}
legend {
font-size: 0;
}
h1 {
font-size: 0;
}
/*-------------------------------------------주황색바---------------  */
form {
display: block;
height: 30px;
float: right;
}

.right {
align-content: center;
}

.right-side {
display: inline-block;
background-color: #6C7A89;
width: 240px;
height: 1000px;
text-align: center;
color: #E0E0E0;
position: absolute;
top: 0px;
right: 0px;
}

aside:hover {
margin: 0 auto;
color: white;
}

.pagenumber {
justify-content: center;
text-align: center;
width:220px; 
height:50px;
margin: 0 auto;
}
.pagenumber>div {
float: left;
display: inline-block;
width: 20px;
margin-top: 20px;
margin-left: 20px;

}


/* -----------------------------------------------------하단------ */
footer {
position: relative;
bottom: 0px;
text-align:center;
background-color: white;
clear: both;
width: 100%;
height: 300px;
margin-top: 300px;
}
/*

.page {
margin: 0 auto;
display: inline-block;
width: 100px;
text-align:center;
}

.pagesection {
display:inline-block;
align-content: center;
text-align: center;
} */

.popup {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
width: 100%;
height: 100%;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 2;
visibility: hidden;
opacity: 0;
overflow: hiden;

}
.popup-inner {
position: relative;
display: flex;
align-items: center;
width: 50%;
height: 60%;
background-color: #E1DDDB;
text-align: center;
}

.popup-inner>div:nth-child(1) {
position: absolute;
top:20px;
left: 88px;
margin: 0 auto;
display: block;
width: 80%;
height: 20%;
background-color: white;
}

.popip-inner>div>ul {
float: left;
display: inline-block;
width: 20px;
margin-top: 20px;
margin-left: 20px;
}

.popup-inner>div:nth-child(2) {
top:200px;
left: 88px;
margin: 0 auto;
position: absolute;
display: flex;
width: 80%;
height: 40%;
background-color: white;
overflow: scroll;
}

.popup:target {
visibility: visible;
opacity: 1;
}
.popup:target .popup-inner {
bottom: 0;
right: 0;
}
.closepopup {
position: absolute;
top: calc(80%);
left: calc(48%);
text-decoration:none;
background-color: #EF6C33;
z-index: 4;
color: #fff;
width: 60px;
height: 30px;
padding-top: 10px;
text-align: center;
cursor: pointer;
}

/* .bg {

display: inline-block;
  position: absolute;
  width: 1000px;;
  height:1000px;
  margin: auto;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1;
  opacity: 0.5;



/*  display: inline-block;
width: 10%;
height: 10%;
position: absolute;
top: 0px;
left: 0px;
background-color: #000000;
opacity: 0.5; */
}
 */


</style>
</head>
<!----------------------------------바디시작--------------  -->
<body>
<header>
<h1>header</h1>
<div>
<h2><a href="#">ART 관리자 페이지</a></h2>
<h5>게시글 신고 페이지</h5>
   <p>관리자 페이지에 오신 것을 환영합니다..</p>
</div><!-- 로고 아이콘 옆에 이름 넣으면? -->
</header>
<main class="main">
<div class="content">
<div class="main1">
<h1>신고 글 목록</h1>
<ul>
<li>게시판 제목</li>
<!-----------------------------------게시판 목록------------------  -->
<li>
<form>
<input type="button" value="수정하기" class="right"/>
<input type="button" value="삭제하기" class="right"/>
</form>
<ul class="tablefake">
<li>
<ul>
<li><input type="checkbox"/></li><!-- 전체선택 가능하게 하자 -->
<li>번호</li>
<li>신고타입</li>
<li>작성자(아이디)</li>
<li>내용</li>
<li>신고자(아이디)</li>
<li>작성일</li>
<li>처리상태</li>
</ul>
</li>
<li>
<ul>
<li><input type="checkbox"/></li><!-- 전체선택 가능하게 하자 -->
<li>7</li>
<li>A</li>
<li>닉네임2(example)</li>
<li class="long"><a href="#popup">내용이있습니다.있을까요?없을까요</a></li>
<li>신고자2(admin)</li>
<li>2021-05-15</li>
<li>
<select>
<option>대기중</option>
<option>접수완료</option>
<option>처리중</option>
<option>처리완료</option>
</select>
</li>
</ul>
</li>
<li>
<ul>
<li><input type="checkbox"/></li><!-- 전체선택 가능하게 하자 -->
<li>6</li>
<li>A</li>
<li>닉네임2(example)</li>
<li class="long"><a href="#popup">내용이있습니다.있을까요?없을까요</a></li>
<li>신고자2(admin)</li>
<li>2021-05-15</li>
<li>
<select>
<option>대기중</option>
<option>접수완료</option>
<option>처리중</option>
<option>처리완료</option>
</select>
</li>
</ul>
</li>
<li>
<ul>
<li><input type="checkbox"/></li><!-- 전체선택 가능하게 하자 -->
<li>5</li>
<li>A</li>
<li>닉네임2(example)</li>
<li class="long"><a href="#popup">내용이있습니다.있을까요?없을까요</a></li>
<li>신고자2(admin)</li>
<li>2021-05-15</li>
<li>
<select>
<option>대기중</option>
<option>접수완료</option>
<option>처리중</option>
<option>처리완료</option>
</select>
</li>
</ul>
</li>
<li>
<ul>
<li><input type="checkbox"/></li><!-- 전체선택 가능하게 하자 -->
<li>4</li>
<li>A</li>
<li>닉네임2(example)</li>
<li class="long"><a href="#popup">내용이있습니다.있을까요?없을까요</a></li>
<li>신고자2(admin)</li>
<li>2021-05-15</li>
<li>
<select>
<option>대기중</option>
<option>접수완료</option>
<option>처리중</option>
<option>처리완료</option>
</select>
</li>
</ul>
</li>
<li>
<ul>
<li><input type="checkbox"/></li><!-- 전체선택 가능하게 하자 -->
<li>3</li>
<li>A</li>
<li>닉네임2(example)</li>
<li class="long"><a href="#popup">내용이있습니다.있을까요?없을까요</a></li>
<li>신고자2(admin)</li>
<li>2021-05-15</li>
<li>
<select>
<option>대기중</option>
<option>접수완료</option>
<option>처리중</option>
<option>처리완료</option>
</select>
</li>
</ul>
</li>
<li>
<ul>
<li><input type="checkbox"/></li><!-- 전체선택 가능하게 하자 -->
<li>2</li>
<li>A</li>
<li>닉네임2(example)</li>
<li class="long"><a href="#popup">내용이있습니다.있을까요?없을까요</a></li>
<li>신고자2(admin)</li>
<li>2021-05-15</li>
<li>
<select>
<option>대기중</option>
<option>접수완료</option>
<option>처리중</option>
<option>처리완료</option>
</select>
</li>
</ul>
</li>
<li>
<ul>
<li><input type="checkbox"/></li><!-- 전체선택 가능하게 하자 -->
<li>1</li>
<li>A</li>
<li>닉네임2(example)</li>
<li class="long"><a href="#popup">내용이있습니다.있을까요?없을까요</a></li>
<li>신고자2(admin)</li>
<li>2021-05-15</li>
<li>
<select>
<option>대기중</option>
<option>접수완료</option>
<option>처리중</option>
<option>처리완료</option>
</select>
</li>
</ul>
</li>
</ul>
</li>
<li class="pagenumberlist">
<div class="pagenumber"><!---------------------------------페이지넘버다  -->
<div ><b>1</b></div>
<div><a href="#">2</a></div>
<div><a href="#">3</a></div>
<div><a href="#">4</a></div>
<div><a href="#">→</a></div>
</div>
</li>
<li>
<div class="pagesearch">
<h1>저장하기 버튼</h1>
<input type="button" value="저장하기" class="right"/>
<h1>페이지 내 검색폼</h1>
<label>검색분류</label>
<select>
<option value="title">제목</option>
<option value="writer">작성자</option>
<option value="number">번호</option>
<option value="content">내용</option>
<option selected="selected">제목+내용</option>
<option value="repoter">신고자</option>
<option value="process">처리상태</option>
</select>
<label>검색어</label>
<input type="text"/>
<input type="button" value="검색"/>
</div>
</li>
</ul>
<!-- 
<table border="1">
<tr>
<td><input type="checkbox"/> box</td>전체선택 가능하게 하자
<td>번호</td>
<td>신고타입</td>
<td>작성자(아이디)</td>
<td>신고제목</td>
<td>상세설명</td>
<td>신고자(아이디)</td>
<td>작성일</td>
<td>처리상태</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>2</td>
<td>A</td>
<td>닉네임2(example)</td>
<td>...</td>
<td>신고자2(admin)</td>
<td>2021-05-15</td>
<td>
<select>
<option>대기중</option>
<option>접수완료</option>
<option>처리중</option>
<option>처리완료</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>1</td>
<td>C</td>
<td>닉네임1(example)</td>
<td>...</td>
<td>신고자1(admin)</td>
<td>2021-05-13</td>
<td>
<select>
<option>대기중</option>
<option>접수완료</option>
<option>처리중</option>
<option>처리완료</option>
</select>
</td>
</tr>
</table>
</div>

<div>
<h1>저장하기 버튼</h1>
<input type="button" value="저장하기" class="right"/>
<h1>페이지 내 검색폼</h1>
<label>검색분류</label>
<select>
<option value="title">제목</option>
<option value="writer">작성자</option>
<option value="number">번호</option>
<option value="content">내용</option>
<option selected="selected">제목+내용</option>
<option value="repoter">신고자</option>
<option value="process">처리상태</option>
</select>
<label>검색어</label>
<input type="text"/>
<input type="button" value="검색"/>
</div>
<div class="pagenumber">
<div><b>1</b></div>
<div><a href="#">2</a></div>
<div><a href="#">3</a></div>
<div><a href="#">4</a></div>
</div>
-->

</div>
<!-----------------------------------------------사이드...  -->
<div class="right-side">
<div class="nav">
<a href="#">Logout</a>
<a href="#">Home</a>
<a href="#">Main</a>
</div>
<h1>right-side</h1>
<aside class="aside">
<h2>관리자 메뉴</h2>
<hr/>
<nav>
<h2>회원관리</h2>
<ul>
<li><a href="">회원조회</a></li>
</ul>
</nav>
<nav>
<h2>게시판관리</h2>
<ul>
<li><a href="HyeonKim0512.html">목록관리</a></li>
<li><a href="">게시글통합관리</a></li>
<li><a href="">댓글통합관리</a></li>
</ul>
</nav>
<nav>
<h2>신고관리</h2>
<ul>
<li class="nowpage"><a href="">게시글신고</a></li>
<li><a href="">댓글신고</a></li>
</ul>
</nav>
</aside>
</div> 
</main>
<footer>
<h1>footer</h1>
</footer>


<!-- ----------------------------------------------팝업구현 -->
<div class="popup" id="popup">
<div class="popup-inner">
<div>
<ul>
<li>신고타입</li>
<li>신고자</li>
</ul>
</div>
<div>작성자: 누구누구<br/>내용: 이러저러하다</div>
<div>
<a class="closepopup" href="#">닫기</a>
</div>
</div>
</div>
<!--   <div class="bg" id="popup" ></div> -->
</body>
</html>

'개발관련 > front-end' 카테고리의 다른 글

input type="radio" 사용시 하나만 선택하게 하기  (0) 2021.05.25
어떨 때 table 태그를 사용하고 div태그를 사용해야 할까?  (0) 2021.05.24
레이아웃 잡기  (0) 2021.05.11
자바스크립트 입문1  (0) 2021.04.30
자바스크립트 입문  (0) 2021.04.30

'개발관련/front-end' Related Articles

티스토리툴바