- CSS : 게시판 상세(detail.html)
/* 게시판 상세 */
.detail {
width: 700px; margin: 0 auto;
border-top: 3px solid gray; border-bottom: 3px solid gray;
}
.detail .name {margin: 0 0 0 15px; float: left;}
.detail .date {margin: 0 15px 0 0; float: right;}
.detail .box {
white-space: pre-line; padding: 10px;
border: 1px solid black;
}
.detail hr {clear: both;}
.detail p {text-align: center;}
.detail .button {padding: 0 200px; margin: 15px auto;}
.detail .button a {
border: 1px solid black; background: gainsboro;
margin: 10px; padding: 5px;
text-decoration: none; color: black;
}
.detail .button a:hover {color: blueviolet;}- HTML : 게시판 상세(detail.html)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>해탈한 명언집</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="homebox">
<a href="index.html" class="logo"></a>
</div>
</header>
<nav>
<div class="menubox">
<ul>
<li><a href="notice.html">공지사항</a></li>
<li><a href="free.html">자유게시판</a></li>
</ul>
</div>
</nav>
<main>
<form class="detail">
<div class="name">
<p>미래는 항상 한 글자 앞에 있다. 다 읽고 나서야 비로소 따라잡을 수 있다.</p>
</div>
<div class="date">
<p>2022-01-15</p>
</div>
<hr>
<p class="box">★★★ 해탈한 명언집 ★★★
1. 크게 변하는 것은 힘든 일이다.
2. 유행을 만들어 내는 것은 언제나 유행에 휩쓸리지 않는 사람이다.
3. 쓸모없는 물건이란 쓰려고 하지 않은 물건이다.
4. 하늘을 보면서 걸으면 눈물은 흐르지 않지만 길을 잃는다.
5. 가면 속에선 의외로 웃는 얼굴.
6. 비싼 음식을 먹어도 배는 고프다.
7. '갈 수 있으면 갈게'는 '안 갈래'나 마찬가지다.
8. 성공할 리 없다고 남을 비웃는 자는 성공한 적 없는 사람이다.
9. 길이 없는 곳도 지나가면 길이 된다.
10. 태양이 져야만 별이 보인다.
</p>
<div class="button">
<p><a href="write.html">글수정</a><a href="free.html">목록</a></p>
</div>
</form>
</main>
<footer>
<div>
<p>Copyright © 김예찬 all rights reserved</p>
</div>
</footer>
</body>
</html>
- 화면구현 페이지
해탈한 명언집
미래는 항상 한 글자 앞에 있다. 다 읽고 나서야 비로소 따라잡을 수 있다. ★★★ 해탈한 명언집 ★★★ 1. 크게 변하는 것은 힘든 일이다. 2. 유행을 만들어 내는 것은 언제나 유행에 휩쓸리지
www.yermi.co.kr