본문 바로가기
Project Development/Java_programming

공지사항 페이지 레이아웃

by SeleniumBindingProtein 2021. 12. 15.
728x90
반응형
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>쇼핑몰 홈페이지</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
          integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
    <link rel="stylesheet" href="../css/headerTopBarIcon.css">
	<link rel="stylesheet" href="../css/navBanner.css">
	<link rel="stylesheet" href="../css/contentFooter.css">
	<link rel="stylesheet" href="../css/homePageNotice.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
</head>
	<body>
		<div class="wrap">
        	<div class="header">
  				<div class="topBar">
 					<a class="topLogo" href="#"><img src="../img/logo.jpg" alt="대체 텍스트"></a>
  					<div class="searchBox">
                		<input type="text">
                		<a class="search" href="#"><i class="fas fa-search"></i></a>
                	</div>
        			<div class="topBarIcon">
                		<a href="#"><i class="fas fa-door-open"></i></a>
               	 		<a href="login.html"><i class="far fa-user"></i></a>
                		<a href="#"><i class="fas fa-shopping-cart"></i></a>
            		</div>
            	</div>
            </div>
        	<div class="nav">
  				<div class="navBox">
    				<ul>
     					<li class="navBoxFirst"><a href=""><i class="fas fa-bars"></i>전체메뉴</a></li>
     					<li><a href="">회사소개</a></li>
      					<li><a href="">브랜드정보</a></li>
      					<li><a href="">제품정보</a></li>
      					<li><a href="">게시판</a></li>
   				 	</ul>
  				</div>
			</div>
   
        	<div class="notice">
			<table class="ntTable">
				<caption class="ntTitle">공지사항</caption>
				<tr class="ntAdmin">
					<th class="ntNum">번호</th>
					<th class="ntPrd">상품</th>
					<th class="ntTit">제목</th>
					<th class="ntFin">조회</th>
					<th class="ntAdm">작성자</th>
					<th class="ntDat">날짜</th>
				</tr>
				
				<tr class="ntClient">
					<td>280</td>
					<td>인형</td>
					<td><a href="">빠른배송 ㄱㅅㄱㅅ</a></td>
					<td>280</td>
					<td>둘리</td>
					<td>2021-12-07</td>
					
				</tr>
				
				<tr class="ntClient">
					<td>280</td>
					<td>인형</td>
					<td>빠른배송 ㄱㅅㄱㅅ</td>
					<td>280</td>
					<td>짱구</td>
					<td>2021-12-07</td>
				</tr>
				
				<tr class="ntClient">
					<td>...</td>
					<td>...</td>
					<td>...</td>
					<td>...</td>
					<td>...</td>
					<td>...</td>
				</tr>
			</table>
		</div>
		<div class="search">
			<div class="ntPaging">
				<ul id="pagingul">페이지 번호</ul>
			</div>
			
			<div class="ntBtn">
				<input class="btn" type="button" value="글 작성" onclick="location.href='homeNtBtnCreate.html'">
				<input class="btn" type="button" value="글 수정" onclick="ntEdit">
			</div>
			
			<div class="ntSrcBtn">
				<select name="searchType">
					<option value="all">전체검색</option>
					<option value="subject">제목</option>
					<option value="writer">작성자</option>
					<option value="content">내용</option>
          	 	</select>
				<input class="ntSrc" type="text" name="ntSearch" placeholder="검색어 입력">
				<button class="srcBtn" type="submit" name="srcClick" value="">
					<i class="fas fa-search"></i>
				</button>
			</div>
		</div>
		
        	<div class="footer">
        		<div class="footerContent">
            		<div class="footerLinkList">
               			<ul>
                    		<li><a href="#">회사소개</a></li>
                    		<li><a href="#">이용약관</a></li>
                    		<li><a href="#">개인정보처리방침</a></li>
                    		<li><a href="#">사고대응메뉴얼</a></li>
                    		<li><a href="#">상품문의</a></li>
                		</ul>
            		</div>
            		<div class="companyInfo">
                		<span>
                    		주식회사 강사모<br/>
                    		서울특별시 서초구 교보타워<br/>
                    		사업자등록번호 : 123-29-123456<br/>
                    		통신판매업신고 제2021-서울서초-9999호<br/>
                    		고객센터: 070-1111-1111 / puppylove@puppylove.co.kr<br/>
                		</span>
            		</div>
        		</div>
        	</div>
   		</div>
	</body>
</html>
//headerTopBarIcon.css

*{
    font-family: 'Noto Sans KR', sans-serif;
}

body{
    margin: 0 auto;
}

a{
    text-decoration: none;
    color: black;
}

.header{
    width: 1080px;
    height: 70px;
    margin: 0 auto;
    line-height: 70px;
}

.topBar{
    display: flex;
    align-items: center;
}

.topLogo{
    width: 20%;
    display: inline-block;
}

.searchBox{
    width: 60%;
    display: inline-block;
}

.searchBox input{
    background-color: whitesmoke;
    border: 0px;
    width: 500px;
	height: 30px;
}

.searchBox input:active{
    border: 2px solid black;
}

.topBar img{
    vertical-align: middle;
}

.topBarIcon{
    width: 15%;
    background-color: grey;
    border-radius: 20px;
    text-align: center;
    height: 35px;
    line-height: 35px;

}

.topBarIcon a{
    color:white;
    margin: 6%;
}

//navBanner.css

@charset "UTF-8";

*{
    font-family: 'Noto Sans KR', sans-serif;
}

body{
    margin: 0 auto;
}

a{
    text-decoration: none;
    color: black;
}

ul{
    list-style: none;
}

.navBox ul{
    display: flex;
}

.navBox ul li{
    margin-left: 5%;
}

.navBox{
    font-weight: 300;
    font-size: 25px;
}

.navBoxFirst{
    margin: 0;
    font-weight: 600;
    width: 35%;
}

.navBoxFirst i{
    margin-right: 10px;
}


.navBox ul li:hover{
    font-weight: 500;
}

.navBoxFirst:hover{
    font-weight: 800;
}

.wrap{
    width: 1080px;
    margin: 0 auto;
}

.bannerImg img{
    width: 1080px;
    height: 350px;
}

//contentFooter.css
@charset "UTF-8";

*{
    font-family: 'Noto Sans KR', sans-serif;
}

.container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.items{
    width: 48%;
    height: 450px;
    border: 1px solid black;

}
.contentImg {
    text-align: center;
}

.contentImg img{
    width:99%;
}
.price span{
    display: block;
}

.footer{
    width: 100%;
    height: 230px;
    background-color: #4d4d4d;
    margin-bottom: 0;
}

.footer .footerContent{
    width: 1080px;
    margin: 0 auto;
}

.footerLinkList ul{
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footerLinkList ul{
    justify-content: space-around;
}

.footerLinkList ul li{
    height: 70px;
    line-height: 70px;
    font-size: 17px;
    font-weight: 900;
    width: 100%;
}

.footerLinkList ul li a{
    text-decoration: none;
    color: black;
    color: #cecece;
    display:block;
    text-align: center;
}

.footerLinkList ul li a:hover{
    color: #a1a1a1;
    text-decoration: underline;
}

.companyInfo{
    margin-top: 15px;
}

//homePageNotice.css

@charset "UTF-8";

.notice{
	width: 1080px;
	display: flex;
    flex-direction: column;
    height: 700px;
}

.ntTable{
	width: 1080px;
	text-align: center;	
	box-shadow: 1px 3px 3px 3px grey;
}

.ntTitle{
	font-size: 25px;	
	margin-bottom: 10px;
	text-align: left;
}

.ntAdmin{
	font-size: 20px;
	border: 1px solid black;
}

.ntAdmin th{
	padding: 5px
}

.ntClient{
	font-size: 15px;
}

td {
	border: 1px solid black;
}

.search{
	width: 1080px;
	height: 100px;	
}

.ntPaging{
	width: 1080px;
	font-size: 15px;	
	text-align: center;
}

.ntBtn{
	width: 1080px;
    margin-top: 15px;
    text-align: right;
}

.btn {	
	font-size: 10px;
}

.ntNum{
	width: 10%;
}

.ntPrd{
	width: 10%;
}

.ntTit{
	width: 55%;
}

.ntFin{
	width: 8%;
}

.ntAdm{
	width: 8%;
}

.ntDat{
	width: 14%;
}

.ntSrc{
	width: 200px;	
}

.ntSrcBtn{
	width: 1080px;
	text-align: center;
}

html 및 css 작성 연습을 위해 JSP 사용을 안하였음

추후, JSP를 통해 더 간결하게 작성할 예정

728x90
반응형

'Project Development > Java_programming' 카테고리의 다른 글

MVC2 회원가입 - 추가, 수정, 삭제  (0) 2021.12.26
게시판 만들기 - model1 방식  (0) 2021.12.20
비밀번호 찾기 - 메일 인증  (0) 2021.12.15
아이디 찾기 - DB 연결  (0) 2021.12.15
회원가입 - DB 연결  (0) 2021.12.14

관련글

댓글

티스토리툴바