안녕하세요 오늘은 간단하게 login_only.php 즉 로그인하고 나오는 메인 페이지를 꾸미겠습니다!
일단 Welcome! User!을 가운데에 위치시키고 어느 누구 사용자가 들어왔는지는 바로 밑에다가 나오게 하겠습니다.
그리고 버튼들은 메뉴 버튼은 크게 마이페이지 버튼이랑 로그아웃 버튼은 아래에 작에 만들겠습니다.
style_only.css 을 만들고 코딩하겠습니다.
-style_only.css
body{
background-color:#f5f6f7;
}
h1 {
text-align: center;
padding: 10px 10px;
padding-bottom: 30px;
border-bottom:1px solid #848484;
}
/*-------login_only.php----------*/
.welcome-text{
display:flex;
flex-direction:row;
justify-content:center;
width: 100%;
height: 50px;
}
.board-btn{
text-align:center;
}
.board-btn-1 {
border:1px solid #03c75b;
background-color: #03c75b;
width:350px;
height: 50px;
font-size:120%;
color: white;
margin-left:auto;
margin-right:auto;
Cursor:pointer;
}
.logout-info {
width: 350px;
display: flex;
justify-content:space-around;
margin: 10px auto;
align-items: center;
position: relative; /*자식 요소 위치 세세하게 설정용(부모)*/
}
.logout-info>p {
font-size: 25px;
color : gray;
}
.logout-btn,.logout-btn-1{
text-align:center;
}
.logout-btn-1 {
border: none;
background-color:#f5f6f7;
color : gray;
height: 50px;
font-size:120%;
margin-left:auto;
margin-right:2px;
Cursor:pointer;
position: absolute; /*자식요소 부모위치에서만 움직일 수 있다.*/
transform: translate(-110%,-50%);
top: 50%;
left: 50%;
}
.info-btn{
text-align:center;
}
.info-btn-1{
border: none;
background-color:#f5f6f7;
color : gray;
height: 50px;
font-size:120%;
margin-left:2px;
margin-right:auto;
Cursor:pointer; /*버튼 위로가면 커서가 변한다*/
position: absolute; /*자식요소 부모위치에서만 움직일 수 있다.*/
transform: translate(5%,-50%); /*자신의 크기 기준으로 움직인다*/
top: 50%; /*top으로 50%만큼 움직인다*/
left: 50%; /*left에서 50%만큼 움직인다*/
}
대부분 style.css에서 복붙 했어요. 오히려 위치가 달라지면 가독성이 떨어지기 때문에 형태는 유지할 거예요!
-only_login.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href = "/css/style_only.css">
<title>Welcome! HACKER!</title>
</head>
<body>
<h1>Welcome! User!</h1>
<?php
session_start(); //세션 시작
if(!isset($_SESSION['login_id'])) {
//로그인하지 않은 사용자
header("Location: login.php"); //login 화면으로 바꾼다
exit(); //이 페이지를 바로 닫는다
}
?>
<div class = "welcome-text">
당신은 <?php echo $_SESSION['login_id'];?> 입니다! 환영합니다! HAPPYHACKING!!
</div>
<form action="board.php" class = "board-btn">
<p><input type="submit" value="메뉴" class = "board-btn-1"></p>
</form>
<div class = "logout-info">
<form action="process_logout.php" method="POST" class = "logout-btn">
<p><input type="submit" name="logout" value="로그아웃" class = "logout-btn-1"></p>
</form>
<p>|</p>
<form action="my_info.php" class = "info-btn">
<p><input type="submit" value="마이페이지" class= "info-btn-1"></p>
</form>
</div>
</body>
</html>
오늘은 간단하게 메인 메뉴 페이지를 꾸며봤습니다. 다음은 게시판을 꾸며 보겠습니다 감사합니다.
.
'개발과제' 카테고리의 다른 글
| [노말틱 모의 해킹 취업반 추가 개발과제 ] css - 게시판 보기 (0) | 2023.05.27 |
|---|---|
| [노말틱 모의 해킹 취업반 추가 개발과제 ] css - 게시판 꾸미기 (3) | 2023.05.17 |
| [노말틱 모의 해킹 취업반 추가 개발과제 ] css - 회원가입 페이지 (0) | 2023.05.06 |
| [노말틱 모의 해킹 취업반 추가 개발과제 ] css - 로그인 페이지 (0) | 2023.05.04 |
| [노말틱 모의 해킹 취업반 추가 개발과제 ] 주소 검색 기능 만들기 (0) | 2023.04.29 |
