반응형
디자인 게시판 만들기-WRITE의 연속된 부분이다.
card-body 안에 있는 content를 확인하는 페이지를 만들어보자. 동일하게 다른 html 파일을 만들어 경로 설정을 해주고,
내용물 확인을 위한 html 작업을 진행하면 된다.
새로운 view.html 파일 생성 후 경로 설정
1. HTML
// view.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">
<link rel="stylesheet" href="../BOARD/style.css">
<title>view</title>
</head>
<body>
<div class="card">
<!-- 게시판을 누를시 첫 페이지인 index.html로 이동 -->
<div class="card-header3"><h1><a href="../BOARD/index.html">게시판</a></h1></div>
<div class="card-view">
<div class="title">
<h3>안녕하세요. 이것은 게시판 제목입니다.</h3>
</div>
<div class="myinfo">
<!-- 목록을 만드는 <dl>, <dt>, <dd> tag -->
<dl>
<dt>작성자</dt>
<dd>김이름</dd>
</dl>
<dl>
<dt>날짜</dt>
<dd>22-01-27</dd>
</dl>
<dl>
<dt>조회</dt>
<dd>14회</dd>
</dl>
</div>
<div class="cont">
동해물과 백두산이 마르고 닳도록<br>
하느님이 보우하사 우리나라 만세<br>
무궁화 삼천리 화려 강산<br>
대한 사람 대한으로 길이 보전하세
</div>
</div>
<div class="btn-view">
<a href="../BOARD/edit.html">수정</a>
</div>
</div>
</body>
</html>dl tag: definition list(정의 목록)의 약자로, 사전처럼 용어를 설명하는 목록을 만든다.
- dt tag: definition term(정의 용어)의 약자로, 정의되는 용어의 제목을 넣을때 사용한다.
dd tag: definition desription(정의 설명)의 약자로, 용어를 설명하는데 사용한다.
br tag: 줄바꿈
2. CSS
// style.css
// 기존 index.html의 연동된 style.css에 이어서 사용
.card-view {
text-align: center;
padding: 30px;
}
.card-view .title {
margin-top: 30px;
margin-bottom: 30px;
}
.card-view .myinfo {
border-top: 1px solid #999;
border-bottom: 1px solid #999;
margin: auto;
<!-- 폭을 400px 고정 -->
width: 400px;
padding-top: 10px;
padding-bottom: 10px;
}
.card-view .myinfo dl {
display: inline-block;
}
.card-view .myinfo dl dt, dd {
display: inline-block;
font-size: small;
}
.card-view .myinfo dl dt {
margin-left: 5px;
color: #999;
}
.card-view .myinfo dl dd {
margin-right: 10px;
margin-left: 5px;
}
.cont {
margin-top: 30px;
padding-bottom: 30px;
}
.btn-view {
position: absolute;
right: 0;
bottom: 0;
padding: 10px;
margin: 10px 10px 20px 10px;
}
.btn-view a {
padding: 10px;
border-radius: 10px;
background-color: tomato;
color: #fff;
}3. 결과
아래의 기능들을 구현해보았다. 만드는 속도가 조금씩 빨라지는 것 같은데?
1. view-header
2. view-html 작성하기
3. view-css 작성하기
4. view-수정 버튼 만들기
다음은 수정하기 버튼을 구현하는 시간을 가져보자.😊😊😊
반응형
'코딩배우기 > HTML, CSS' 카테고리의 다른 글
| 6. 디자인 게시판 만들기-EDIT (0) | 2022.07.20 |
|---|---|
| 4. 디자인 게시판 만들기-WRITE (0) | 2022.07.20 |
| 3. 디자인 게시판 만들기-BOARD (0) | 2022.07.20 |
| 2. 기본 게시판 만들기 (0) | 2022.07.19 |
| 1. 오늘부터 코딩 1일 (0) | 2022.07.19 |