반응형
이전에 간단하게 HTML, CSS에 대해 알아보았다. 이번 시간은 직접 HTML과 CSS를 사용하여 기본 게시판을 만들어보자.
class="card" > class="card-header card-body btn"
전체 틀을 어떻게 구성할 것인지 기획해야 한다.
1. header
// index.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="style.css">
<title>Document</title>
</head>
<body>
<div class="card">
<div class="card-header">
<h1>게시판</h1>
</div>
</div>
</body>
</html>// style.css
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
color: inherit;
text-decoration: none;
}
.card {
margin: 50px;
padding: 50px;
}
.card-header {
padding-bottom: 40px;
}tag 추가 설명
<body>
<div class="card">
<div class="card-header">
<h1></h1>
<!-- p tag -->
<p>설명을 할때 쓰인다.</p>
<!-- b, strong tag: 강조할 때 쓰인다. -->
<p><b>설명</b>을 할때 쓰인다.</p>
<p><strong>설명</strong>을 할때 쓰인다.</p>
<!-- span tag: css를 사용할 때 개별적인 디자인 요소 적용 가능 -->
<p><span>설명</span>을 할때 쓰인다.</p>
</div>
</div>
</body>2. body-html
// index.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="style.css">
<title>Document</title>
</head>
<body>
<div class="card">
<div class="card-header">
<h1>게시판</h1>
</div>
<!-- card-body 추가 시작 -->
<div class="card-body">
<div class="top">
<div class="num">번호</div>
<div class="title">제목</div>
<div class="name">작성자</div>
<div class="date">작성일</div>
<div class="count">조회</div>
</div>
<div>
<div class="num">3</div>
<div class="title">안녕하세요. 문의드립니다.</div>
<div class="name">테스트</div>
<div class="date">4-30</div>
<div class="count">14</div>
</div>
<div>
<div class="num">2</div>
<div class="title">이곳에는 글의 제목이 들어갑니다.</div>
<div class="name">테스트</div>
<div class="date">04-27</div>
<div class="count">7</div>
</div>
<div>
<div class="num">1</div>
<div class="title">첫 번째 올리는 내 게시물 글입니다.</div>
<div class="name">테스트</div>
<div class="date">01-27</div>
<div class="count">2</div>
</div>
</div>
<!-- card-body 추가 끝 -->
</div>
</body>
</html>3. body-css
// style.css
.card-body .top {
border-top: 3px solid #000;
border-bottom: 1px solid #999;
background-color: #e6e6e6;
font-weight: 600;
}
.card-body div {
border-bottom: 1px solid #999;
}
.card-body div div {
display: inline-block; /* 열로 나열되어 있는 것을 행으로 가로정렬 */
border-bottom: none; /* div에 각각의 border-bottom 적용된 것을 제거 */
text-align: center; /* 가운데 정렬 */
border-right: 1px solid #999;
}
.card-body .count {
border-right: none;
}
.card-body .top .title {
text-align: center;
}
.card-body div .title {
width: 55%;
padding-top: 10px;
padding-bottom: 10px;
text-align: left;
}
.card-body div .num ,.name ,.date ,.count{
width: 10%;
padding-top: 10px ;
padding-bottom: 10px;
}
<!-- 내용이 중복될 경우 ,.name ,.date ,.count 의 방법으로 간소화 가능 -->4. 페이지 이동-html
// index.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="style.css">
<title>Document</title>
</head>
<body>
<div class="card">
<div class="card-header">
<h1>게시판</h1>
</div>
<div class="card-body">
<div class="top">
<div class="num">번호</div>
<div class="title">제목</div>
<div class="name">작성자</div>
<div class="date">작성일</div>
<div class="count">조회</div>
</div>
<div>
<div class="num">3</div>
<div class="title">안녕하세요. 문의드립니다.</div>
<div class="name">테스트</div>
<div class="date">4-30</div>
<div class="count">14</div>
</div>
<div>
<div class="num">2</div>
<div class="title">이곳에는 글의 제목이 들어갑니다.</div>
<div class="name">테스트</div>
<div class="date">04-27</div>
<div class="count">7</div>
</div>
<div>
<div class="num">1</div>
<div class="title">첫 번째 올리는 내 게시물 글입니다.</div>
<div class="name">테스트</div>
<div class="date">01-27</div>
<div class="count">2</div>
</div>
<!-- 페이지 이동-html 추가 시작 -->
<ul class="number">
<li><a href="#"><</a></li>
<li><a href="#" class="active">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">></a></li>
</ul>
<!-- 페이지 이동-html 추가 끝 -->
</div>
</div>
</body>
</html>< 는 Less Than (< , 보다 작은)
> 는 Greater Than (>, 보다 큰)
unorder & order 추가설명
<!-- unorder list: 순서를 정하지 않고 list를 적어줄때-->
<ul>
<li>1번</li>
<li>2번</li>
<li>3번</li>
<li>4번</li>
</ul>
<!-- order list: 순서를 정해주고 list를 적어줄때-->
<ol>
<li>1번-1</li>
<li>1번-2</li>
<li>1번-3</li>
<li>1번-4</li>
</ol>
5. 페이지 이동-css
// style.css
.number {
margin: 10px;
padding-top: 20px;
text-align: center;
}
.number li {
display: inline-block; /* display 가운데 정렬 */
}
.number li a {
padding: 5px 10px 5px 10px;
border: 1px solid #999;
}
.number li a.active {
background-color: #e6e6e6;
}6. 글쓰기 버튼 만들기
// index.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="style.css">
<title>Document</title>
</head>
<body>
<div class="card">
<div class="card-header">
<h1>게시판</h1>
</div>
<div class="card-body">
<div class="top">
<div class="num">번호</div>
<div class="title">제목</div>
<div class="name">작성자</div>
<div class="date">작성일</div>
<div class="count">조회</div>
</div>
<div>
<div class="num">3</div>
<div class="title">안녕하세요. 문의드립니다.</div>
<div class="name">테스트</div>
<div class="date">04-30</div>
<div class="count">14</div>
</div>
<div>
<div class="num">2</div>
<div class="title">이곳에는 글의 제목이 들어갑니다.</div>
<div class="name">테스트</div>
<div class="date">04-27</div>
<div class="count">7</div>
</div>
<div>
<div class="num">1</div>
<div class="title">첫 번째 올리는 내 게시물 글입니다.</div>
<div class="name">테스트</div>
<div class="date">01-27</div>
<div class="count">2</div>
</div>
<ul class="number">
<li><a href="#"><</a></li>
<li><a href="#" class="active">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">></a></li>
</ul>
</div>
<!-- 글쓰기 버튼 만들기 시작 -->
<div class="btn">
<a href="">글쓰기</a>
</div>
<!-- 글쓰기 버튼 만들기 끝 -->
</div>
</body>
</html>다양한 버튼에 대한 추가설명
<!-- 용도에 따른 버튼 종류 -->
<button>1. 버튼</button>
<a href="">2. 버튼</a>
<input type="button" value="3. 버튼">
<input type="submit" name="" id="" value="4. 버튼">
//style.css
.btn {
margin-top: 20px;
text-align: right;
}
.btn a {
border: 1px solid #999;
padding: 5px;
background-color: #e6e6e6;
border-radius: 10%;
}7. 결과물
card, card-header, card-body 로 영역나누기
class를 활용해 원하는 부분에 css로 꾸며주기
<ul>, <ol>의 이용방법 및 <li> 사용법
<button>의 다양한 표현 코드 및 활용법
나름 정리하며 하나씩 사용법을 익혀보았다. 직관적으로 보여지니 더욱 재미있는 것 같다.
다음은 디자인 게시판 만들기를 진행해보자.😊😊
반응형
'코딩배우기 > HTML, CSS' 카테고리의 다른 글
| 5. 디자인 게시판 만들기-VIEW (0) | 2022.07.20 |
|---|---|
| 4. 디자인 게시판 만들기-WRITE (0) | 2022.07.20 |
| 3. 디자인 게시판 만들기-BOARD (0) | 2022.07.20 |
| 1. 오늘부터 코딩 1일 (0) | 2022.07.19 |
| 배우는 HTML, CSS, JS (0) | 2022.07.19 |